SwiftUI.cc
Snippets
ImagesImage ModifiersIntermediate

SwiftUI Image Rendering Mode and Interpolation

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

4 min readUpdated 2026-06
renderingModeinterpolationsymbolRenderingModesymbolVariantimageScale
Template icon and pixel preview
import SwiftUI

struct IconPreview: View {
    var body: some View {
        VStack(spacing: 16) {
            Image("custom-icon")
                .renderingMode(.template)
                .foregroundStyle(.teal)

            Image("pixel-avatar")
                .resizable()
                .interpolation(.none)
                .frame(width: 96, height: 96)
        }
    }
}
Use this when

An icon should inherit foreground color as a template.

A photo should keep original colors and avoid accidental tinting.

Pixel art or low-resolution assets should scale without blur.

Avoid this when

The asset pipeline can provide a better pre-rendered image.

Template rendering removes meaningful colors from the icon.

A symbol style makes the icon inconsistent with nearby text.

Implementation notes

Template rendering treats the image as a stencil, which is perfect for monochrome icons and wrong for most photos.
Interpolation controls scaling quality; none is useful when crisp pixels are the desired look.
SF Symbols often respond best to symbolRenderingMode, symbolVariant, font, and imageScale together.

Checklist

Confirm asset catalog rendering settings do not fight your SwiftUI modifier.

Preview icons in selected and unselected states.

Use original rendering for brand marks and multicolor artwork.

Related reference

SwiftUI Image Resizing and SF Symbols

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

SwiftUI foregroundStyle and tint

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

SwiftUI clipShape, mask, and contentShape

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