On alignment that looks wrong

At Moneybox, I built our custom icon library alongside the foundations of the design system. Working with icons gives you plenty of opportunities to see how a component can be laid out correctly and still look a bit off; every drawing brings its own shape and weight into the space you’ve given it.

Put an icon beside a label, centre both with flexbox and you can still end up with a button that looks slightly wrong. The browser has done what you asked. It’s just aligning rectangles, and the thing your eye is following might occupy a very different part of those rectangles.

I want to work through that distinction with a small play button. The example below shows three versions and lets you turn their boundaries on.

Interactive demo —

Find the rectangle you’re aligning

Here’s a reasonable starting point for the button layout:

.play-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.65em 0.9em;
  font: inherit;
  line-height: 1.25;
}

.play-button svg {
  display: block;
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

The explicit dimensions give the icon a predictable place in the component, whilst em lets it follow the button’s font size. Flexbox centres the SVG element and label box on the cross axis. None of that tells us whether the drawing inside the SVG is in the right place.

To see what those boxes are doing, add a temporary diagnostic rule:

.show-bounds .play-button svg {
  outline: 1px solid #b45309;
  background: rgb(180 83 9 / 10%);
}

.show-bounds .play-button span {
  outline: 1px solid #2563eb;
  background: rgb(37 99 235 / 8%);
}

The SVG outline shows the element’s viewport. The label outline shows the span’s box, including its line height. Neither traces the visible shape. That’s useful: it lets us see when the layout is doing its job and the problem is inside the thing being laid out.

For the deliberately faulty icon, the SVG has a wider coordinate space than the drawing needs:

The triangle extends from x=6 to x=18, so its horizontal bounds are centred at 12. The viewBox extends from 0 to 32, with its centre at 16. We’re giving the drawing more room on the right than the left.

The viewBox defines the coordinate region mapped into the SVG viewport. Here, we’re also fitting that wide region into the square element set by CSS. Before moving the whole icon around with a margin, I’d fix the coordinate space in this particular asset:

That puts the triangle’s bounds in the centre of the viewBox, so I can look at the spacing around it again without the extra space in the asset confusing things.

Don’t apply this crop indiscriminately to an existing icon set. Its common coordinate space may be intentional, and other paths, strokes or effects may need the space. The point is to inspect the asset before assuming the surrounding component is wrong.

Geometrically centred can still look unbalanced

The second version is mathematically centred by its bounds. A play triangle still has more filled area on the left, where its vertical edge is, than near its point on the right.

We can try moving the drawing slightly to the right inside its existing viewport:

Two viewBox units are deliberately noticeable in this teaching example. They put the filled triangle’s geometric centroid at the centre of the canvas. That gives us a candidate to compare, not a formula for human perception. Depending on the surrounding shape and weight, a smaller adjustment may look better.

The useful distinction is where the change lives. If this triangle looks misplaced everywhere, correcting the asset lets every use benefit. If it only feels wrong inside one particular button, the component’s spacing might be the better place to intervene.

For example, a leading icon may need slightly less outer padding on its side than the text has on the other. That’s a relationship between the control’s edge, icon and label. Moving the path inside the SVG won’t necessarily solve it, and copying a one-pixel translation into every consumer will make future adjustments unnecessarily laborious.

Check more than one word

Text introduces another rectangle to investigate. The span includes a line box, but the visible letters don’t fill it uniformly. Capitals, lowercase letters, ascenders and descenders distribute their shapes differently within that space.

I’d check Play, Play recording and a label such as Playing again. I’d also try another icon. If the whole collection looks too high beside the font, that suggests a shared relationship worth investigating. If one shape looks wrong and everything else holds together, it probably doesn’t justify shifting every icon.

Baseline alignment is useful when the relationship you want is typographic, particularly between different sizes of text. It isn’t an automatic cure for icons. An SVG doesn’t share the font’s cap height just because the element participates in baseline alignment, so you still need to look at the result.

In the example above, increase the text size and toggle the longer label. The icon dimensions and spacing scale with the type, whilst the optical correction stays inside the SVG’s coordinate system. Check at browser zoom too, where you may see a cramped control or wrapping problem that wasn’t apparent at the original size.

I’d leave a note with the adjustment too. If somebody comes back to that play triangle later, it helps to know why I moved it, especially if their first instinct is to tidy it back into mathematical alignment.

Turning the outlines on is usually a useful place to start. Once I can see which box I’m actually moving, I’ve got a much better chance of fixing the thing that looked wrong in the first place.