Outline vs filled icons

Outline icons feel light and modern; filled icons feel solid and grab attention. Neither is “better” — they're tools for signalling emphasis and state.

Outline (stroke) icons

Light, airy, and easy to keep consistent via stroke width. Great for toolbars, secondary actions and content-heavy UIs where you don't want icons shouting.

Filled (solid) icons

More visual weight and better legibility at very small sizes. Good for primary actions, selected states and dense mobile navigation.

The active/inactive pattern

A widely-loved convention: use the outline version for the inactive state and the filled version for the active/selected one (e.g. a tab bar). The weight change reads instantly as “you are here.”

Consistency rule: pick one primary style for the set and use the other deliberately for state or emphasis — not at random.

Frequently asked questions

Are filled or outline icons better?

Neither universally. Outline suits light, content-first UIs; filled suits small sizes and active states.

What's the outline/filled tab trick?

Show inactive tabs as outline icons and the active tab as the filled version to signal selection.