Skip to content

Aligning text with icons

Properly aligning SVG icons with text ensures a polished, professional UI. This guide explains the common baseline alignment issue and how to fix it for consistent, visually pleasing results.

TIP

See a live illustration in our Vite + React Example.

Final Result

Final result: text alignment with icons in different casesAbove: Examples of correct icon alignment in various text scenarios

The Problem

SVG-sprite-based icons are convenient for inline use with text:

However, SVG icons often shift the text baseline, causing misalignment:

Problem: icon shifts text baselineAbove: The icon is not visually centered with the text baseline, causing layout issues.

Browsers try to align the icon with the text baseline, but the result is often off, especially with different typefaces.

Why does this happen?

SVG icons are rendered inline with text, but their default alignment box and the way browsers handle SVGs often don't match the font's baseline and metrics. This causes the icon to appear slightly above or below the intended line, leading to visual misalignment.

  • SVGs are aligned to the text baseline by default, but their internal viewBox and lack of font metrics can cause them to "float" or "sink" relative to the text.
  • The problem is more noticeable with icons of different aspect ratios or when mixing with various font sizes.

Font layout differences

Most typefaces use the "1/8 rule": the font layout has 1/8 offsets from the top and bottom, but not all fonts are the same. This means the ideal alignment offset may vary by font.

Typeface layout: 1/8 ruleAbove: Typical typeface layout with 1/8 offset from top and bottom.

Different typefaces: offset variantsAbove: Different typefaces may require different alignment tweaks.

The Solution

To visually center your icon with text, apply a small negative vertical offset:

css
.icon {
  /* ...other icon styles... */
  vertical-align: -0.125em;
}
  • This aligns the icon visually with most text baselines.
  • For some typefaces, you may need to tweak the value (e.g., -0.1em or -0.15em).

Layout fix: icon visually centeredAbove: The icon is now visually centered with the text baseline.


Best Practices

References

Released under the MIT License.