Sf Symbols

---
name: sf-symbols
description: SF Symbols end-to-end — choosing and configuring the 7,000+ system symbols (rendering modes, variable color/draw, gradients), authoring custom symbols that interpolate across weights, and the animation preset vocabulary. Use when picking iconography, building custom symbols, animating symbol state changes, or rendering values as symbols.
allowed-tools: [Read, Write, Edit, Glob, Grep]
last_verified: 2026-07-16
review_by: 2027-06-22
---

# SF Symbols

Over 7,000 system symbols with free platform consistency, Dynamic Type alignment, and
accessibility — the default answer to "we need an icon." This skill covers using them well,
authoring custom ones that behave like system ones, and the animation vocabulary.
(Animation *implementation patterns* live in `design/animation-patterns` → symbol-effects.md;
this skill owns selection, authoring, and rendering.)

## When This Skill Activates

- Choosing icons for tabs, toolbars, buttons, widgets ("should this be an SF Symbol?" — usually yes)
- A needed glyph doesn't exist → authoring a custom symbol
- Rendering a changing value (signal, progress, volume) as a symbol
- Symbol state changes that should animate (mute/unmute, play/pause)

## Using system symbols

- Prefer symbols over custom art for tab/toolbar icons — recognizability across the platform
  for free, and they scale with text styles (`imageScale`, weights match adjacent text).
- Keep platform-conventional symbols conventional: share, trash, search mean one thing each.
- **Rendering modes**: Monochrome · Hierarchical (one color, opacity-derived depth) ·
  Palette (2–3 explicit colors) · Multicolor (intrinsic colors). Pick per context — hierarchical
  shines in toolbars; multicolor in content.
- **Gradients** (SF Symbols 7-era): a smooth linear gradient generated from one source color,
  available in all rendering modes — use where depth helps, keep flat in dense UI.
- **Variable value**: pass `variableValue` (0–1) to render magnitude — signal bars, progress.
  Thresholds distribute evenly; 0% is the only "empty" state (a symbol reads "full" before 100%).
  **Variable Draw** (SF Symbols 7) renders the path at a percentage instead of activating
  layers — an alternative for progress/temperature; a symbol can carry both but renders one.

## Animation vocabulary

Presets: **Bounce · Pulse · Variable Color · Scale · Appear · Disappear · Replace · Draw On/Off**
(SF Symbols 7). Behavior classes: discrete (one-off), indefinite (until removed — always pair
with removal logic), transition, content transition.

- Swap symbol states with `.contentTransition(.symbolEffect(.replace))` — and prefer **Magic
  Replace** (preserves matching enclosures, uses Draw Off/On where supported) for state pairs
  like mute/unmute.
- Draw On/Off playback: By Layer (default) · Whole Symbol · Individually. Symbols define their
  own drawing direction (wind draws left→right; symmetric symbols from center).
- Effects propagate down the view hierarchy — `.symbolEffectsRemoved()` blocks them on subviews.
- Full API patterns (SwiftUI `symbolEffect`, UIKit `addSymbolEffect`) in
  `design/animation-patterns/symbol-effects.md`.

## Authoring custom symbols

The workflow that makes a custom glyph behave like a system one:

1. **Start from the closest system symbol** (prefer an unfilled base) — SF Symbols app →
   Export Template. Never draw from a blank canvas.
2. **Draw three sources**: Ultralight-Small, Regular-Small, Black-Small — the system
   interpolates all **27 variants** (9 weights × 3 scales) from them. Get Regular-Small right
   first, then copy its paths and only *move* points — all sources must keep the **same number
   and order of paths and points** (move, never add/remove).
3. **Outline everything**: convert live strokes to outlined paths once the design settles; no
   open paths (can't fill), no gradients or drop shadows baked in (they break multicolor/
   hierarchical rendering) — flat fills only.
4. **Annotate with unified annotation**: layers in explicit z-order; system colors for
   multicolor (they adapt to dark mode/contrast); primary→tertiary groups drive hierarchical
   and palette modes; `Erase` punches shapes out of layers behind; `Hidden` excludes a layer
   from a mode. For **variable color**, z-order = activation order (first-to-fill at bottom).
5. **Draw guide points** (SF Symbols 7 templates) for Draw On/Off: every path needs a start
   (open circle) and end (closed circle); corners marked with diamonds; annotate the Regular
   weight first (the only weight where guide points can be added/removed) and keep guide-point
   order identical across weights.
6. **Export the current template version** for Xcode. Legacy note: 2.0 templates are
   monochrome-only (needed only for very old deployment targets); 3.0+ carries all rendering
   modes; 4.0+ carries variable color.

❌ Common failures: baking effects into art (breaks rendering modes) · mismatched path counts
across sources (kills interpolation) · re-ordering paths after annotation (forces re-annotation)
· shipping a filled base variant as the only variant.

## Output Format

For icon reviews: `Location | Current | Symbol exists? (name) | Mode/config | Action`.
For custom-symbol requests: the 6-step authoring checklist above with per-step status.

## References

- https://developer.apple.com/sf-symbols/ (the SF Symbols app)
- https://developer.apple.com/videos/play/wwdc2025/337/ (What's new in SF Symbols 7)
- https://developer.apple.com/videos/play/wwdc2021/10250/ (Create custom symbols)
- https://developer.apple.com/videos/play/wwdc2023/10258/ (Animate symbols)
- https://developer.apple.com/videos/play/wwdc2022/10158/ (Variable Color)
- https://developer.apple.com/design/human-interface-guidelines/sf-symbols
- Related skills: `design/animation-patterns` (symbol-effects implementation), `design/typography` (SF font pairing), `generators/app-icon-generator` (app icons are NOT symbols)