Hit Targets

A tap target is not the icon. It is the area that answers to being touched, and with a mouse those two can be the same thing, because a cursor is one pixel with a visible tip. A finger is neither. It covers about a centimeter of glass and it hides the thing it is aiming at.

So the number that matters is the size of the area rather than the size of the glyph. A 16px close icon can stay 16px forever. What has to grow is the box around it. Apple puts the floor at 44pt and Google at 48dp, so 44px is the number to design to and anything under it is a decision rather than an oversight.

Keep the icon small and grow the target to at least 44px. They are two different measurements, and only one of them is visible.

The icon is identical in both, and that is the part worth holding onto. This is almost never a visual decision being traded away. It is padding nobody thought to add.

Two ways to get there

Padding, when the button can afford the space. A min-width and min-height of 44px with the icon centered inside is the whole fix, and it keeps the target and the visible control as one box.

A pseudo element, when the layout cannot spare it. An absolutely positioned before element with a negative inset extends the target past the button without changing what the button occupies, so a dense toolbar keeps its spacing and still takes a thumb.

Gaps count too

Two 44px targets pressed against each other still make a bad row, because the boundary between them has no tolerance at all. Leave a few pixels of dead space, so a tap that lands slightly wrong does nothing instead of doing the wrong thing. Delete sitting flush against save is the version of this that costs somebody real work.

The desktop version of the same mistake

A target that is only as big as its text is hard to hit with a mouse as well, just less obviously. The usual shape is a row that highlights on hover but only responds to a click on the label in the middle of it. If it looks like one control, all of it should be one control.