Icon Systems

Consistency Rules

Grid and Size

• Design on a consistent grid (24x24 is standard for UI)
• Maintain consistent stroke width across all icons (1.5px or 2px)
• Same corner radius across the set
• Same optical weight (a circle and a square at the same pixel size look different)

Style

Pick one and stick to it:

• Outlined — Clean, modern, works at small sizes
• Filled — Bold, high contrast, good for active states
• Duotone — Two-tone fills, distinctive, higher complexity
• Outlined + filled pair — Outlined for default, filled for active/selected

Never mix styles in the same context.

Optical Sizing

• Circle icons appear larger than square icons at the same dimensions
• Compensate: make circles slightly smaller or squares slightly larger
• Horizontal icons (arrow) appear smaller than square icons (home)
• Some icons need padding adjustment to feel the same size

Metaphor Selection

Rules

• Use universally understood metaphors where they exist (trash can = delete, magnifying glass = search)
• Avoid metaphors that are culturally specific without testing
• Avoid skeuomorphic metaphors that no longer make sense (floppy disk for save)
• When in doubt, pair icon with text label

Common Metaphor Problems

• Hamburger menu: not universally understood, but too established to fight
• Heart vs star for "favorite": hearts imply emotional, stars imply quality
• Gear for settings: works, but consider "sliders" for adjustment-focused settings
• Bell for notifications: universal enough

Icon in UI

Sizing

• Navigation: 24px
• Inline with text: match x-height of adjacent text
• Action buttons: 20px with adequate padding
• Feature icons: 32-48px
• Decorative/hero: 64px+

Color

• Icons follow text color by default (use currentColor)
• Accent-colored icons only for primary actions or active states
• Avoid multicolor icons in UI (save for illustrations)
• Ensure 3:1 contrast ratio against background

Spacing

• Icon to label: 8px minimum
• Icon-only buttons: include aria-label, minimum 44px touch target