skip to content

In an icon system, what are the canvas, live area and padding, and why is every icon drawn on the same canvas?

level: juniorimportance: should knowfreq 34%

answer

  1. one square for every icon
  2. inner zone for the main shapes
  3. a margin that keeps shapes off the edge
  4. swap icons without shifting layout
  5. reach into padding only on purpose

basics

~20 s

The canvas is the fixed square every icon is drawn on, the live area the inner zone for its main shapes, and padding the margin between them. A shared canvas lets any icon align and swap in controls without per-icon nudging.

solid answer

~40 s

The **canvas** is the square every icon in the set is drawn on, commonly 24 by 24 units. The **live area** is the inner region where the icon's main shapes sit, and the **padding** is the margin between the live area and the canvas edge, often around 2 units, though sets differ. Drawing every icon on the same canvas, whatever its shape, means a tall meter icon and a wide payment-card icon occupy identical boxes: they align in buttons, table rows and text lines, swap without shifting layout, and scale together. Padding keeps shapes from touching neighbours or being clipped and leaves room for optical adjustments; a shape may reach into it sparingly when that makes it look balanced with the rest of the set, but never to the canvas edge.

go deeper

for a junior

Recall the three zones, canvas, padding and live area, and why every icon keeps the full shared canvas when exported.

for a middle

Explain how a shared canvas gives predictable alignment, swapping and spacing, and why the live area is a guide that allows deliberate reaches into padding.

for a senior

Show how you would review contributed icons against the canvas, spot trimmed or overfilled ones, and decide when a reach into the padding is justified.

for a principal

Weigh one canvas for the whole set against separate frames for special icon families, and what either choice does to consistency across products.

## The three zones of an icon Every icon in a well-built set is drawn on the same framework of three nested zones: | Zone | What it is | What goes there | |---|---|---| | **Canvas** | the full square the icon is drawn on, for example 24 by 24 units | the whole icon, including empty space | | **Padding** | the margin between the canvas edge and the live area, for example 2 units on each side | normally nothing; occasionally a small, deliberate overshoot | | **Live area** | the inner region, for example 20 by 20 units | the icon's main shapes | The exact numbers vary between icon sets; the structure is what matters. A **unit** here is an abstract grid step that maps to one pixel at the set's base size. ## Why one canvas for every icon In a utility company's billing portal, icons appear in navigation (bills, payments, usage), in table rows (a meter reading, a paid or overdue status), in buttons (download a statement) and inline with text (a due-date calendar next to "Due 14 March"). If each icon had a canvas cut to its own shape, every placement would need adjusting. A shared canvas gives: - **Predictable alignment.** Every icon occupies the same box, so it centres in a button and sits on a text line the same way as every other icon. - **Swappable icons.** Replacing the electricity icon with the gas icon in a usage tab does not move anything, because both boxes are identical. - **Consistent spacing.** The gap between an icon and its label is measured from the canvas edge, so it is the same for a thin tall icon and a wide one. - **Coherent scaling.** When the set is shown at another size, every icon scales from the same box, so relative sizes stay intact. The shared canvas is also what makes the set feel like one family: shapes of different outlines still read as belonging together when they share the same bounding frame and the same breathing room. The same holds across platforms: whether a web page, a native app or a printed bill insert uses the icon, the canvas travels with it, so every consumer positions it the same way. ## What the padding is for Padding is not wasted space: 1. **Separation.** It keeps shapes from touching neighbouring icons, labels or a control's border when icons sit close together. 2. **Clipping protection.** Shapes that run to the very edge can be cut off by rounding or by containers that crop their content. 3. **Room for optical adjustment.** Some shapes need to extend slightly beyond the live area to look as large as their neighbours, and the padding absorbs that. That third point is why the live area is a guide rather than a wall. A lightning bolt for the electricity tab, with its long diagonal tip, may reach a little into the padding so it does not look smaller than the round water-drop icon beside it. The usual rule is: reach into the padding **sparingly and deliberately**, for optical balance, and **never to the canvas edge**. ## Using the zones in practice 1. Start each new icon from the set's template, which shows the canvas, padding and live area. 2. Place the main shape inside the live area, using the set's keyline shapes as guides for its proportions. 3. Check the icon beside several existing ones at its base size, not only zoomed in. 4. Justify any reach into the padding by what it fixes visually, and record it in review. ## Pitfalls - **Cropping the canvas to the shape.** An icon exported with its canvas trimmed tight around the drawing loses its padding and sits differently from every other icon. - **Filling the live area edge to edge with every icon.** Filling the box does not make icons look equal in size; round and triangular shapes look smaller than squares that fill the same area. - **Treating the padding as spare space.** Pushing details into it routinely makes the set look cramped and uneven. - **Confusing the canvas with the tap area.** The canvas is a drawing frame; how large the tappable region around an icon is belongs to the control that contains it.

  • Why should an icon's canvas never be trimmed tight around its drawing on export?
    Because consumers position and space icons by their box. A trimmed icon has a different box from every other icon, so it sits off-centre in buttons, misaligns with text and changes the gap to its label. Keeping the full canvas, empty padding included, means every icon has the same box and every placement behaves the same.
  • Is the canvas the same thing as the touch target of an icon button?
    No. The canvas is the frame the icon is drawn on; the touch target is the interactive area of the control that contains it, which is usually larger than the icon and is specified by the control. Treating the canvas as the target leads either to tiny tap areas or to icons drawn oversized to compensate.

saying these in an interview costs you the question

  • Each icon's canvas should be cropped tight to its own shape.
  • Every icon should fill the live area edge to edge to look equal in size.
  • The icon canvas is the icon button's tap area.
  • Padding is wasted space that detailed icons should fill.
  • Shapes may freely extend to the canvas edge whenever they need room.