In a design system, why do icons come in a small fixed set of sizes, and how is each size paired with a text style?
answer
- few sizes, each tuned
- no in-between sizes
- text role picks the icon size
- fits the line height
- align to the first line
basics
~20 sA small fixed size set keeps icons crisp, consistent and reviewable, since each size is tuned. Each icon size maps to a text style so the icon fits within that text's line height and centres on the line beside it.
solid answer
~50 sA design system offers a handful of icon sizes, commonly something like 16, 20, 24 and 32 units, because each size is **drawn or tuned** to render crisply, the sizes line up with the spacing and type rhythm, and reviewers can check a few sizes instead of every value teams invent. In-between sizes like 18 or 22 blur strokes and break pairings. Each size is then **paired with a text style**: the icon beside a caption is smaller than the icon beside a body label, and a common rule is that the icon's box fits within the paired text's **line height**, so adding an icon never makes a row taller. The icon is centred on the first line of its label, so it stays with the start of the text even when the label wraps. The table of pairings lives in the icon guidelines.
go deeper
Recall that icons come in a few set sizes and that the text style beside an icon decides which size it uses.
Explain why the set is small (tuned drawings, rhythm, reviewability) and why the icon fits within the paired text's line height and aligns to its first line.
Show you would publish a pairing table tied to the type scale and catch in-between sizes and uneven row heights in review.
Weigh adding a size step against the cost it adds to every icon's drawing, review and delivery across platforms.
## Why a fixed size set An icon's **size** is the size of its canvas, the square it is drawn in. A design system could let every team pick any size, but most mature systems restrict icons to a **small fixed set**. The exact values vary; a common shape is four or five steps such as 16, 20, 24, 32 and 48 units. The reasons are practical: - **Crispness.** Icons are drawn or tuned for the sizes in the set. At those sizes strokes fall where the designer intended; at an arbitrary in-between size they are scaled off spec and can render soft. - **Rhythm.** Set sizes are chosen to sit comfortably with the spacing scale and the type scale, so icons, text and padding line up. - **Reviewability.** Five sizes can be checked; forty ad hoc sizes cannot, and nobody notices when an icon drifts. - **Hierarchy.** A few distinct sizes read as intentional levels. Near-identical sizes, such as 20 and 22 on one screen, read as mistakes. The set is a convention that each system chooses for itself, not a standard anyone mandates; what matters is that it is small and fixed. ## Pairing each size with a text style Most icons sit next to text: a label in a list row, a button caption, a status line. The size of the icon should follow from the **text style it accompanies**, not from the space available. A pairing table makes this explicit. For a smart-home control app it might look like this: | Text role | Example | Paired icon size | Why | |---|---|---|---| | Caption | 'Updated 2 min ago' under a thermostat reading | Smallest step | Quiet metadata should not compete with the reading | | Body label | Room names in the device list | Middle step | Matches the label's weight and line height | | Title | A light tile's title | One step larger | The tile is a primary target and the title leads it | | Standalone navigation | Bottom navigation items | The set's standard size | Recognisable without competing with content | The exact pairings depend on the type scale, which another part of the design language owns. The icon guideline's job is to publish **which icon size goes with which text style**, so teams never guess. ## Fitting the line height A common pairing rule is that the icon's box **fits within the line height** of the text beside it. If the icon were taller than the line, every row containing an icon would grow, and rows with and without icons would end up at different heights. Keeping the icon within the line box keeps list rows even and makes the icon feel like part of the text rather than something bolted onto it. ## Aligning to the text Pairing also covers **alignment**: 1. Centre the icon vertically on the **line box** of the text, then adjust optically if the glyph looks high or low beside lowercase letters. 2. When the label can wrap, align the icon to the **first line**, not to the middle of the whole text block, so the icon stays with the start of the text. 3. Keep the gap between icon and text from the spacing scale, so every icon-plus-label pair in the product uses the same gap. ## What the set prevents Without a set and a pairing table, the same smart-home app ends up with a 21-unit icon beside a room name on one screen and a 24-unit icon beside the same text style on another, row heights that differ by a few units, and icons scaled to odd sizes that look slightly blurred. None of these is dramatic alone; together they make a product feel unfinished. The set and the pairing table turn each of these into a decision already made, the same on the web, on native mobile and in the design editor library.
- Why not let teams choose any icon size, such as 18 or 22 units?Set sizes are the ones the icons are drawn or tuned for, so in-between sizes scale strokes off spec and can render soft. They also break the pairing with text styles and multiply the sizes reviewers must check. If a real need falls between steps, the set is changed deliberately, not bypassed per screen.
- How should an icon align with a label that wraps onto two lines?Align it to the first line of the label, centred on that line's box, rather than to the middle of the whole block. The icon then stays with the start of the text it introduces, and wrapped and single-line rows look consistent.
saying these in an interview costs you the question
- Any icon size is fine as long as the icon is a vector.
- Icon size should be chosen to fill the space available.
- An icon beside a label can be taller than the label's line.
- A wrapped label's icon should centre on the whole text block.
- Icon sizes 20 and 22 on one screen read as clear hierarchy.