Icon System

Problem

Icons are scattered across the codebase as individual image files, inline SVGs copied and pasted with inconsistent sizes and colors, or multiple icon libraries loaded simultaneously. Changing an icon requires finding all instances, designers struggle to maintain visual consistency, and bundle sizes bloat with duplicate icon code and unused glyphs.

Solution

Centralize icon assets and provide consistent components for rendering them across the application. This ensures icons are accessible, properly sized, and easy to update or swap.

Example

This example demonstrates a centralized icon system where all icons are defined in one place and rendered through a reusable component.

// Central icon registry with SVG path data
const icons = {
  home: <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3" />,
  user: <path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
};

// Reusable icon component with consistent sizing
function Icon({ name, size = 24 }) {
  // Render icon from registry with specified size
  return <svg width={size} height={size}>{icons[name]}</svg>;
}

Benefits

• Ensures visual consistency by centralizing all icon definitions in one place.
• Makes updates easy by changing the icon once instead of hunting through the codebase.
• Reduces bundle size by avoiding duplicate icon code and unused glyphs.
• Improves accessibility with consistent alt text and ARIA labels.

Tradeoffs

• Requires upfront setup to establish the icon system and component API.
• Can be restrictive if designers need one-off custom icons not in the system.
• May bloat bundle size if all icons are bundled instead of code-split.
• Needs maintenance to keep the icon library up to date with design changes.