Outline vs filled icons, and when to use each

Use outline icons for the everyday parts of an interface, such as toolbars, menus, lists and icons that sit beside text, and use filled icons for whatever needs emphasis or state: the selected tab, a toggled-on favourite, an unread alert, the icon inside a coloured button. When an icon changes state, swap its outline for the filled version from the same family, and never let colour be the only difference. An outline icon says "this is here"; a filled one says "this is it".

That rule covers most decisions. The rest of this guide explains why it works, how Apple and Google differ on the selected tab, what the one well-known recognition study found, and where the rule bends.

Why filled icons look louder

The difference is ink. A filled shape covers its whole area while an outline covers only a 2px border, so at the same size the filled icon looks darker, heavier and closer to the viewer, much as a bold word stands out in a line of regular text.

In Pikaicons the two are drawn as a pair on the same 24px grid. The stroke version's 2px line is centred on its path, so its outer edge sits 1px outside it, and the solid version is drawn to exactly that edge. Both icons therefore cover the same footprint, and the solid one simply fills it in.

Outline is the default for interface chrome

Outline icons suit the parts of a screen that people scan rather than act on. They're light enough that a row of twelve doesn't overpower the labels next to them, and their open shapes echo the strokes of the type. Apple's SF Symbols guidelines call outline the most common variant and recommend it for toolbars, lists and symbols shown alongside text, while Material Design describes its outlined style as light and clean, suited to dense UIs.

Outlines scale down well as long as you watch the stroke. A 24px icon shown at 16px renders its 2px stroke at 1.33px, which still reads but looks noticeably softer, and the guide to icon sizes covers how to tune it.

Filled icons are for state and emphasis

Filled icons earn their weight when something needs to stand out. A heart that turns solid when tapped, a bookmark that fills once something is saved and a bell that fills when alerts are on all use the fill to say "this is now true", which a colour change alone can't say to everyone.

They're also the stronger choice on saturated backgrounds. A thin white outline on a brand-coloured button has very little ink to carry the contrast, while a solid shape keeps its full area. Material makes a related point about visual bleed: light icons on dark backgrounds look heavier, so it suggests a lower grade for them.

How iOS and Material show the selected tab

The two big platforms agree that fill means emphasis, but they apply it differently in navigation.

Material 3 is the outline-to-filled swap in its purest form. Its navigation bar guidance says to use a filled icon for the active destination and outlined icons for the inactive ones, and to raise the icon's weight to semibold when no filled version exists. It also asks for at least 3:1 contrast between both active and inactive icons and the bar behind them.

Apple takes the other route. The HIG tells iOS tab bars to prefer filled symbols for consistency with the platform, and the SF Symbols guidance says an iOS tab bar prefers the fill variant while a toolbar takes the outline. Every tab is filled, and the selected one stands apart by its tint.

So "outline when idle, filled when active" is a Material convention and a very common pattern in apps, but it isn't a universal law. If you build a native iOS app, following Apple means a tint change, so make that difference strong. If you design one interface for the web and both platforms, the outline-to-filled swap is the more robust choice, for the reason in the next section.

Colour alone isn't enough

If the selected tab differs from the others by colour alone, anyone who can't tell those colours apart sees five identical tabs. WCAG 1.4.1, Use of Color, asks that colour isn't the only visual means of conveying information, and a change of shape solves it without touching the palette.

Two related rules are worth knowing. The Use of Color guidance accepts colours that also differ in lightness by a 3:1 contrast ratio as an extra cue, and WCAG 1.4.11, Non-text Contrast, asks for 3:1 between an icon and the colours next to it. A pale grey inactive icon on a white bar can fail the second one even when the selected tab is perfectly clear.

The markup matters as much as the drawing, because a screen reader can't see the fill. Mark the current item in code and hide the icon itself:

<a href="/saved" aria-current={isActive ? "page" : undefined}>
  {isActive
    ? <BookmarkSolid aria-hidden="true" />
    : <BookmarkStroke aria-hidden="true" />}
  Saved
</a>

Use aria-current="page" for navigation links and aria-selected="true" for tabs inside a tablist. The guide to SVG icons in React shows how to build components like these.

If you use Material Symbols, the swap is a single font setting, since fill is a variable axis that runs from 0 to 1 and the Google Fonts docs suggest it for showing a state transition:

.material-symbols-outlined {
  font-variation-settings: "FILL" 0;
}

[aria-current="page"] .material-symbols-outlined {
  font-variation-settings: "FILL" 1;
}

Matched pairs, or the tab jumps

The swap only works when the two icons are a matched pair. If the filled version is drawn a pixel larger, sits a little lower or rounds its corners differently, the selected tab appears to jump every time it changes, which is why it pays to take both styles from one family rather than borrowing a filled icon from a second set.

Some icons also have no meaningful filled form. A magnifying glass is mostly lens, so filling it turns it into a disc on a handle, and an outline-only icon like an arrow or a plus has nothing to fill at all. For those, follow Material's fallback and make the active version heavier, or pair the icon with another cue such as an indicator behind it.

Material also notes that a few symbols read better filled even in an outlined set, such as full-body human figures. Treat the rule as a default rather than a law, and make each exception deliberately.

What the research says about recognition

The study most often cited is an unmoderated online test that Curt Arledge ran at Viget in 2014, published on their blog. Across 1,260 completed tests, people found 20 named tab-bar icons among distractors, in solid and hollow forms, black on white and white on black.

On average hollow icons took about 0.1 second longer to pick, but the only combination that was significantly slower was hollow icons in white on black, at about 0.17 second. Three of the 20 icons were recognised faster in their hollow form, and style made no difference to accuracy except for one icon.

The author calls it a tiny effect and warns that a different icon set would likely give a different result, and the sample leaned young and tech-savvy. The practical reading is modest: neither style is meaningfully harder to recognise in a light interface, and thin white outlines on dark surfaces are the one place where filled icons have a measurable edge.

Don't mix them at random

What looks broken isn't using both styles but using both without a reason. A settings screen where the first row has an outline gear and the second a filled lock reads as two icon sets glued together, even if they come from the same family.

A simple rule keeps it coherent. Pick one default style for each surface (outline for the toolbar, say, and filled for a feature grid), and switch styles only to signal state, so that when someone asks why a particular icon is filled there is an answer. The same goes for stroke weight, which Material also asks you to apply consistently rather than mixing.

Where the in-between styles fit

Between outline and filled sit the duotone styles, which keep the main shape at full strength and draw a secondary part a tone lighter. They work best where icons are content rather than controls, in feature lists, empty states and onboarding, and the duotone guide shows how to colour them.

Pikaicons has 5,000+ icons across five styles (stroke, solid, duo stroke, duo solid and contrast), with each style drawn to the same outline as its stroke version. You can copy 500+ of them for free and try an outline and filled pair in your own tab bar, or see them in context on the showcase.

Frequently asked questions

Should active icons be filled?

In most cases, yes. Material 3 recommends a filled icon for the active destination and outlined icons for the rest, and the shape change gives you a cue that doesn't depend on colour. Native iOS tab bars are the main exception, since Apple fills every tab and marks the selected one with tint.

Are filled icons easier to recognise than outline icons?

Only slightly, and only in some conditions. In Viget's 2014 test of 1,260 people, hollow icons were about 0.1 second slower on average, with the only significant gap in white-on-black icons, and three of the 20 icons were faster as outlines.

What's the difference between Material Icons "Filled" and "Outlined"?

In the classic Material Icons set, Filled and Outlined are separate themes, alongside Rounded, Sharp and Two tone, according to Google's icon repository. In the newer Material Symbols there is no Filled font: Outlined, Rounded and Sharp are shape styles, and fill is a separate axis, so a "Material Symbols Outlined" icon can still be drawn filled.

Are stroke, line and outline icons the same thing?

Yes, the three names describe icons drawn with a line of fixed width, and solid, filled and glyph icons are drawn as filled shapes. Libraries just pick different labels; Pikaicons calls them stroke and solid.

Can I mix outline and filled icons on one screen?

Yes, as long as each style has a job. Use one style as the default for each surface and switch only to show state or emphasis, and take both versions from the same family so their silhouettes line up.

A quick way to decide

When you're unsure which style an icon should be, ask what it's doing. If it labels or decorates something the user can already see, use outline, and if it marks the one thing that's selected, new, urgent or primary, fill it.

Then look at the screen in greyscale. If the important things still stand out, the styles are doing their job.