Iconography

Two kinds of icon. Interface actions use light line icons in the Feather style; brand and social links use solid marks. Both take their colour from the text around them.

Line icons

Interface icons are drawn on a 24-unit grid with a two-pixel stroke, round caps and round joins, in the Feather style. They render at 15 to 20 pixels inside a hit area of at least 38, and never carry their own colour: they inherit currentColor from the text.

The full working set: every line glyph the site and these docs draw, at specimen size. All from the same 24-unit, 2-stroke Feather grammar.

Back

Chevron

Download

RSS

Tick

Language

Dark theme

Light theme

Pause

Play

Expand

Reading time

Copy link

Collapse

Subscribed

Dates

Role

Call

Newsletter

Colour

Typography

Layout

Shape

Iconography

Motion

Writing

Translation

Accessibility

Quiet

Editorial

Technical

Hit area · 44 × 44px Glyph · 20px Padding · 12px

The hit area, annotated: a 20px glyph centred in a 44px square — the hatched ring is the tappable padding.

Brand marks

Social and brand icons are solid single-colour marks rather than line drawings, so a recognisable logo stays recognisable. They live in the footer and inherit the same currentColor, greening on hover. This is the real component, rendered here from the same source the footer uses.

The live social marks.

Rules

Let icons take currentColor, so they track the theme and the text around them.

Don’t

Hard-code an icon's colour. It should follow the text.

Keep a 44-pixel hit area even when the glyph is 16 pixels.

Don’t

Shrink the tappable area to the size of the drawing.

Use line icons for actions and solid marks for brands.

Don’t

Mix stroke and fill styles within the interface set.