Keylines explained: circles, squares and safe areas

Put a round coin logo and a square exchange logo in the same 24 by 24 box, both touching the edges, and the square looks noticeably bigger. A keyline template is the standard fix: a small set of guide shapes that tells you how large each kind of shape should be so that, side by side, they all look the same size.

This guide walks through the template layer by layer, gives you one you can use, and shows how to apply it to crypto logos, where round coins, square app-style marks and tall or wide symbols all end up in the same list.

What a keyline template contains

A template is a stack of guides drawn on the icon canvas. The arrangement below, on a 24-unit canvas with 2 units of padding, is the one Material Design popularized for system icons, and you'll find variations of it behind many icon sets.

Some crypto icon sets use a wider margin. The Web3 Icons artwork, for instance, keeps nearly every mark inside the central 18 units of its 24-unit canvas, a 3-unit margin. The same template works at that scale: an 18-unit live area, an 18-unit circle, a 16-unit square and 14 by 18 rectangles.

Why the square is smaller than the circle

The numbers in the template aren't arbitrary. They roughly equalize area.

A circle 20 units across covers about 314 square units. An 18-unit square covers 324. Those are close, and close area is a good proxy for "looks the same size." A square that filled the full 20 by 20 live area would cover 400 square units, about 27% more than the circle, and it would look it.

The rectangles follow the same logic. A 16 by 20 rectangle covers 320 square units, right in the same range. In the 3-unit-margin version, the 18-unit circle covers about 254 square units, the 16-unit square 256 and the 14 by 18 rectangles 252.

Area isn't the whole story. A circle also touches its bounding box at only four points, leaving the corners empty, and the eye reads straight edges as more "present" than curves. Optical balance covers those effects and the overshoot corrections that go with them. The keyline template bakes in a sensible first answer so you don't start from zero on every icon.

A template you can use

Here's the 2-unit-padding template as an SVG. Open it in a browser at a large size, or import it into your design tool as a locked layer above your artwork. Hairline strokes keep it readable at 20x zoom.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="480" height="480"
     fill="none" stroke-width="0.05">
  <rect width="24" height="24" stroke="#888"/>
  <rect x="2" y="2" width="20" height="20" stroke="#d33"/>
  <circle cx="12" cy="12" r="10" stroke="#38f"/>
  <rect x="3" y="3" width="18" height="18" stroke="#38f"/>
  <rect x="4" y="2" width="16" height="20" stroke="#2a2"/>
  <rect x="2" y="4" width="20" height="16" stroke="#2a2"/>
  <path d="M12 0V24M0 12H24" stroke="#bbb"/>
</svg>

Gray marks the canvas, red the live area, blue the circle and square, green the two rectangles, and the light gray cross the center. For a 3-unit margin, change the live area to x="3" y="3" width="18" height="18", the circle to r="9", the square to x="4" y="4" width="16" height="16", and the rectangles to x="5" y="3" width="14" height="18" and x="3" y="5" width="18" height="14".

Applying it to crypto logos

Logos weren't drawn on your template, so the work is matching each one to the right guide shape.

1. Classify the mark. Token logos are very often coins, and those go on the circle. Many wallets and exchanges present themselves as square app-style tiles, so they go on the square. Ethereum's diamond is tall and narrow, so it goes on the portrait rectangle. A broad mark goes on the landscape rectangle.

2. Watch for pointed and rotated shapes. A shape made of points, like a square rotated 45 degrees or a triangle, covers only half of its bounding box. Binance's mark, which forms one large diamond overall, is a good example: its tips can reach the edges of the live area without the mark looking oversized.

3. Scale to the guide. Lock the aspect ratio and scale until the mark's outer edge meets its keyline. For irregular marks, use the shape that best matches the overall mass, not the extreme points. A single thin spike shouldn't decide the scale of the whole mark.

4. Center, then check by eye. Center on the canvas, then look at it beside its neighbors at the size you'll actually ship. Some marks need a nudge, which is a question of optical center rather than keylines.

5. Compare in a row. Put five or six icons of different shapes in a line at 24 px. If one jumps out as bigger or smaller, adjust that one and look again.

Safe areas and when to cross them

The padding exists for good reasons, and they're mostly about what happens around the icon.

• Badges need room. Wallets often overlay a small chain badge on a token icon's corner. If the token fills the canvas, the badge covers part of the mark. See network badges for that pattern.
• Focus rings and selection outlines drawn tight around the icon box need a gap from the artwork.
• Cropping. If an icon is ever clipped to a circle or a rounded square, anything in the corners is the first thing lost.
• Neighbors. In a dense grid, icons sit almost edge to edge. The padding is what keeps two marks from visually touching.

A common rule of thumb: small parts may cross the live area edge, such as a pointed tip or a round shape's overshoot, but nothing crosses the canvas edge, and nothing important lives in the padding.

Tile-style icons work differently. When the mark sits on its own colored tile, the tile fills the whole canvas and the mark gets a smaller inner live area. In the Web3 Icons background style, the tile covers all 24 units and the mark sits in roughly the central 16.

Keylines are a starting point

A keyline template gets simple shapes to equal visual size. Complex logos need judgment on top: a dense, solid mark can sit a unit inside its keyline, while a light, open mark may need the full extent. Use the template to make the first placement consistent and fast, then let your eye make the final adjustments. And whether every icon in a view should share one container shape is a separate decision, covered in circle or square containers.