While they function as icons, SF Symbols are really a font, with properties more closely resembling the properties of text. Play lets you select and customize any icon from Apple’s SF Symbols. Each icon has a name and a category that you can search and filter by. You can add native animations to any icon with SF Symbol actions.
We’ll use the words SF Symbol and icon interchangeably here.
In macOS, you can add an SF Symbol to your page, canvas, or selection using the B key.
Icon
Use the Icon property to select which SF Symbol is displayed.
Want a shortcut? You can jump right to the Icon property by double clicking or tapping on an SF Symbol element on your page.
Icon Size & Container Size
There are two size measurements for SF Symbols: the height & width of the actual icon and the height & width of the container holding the icon.
The Size property adjusts the size of the icon, as if you were adjusting a font’s size. The SF Symbols's Height and Width properties change the size of the container, which is the hit area for interactions.
Color
Using the color property, you can select the color of your icon. You can add a new color style by tapping the property’s four circle icon in iOS or opening the Styles Panel in macOS.
On macOS, you can get more detailed by changing the color's Rendering Mode. Rendering modes change the icon's appearance based on the shapes within the icon. There are four options: Monochrome, Hierarchical, Palette, and Multicolor.
Monochrome is the default rendering mode. Every layer is the same color.
Hierarchical rendering mode gives the symbol depth by varying layers’ opacity based on importance.
Palette rendering mode uses two or three colors, each on a different layer.
Multicolor rendering mode uses predefined colors for different layers (i.e. the notification dot is always red).
Depending on the icon and the mode, you may be able to use "variable color" to change the appearance. Turning on variable color reduces the icon's opacity and enables the Progress property, which adds opacity back to the symbol.
Weight & Scale
The scale property refers to the scale of your icon inside the icon container. It can be small, medium, or large.
You can change the weight of any icon, choosing from nine different options: ultralight, thin, light, regular, medium, semibold, bold, heavy, and black.