SF Symbols are icons created by Apple. They match Apple’s signature font, San Francisco, and their weight, size, and color are customizable. In this article, we'll focus on the color options, specifically, the rendering modes.

SF Symbols have four different rendering modes that change the symbol’s color(s) and appearance. Some rendering modes keep the full icon the same color, while others have multiple colors (or multiple opacities of the same color) across icon layers that Apple has defined.

Monochrome

Monochrome is the default rendering mode. Each layer is the same color, so there is only one Fill property.

Hierarchical

Hierarchical rendering mode gives the symbol depth by varying layers’ opacity based on importance. Some SF Symbols have three layers and therefore three different opacities, whereas others have only one or two layers. The hierarchy of the layers, in addition to the layers themselves, is defined by Apple. You only need to choose the color, so, again, there is only one Fill property.

Palette

Palette rendering mode uses up to three colors, each on a different layer. You'll set three fill properties (Color 1, 2, & 3) with the colors you would like to use. If a symbol has three layers, it will use all three colors. If the symbol only has one or two layers, it will use Color 1 or Colors 1 & 2, respectively.

Multicolor

Multicolor rendering mode uses specific colors for specific layers. You'll have one Fill property that will set the color of all undefined layers (if there are any), but the defined layers don't change. For example, in the following video, the red badge stays red even as I cycle through the list of Color styles.

Not all symbols support every rendering mode. Symbols with fewer layers may look the same across modes, with Hierarchical and Palette modes looking like Monochrome.

With these rendering modes and other icon features like variable color, designs using SF symbols feel infinitely customizable. Play is the ultimate experimentation zone for SF symbols because of how easy we make it to switch modes, colors, weights, and even the symbol in one place.