Back to Playbook

Icon Library

A curated library of icons to be used throughout the product. This ensures consistency and a shared visual language.

Why it matters

Icons are a universal language. A consistent library reduces cognitive load and speeds up recognition. Mixing styles (e.g., filled vs. outlined, different stroke weights) makes the UI feel broken and unprofessional.

Icon Playground

Test how icons render at different sizes, weights, and styles.

Core Sets

System Icons

Navigation, actions, and utilities (e.g., arrows, search, menu). Usually 16px-24px.

Feature Icons

Represent key features or object types. Usually 24px-32px.

Illustrative Icons

Used for empty states or onboarding. More detailed, often multi-color.

Brand Icons

Custom icons that reflect the brand's unique personality.

Selection Checklist

  1. Style Consistency

    Are all icons from the same family (e.g., Phosphor, Material)?

  2. Stroke Weight

    Do they match the typography weight?

  3. Scalability

    Do they remain legible at small sizes?

Previous: Cards Next: Usage Guidelines