Skip to content
Canvases

Symbol

A symbol shows an icon from Apple’s SF Symbols set.

The Symbol property chooses the SF Symbol name, size, weight, rendering mode, and colors.

If several symbols should line up, give them the same frame. That keeps the layout steady even when different symbols have different natural widths.

Configure the Symbol

Section titled “Configure the Symbol”

The symbol name chooses the icon. Size and weight control the symbol’s dimensions and stroke weight.

Examples of symbol names are calendar, bolt.fill, cloud.sun.fill, and checkmark.circle.fill. Use Apple’s SF Symbols app to browse the full set of names.

Rendering mode chooses how colors apply. Monochrome uses one color, Hierarchical uses one color with system-provided levels, Palette uses primary, secondary, and tertiary colors, and Multicolor uses the symbol’s built-in colors where available.

Some SF Symbols support variable values. For those symbols, the progress value controls the symbol variant from 0 to 100.

For example, a variable battery symbol can show a low, half, or full variant based on the progress value.

A small widget showing an SF Symbol in monochrome rendering mode.A small widget showing an SF Symbol in monochrome rendering mode.
Monochrome
A small widget showing an SF Symbol in hierarchical rendering mode.A small widget showing an SF Symbol in hierarchical rendering mode.
Hierarchical
A small widget showing an SF Symbol in palette rendering mode.A small widget showing an SF Symbol in palette rendering mode.
Palette
A small widget showing an SF Symbol in multicolor rendering mode.A small widget showing an SF Symbol in multicolor rendering mode.
Multicolor

Gradient

Section titled “Gradient”

Gradient changes the symbol color treatment. When it is off, the symbol uses flat colors. When it is on, the symbol uses the system gradient treatment.

A small widget showing an SF Symbol with gradient turned off.A small widget showing an SF Symbol with gradient turned off.
Gradient off
A small widget showing an SF Symbol with gradient turned on.A small widget showing an SF Symbol with gradient turned on.
Gradient on

Properties

Section titled “Properties”

Identity

Section titled “Identity”
Property Description
ID Identifies the view so you can find it in the canvas and modify it with Shortcuts actions. Keep it stable for automations.
Visible Hides the view without deleting it. Hidden views are not shown, but they stay in the canvas.

Symbol

Section titled “Symbol”
Property Description
Symbol Chooses the icon, size, weight, rendering mode, gradient, and symbol colors.

Layout

Section titled “Layout”
Property Description
Frame Controls size and alignment.
Offset Moves the view visually with an offset.
Padding Adds padding.

Appearance

Section titled “Appearance”
Property Description
Opacity Sets transparency from 0 to 100.
Background Adds a background.
Shadow Adds a shadow.
Clip Shape Clips the view to a shape.
Border Adds a border.