Icons

SVG vs Icon Fonts

SVG is the modern standard:

• Better accessibility (native ARIA support)
• No flash of invisible/wrong icon (FOIT)
• Multicolor support
• Smaller bundles with tree-shaking

Only consider icon fonts for legacy IE11 support.

Accessibility Patterns

Decorative icons (next to visible text):

\x3Cbutton>
  \x3Csvg aria-hidden="true" focusable="false">...\x3C/svg>
  Save
\x3C/button>

Informative icons (standalone, no label):

\x3Cbutton aria-label="Save document">
  \x3Csvg aria-hidden="true" focusable="false">...\x3C/svg>
\x3C/button>

\x3C!-- Or with visually hidden text -->
\x3Cbutton>
  \x3Csvg aria-hidden="true">...\x3C/svg>
  \x3Cspan class="sr-only">Save document\x3C/span>
\x3C/button>

SVG with accessible name:

\x3Csvg role="img" aria-labelledby="icon-title">
  \x3Ctitle id="icon-title">Warning: system error\x3C/title>
  \x3C!-- paths -->
\x3C/svg>

Key rules:

• aria-hidden="true" on SVGs that duplicate visible text
• focusable="false" prevents unwanted tab stops in IE/Edge
• \x3Ctitle> must be first child inside \x3Csvg> for screen reader support
• IDs must be unique if multiple SVGs are inline

Color Inheritance

\x3Csvg fill="currentColor">
  \x3Cpath d="..."/>
\x3C/svg>

currentColor inherits from CSS color property. The icon changes color with hover states automatically:

.button { color: blue; }
.button:hover { color: red; } /* icon turns red too */

Remove hardcoded fill="#000" from SVGs before using currentColor.

For stroke-based icons, use stroke="currentColor" instead.

Sizing

Standard grid sizes: 16, 20, 24, 32px

Match stroke weight to size:

Touch targets need 44x44px minimum—icon can be smaller if tappable area is larger via padding.

.icon-button {
  width: 24px;
  height: 24px;
  padding: 10px; /* Creates 44x44 touch target */
}

Scaling with Text

.icon {
  width: 1em;
  height: 1em;
}

Icon scales with surrounding text size automatically.

Symbol Sprites

For many repeated icons, reduce DOM nodes with sprites:

\x3C!-- Define once, hidden -->
\x3Csvg style="display:none">
  \x3Csymbol id="icon-search" viewBox="0 0 24 24">
    \x3Cpath d="..."/>
  \x3C/symbol>
  \x3Csymbol id="icon-menu" viewBox="0 0 24 24">
    \x3Cpath d="..."/>
  \x3C/symbol>
\x3C/svg>

\x3C!-- Use anywhere -->
\x3Csvg aria-hidden="true">\x3Cuse href="#icon-search"/>\x3C/svg>

External sprites (\x3Cuse href="/icons.svg#search"/>) don't work in older Safari without polyfill.

Performance

Benchmark (1000 icons):

• \x3Cimg> with data URI: 67ms (fastest)
• Inline SVG optimized: 75ms
• Symbol sprite: 99ms
• \x3Cimg> external: 76ms

Recommendations:

• Tree-shake icon libraries (Lucide, Heroicons support this)
• Don't import entire Font Awesome (1MB+)—use subset or switch to SVG
• Inline critical icons, lazy-load sprite for non-critical

Consistency

• Stick to one icon set—mixing styles looks unprofessional
• Match icon stroke weight to your font weight (regular text = 1.5px stroke)
• Pick one style per context: outlined for inactive, filled for active
• Optical alignment differs from mathematical—circles reach edges, squares don't
• Name icons by appearance, not meaning: stopwatch not speed

Common Mistakes

• Missing aria-hidden on decorative icons—screen readers announce gibberish
• Mixing rounded and sharp icon styles in same interface
• Giant icon libraries for 10 icons—massive bundle bloat
• Icon-only buttons without accessible name—impossible to use with screen readers
• Hardcoded colors preventing theme switching
• Stroke width not scaling with icon size—16px icon with 2px stroke looks heavy