23 Apr 2022

SwiftUI System Images/Icons (SF Symbols) Cheatsheet - Size, Color, Variant

swiftui image

Reading time: 2 min

This article is a cheatsheet for using system images/icons (SF Symbols) in SwiftUI. It shows all the ways to set their size, color and variants.

The end results look like this:

combined

Basics

System images or system icons refer to images that are present by default on Apple platforms. The image collection these draw from is known as SF Symbols and currently numbers some 3300 images.

You can show one using the Image(systemName:) or Label(_:systemImage:):

Image(systemName: "house")

Label("House", systemImage: "house")
Sizing

There are multiple ways to resize a system image. You can find all the outcomes below:

sizing

  • Using resizable + frame:
Image(systemName: "house")
  .resizable()
  .frame(width: 48, height: 48)
  • Using imageScale:
Image(systemName: "house")
  .imageScale(.small)

Image(systemName: "house")
  .imageScale(.large)
  • Using font. This also changes the line thickness on some images:
Image(systemName: "house")
  .font(.title)

Image(systemName: "house")
  .font(.system(size: 24, weight: .bold))

Image(systemName: "house")
  .font(.system(size: 24, weight: .ultraLight))
Coloring

There are multiple ways to color a system image. By default, all system images are black. You can find all the outcomes below:

coloring

  • Using foregroundColor. This will uniformly color all the layers of the image:
Image(systemName: "battery.100.bolt")
  .foregroundColor(.blue)
  • Using renderingMode + foregroundStyle. Depending on the rendering mode, this does one of the following:
    • monochrome basically does the same as using foregroundColor.
    • hierarchical renders symbols as multiple layers, with different opacities applied to the foreground style.
    • palette applies all the provided styles to symbol layers. Note that different symbols have a different number of layers. This is also the default rendering mode.
    • multicolor renders symbols as multiple layers with their inhererent styles. With this mode, you can't specify the color yourself.
Image(systemName: "battery.100.bolt")
  .symbolRenderingMode(.monochrome)
  .foregroundStyle(.blue)

Image(systemName: "battery.100.bolt")
  .symbolRenderingMode(.hierarchical)
  .foregroundStyle(.blue)

Image(systemName: "battery.100.bolt")
  .symbolRenderingMode(.palette) // can be omitted
  .foregroundStyle(.blue, .orange, .green)

Image(systemName: "battery.100.bolt")
  .symbolRenderingMode(.multicolor)
Variants

Most symbols come with different design variants which can be specified with the symbolVariant modifier. Alternatively, you can specify the symbol variant in its name (e.g, "trash.fill"), but using symbolVariant makes it cleaner and easier to compose variants.

If a particular variant isn't applicable to a symbol, it won't have effect nor throw an error. Also, the order in which variants are listed doesn't matter.

variants

Image(systemName: "trash")

Image(systemName: "trash")
  .symbolVariant(.slash)

Image(systemName: "trash")
  .symbolVariant(.slash)
  .symbolVariant(.circle)

Image(systemName: "trash")
  .symbolVariant(.slash)
  .symbolVariant(.circle)
  .symbolVariant(.fill)

Next Post Previous Post