Size icons to their text

16px icons for 14px text, 20px for 16px, 24px for 18-20px.

From refactoring-ui, section 6, Images & Icons, and its Icon Usage reference.

Pair icon size to text size

Slide the text size; tick Auto to snap the left icon.

Icon picked onceBad
    Icon paired to textGood
      TextIconTailwind
      12px16pxtext-xs + w-4 h-4
      14px16pxtext-sm + w-4 h-4
      16px20pxtext-base + w-5 h-5
      18px24pxtext-lg + w-6 h-6
      20px24pxtext-xl + w-6 h-6

      One icon set, one stroke

      Tap a tab, then drag the right set's stroke.

      Mixed setsBad

      Home

      1 · 2.75 · fill · 2@28px · 1.5 square
      One setGood

      Home

      w-6 h-6 · stroke 2 · round caps
      .tab svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

      Icons that earn their place

      Tab through both bars to hear each button.

      Icons everywhereBad
      —
      Icons with a jobGood
      —
      <button class="btn">Submit</button>

<button class="icon-btn" aria-label="Delete">
  <svg class="w-4 h-4" aria-hidden="true">…</svg>
</button>

      Why it matters, pros and cons

      Why it matters

      An oversized icon carries more ink than its word and steals the eye. At about 1.2x the text size it reads as part of the label.

      Pros

      • Three sizes cover almost everything.
      • Rows keep one rhythm at any size.
      • Fewer glyphs make the rest noticed.

      Cons

      • Strokes thin out when a 24px icon shrinks.
      • Bold type may want the next size up.
      • Ambiguous icon-only buttons still need a visible label.