Welcome to the first edition of Iconic. One idea, one tip, one asset. Five minutes. Let's go.
The big idea: your eyes don't do math
Place a play button inside a circle, perfectly centered. It looks wrong — like it's sliding off to the left. Nudge it right by one pixel and suddenly it feels centered, even though the numbers now say it isn't.
That's the difference between mathematical centering and optical centering, and it's the single most common reason icons look "off" in otherwise clean UI. Triangles, arrows, and asymmetric glyphs carry their visual weight away from their geometric center. Your eye balances mass, not bounding boxes.
The second culprit is inconsistent visual size. A 24×24 circle looks bigger than a 24×24 triangle, because it fills more of the box. Icon designers solve this with keylines: a circle sits inside a slightly smaller circle guide, a square inside a slightly smaller square guide, and tall/wide shapes get their own rectangles. Same bounding box, different fill — equal perceived size.
The third is pixel fitting. If a 2px stroke lands on a half-pixel coordinate (x = 11.5), the renderer anti-aliases it into a blurry 3px smear. Crisp icons keep strokes on whole pixels at the size they'll actually render.
The 30-second fix, whenever an icon feels wrong:
Zoom to 100% — judge at render size, never at 400%.
Check the shape sits on the keyline for its silhouette, not just centered in the box.
Check strokes land on whole pixels.
Nine times out of ten, it's one of those three.
60-second tip
Judge icons at the size they'll ship. Design tools default you to 400% zoom, where everything looks fine. Add a 100% preview frame next to your working frame and glance at it after every change. What survives 16px is good; what only works at 400% isn't.
Steal this: the Icon Grid & Keyline template
This week's asset is a Figma template with the full 24px icon grid: keyline shapes (circle, square, portrait, landscape), a 2px-stroke starter set, pixel-fit checkpoints, and 100%-preview frames wired up. Drop any icon in and you'll see instantly whether it sits right.
If you're pulling icons rather than drawing them: when you grab one from IconBuddy, set the exact size you need before downloading — an icon exported at its render size stays pixel-fit, while one scaled later in your design tool usually doesn't.
Before you go
What's the one icon in your app you've never been happy with? Hit reply and tell us — we're collecting these for a future "roast my icons" edition, where we redraw a reader's, before/after and all.
See you next Tuesday. — Iconic, by IconBuddy