skip to content

In an icon grid, why is the circle keyline larger than the square keyline, and how do designers use keyline shapes?

level: middleimportance: should knowfreq 36%

answer

  1. equal box, unequal area
  2. a circle touches its box at four points
  3. four guide shapes on the grid
  4. pick the keyline that matches the outline
  5. guides, then judge by eye

basics

~20 s

A circle drawn in the same box as a square covers about a fifth less area, so it looks smaller. Keylines set the circle larger than the square, with portrait and landscape rectangles in between, so icons of different outlines look equally heavy.

solid answer

~50 s

**Keylines** are guide shapes on the icon grid, typically a circle, a square, a portrait rectangle and a landscape rectangle, each sized so that icons built on them **look** the same size. A circle drawn in the same box as a square covers roughly 21% less area, so it reads smaller; the circle keyline is therefore larger, about 13% larger in diameter for equal area. In one common 24-unit arrangement, the square is about 18 units and the circle about 20. Designers start each icon from the keyline matching its outline: a round due-date clock on the circle, a calendar on the square, a meter or statement on the portrait rectangle, a payment card on the landscape one. Keylines are guides, not rules: pointed shapes such as a warning triangle usually need to go further, and the final check is by eye against neighbouring icons.

code

pseudocode · 5 lines
pseudocode
equalAreaCircleDiameter(squareSide):
    return squareSide * 2 / sqrt(PI)      // about 1.128 x the side

// square keyline 18 -> circle about 20.3 -> designers settle near 20 by eye
// a circle inscribed in the square's own box (diameter 18) covers PI/4, about 78.5% of it

go deeper

for a junior

Recall the four keyline shapes and that the circle is drawn larger than the square so round icons do not look smaller.

for a middle

Explain visual weight and area, why pointed shapes need more compensation, and how optical centring differs from mathematical centring.

for a senior

Show how you would review a set where some icons look heavier or smaller, and fix them with keylines, overshoot and side-by-side checks.

for a principal

Weigh how strictly to hold contributors to keylines against allowing optical judgement, and how to keep a large, multi-author set balanced.

## The problem keylines solve If every icon in a set were drawn to fill the same box, they would not look the same size. The eye judges size by **visual weight**, roughly the area a shape covers and how much of its outline reaches the edges, not by its bounding box. Two effects matter: - A **circle** inscribed in a square box covers about 78.5% of the box's area (π/4), about 21% less than a square that fills it, and it touches the box only at four points. - A **triangle** covers even less, around half the box, and its points are thin, so it looks smaller still. The result: a circular icon drawn to the same box as a square icon looks noticeably smaller, and a triangular one smaller again. Typographers meet the same effect and let round letters such as "o" overshoot the baseline and cap height slightly; icon keylines apply the same idea to a whole set. ## The keyline shapes Keylines are guide shapes laid over the grid inside the live area. A typical set: | Keyline | Used for | Example in a utility billing portal | |---|---|---| | **Circle** | round outlines | due-date clock, account avatar, usage gauge | | **Square** | boxy outlines | calendar, grid of services | | **Portrait rectangle** | tall outlines | electricity meter, printed statement, mobile phone | | **Landscape rectangle** | wide outlines | payment card, envelope for paperless billing | The sizes are chosen so that each shape looks equally heavy: the circle is the largest in diameter, the square is smaller than the live area, and each rectangle runs its long side almost to the live area's edge while its short side is shorter than the square's. In one common arrangement on a 24-unit canvas, the square is about 18 units, the circle about 20, and the rectangles about 16 by 20. Sets differ; the relationships are what carry over. ## Where the numbers come from Equal-area arithmetic gives a starting point: for a circle to cover the same area as a square of side *s*, its diameter must be about 1.13 × *s*. With an 18-unit square, that is about 20.3 units, which is why many sets land near 20. Designers then adjust by eye, because perceived weight also depends on stroke, interior detail and how the shape sits next to others. ## How designers use keylines 1. **Pick the keyline that matches the icon's overall outline**, not its subject. A water drop is roughly round at the bottom and pointed at the top; it usually starts on the circle, with the point allowed to extend. 2. **Draw the main shape to the keyline**, then place interior details inside it. 3. **Compensate pointed and irregular shapes.** A warning triangle for an outage alert typically extends beyond the square and even into the padding so it looks as heavy as its neighbours. 4. **Check optical centre.** Shapes with lopsided weight, such as a play triangle or a speech bubble with a tail, look off-centre when centred mathematically; they are nudged until they look centred. 5. **Review in context.** Place the new icon in a row with existing round, square and tall icons at the base size, and adjust until none looks bigger or smaller. ## Pitfalls - **Treating keylines as rules.** An icon that matches a keyline exactly but looks wrong beside its neighbours is wrong; the keyline is a starting point. - **Choosing by subject instead of outline.** A "bill" drawn as a wide envelope belongs on the landscape keyline, not the portrait one used for printed statements. - **Filling the live area with every shape.** This is the error keylines exist to prevent. - **Ignoring stacked details.** Heavy interior details add weight; an icon with dense internal lines may need a slightly smaller outline to balance, which is judged by eye. ## Keeping a multi-author set balanced Keylines matter most when many people draw icons over years. A set that grows by contribution stays coherent when: - the template every contributor starts from shows the canvas, padding and all four keylines; - review always places a new icon in a row with established round, square, tall and wide icons at the base size; - documented exceptions, such as how far triangles may extend, are recorded once so the next contributor does not re-decide them.

  • Why do warning triangles usually break the keylines?
    A triangle covers only about half of its bounding box and ends in thin points, so even drawn to the largest keyline it looks smaller and lighter than round or square neighbours. Designers extend it beyond the square, sometimes into the padding, until it looks equally heavy. That is the keylines' own principle, equal visual weight, applied past their literal shapes.
  • What is optical centring, and when does an icon need it?
    Optical centring places a shape where it looks centred rather than where its bounding box is centred. Shapes with uneven weight, such as a play triangle whose mass sits to the left or a speech bubble with a tail, look off-centre when centred mathematically. Nudging them slightly toward the lighter side makes them sit correctly in buttons and circles.

saying these in an interview costs you the question

  • A circle and a square that fill the same box look the same size.
  • Keylines are strict rules, so an icon matching them is always correct.
  • The keyline should be chosen by the icon's subject, not its outline.
  • Centring a shape's bounding box always makes it look centred.
  • Every icon should use the square keyline for consistency.