sf-symbols
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.
npx skills add rshankras/claude-code-apple-skills --skill sf-symbols --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 pe
- When This Skill Activates
- Using system symbols
- Animation vocabulary
- Authoring custom symbols
- Output Format
- References
What does the sf-symbols skill do?
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.
How do I install it?
Run `npx skills add rshankras/claude-code-apple-skills --skill sf-symbols --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From rshankras/claude-code-apple-skills, a repository with 589 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.