Overview
SF Symbols are a set of 5000+ icons from Apple that are preloaded into Play. Each SF Symbol has a name and a category that you can search and filter by. You can add native animations to any icon with SF Symbol effects.
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.
Element Properties
SF Symbol
Select the SF Symbol.
Want a shortcut? You can jump right to the SF Symbol asset panel by double-clicking/tapping on any SF Symbol.
Size
Set the size of the SF Symbol, in points. This is different than the size of the SF Symbol element container, which is the hit area for interactions and can be adjusted with the Layout Panel's Height & Width properties.
Weight
Set the thickness of the SF Symbol to ultralight, thin, light, regular, medium, semibold, bold, heavy, or black.
Scale
Set the scale of the SF Symbol to small, medium, or large.
Rendering Mode
Set the appearance of the SF Symbol by varying the colors/opacities of the icon's layers:
Monochrome: The default rendering mode in which every layer is the same color and opacity.
Hierarchical: The icon's layers vary in opacity based on importance, giving the icon depth.
Palette: The icon's layers vary in color, using one to three selected colors.
Multicolor: The icon's layers have predefined colors (i.e. the notification dot is always red). Only available for some SF Symbols.
Color(s)
Select the color (or colors) of the SF Symbol.
Variable Fill
Choose to apply full opacity color partially based on a percent. Only available for some SF Symbols.
Align to Baseline
Choose if the SF Symbol will align to the same baseline as a similarly sized text element.
Expression Editor Properties
Image Name
Symbol.imageName
Name of the current SF Symbol.
Tint
Symbol.tint
Tint of the SF Symbol.
Resources
Links