SF Symbols (SwiftUI)

SF Symbols is Apple's icon set of over 3200 glyphs, drawn to match the system font across every platform. Image(systemName:) displays one, and dedicated modifiers control size, variant, and colour layering.

Displaying Symbols

Three entry points cover most uses: a plain image, string interpolation inside Text, and Label, which shows or hides its text by context, for example icon-only in a toolbar.

Image(systemName: "doc.on.doc")

Text("Super star \(Image(systemName: "star"))")

Button(role: .destructive, action: {}) {
  Label("Remove", systemImage: "trash")
}

Size and Colour

Colour comes from foregroundColor or foregroundStyle. For size there are two distinct tools: the font modifier scales the symbol with the text and Dynamic Type, while imageScale scales only the symbol relative to the text.

Label("Remove", systemImage: "trash")
  .font(.title3)        // text and icon scale together

Label("Remove", systemImage: "trash")
  .imageScale(.large)   // icon only

Variants

Many symbols ship filled, circled, squared, and slashed variants, named with suffixes such as doc.on.doc.fill. Containers pick the right variant themselves: a tab bar renders the filled version from the plain name. To force a variant across a hierarchy, set it in the environment with symbolVariant(.fill) instead of renaming every symbol.

Rendering Modes

Four modes control how layers inside a symbol get coloured:

1. monochrome fills the whole symbol with one colour.
2. multicolor uses the layers' own inherited colours.
3. hierarchical applies the foreground style at different opacities per layer.
4. palette styles each layer separately.

Set the mode with symbolRenderingMode, and in palette mode pass one style per layer to foregroundStyle:

Image(systemName: "doc.on.doc")
  .symbolRenderingMode(.palette)
  .foregroundStyle(.red, .green, .blue)