Keyline

Keylines are the fixed geometric boundaries inside an icon grid live area that force circles squares and rectangles to sizes that deliver identical visual weight at UI scales. On a 24 pixel canvas the live area is 20 pixels after you subtract 2 pixels of padding on every side. Inside that live area sit four permanent keylines. Folders documents and cards lock to an 18 by 18 square. Suns alerts and avatars lock to a 20 by 20 circle. Batteries phones and vertical lists lock to a 16 by 20 tall rectangle. Search bars messages and sliders lock to a 20 by 16 wide rectangle. These numbers exist because the eye sees a circle at 18 pixels as noticeably smaller than a square at 18 pixels. The extra room on the circle keyline corrects that illusion before any stroke weight or corner radius gets applied. Triangles need even more help so their keyline often gets an extra pixel of breathing room to stop them looking starved next to everything else. Once the keyline is set your 1.5 or 2 pixel stroke weight your 1 pixel corner radius and your filled versus outlined variants all snap to the same boundaries. The keyline turns every subsequent decision into muscle memory instead of fresh debate. Teams that treat keylines as sacred report that new icons take 40 percent less time because half the choices are already locked.

A keyline is not the outer 24 pixel artboard you hand to engineering. That is just packaging. A keyline is not a loose suggestion you nudge when one icon feels too tight on a Tuesday. It is not interchangeable with optical correction. You draw hard to the keyline first then you shift the result by one or two pixels because the eye cares more about perceived balance than perfect math. A keyline is not optional once your library clears 25 icons or your team grows past one designer. Without it the second designer freehand traces a new symbol at the wrong scale the third grabs something from a random pack and by month six your navigation reads like four different brands stitched together. A keyline is not something you invent per icon or hide inside one Figma file. It is a documented non negotiable rule that lives next to your stroke token and your contribution process.

Concrete example. Figma refreshed its entire interface in 2024 and the play button shows exactly how keylines work. The outer button follows the 20 pixel circle keyline. The inner triangle first snaps to an 18 pixel square keyline then gets shifted two pixels right so it reads as centered at 16 pixel scale. Without the keyline the triangle would sit mathematically dead center and look like it leaned left in the sidebar. The keyline gave every future contributor a repeatable box instead of forcing them to eyeball it. Stripe did the same thing in their 2025 dashboard overhaul. Their receipt icon locks to the exact 18 pixel square keyline as their existing document icon. Both appear side by side in dense tables yet carry identical visual mass. New hires open the keyline spec on day one and the Figma library contains locked frames that turn red if you draw outside them. Lucide follows the identical discipline in open source. Their 1000 plus icons stay coherent because every pull request gets rejected if the paths do not match the published 18 by 18 square or 20 by 20 circle keylines. The governance is brutal and the library survives hundreds of contributors.

Use keylines the moment your icon count heads past 30 and more than one person will touch the files. Use them in dense dashboards toolbars and sidebars where twelve icons sit at 16 or 20 pixels and any drift screams cheap. Use them when you audit your product and notice some symbols feel heavier than their neighbors at actual UI sizes. They become the enforcement tool at code review so engineers can reject SVGs that ignore the boundaries before the visual debt compounds. Linear and Vercel both run their entire 2026 icon systems on strict keylines and the coherence shows even after multiple product refreshes.

Skip keylines for isolated marketing illustrations hero graphics or app icons that never share space with siblings. They add overhead with zero payoff on print work or one off social assets. Never define keylines if your team has no intention of documenting them enforcing them or tying them to a contribution process. A keyline that lives only in one designer head is the same as no keyline when crunch time hits and someone ships a free pack hamburger menu at the wrong weight.

Keylines turn icon design from creative expression into disciplined engineering so your UI does not age like milk.