Design system · 06
Icons are plumbing.
An icon here says which way something goes or what a control will do, and nothing more. The expressive marks in this system are the kanji, the seal and the diagrams; icons are the arrows on the pipes.
The set
Thirteen line icons from Lucide, drawn at a 2px stroke with round joins. That is all of them. A new icon needs a job none of these already does.
- Onward: a link, the next chapter arrow-right
- Back arrow-left
- Leaves the site arrow-up-right
- Opens in place chevron-down
- Chooses from a list chevrons-up-down
- Included; done check
- Not included minus
- Close; do not x
- Opens the menu menu
- Search search
- Email mail
- Saves a file download
- Copies an address link
Size and colour
Three sizes, set by what the icon is next to. An icon always takes the colour of the text beside it; it is never tan, and never a colour of its own.
14px
Inside a quiet link
16px
Inside a control or a list
20px
Standing alone, as a button
With words
An icon accompanies a label; it does not replace one. Beside text it is decoration and is hidden from screen readers. The few icons that stand alone — search, close, a copied link — are buttons with a spoken name and a target of at least 24px, 44px where a thumb will press it.
Implementation
import ArrowRight from "@lucide/svelte/icons/arrow-right"; <a href="/services" class="group/link link-quiet"> Services overview <ArrowRight class="size-3.5" aria-hidden="true" /> </a> <button type="button" aria-label="Search" class="size-11"> <Search class="size-5" aria-hidden="true" /> </button>
Rules
Do
- Use an icon to show direction or what a control does.
- Pair it with a label, and let it take the label's colour.
- Give an icon that stands alone a spoken name.
- Import icons one at a time, by name.
Don’t
- Head a feature card with an icon. That is a diagram's job.
- Use emoji, filled icons or a second icon family.
- Put an icon on a key.
- Colour an icon to make it stand out.