Iconography
Compare the real components, explore every example, and follow the guidance into implementation.
Implementation previewIcon
Explore every named example, including states, compositions, and theme variants.
Example source
packages/design-system/src/components/primitives/Icon/Icon.stories.tsxExport PlaygroundImplementation preview Local Storybook build 0.2.0-preview.1. Source specification status does not approve this runtime.
Stories + source JSON ↗Local specification source status: preview. Implementation preview pending sign-off.
The opinionated render of a Symbol: a Glyph at a token size with semantic colors and decorative or meaningful accessibility.
IconTile
Explore every named example, including states, compositions, and theme variants.
Example source
packages/design-system/src/components/primitives/IconTile/IconTile.stories.tsxExport PlaygroundImplementation preview Local Storybook build 0.2.0-preview.1. Source specification status does not approve this runtime.
Stories + source JSON ↗Local specification source status: preview. Implementation preview pending sign-off.
A design-system glyph centered in a circular semantic tone for status, brand, or product-feature identity.
SFIcon
Explore every named example, including states, compositions, and theme variants.
Example source
packages/design-system/src/components/primitives/SFIcon/SFIcon.stories.tsxExport PlaygroundImplementation preview Local Storybook build 0.2.0-preview.1. Source specification status does not approve this runtime.
Stories + source JSON ↗Local specification source status: preview. Implementation preview pending sign-off.
An Apple SF Symbol rendered from the app-generated supported-symbol map with token sizes and semantic foregrounds.