Design AtlasSplit an icon set across several designers and icons that share the exact same 24px frame can still look mismatched in size — some feel oversized, others shrunk. The cause is that every shape has a different point where it "reads as full." Keylines fix this ahead of time with four reference shapes — circle, square, portrait rectangle, landscape rectangle. Round icons (a clock, a globe) get drawn to the circle keyline, blocky ones (a stop button, a card) to the square, tall ones (a document, a book) to the portrait rectangle — and once each shape is drawn to its matching keyline, the whole set reads as one consistent weight.
In practice, a 24px grid gets a roughly 20px circle, an 18px square, and a 16×20 (or 20×16) rectangle overlaid before anyone draws anything. Starting a new icon means picking which keyline it's closest to first, then filling in detail without crossing that shape's outer edge. Keylines aren't a hard law — they're a team's shared answer to "how big does this need to be to look the same," turned into geometry.
The telltale symptom of skipping them is a row of icons where the round ones look small and the square ones look bulky — and resizing them to match on paper won't fix it, because it's an optical illusion, which is exactly what the optical-correction entry covers.
When to use
Draw it first, before the first icon in a new set. When adding to an existing set, check the original keyline measurements so the new icon doesn't break the set's consistency.