SwiftUI.cc
Snippets
DrawingOther ViewsBeginner

SwiftUI Image Resizing and SF Symbols

Resize bitmap images and SF Symbols predictably by separating intrinsic image behavior, content mode, and symbol styling.

4 min readUpdated 2026-06
ImageresizablescaledToFitscaledToFillimageScale
Avatar and symbol row
import SwiftUI

struct ProfileImageRow: View {
    var body: some View {
        HStack(spacing: 12) {
            Image("avatar")
                .resizable()
                .scaledToFill()
                .frame(width: 56, height: 56)
                .clipShape(Circle())

            Label("Available", systemImage: "checkmark.seal.fill")
                .font(.headline)
                .imageScale(.medium)
                .foregroundStyle(.green)
        }
    }
}
Use this when

You need a remote or bundled image to fill a fixed card or avatar frame.

You are using SF Symbols next to text and want their size to feel native.

You want to avoid layout jumps caused by images using their intrinsic size.

Avoid this when

The image should preserve every pixel without cropping.

The asset is decorative and can be drawn as a Shape or gradient instead.

The design requires advanced caching or decoding behavior; use an image pipeline for that.

Implementation notes

Use resizable before scaledToFit or scaledToFill, otherwise the image keeps its intrinsic dimensions.
scaledToFill crops when the aspect ratio differs, so pair it with a frame and clipping shape.
For symbols beside text, font and imageScale usually produce a more native result than a fixed frame.

Checklist

Choose fit when content preservation matters and fill when a stable crop matters.

Add an accessibility label when the image communicates meaning.

Preview with long adjacent text so symbol rows do not compress awkwardly.

Related reference

SwiftUI Image Rendering Mode and Interpolation

Control whether images keep original colors, act as templates, scale smoothly, or stay crisp for pixel-style art.

SwiftUI clipShape, mask, and contentShape

Clipping controls what is visible, masking controls alpha, and contentShape controls where interaction happens.

SwiftUI foregroundStyle and tint

Prefer foregroundStyle and tint for modern SwiftUI color styling, especially when controls, symbols, gradients, and semantic materials mix.