Entry 05

Icon sized by the text beside it

Use it on every icon that sits next to a label, in buttons, links, list rows and notices. The icon takes its size from the font, so it follows the text and never needs a size per variant.

Open

Each icon is as tall as the capital letters beside it and stands on their baseline, at all three sizes. Make the frame narrower until the notice wraps: its icon stays beside the first line.

Code CSS · 23 lines

.with-icon {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
}

.with-icon > svg {
  flex: none;
  block-size: 1cap;
  inline-size: auto;
}

.notice {
  display: flex;
  align-items: start;
  gap: 0.5em;
}

.notice > svg {
  flex: none;
  inline-size: 1em;
  block-size: 1lh;
}

Why it works, the rules and the credits 4 reasons · 6 rules · support · credits

Why it works

1cap is the height of the font's capital letters. An icon that tall reads as one more capital.
An svg has no baseline of its own. align-items: baseline rests its bottom edge on the baseline of the text, so the icon stands where a capital stands.
1lh is the height of one line. The second rule makes the icon's box as tall as the first line of the label, and the drawing centers itself in that box. The icon stays beside the first line when the label wraps.
A gap in em keeps the space in proportion.

Rules

Never size an icon in px. A 16px icon that matches 16px text is 5px to 7px shorter than the capitals of 32px text.
Keep flex: none. Without it a long label squeezes the icon.
The svg needs a viewBox. inline-size: auto then follows the drawing's ratio.
Many icon sets leave padding inside the drawing, and 1cap looks small on those. Raise the number and keep the unit, as in 1.2cap.
Do not use align-items: center on a label that can wrap. The icon then sits beside the middle line.
With Label centered on its letters with text-box the trimmed label is 1cap tall, so align-items: center lines the icon up with it at both edges.

Support

cap in Chrome 118, Firefox 97, Safari 17.2. lh in Chrome 109, Firefox 120, Safari 16.4. Tested in Chrome 150 and real Safari 27 on 2026-10-01, where the icon came out within 0.01px of the capital height at 16px and at 32px.

Credits

Borrowed from: Andy Bell, How I build a button component, 2024-09-18, for cap and flex: none, and LH units are cool, 2023-12-13 · Heydon Pickering and Andy Bell, The Icon, Every Layout

Docs: MDN: length units