Safe starting point
16–24 px
Icon size
Applies to Mobile to large desktop
The size of the drawing, not of the tappable area. A 20 px icon in a 44 px button is normal: the icon is what people see and the button is what they hit.
- Mobile
- 20–24 px
- Tablet
- 20–24 px
- Laptop
- 16–20 pxSame as desktop
- Desktop
- 16–20 px
- Large desktop
- 16–20 pxSame as desktop
Depends on touch or pointer, the text size beside it, density. A starting point, not a correct value.
Common range 16 inline with text, 20 in controls, 24 in navigation and on touch
- 16
- Inline. Beside body text, in tables, in dense toolbars.
- 20
- Controls. Inside buttons and inputs. A good default.
- 24
- Navigation and touch. Tab bars, app bars and icon-only buttons on touch screens.
Why?
An icon should sit comfortably beside its label, so it follows the text size. The target around it follows the input method.
Common mistakes (3)
- Icons from two sets with different stroke weights.
- An icon scaled to an odd size so its strokes blur.
- The icon and the tappable area treated as the same size.
Official guidanceWCAGFluent
- WCAG
Graphics needed to understand content, and the visual parts of controls, need at least 3:1 contrast against adjacent colours.
WCAG 2.2, SC 1.4.11 Non-text Contrast(opens in a new tab)Standard requirement
Applies to all viewports
- WCAG
The pointer target must be at least 24 by 24 CSS pixels.
WCAG 2.2, SC 2.5.8 Target Size (Minimum)(opens in a new tab)Standard requirement
Applies to all viewports · touch and pointer input
- Fluent
Button icons must pass 3:1 contrast against their background in all interactive states.
Fluent 2, Button usage(opens in a new tab)Design-system convention