Use 44px touch targets

4 min read, 3 skills

A fingertip covers roughly 40–50px on a phone screen. Controls smaller than that cause missed taps, accidental taps on the neighbour, and frustration that people blame on themselves. Apple's guidelines ask for 44pt, Material asks for 48dp, and WCAG 2.2 sets a 24px minimum.

The visible icon can stay small. Grow the hit area with padding, or with an invisible pseudo-element, so the layout doesn't change:

css.icon-button { position: relative; }
.icon-button::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 44px;
  height: 44px;
  translate: -50% -50%;
}

Leave at least 8px between adjacent targets, and check that the pressed state shows feedback under the finger.