Icon-plus-text spacing and alignment need one consistent system

What it is

The gap between icon and type, their shared midline, and whether the icon sits at the start or the end, must follow one set of measures across the product. That set is the spacing and alignment system. One button with the glyph kissing the word, the next with half a character of air, a third with the icon on the right, and the scan reads different families; the locating accelerator dies. What is unified is geometry, not making every button the same width.

Why it happens

People take repeating geometry as evidence that these are the same class of button. A gap that jumps looks like two groups. If icon and type are aligned by bounding box rather than optical mass, some glyphs sit high (an arrow) and some sit low (a magnifying-glass handle), and the row dances. When start/end side is not shared, the reading origin has to be found again each time, the silhouette of the pair is unstable, and search memory cannot form. Optical alignment often needs the icon slightly off the type’s mathematical center to cancel empty pixels in the drawing; if every feature team nudges it once, product-level repetition falls apart.

Where it stops holding

RTL mirrors “icon on the start side of the type”; that is the same rule, not a second system. An icon-only button has no type to gap, but it should share the labeled button’s outer height so a mixed row does not jump. Mixing 24 and 16 px glyphs cannot be saved by one gap; unify glyph size first. A large marketing button may be bigger, but its inner icon-type relation should keep the same ratio rather than inventing a new kiss.

Applying it

• State a fixed icon-type gap, a shared optical vertical midline, and “icon on the start side of the type,” and use them on every labeled button.
• Do not stop at bounding-box vertical centering; apply a visually corrected offset in the component, not as a per-feature nudge.
• When mixing icon-only and labeled, keep outer height; the only thing allowed to disappear is the word, not the height after the word is gone.
• Verify by wireframing a row: icon leading edges on one vertical, type baselines on one line, gaps equal. Two gaps or two start/end directions means geometry is not unified.

Related

• Within the group: E1.13.1 On a labeled button the icon aids recognition; it does not carry meaning alone · E1.13.2 When icon and type conflict, people follow the type · E1.13.3 In a narrow space keep the type, not the icon alone
• Adjacent: F6.03 Icon style consistency · F4 Typography · E1.15 Button width and flex
• Search terms: optical alignment · icon text gap · button metrics