icon-system

Icon System

Overview

Implement a scalable icon system with SVG sprites or icon components, proper sizing tokens, consistent stroke widths, and accessibility. Covers both sprite-based and component-based approaches.

When to Use

• Setting up icons for a new design system
• Converting icon fonts to SVG
• Creating an icon component library
• Establishing icon sizing standards
• Making icons accessible

Quick Reference: Approaches

Approach	Best For	Bundle Size	Styling
SVG Sprite	Large icon sets, caching	One request	CSS limited
Inline SVG Components	Tree-shaking, full control	Per-icon	Full CSS
Icon Font	Legacy support	One request	Limited
External SVG	Simple sites	Per-icon	Limited

The Process

1. Choose approach: Sprite vs components based on project needs
2. Define size scale: Icon size tokens (xs, sm, md, lg, xl)
3. Establish stroke width: Consistent line weights
4. Create component: Wrapper with accessibility
5. Build tooling: Optimization, sprite generation

---

Size Tokens

Icon Size Scale

:root {
  /* Icon sizes - match common UI patterns */
  --icon-size-xs: 0.75rem;   /* 12px - inline text */
  --icon-size-sm: 1rem;      /* 16px - small buttons */
  --icon-size-md: 1.25rem;   /* 20px - default */
  --icon-size-lg: 1.5rem;    /* 24px - large buttons */
  --icon-size-xl: 2rem;      /* 32px - feature icons */
  --icon-size-2xl: 2.5rem;   /* 40px - hero icons */
  --icon-size-3xl: 3rem;     /* 48px - illustrations */
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      width: {
        'icon-xs': '0.75rem',
        'icon-sm': '1rem',
        'icon-md': '1.25rem',
        'icon-lg': '1.5rem',
        'icon-xl': '2rem',
      },
      height: {
        'icon-xs': '0.75rem',
        'icon-sm': '1rem',
        'icon-md': '1.25rem',
        'icon-lg': '1.5rem',
        'icon-xl': '2rem',
      },
    },
  },
};