Icons
Last Updated: June 2025Icons provide quick, scannable cues that support actions, reinforce meaning, and improve wayfinding. They should be used sparingly, consistently, and only when they add clarity. Icons are not decorative elements — they serve functional intent across the product.
Usage
linkWhen to use
- •Helps users identify common actions (edit, delete, filter, download).
- •Reinforces status or feedback (success, warning, error).
- •Improves scannability in dense interfaces.
- •Shortens labels where space is limited without reducing clarity.
When not to use
- •A text label is clearer.
- •The meaning is ambiguous or relies on cultural assumptions.
- •It duplicates existing visual information.
- •It adds noise or distracts from primary actions.
| Size | Value | Recommended use | Avoid when |
|---|---|---|---|
| star | 12px | Dense labels, badges, micro UI | Standalone icons, interactive targets |
| star | 16px (default) | Inline with text, buttons, form fields | Navigation items or large surfaces |
| star | 20px | Navigation items, slightly prominent icons | Tight inline contexts |
| star | 24px | Section headers, feature callouts | Body text inline, small buttons |
Examples
linkButtons & Actions
Icons paired with labels improve recognition and reduce ambiguity.
Navigation
Icons help scanning and category recognition, especially in left-nav patterns.
Inline with Text
Status and category icons work best when they add clarity — not decoration.
Color
link- •Use semantic color tokens (success, warning, error, info) for status icons.
- •For all other icons, use neutral foreground tokens.
- •Avoid hard-coded hex values.
- •Ensure color contrast meets WCAG 2.2 requirements (non-text contrast 3:1).
Best Practices
linkDo
- •Pair icons with text when clarity may be lost without a label.
- •Place icons where users expect them (leading in lists, beside labels).
- •Provide accessible names or mark decorative icons as aria-hidden="true".
Don't
- •Use icons purely for aesthetics.
- •Scale icons disproportionately.
Accessibility
linkSemantics
- •Icons must have an accessible name unless decorative.
- •Decorative icons must be marked with aria-hidden="true".
Meaning
- •Icons should not rely on color alone — pair with text or supportive context.
- •Provide alt text based on the purpose (e.g., "Task completed"). Avoid describing artistic details.
Contrast
- •Icons must meet the WCAG 3:1 non-text contrast requirement.
WCAG Compliance Standards
Q&A
linkWhat size should icons be?
16px is the default. Use 20–24px for navigation and larger surfaces.
Should icons ever be used alone?
Only when the meaning is universally understood (trash, search, close).
When should I use filled icons?
Use filled/bold icons at 16px or smaller for sharper rendering.
Can I recolor icons?
Use only semantic or neutral foreground tokens — never custom hex values.
Can we request new icons?
Yes. Submit a request via the Material Symbols library or open a ticket.