media contract
Icon
SF-Symbol-paired icon primitive. Names map 1-to-1 with the project tokens.sfSymbols entries (e.g. "settings" → SF "gearshape" / lucide-react "Settings"). Pick the semantic name; the renderer picks the right glyph for the platform.
Variants
- monochrome
- hierarchical
- palette
- multicolor
Sizes
- xs
- sm
- md
- lg
- xl
- 2xl
Slots
- symbol
Example
Default monochrome inside a button
<Button leading={<Icon name="add" />}>New</Button>Usage rule
Each Icon must use a name from tokens.sfSymbols — never hard-code a glyph string.
The full Icon contract has 7 more rules and 2 more examples, plus the do-not patterns. Get the full recipe.