sf-symbols

# 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` (...