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 — view on the web 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:…