What Apple does
Apple's Human Interface Guidelines say each of the nine SF Symbols weights, ultralight to black, corresponds to a weight of the San Francisco system font, so symbols weight-match adjacent text. Each symbol also comes in three scales (small, medium as default, large) defined relative to the font's cap height, so emphasis changes without breaking the weight match. Color goes through four rendering modes: monochrome, hierarchical (one color at stepped opacities per layer), palette (one color per layer) and multicolor; the HIG suggests multiple opacities of the app's accent color to give symbols depth. Variable color fills layers at thresholds from zero to 100 percent to show capacity or strength, and the guidelines bar using the symbols in app icons, logos or other trademarked use.
Apple's system, as published
- Weights
- 9, ultralight to black, each matched to a San Francisco font weight
- Scales
- small, medium (default), large; relative to San Francisco cap height
- Rendering Modes
- monochrome, hierarchical, palette, multicolor
- Hierarchy Layers
- primary, secondary, tertiary
- Variable Color
- layers light at thresholds between 0 and 100 percent
- Gradient
- SF Symbols 7 and later: linear gradient from one source color, all rendering modes
- Variants
- fill, slash, enclosed (among others) for state
- License Note
- no use in app icons, logos or trademarked use
Why it works
When the glyph's line weight equals the label's stroke weight, the icon reads as part of the sentence rather than clip art. Scaling against cap height keeps weight steady while emphasis changes.
Best for
Product UI, settings and feature lists, app marketing, any piece where icons sit inline with labels and must feel native to the type
What breaks it
- Mixing stroke weights in one row of icons
- Scaling an icon up by making its stroke thicker
- Using the variable fill to suggest depth instead of a changing value
- Turning a system-style glyph into a logo
Sources
- developer.apple.com: HIG SF Symbols page: rendering modes, variable color, nine weights matched to the system font, three scales, design variants, usage terms
Steal it for your brand
The same system, written in your colors, type and shapes. Nothing of Apple's look comes with it.
The recipe
- Pick one open outline set with a variable or adjustable stroke and draw every icon from it, never the source brand's glyphs.
- Set the icon stroke from the label it sits beside: a label in the body face at
typography.body.weightgets a stroke oftypography.body.weight/ 250 px on a 24 px canvas; a display-face label usestypography.display.weight/ 250. - Size the icon from the label's cap height, not its em box: a little smaller in dense layouts and larger in airy ones, without changing stroke weight.
- For layered icons, draw the main shape in
palette.accentand the supporting parts in the same role at 60 and 35 percent opacity; usepalette.inkwhen the icon is purely monochrome. - Show an on or selected state by switching to the filled variant of the same icon, and an off state with a slash variant, rather than recoloring.
- For a level such as signal or volume, light successive layers in
palette.accentat even thresholds and leave the rest atpalette.border.
What you'll need
- The label sizes and weights used beside icons
- Which icons need on, off or level states
Recipe as JSON
{
"recipe": {
"stroke_weight": "{typography.body.weight}",
"stroke_px_at_24": "{typography.body.weight} / 250",
"scale_to_cap_height": {
"by": "style.density",
"map": {
"dense": 0.9,
"balanced": 1,
"airy": 1.15
},
"default": 1
},
"primary_layer": "{palette.accent}",
"secondary_layer_opacity": 0.6,
"tertiary_layer_opacity": 0.35,
"monochrome_fill": "{palette.ink}",
"state_variant": "fill",
"linecap": "round",
"linejoin": "round"
},
"fallbacks": {
"palette.accent": "{palette.ink}",
"palette.border": "{palette.ink_muted}",
"palette.ink_muted": "{palette.ink}"
},
"steps": [
"Pick one open outline set with a variable or adjustable stroke and draw every icon from it, never the source brand's glyphs.",
"Set the icon stroke from the label it sits beside: a label in the body face at {typography.body.weight} gets a stroke of {typography.body.weight} / 250 px on a 24 px canvas; a display-face label uses {typography.display.weight} / 250.",
"Size the icon from the label's cap height, not its em box: a little smaller in dense layouts and larger in airy ones, without changing stroke weight.",
"For layered icons, draw the main shape in {palette.accent} and the supporting parts in the same role at 60 and 35 percent opacity; use {palette.ink} when the icon is purely monochrome.",
"Show an on or selected state by switching to the filled variant of the same icon, and an off state with a slash variant, rather than recoloring.",
"For a level such as signal or volume, light successive layers in {palette.accent} at even thresholds and leave the rest at {palette.border}."
]
}See it working
- Apple: The weight and scale sections show symbols matched to text at each weight, and the rendering-mode figures show hierarchical opacity layers
The lesson
Pick icon weights to match the text beside them, so the icon is read as a word in the line.
The move
Apple's SF Symbols page leads with "SF Symbols provides thousands of consistent, highly configurable symbols" that align with the San Francisco system font "in all weights and sizes." A large yellow tile shows a heart, a star and an S-shaped glyph over a construction grid, and the page's right rail lists "Weights and scales".
Why it works
- Our readThe construction grid behind the glyphs shows the symbols are drawn to a system, which supports the claim that they align with text.
- Our readA dedicated "Weights and scales" section treats weight as a choice a designer should make, not a default.
- Our readThe opening sentence puts the promise, alignment with text in all weights and sizes, in plain words before any detail.
What not to copy
Don't copy the yellow tile or Apple's glyph set. Keep the rule: match stroke weight to the label and scale from cap height so emphasis changes without breaking the match.
