F6.03.1icon style systemdesign

Stroke, corner radius and fill have to be a system

Aliases: icon parameters · stroke weight · corner radius · icon family

What it is

A set reads as a set not because the subjects match, but because the same drawing parameters are executed again and again: stroke, cap, corner radius, interior padding, filled or not. Scatter the parameters and even handsome individuals look, in a row, like letters picked from mixed sizes and mixed typefaces. Consistency is a production constraint, not a later pass of "nudge until it feels close".

Why it happens

People scan side-by-side glyphs as members of one class at one level. The scan does not start with subject matter; it starts with contour statistics — thick or thin, square or round, hollow or solid. Jitter in those statistics is registered as "these are not the same kind of thing": some look like titles, some like asides, some like broken pixels. A system nails the statistics so subject matter is allowed to vary. Without one, the instinct is to fix whether a single drawing "looks like the thing", while the fight is actually 1.5 px versus 2 px strokes, and 2 px versus 4 px corners.

Where it stops holding

  • Two intentional parameter sets — one for navigation, one for in-content marks — are legal if their venues are split. They must not alternate inside one toolbar.
  • Brand illustration can ignore the table. The moment it is scaled to 24 px and used as an icon, it has to join the table, or it becomes a crushed picture in the bar.
  • Dark-background strokes often need an optical fattening. That is compensation inside the same system, not a second system.
  • Outline mixed with filled being read as "selected" is a different failure. This one is whether parameters were written down as one executable set.

Applying it

  • Before drawing the second glyph, write the table: stroke, cap, corner, grid, minimum interior gap, default fill. Every later glyph may only take values from that table.
  • Review a new icon inside the existing 24 px strip, not enlarged in the middle of the artboard. An enlarged draft hides a half-pixel stroke miss.
  • How to check: export the whole set as a same-size sprite sheet and blur until subjects vanish. If some glyphs still read as thicker, rounder, or more solid, the parameters never became a system.

Related

  • Same group: F6.03.2 Mixing outline and filled icons is misread as hierarchy · F6.03.3 Third-party glyphs break the set
  • Nearby: F6.08 Visual weight balance of icons · F6.04 Minimum icon size
  • Search terms: icon style system · stroke weight · icon family

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/F6.03.1