Craft

Icons

Icons are typography. A set of icons is a small alphabet, and like an alphabet it has a voice: the stroke width, the corner radius, the grid it was drawn on, how much detail fits in a glyph.

The first job is to pick one voice and use it everywhere. Toggle the demo to see how much the same icons change between weights.

  • Inbox12
  • Today4
  • Upcoming9
  • Projects
  • Archive

Notice how the weight also has to agree with the text. Thin icons next to medium labels look like they belong to a different product. Bold icons shout. Regular pairs with regular and medium text, which is why it is the default in most sets.

This site uses duotone everywhere. The filled second layer sits at low opacity, which adds a little depth without adding color.

One set

Mixing icon libraries reads exactly like mixing typefaces mid-sentence. The grids do not match, the strokes do not match, and the eye picks it up even when it cannot say why.

Wrong
Right

The wrong toolbar has icons from two libraries, three stroke widths, and two sizes. The right one has one library, one weight, one size. Nothing else changed.

When you choose a library, count the icons your product actually needs and check that the set covers them. Running out halfway through and reaching for a second library is how the wrong toolbar happens.

Size

Icons are drawn with a little padding inside their box, so an icon at the same pixel size as the text looks smaller than the capitals next to it.

  • Inbox
  • Today
  • Upcoming
  • Projects

A size between 1.1em and 1.25em usually balances. Then check the vertical position. Flexbox centers the icon's box, not its shape, so a one pixel nudge is often needed. Expressing the size in em keeps the ratio when the text size changes.

Usage

app.tsx
import { TrayIcon } from "@phosphor-icons/react";

<a className="flex items-center gap-2 text-sm font-medium">
    <TrayIcon weight="duotone" className="mb-px size-[1.15em]" />
    Inbox
</a>
.nav-item svg {
  width: 1.15em;
  height: 1.15em;
  margin-bottom: 1px;
}

A quick check for any screen: line up every icon on it in one row. If one of them looks like it was drawn by someone else, it probably was.

Resources

Search concepts

Search for a command to run...