Website icon design: one set, one stroke, and knowing when words are clearer
Good website icon design is mostly restraint. Pick one icon set, use one stroke weight and a small number of sizes, label icons that do something, and use them only where they're faster to recognise than a word. A row of decorative icons above three feature cards adds nothing a heading doesn't already say.
What icons are good at
Icons work when they're conventions people already know: a magnifying glass for search, a basket or bag for the shopping basket, a cross for close, an envelope for email, a phone handset for calling, arrows for direction. Those were learned over decades of software and signage, from the early graphical interfaces onwards. Outside that small vocabulary, most icons have to be learned, and a visitor on your site for the first time won't learn them. That's why an unlabelled icon for “integrations” or “insights” is usually a guess.
Choosing a set
| Style | Character | Suits | Watch for |
|---|---|---|---|
| Line (outline) | Light, precise, modern | Interfaces, navigation, technical brands | Thin strokes vanish at small sizes or on low contrast |
| Filled (solid) | Bold, clear at small sizes | Mobile navigation, active states, playful brands | Can look heavy in large groups |
| Duotone | Decorative, branded | Feature illustrations, marketing pages | Two colours compete with the action colour |
| Hand-drawn | Personal, crafted | Independent shops, food, children | Hard to keep consistent across many icons |
A common convention pairs line icons for the default state with the filled version for the active state, such as the current tab in a bottom navigation bar. Otherwise, keep to one style. Take every icon from one set; mixing two sets with different corner shapes, stroke ends and grid sizes is visible even to people who can't say what's wrong.
Consistency rules
- One stroke weight, matched to the text it sits next to: a 1.5px stroke beside 16px text, heavier beside bold headings.
- Two or three sizes, for example 16px inline, 20px or 24px in buttons and navigation, larger only for feature graphics.
- Align to the text. Icons beside labels should sit on the same centre line and use
currentColor, so they follow the text colour in every state and theme. - Consistent metaphor. If a trash can means delete in one place, it means delete everywhere.
- Optical sizing. Circular and triangular icons need to be drawn slightly larger than square ones to look the same size; good sets already do this.
When words are clearer
- Navigation: “Services”, “Prices”, “Book” are quicker to read than three pictograms. Icons can sit beside labels; they rarely replace them well.
- Feature lists: an icon above each feature card usually repeats the heading in picture form. Specific text, such as a price, a duration or a size, does more.
- Actions with consequences: “Delete project” beats a bin icon alone.
- Anything abstract: settings, insights, integrations and analytics don't have reliable pictures.
Emoji are not icons
Using emoji as icons, a rocket for launch, a lightning bolt for speed, a sparkle for AI, is a quick way to make a page look generated. Emoji render differently on every platform, can't be recoloured to match the palette, and are read aloud by screen readers by their full names, so a heading may be announced as “rocket Fast setup”. Emoji as icons covers the problem in detail.
Accessibility
- Icon-only buttons
- Need an accessible name, such as a visually hidden label or
aria-label(“Close”, “Open menu”), or they're announced as just “button”. - Decorative icons
- Beside a visible label, hide the icon from assistive technology with
aria-hidden="true"so the label isn't repeated. - Contrast
- Icons needed to understand or operate the page need 3:1 against their background under WCAG 2.2 success criterion 1.4.11.
- Target size
- An icon button should be at least 24 by 24 CSS pixels to meet WCAG 2.2's target size minimum, and larger on touch screens is kinder.
Icons in Anticode
Anticode's design systems use icons sparingly, by design. Navigation, buttons and feature sections are labelled in words, and the few graphic marks are typographic: arrows in page indexes, a plus and minus on FAQ answers, numbered sections and steps. The Critic flags emoji used as icons on every build, along with the related habits of spaced-capitals labels above every heading and a single word recoloured in the headline.
Questions people ask
Should I use line or filled icons?
Either, consistently. Line icons suit light, technical designs; filled icons stay clear at small sizes. A common pattern is line for default and filled for active.
Do icons need text labels?
Usually. Only a handful of icons, such as search, close and basket, are recognised reliably without one. Icon-only buttons always need an accessible name.
Can I use emoji as icons?
It's best avoided. Emoji look different across devices, can't follow your palette and are read aloud by name, which clutters headings and buttons.