sf-symbols

Name: sf-symbols
Author: rshankras

548stars46forks

How to install sf-symbols?

rshankras/claude-code-apple-skills/sf-symbols

$npx -y skills add rshankras/claude-code-apple-skills --skill sf-symbols

Installs into the current project.

Summary

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, anim

Files · 1

View on GitHub

SKILL.md

1	# SF Symbols
2
3	Over 7,000 system symbols with free platform consistency, Dynamic Type alignment, and
4	accessibility — the default answer to "we need an icon." This skill covers using them well,
5	authoring custom ones that behave like system ones, and the animation vocabulary.
6	(Animation implementation patterns live in `design/animation-patterns` → symbol-effects.md;
7	this skill owns selection, authoring, and rendering.)
8
9	## When This Skill Activates
10
11	- Choosing icons for tabs, toolbars, buttons, widgets ("should this be an SF Symbol?" — usually yes)
12	- A needed glyph doesn't exist → authoring a custom symbol
13	- Rendering a changing value (signal, progress, volume) as a symbol
14	- Symbol state changes that should animate (mute/unmute, play/pause)
15
16	## Using system symbols
17
18	- Prefer symbols over custom art for tab/toolbar icons — recognizability across the platform
19	for free, and they scale with text styles (`imageScale`, weights match adjacent text).
20	- Keep platform-conventional symbols conventional: share, trash, search mean one thing each.
21	- Rendering modes: Monochrome · Hierarchical (one color, opacity-derived depth) ·
22	Palette (2–3 explicit colors) · Multicolor (intrinsic colors). Pick per context — hierarchical
23	shines in toolbars; multicolor in content.
24	- Gradients (SF Symbols 7-era): a smooth linear gradient generated from one source color,
25	available in all rendering modes — use where depth helps, keep flat in dense UI.
26	- Variable value: pass `variableValue` (0–1) to render magnitude — signal bars, progress.
27	Thresholds distribute evenly; 0% is the only "empty" state (a symbol reads "full" before 100%).
28	Variable Draw (SF Symbols 7) renders the path at a percentage instead of activating
29	layers — an alternative for progress/temperature; a symbol can carry both but renders one.
30
31	## Animation vocabulary
32
33	Presets: Bounce · Pulse · Variable Color · Scale · Appear · Disappear · Replace · Draw On/Off
34	(SF Symbols 7). Behavior classes: discrete (one-off), indefinite (until removed — always pair
35	with removal logic), transition, content transition.
36
37	- Swap symbol states with `.contentTransition(.symbolEffect(.replace))` — and prefer **Magic
38	Replace** (preserves matching enclosures, uses Draw Off/On where supported) for state pairs
39	like mute/unmute.
40	- Draw On/Off playback: By Layer (default) · Whole Symbol · Individually. Symbols define their
41	own drawing direction (wind draws left→right; symmetric symbols from center).
42	- Effects propagate down the view hierarchy — `.symbolEffectsRemoved()` blocks them on subviews.
43	- Full API patterns (SwiftUI `symbolEffect`, UIKit `addSymbolEffect`) in
44	`design/animation-patterns/symbol-effects.md`.
45
46	## Authoring custom symbols
47
48	The workflow that makes a custom glyph behave like a system one:
49
50	1. Start from the closest system symbol (prefer an unfilled base) — SF Symbols app →
51	Export Template. Never draw from a blank canvas.
52	2. Draw three sources: Ultralight-Small, Regular-Small, Black-Small — the system
53	interpolates all 27 variants (9 weights × 3 scales) from them. Get Regular-Small right
54	first, then copy its paths and only move points — all sources must keep the **same number
55	and order of paths and points** (move, never add/remove).
56	3. Outline everything: convert live strokes to outlined paths once the design settles; no
57	open paths (can't fill), no gradients or drop shadows baked in (they break multicolor/
58	hierarchical rendering) — flat fills only.
59	4. Annotate with unified annotation: layers in explicit z-order; system colors for
60	multicolor (they adapt to dark mode/contrast); primary→tertiary groups drive hierarchical
61	and palette modes; `Erase` punches shapes out of layers behind; `Hidden` excludes a layer
62	from a mode. For variable color, z-order = activation order (first-to-fill at bottom).
63	5. Draw guide points (SF Symbols 7 templates) for Draw On/Off: every path needs a start
64	(open circle) and end (closed circle); corners marked with diamonds; annotate the Regular
65	weight first (the only weight where guide points can be added/removed) and keep guide-point
66	order identical across weights.
67	6. Export the current template version for Xcode. Legacy note: 2.0 templates are
68	monochrome-only (needed only for very old deployment targets); 3.0+ carries all rendering
69	modes; 4.0+ carries variable color.
70
71	❌ Common failures: baking effects into art (breaks rendering modes) · mismatched path counts
72	across sources (kills inter

People who liked this also viewed

6 picks

Type

sf-symbols

548stars46forks

View on GitHub

How to install sf-symbols?

rshankras/claude-code-apple-skills/sf-symbols

$npx -y skills add rshankras/claude-code-apple-skills --skill sf-symbols

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# SF Symbols
2
3	Over 7,000 system symbols with free platform consistency, Dynamic Type alignment, and
4	accessibility — the default answer to "we need an icon." This skill covers using them well,
5	authoring custom ones that behave like system ones, and the animation vocabulary.
6	(Animation implementation patterns live in `design/animation-patterns` → symbol-effects.md;
7	this skill owns selection, authoring, and rendering.)
8
9	## When This Skill Activates
10
11	- Choosing icons for tabs, toolbars, buttons, widgets ("should this be an SF Symbol?" — usually yes)
12	- A needed glyph doesn't exist → authoring a custom symbol
13	- Rendering a changing value (signal, progress, volume) as a symbol
14	- Symbol state changes that should animate (mute/unmute, play/pause)
15
16	## Using system symbols
17
18	- Prefer symbols over custom art for tab/toolbar icons — recognizability across the platform
19	for free, and they scale with text styles (`imageScale`, weights match adjacent text).
20	- Keep platform-conventional symbols conventional: share, trash, search mean one thing each.
21	- Rendering modes: Monochrome · Hierarchical (one color, opacity-derived depth) ·
22	Palette (2–3 explicit colors) · Multicolor (intrinsic colors). Pick per context — hierarchical
23	shines in toolbars; multicolor in content.
24	- Gradients (SF Symbols 7-era): a smooth linear gradient generated from one source color,
25	available in all rendering modes — use where depth helps, keep flat in dense UI.
26	- Variable value: pass `variableValue` (0–1) to render magnitude — signal bars, progress.
27	Thresholds distribute evenly; 0% is the only "empty" state (a symbol reads "full" before 100%).
28	Variable Draw (SF Symbols 7) renders the path at a percentage instead of activating
29	layers — an alternative for progress/temperature; a symbol can carry both but renders one.
30
31	## Animation vocabulary
32
33	Presets: Bounce · Pulse · Variable Color · Scale · Appear · Disappear · Replace · Draw On/Off
34	(SF Symbols 7). Behavior classes: discrete (one-off), indefinite (until removed — always pair
35	with removal logic), transition, content transition.
36
37	- Swap symbol states with `.contentTransition(.symbolEffect(.replace))` — and prefer **Magic
38	Replace** (preserves matching enclosures, uses Draw Off/On where supported) for state pairs
39	like mute/unmute.
40	- Draw On/Off playback: By Layer (default) · Whole Symbol · Individually. Symbols define their
41	own drawing direction (wind draws left→right; symmetric symbols from center).
42	- Effects propagate down the view hierarchy — `.symbolEffectsRemoved()` blocks them on subviews.
43	- Full API patterns (SwiftUI `symbolEffect`, UIKit `addSymbolEffect`) in
44	`design/animation-patterns/symbol-effects.md`.
45
46	## Authoring custom symbols
47
48	The workflow that makes a custom glyph behave like a system one:
49
50	1. Start from the closest system symbol (prefer an unfilled base) — SF Symbols app →
51	Export Template. Never draw from a blank canvas.
52	2. Draw three sources: Ultralight-Small, Regular-Small, Black-Small — the system
53	interpolates all 27 variants (9 weights × 3 scales) from them. Get Regular-Small right
54	first, then copy its paths and only move points — all sources must keep the **same number
55	and order of paths and points** (move, never add/remove).
56	3. Outline everything: convert live strokes to outlined paths once the design settles; no
57	open paths (can't fill), no gradients or drop shadows baked in (they break multicolor/
58	hierarchical rendering) — flat fills only.
59	4. Annotate with unified annotation: layers in explicit z-order; system colors for
60	multicolor (they adapt to dark mode/contrast); primary→tertiary groups drive hierarchical
61	and palette modes; `Erase` punches shapes out of layers behind; `Hidden` excludes a layer
62	from a mode. For variable color, z-order = activation order (first-to-fill at bottom).
63	5. Draw guide points (SF Symbols 7 templates) for Draw On/Off: every path needs a start
64	(open circle) and end (closed circle); corners marked with diamonds; annotate the Regular
65	weight first (the only weight where guide points can be added/removed) and keep guide-point
66	order identical across weights.
67	6. Export the current template version for Xcode. Legacy note: 2.0 templates are
68	monochrome-only (needed only for very old deployment targets); 3.0+ carries all rendering
69	modes; 4.0+ carries variable color.
70
71	❌ Common failures: baking effects into art (breaks rendering modes) · mismatched path counts
72	across sources (kills inter

People who liked this also viewed

6 picks

Type