Icon and Illustration Systems

Mental model

An icon is a compression of meaning, and compression only works when the reader already has the key. Most icon failures are the designer assuming a metaphor is universal when it is learned.

• Universal metaphors are a short list. Home, search, close, play, plus,

trash, settings, back. Everything else is learned, and learned means a label.

• If you have to debate whether an icon is self-explanatory, add a label.

The debate is the evidence. Icon-only navigation measurably reduces discoverability; icon-plus-label costs a few pixels and removes the problem.

• Optical alignment beats mathematical alignment. A triangle centred by

bounding box looks off-centre. Centre by visual mass, which for a play glyph means nudging right.

• One grid, one stroke weight, one corner radius. Mixing icon sets is the

fastest way to make an interface look assembled rather than designed.

• Decorative icons are invisible to screen readers, meaningful ones are not.

That distinction is a decision you make per icon, not a default.

Constants

Every recipe in the reference files emits these.

Sizing Rules

• Icons below 16px should use simplified glyphs (fewer details, thicker relative strokes)
• Icons at 12px may need to be redesigned as filled shapes rather than stroked outlines
• At 32px+, icons can support more detail (inner strokes, secondary elements)
• Never scale a 24px icon down to 12px by setting width/height — use a dedicated small variant
• Design at 24px, then create size-specific variants for 16px and 12px

4. Icon Design Rules

State Transition CSS

.icon-button {
  color: var(--icon-default);
  transition: color 150ms ease, transform 100ms ease, opacity 150ms ease;
}
.icon-button:hover { color: var(--icon-hover); }
.icon-button:active { color: var(--icon-active); transform: scale(0.95); }
.icon-button:disabled { color: var(--icon-disabled); opacity: 0.38; pointer-events: none; }
.icon-button[aria-selected="true"] { color: var(--icon-selected); }
.icon-button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

8. Animated Icons

Index

Reference architecture

What every reference file contains

1. When to reach for it, and the simpler option to try first
2. Complete code, not fragments
3. The accessibility wiring for that specific case
4. Dark-mode behaviour
5. The mistake that case invites

Meaningful vs Decorative Icons

Every icon is either meaningful (conveys information) or decorative (visual embellishment). The treatment differs completely:

Meaningful icons (icon is the only way to understand the action):

<!-- Method 1: aria-label on the button -->
<button aria-label="Search">
  <svg aria-hidden="true"><!-- icon --></svg>
</button>

<!-- Method 2: title element inside SVG -->
<svg role="img" aria-labelledby="search-title">
  <title id="search-title">Search</title>
  <!-- icon paths -->
</svg>

<!-- Method 3: Visually hidden text -->
<button>
  <svg aria-hidden="true"><!-- icon --></svg>
  <span class="sr-only">Search</span>
</button>

Decorative icons (icon accompanies visible text):

<button>
  <svg aria-hidden="true" focusable="false"><!-- icon --></svg>
  <span>Search</span>
</button>

Accessibility Rules

1. Every icon must have either aria-hidden="true" (decorative) or an accessible name (meaningful)
2. Add focusable="false" to inline SVGs in IE/Edge legacy to prevent tab-stop issues
3. Use role="img" when the SVG is meaningful and uses <title> for its label
4. Toggle icons must announce their state: aria-pressed="true/false" or aria-expanded
5. Icon-only buttons require a minimum 44x44px touch target (WCAG 2.5.8)
6. Color alone must not be the only indicator — pair colored icons with shape changes (e.g., filled vs outline for selected)
7. Animated icons must respect prefers-reduced-motion (WCAG 2.3.3)

14. Icon Color

Routing

For choosing an icon set -- style, weights, coverage, licence, import pattern, and the SF Symbols and Material Symbols platform conventions: read references/icon-library-catalog.md.

For getting icons into the codebase -- the React component, inline vs sprite vs font, state transitions, animated icons, and SVG optimization: read references/icon-implementation-recipes.md.

For illustration -- sixteen styles with the brands that use them, plus empty-state and spot illustration practice: read references/illustration-systems.md.

For drawing icons -- the 24x24 grid, pixel alignment, keyline shapes, safe zones, and how icons take colour across themes: read references/icon-geometry-and-color.md.

Cross-References

• ui-visual-design-system -- where iconography sits in the visual language
• platform-visual-standards -- SF Symbols and Material Symbols in their native context
• animation-recipe-library -- the easing tokens animated icons use
• accessibility-inclusive-design -- the full decorative-vs-meaningful story
• design-systems-architecture -- icon size tokens in the three-tier model