How to use SFSymbol rendering modes in SwiftUI

Michal Tynior -

Apple allows us to customize the SFSymbols with different rendering modes. Here is a little cheatsheet explaining how to use rendering modes and how to customize them.

Automatic

This mode is used when we don't explicitly specify any rendering mode:

 Image(systemName: "shareplay")
 	.foregroundStyle(.white)

Every SFSymbol has preferred rendering mode, and when we use automatic mode each symbol will decide how to render itself.

We can also explicitly set automatic rendering mode by passing nil to the `symbolRenderingMode(_)` function:

 Image(systemName: "shareplay")
 	.symbolRenderingMode(nil)
 	.foregroundStyle(.white)

Monochrome

This mode renders SFSymbol as a flat layer filled with the foreground style:

 Image(systemName: "speaker.wave.2.circle.fill")
 	.symbolRenderingMode(.monochrome)
 	.foregroundStyle(.white)

Hierarchical

This mode renders SFSymbol as multiple layers, where each layer has a different opacity applied to the foreground style:

 Image(systemName: "person.3.sequence.fill")
 	.symbolRenderingMode(.hierarchical)
 	.foregroundStyle(.white)

Palette

This mode  renders  SFSymbol as multiple layers, with different foreground styles applied to the layers:

 Image(systemName: "person.3.sequence.fill")
 	.symbolRenderingMode(.palette)
 	.foregroundStyle(.white, .teal, .green)

Multicolor

In this mode supported SFSymbols are rendered as colored layers where colors are defined by the symbols themselves:

 Image(systemName: "cloud.sun.rain.fill")
 	.symbolRenderingMode(.multicolor)

This is it. If you want to know more details about SFSymbols rendering modes I recommend watching What's new in SF Symbols 4 video from WWDC 2022.