Icons that look the same size aren't the same size

A bounding box is the smallest rectangle that fits around a shape. It's what your design tool shows you, and what CSS lays out. But your eye doesn't see the box. It sees the ink inside it.

A square fills its whole box. A circle in the same box leaves its four corners empty, and only covers π/4 of the area, about 79%. A triangle with the same width and height covers exactly half.

So the circle has about a fifth less ink than the square, and the triangle half. That's the size difference you see. The shapes with less visual mass look smaller.

The obvious fix is to make every shape the same area. Push the demo to 100% and you'll see why nobody does exactly that. The circle looks about right, but the triangle has to grow 41% to match, and now it probably looks too big.

Area isn't quite what you perceive either. A triangle's area is spread into a thin point, and thin points don't count for much. So the real correction sits somewhere between same box and same area, and where exactly is judged by eye.

Icon systems turn that judgement into a grid. Material Design's system icons sit on a 24dp square, with 2dp of padding around a 20dp live area where the drawing goes. Inside that, Material's icon guidelines give a keyline shape for each basic form.

Circle20dp across: 314 dp²

Square18 × 18dp: 324 dp²

Portrait16 × 20dp: 320 dp²

Landscape20 × 16dp: 320 dp²

The square is only 18dp. The circle gets the full 20dp. So in a well-made Material icon, a round shape is drawn 11% wider than a square one.

The guidelines only say keylines give icons "a consistent visual proportion". But do the arithmetic and the reason is plain. The four shapes come out at almost the same area. It's the same correction as the demo, rounded to whole units of the grid.

Look closely at a capital O next to an H. The O is taller. Its top rises above the cap height, the line the flat tops of H, E and T sit on. Its bottom dips below the baseline, the line letters sit on.

This is called overshoot. A curve only touches a line at a single point, so if an O stopped exactly at the line, it would look too short. Type designers push round and pointed letters past the lines so they look like they reach them. The point of an A or a V does the same thing.

The amounts are small. In Helvetica, measured in Chrome on macOS, the O goes about 2% of the font size above the H and about 2% below the baseline. At 16px that's a third of a pixel. You'd never point at it, but take it away and the O looks small.

Icon designers do the same thing at a larger scale, because icons are bigger than letters and their shapes differ more.

Size is half the problem. Position is the other half.

A play icon is a triangle pointing right. Centre its bounding box in a round button and it looks like it's sitting too far left. Try it.

The triangle's flat side is on the left and its point is on the right. Most of its area is on the left, so even with the box centred, the mass is off to the left.

The geometric fix is to centre the centroid instead, which is the point the shape would balance on. For a triangle, it's a third of the way in from the flat side. The box's centre is halfway. So the shift is the difference between a half and a third, a sixth of the triangle's width.

// Triangle pointing right, width w, bounding box centred.
// The centroid is w/3 in from the flat side; the box centre is w/2.
const shift = w / 2 - w / 3; // = w / 6, to the right

As with area, the full geometric correction can go too far, because the thin tip carries less visual weight than its area suggests. Treat the centroid as the limit, not the target, and judge the final position by eye. That's what the slider is for.

Apple describes the same rule in its 2025 design system session: "views are mathematically centered when it makes sense — and subtly offset when it doesn't."

SF Symbols, Apple's icon set, is designed to sit next to text. So it's built against type metrics rather than a plain square box. Per Apple's Human Interface Guidelines, each symbol's nine weights match the nine weights of the San Francisco font. Its three scales are defined relative to the font's cap height.

That means a symbol's size is decided by how it looks beside a capital letter, not by fitting a box.

For horizontal alignment, symbols can also have negative side margins. Apple's example is a folder with a badge. The badge makes the symbol wider, but you want the folder itself to line up with the folders above and below it. So the margins let the badge hang outside the alignment edge. It's the same idea as letting a full stop hang outside a centred headline.

When you build an icon set, use a keyline grid, and draw round shapes larger than square ones. Don't trust a centred bounding box for anything lopsided: play icons, arrows, chevrons, speech bubbles with tails.

When you use someone else's set, don't "fix" it. If an icon's circle pokes past the square next to it in the inspector, that's the correction working. Scaling things back to matching boxes undoes it.

And when two things look the same size, they usually aren't. Somebody made them different on purpose.