Icon Sizes
A semantic icon size scale designed to complement text and UI elements. Provides the right size for every button and context.
Size Scale
6-step semantic icon size scale from 12px to 32px
2xsxssmmdlgxl2xs12pxBadge
xs14pxSmall button
sm16pxStandard button
md20pxIconButton
lg24pxCard, nav
xl32pxHero
| Icon | Token | Size | Use case |
|---|---|---|---|
iconSize.2xs | 12px | Badge | |
iconSize.xs | 14px | Small button | |
iconSize.sm | 16px | Standard button | |
iconSize.md | 20px | IconButton | |
iconSize.lg | 24px | Card, nav | |
iconSize.xl | 32px | Hero |
Icon + Text Alignment
Recommended icon size and gap combinations for each text size
Label
SizeXS / SM
Icon
14pxGap
gap-1 (4px)Label
SizeDefault / LG
Icon
16pxGap
gap-2 (8px)Label
SizeXL
Icon
20pxGap
gap-3 (12px)Usage Guidelines
Recommended icon sizes for each context
iconSize.2xs(12px)Badge icon, small indicator
iconSize.xs(14px)xs/sm buttons, tags
iconSize.sm(16px)default/lg buttons, form elements
iconSize.md(20px)IconButton, navigation
iconSize.lg(24px)Large icons, cards
iconSize.xl(32px)Empty states, hero sections
| Sizes | Value | Use case |
|---|---|---|
iconSize.2xs | 12px | Badge icon, small indicator |
iconSize.xs | 14px | xs/sm buttons, tags |
iconSize.sm | 16px | default/lg buttons, form elements |
iconSize.md | 20px | IconButton, navigation |
iconSize.lg | 24px | Large icons, cards |
iconSize.xl | 32px | Empty states, hero sections |
Best Practices
✓
Do
- ✓Use icon sizes proportional to text size
- ✓Ensure a minimum 24×24px touch target (WCAG 2.5.8)
- ✓Keep sizes consistent within the same context
- ✓Set an appropriate gap between icon and text
✕
Don't
- ✗Icons that are too large relative to text
- ✗Mixing different sizes within the same component
- ✗Arbitrary sizes outside the scale
- ✗Distorting icons (changing aspect ratio)