Writing

Stroke or fill: which icon style should you choose?

Both styles work. The mistake is picking one per icon rather than one per set, and then discovering that half your interface is heavier than the other half.

What each style does

Outline icons are drawn as strokes with no fill. They carry the same visual weight as body text, so a row of them beside a label reads as one line rather than as a row of buttons. They also survive a background change, because there is no filled area to fight the surface behind it.

Filled icons are solid shapes. They read faster because the eye resolves an area sooner than an outline. At very small sizes they hold together after an outline has closed up.

The trade is speed against weight. A filled icon is easier to spot and harder to ignore.

The default is outline

For most interfaces, outline is right, for one reason: an icon beside text should not shout louder than the text. Filled icons at body size pull the eye off the words they are labelling.

Outline also scales better across an interface that has both dense and roomy areas. A filled set that looks right in a toolbar looks heavy in a settings list.

Where filled earns its place

The selected state

This is the strongest use. Outline for the resting state, filled for the active one:

Home (outline)  →  Home (filled)     tab is selected
Bell (outline)  →  Bell (filled)     notifications are on

The pair reads instantly and needs no colour, which means it still works for a reader who cannot distinguish your accent from your text colour.

To do this you need both versions of the same drawing, named as a pair. Use a suffix, not a new name: bell and bell-filled. See icon naming.

Below 14 pixels

At 12px an outline icon with a 2 unit stroke has about one device pixel of stroke and less than one pixel between parallel strokes. The gaps close and the shape goes. A filled silhouette at the same size still reads.

If you need icons below 14px, draw them filled and with fewer elements. Do not scale the outline set down and hope.

A dense scanning list

A file browser, a log, a table of statuses. Here the reader is scanning for a shape, not reading a label, and speed of recognition beats quietness.

How to mix them without a mess

• Match the optical weight. A filled shape looks heavier than an outline of the same span. Draw filled variants one unit smaller, or the pair will jump when it switches.
• Keep one grid. Both styles on 24 by 24, same safe area, same span rule.
• Use the pair for state, not for category. Filled meaning selected and filled meaning this is a document in the same interface cancels out.
• Never mix within one row. A toolbar with three outline icons and one filled icon reads as an error.

The stroke contract, restated

<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
     stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

Note fill="none". Without it, a closed path in an outline icon fills itself, which is the single most common accident when importing from a drawing tool. If some of your outline icons look solid, check this attribute before you check the drawing.

For the filled variants the wrapper flips: fill="currentColor" and stroke="none".

Questions people ask

Can one icon file serve both styles?

Not usefully. The drawing differs, not just the attributes. A filled bell is a silhouette; an outline bell has an interior line for the clapper. Draw them as a pair.

Does a filled set need a heavier or lighter grid?

The same grid, but watch the counter shapes. A filled icon's readability comes from the gaps inside it, so keep those at two units or more, exactly as you would for strokes.

Is a two tone style a third option?

Yes, and it is harder. Two tone needs a secondary colour that works on every background and in both themes, usually done with fill-opacity rather than a second colour. Treat it as a variant of filled, not as a separate set.

Which style do search engines and screen readers prefer?

Neither cares. Both are aria-hidden decoration next to a label, or a named control. The choice is visual only. See accessible icons.