Design Systems

Iconography

Choosing, designing, and implementing icons — style consistency, accessibility, sizing, and when icons need labels.

#icons#iconography#SVG#icon library#accessibility#labels#visual communication

What is it?

Iconography is the system for using, designing, and maintaining icons in a product. It covers icon style (filled, outlined, duotone), sizing, grid system, color, accessibility labeling, and icon library selection. A consistent icon system reduces visual noise and helps users navigate interfaces faster.

Why it matters

Icons are pre-attentive — they're processed faster than text. Used correctly, they speed up interface scanning. Used incorrectly (inconsistent styles, ambiguous metaphors, no labels), they create confusion. Many icons that seem universally understood are not — context and labeling are critical.

Best Practices

Maintain one icon style throughout — either all outlined or all filled. Mixing creates visual chaos.
Icon sizes: 16px (small UI), 20px (default UI), 24px (primary UI), 32px (illustrative).
All icons must be on a consistent grid (24×24 or 20×20 viewbox).
SVG icons preferred over icon fonts — sharper on high-DPI, color-controllable, accessible.
Icon-only controls must have accessible labels (aria-label or adjacent visually-hidden text).
Test icon meaning with users — many icons that seem obvious are ambiguous. "Download" can mean save, export, or install.
Use system icons for universal concepts (hamburger menu, search, close) — don't reinvent conventions.
Decorative icons should have aria-hidden="true" — they add no semantic meaning.
Icon color should be controlled by currentColor in SVG — inherits from text color, maintains contrast automatically.
Avoid text in icons — they become illegible at small sizes and don't localize.

Common Mistakes

Mixed icon styles (some outlined, some filled, some from different libraries).
Icon-only buttons with no accessible labels.
Relying on icon meaning that hasn't been user-tested.
Icons at sub-optimal sizes (12px icons are illegible to most users).
Icon fonts instead of SVG — rendering issues, accessibility problems.
Using color alone to distinguish icon states (colorblind users).
Text inside icons that disappears at small sizes.

Checklist

Single icon style used throughout (outlined or filled, not both)

Icons from a single library (or custom icons follow the same style)

Minimum icon size is 16px

SVG icons used (not icon fonts)

All icons use currentColor for color inheritance

Icon-only controls have aria-label

Decorative icons have aria-hidden="true"

Icon meanings tested with representative users

Icon sizes defined as tokens (--icon-sm, --icon-md, --icon-lg)

Research & Theory

Icon Comprehension Research (NN/g)

Nielsen Norman Group's research on icon usability: only icons with universal or learned meaning are understood without labels. Most icons need text labels to be unambiguous.

Why it's relevant

The safe rule: label all icons unless they have extremely high recognition (search magnifying glass, × close, home house). Even then, a tooltip is good practice.

Real-World Examples

Lucide (formerly Feather)

Consistent outlined icon set. SVG-first. currentColor support. 24×24 grid. One of the most popular icon libraries for product design.

Heroicons

Outlined and solid variants from Tailwind team. Consistent sizing and style. Free, SVG-based, widely adopted in Next.js/React projects.

Phosphor Icons

Six weights for each icon (Thin through Bold). Consistent grid. Large library. SVG and React component packages.