Iconography

Iconography

Material Symbols Outlined for UI affordances. Keep icons simple, sized to the control, and stick to the shared symbol set — no custom emblem packs.

Library

Load Material Symbols Outlined from Google Fonts. Prefer outlined glyphs for chrome; filled only when the control is selected or critical.

  • search
  • home
  • notifications
  • campaign
  • insights
  • trending_up
  • groups
  • mail
  • check_circle
  • warning
  • error
  • info
  • menu
  • close
  • chevron_right

Sizes

Match icon size to control density. Default UI chrome uses 20–24px; compact toolbars may use 16px.

  • 16px
  • 20px
  • 24px
  • 32px
  • 40px

Accessibility

Decorative icons get aria-hidden="true". Action icons need an accessible name on the control (visible label or aria-label). Never communicate status with color alone — pair with text or a distinct glyph.

Campaign live

Guidance

TokenValue
FamilyMaterial Symbols Outlined
Default size20–24px
Compact16px
Hero / empty state32–40px
ColorInherit from text tokens; success/error may tint