Touch target size for icon buttons

A crisp 24px icon is easy to see but hard to tap. Guidelines recommend a touch target of at least ~44×44px, so you pad the button around the icon — the icon stays small, the hit area grows.

The numbers

• Apple recommends ~44×44pt minimum.
• Google Material recommends ~48×48dp.
• WCAG 2.2 sets a 24×24 CSS-pixel minimum, with spacing exceptions.

Pad, don't enlarge

Keep the icon at its designed size and expand the button's padding (or use a min-width/height) to reach the target. Users get a forgiving tap area without the icon looking oversized.

.icon-btn { display:inline-grid; place-items:center; min-width:44px; min-height:44px; }

Mind the spacing

Space adjacent icon buttons so users don't hit the wrong one. Cramped rows of tiny icons are a top cause of mis-taps.

Frequently asked questions