Icon alignment and optical weight: why your icons look misaligned

Set a batch of icons all to 24×24 and align them to the frame, and they still look uneven — some too big, some sitting high, some off to the left. Nothing is wrong in the code: the eye judges alignment by visual weight, not by bounding box.

Contents

• Geometric equality is not visual equality
• Baseline, padding and optical centre
• A quick test page for verification
• Fix at the source, not with margins
• Why pixel-grid alignment alone is not enough

Geometric equality is not visual equality

Inside the same 24×24 box, a square nearly fills it, a circle leaves space all round, and a triangle is more concentrated still. To make all three look the same size, the circle and triangle need to extend slightly past their geometric bounds (overshoot). Most mature icon libraries build that compensation in, which is exactly why cross-library mixing gives itself away.

• Circles and triangles usually need to extend a little to match a square
• Align by visual size when picking; do not trust width/height alone
• Take from one library where possible so the compensation rules match

Baseline, padding and optical centre

In a button with text, an icon should be centred on the text's x-height, not on the line box's geometric centre; icons next to numerals or capital letters often need a 1px nudge up. In a row of icons, check that the padding all round is consistent — many libraries place the artwork inside a 2px inset on a 24 grid while others bleed to the edge, and mixing them produces a ragged baseline.

• Align to the optical centre when mixing with text; do not blindly use align-items: center
• Keep keylines and padding consistent
• One canvas and one padding rule per row

A quick test page for verification

Build a single throwaway page: a row of icons at the target size, a row next to real interface text, and the same set on light and dark backgrounds. This catches most alignment problems in under a minute. If a particular icon looks wrong, print the SVG at 400px and overlay a grid — you will usually find the artwork is not centred in its viewBox, rather than a CSS problem.

• Same-size row to check relative visual weight
• Mixed with text to check the baseline
• Light and dark backgrounds to check contrast and edge artefacts
• 400px blow-up with a grid overlay to find artwork that is off-centre in the viewBox

Fix at the source, not with margins

When one icon sits wrong, the temptation is margin-top: -1px. That patch then breaks at another size. The durable fix is to correct the artwork — re-centre the paths inside the viewBox, or replace the asset. If you cannot edit the asset, wrap it in a fixed-size container and position the inner SVG with a documented offset, so the correction is visible in the code rather than invisible in a pile of margins.

• Prefer correcting the viewBox over nudging with margin
• If patching, wrap in a container so the offset is explicit
• Record any per-icon correction in the component, not in page CSS

Why pixel-grid alignment alone is not enough

Snapping to whole pixels removes blur, but it does not fix optical weight. Two icons can both sit exactly on the grid and still look unequal because one has more solid area. Treat grid alignment as hygiene and optical alignment as the actual design work — they solve different problems, and skipping the second is why a set of technically-perfect 24px icons can still look sloppy.

• Grid alignment: removes blur and fractional pixels
• Optical alignment: equalises perceived size and weight
• Both are required; neither substitutes for the other

FAQ

← All SVG guides　·　Licence and usage FAQ →