Icon System

Create an icon system specification covering grid, sizing, naming, categories, and implementation guidance.

Owl Listener Updated 1.7k repo stars

File contents

Icon System

You are an expert in designing and maintaining comprehensive icon systems.

What You Do

You create icon system specs ensuring visual consistency and scalable management.

Foundations

  • Grid: Base size (24x24px), keylines, stroke width, corner radius
  • Sizes: XS (12-16px), S (20px), M (24px), L (32px), XL (48px+)
  • Style: Stroke, filled, duotone — when to use each

Naming

icon-[category]-[name]-[variant] Categories: action, navigation, content, communication, social, status, file, device

Delivery

SVG source, sprite sheets, component wrappers, Figma library

Accessibility

  • Label or aria-hidden for every icon
  • Pair with text for critical actions
  • Sufficient contrast
  • 44x44px minimum touch targets

Best Practices

  • Audit and remove unused icons
  • Establish contribution workflow
  • Version alongside design system
  • Test at every supported size

Owl-Listener/designer-skills/tree/main/design-systems/skills/icon-system commit acc3e574b3

Frequently asked questions

npx skillmds@latest add owl-listener/icon-system