THE INVISIBLE PART
A small study of interface geometry

Same icon.
3.36× the clickable area.

A 24px icon can sit inside a 44px button. The drawing stays small; the target grows. But give that extra space to two buttons at once, and one of them loses.

Look beyond the ink.3 layouts / 1 icon size
576
CSS px² per button box

A 24 × 24 target has the same footprint as its icon. Space beside the icon does nothing unless it belongs to the button.

Actual size / try a click or tap

Click beside the middle star. Which button owns that space?

Native buttons. Real hit areas.
Keyboard: Tab to an icon and press Enter.

A fixed 9 × 9 grid tests the browser at offsets from -20 to +20 CSS px around the star. These are geometry samples, not people.

Ready?
Try each layout with the same sample points.
StarNeighborEmpty

The drawing above is magnified. The live buttons below it use the stated CSS pixel dimensions.

More area, without a bigger icon.

Choose Add room, then show the outlines. The square grows from 24 × 24 to 44 × 44: 576 to 1,936 square CSS pixels. That is 3.36 times the area, with the same 24px drawing. Probe the star to see how much of the test grid it now catches.

24px

WCAG 2.2's AA target-size minimum, subject to exceptions including spacing. A small icon alone does not tell you the target size.

44px

The enhanced AAA target-size threshold, also with exceptions. Meeting this one dimension does not establish WCAG conformance.

24px ink

The artwork can keep its size. Put it inside a larger native button, and let the button own the padding.

The space can only belong to one button.

Choose Crowd them. The 44px boxes now sit only 32px apart, so neighbors overlap by 12px. In this demo, later buttons paint on top. The right button takes part of the star's intended area. The reported box size is still 44px, but the star does not own its whole box.

Probe it, then return to Add room. The repair moves the centers to 52px apart, leaving an 8px gap between 44px boxes. The row needs 148px instead of 108px. That extra width is the real design tradeoff.

Take the repair with you.

Use real layout space for each button. This CSS reproduces the repaired 44px targets, 24px icons and 8px gap. Give each icon button an accessible name; keep a visible keyboard focus indicator.

.icon-row {
  display: flex;
  gap: 8px;
}
.icon-button {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  border-radius: 0;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
}
.icon-button svg { width: 24px; height: 24px; }
.icon-button:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}
Inspect the most recent 81-point probe

Run a probe to record the actual owner at each position.

x offsety offsetActual owner