Outline vs Solid Icons: When to Use Each Style
Outline or filled icons? How each style affects clarity, tone and usability, with practical rules for menus, buttons, small sizes and print.
Most icon sets come in two styles: outline, drawn with lines, and solid, drawn as filled shapes. Neither is better. They do different jobs, and they work best together when each has a clear role.
What is the difference?
An outline icon shows the edges of an object. It is light, leaves most of its area empty and feels calm and modern.
A solid icon fills the object in. It carries more visual weight, so the eye finds it faster.
Every icon in this library has both versions, drawn from the same shapes so they line up exactly when one replaces the other.
When outline icons work best
- Long menus and settings lists. A column of solid icons can feel heavy. Outlines keep the text in charge.
- Larger sizes. At 24 pixels and above there is room for the line detail to read.
- Light, minimal brands. Outlines pair well with thin typefaces and generous spacing.
- Complex objects. Inner details, such as the buttons on a calculator, are easier to show with lines.
When solid icons work best
- Small sizes. At 16 pixels, thin lines blur together. A filled shape stays recognisable.
- Primary actions. A solid icon on the main button draws attention to it.
- Busy backgrounds. On photos and colored panels, a solid shape holds its own.
- Signs, stickers and cut vinyl. Anything seen from a distance or cut by a machine needs a filled shape.
Use both to show state
The most useful pattern is to give each style a meaning:
- Outline = not selected. Solid = selected.
A tab bar shows four outline icons and one solid icon for the current tab. A heart is an outline until you tap it, then it fills. People understand this without being told, because the filled icon looks "switched on".
This only works if the two versions match exactly, which is why this library draws each pair from one set of shapes.
Rules that keep a design tidy
- Do not mix styles at random. Pick one style for a group of icons. Use the other only for a clear reason, such as the selected state.
- Keep one line weight. Outline icons with different stroke thicknesses look like they came from different sets. All outlines here use a 2 pixel stroke on a 24 pixel grid.
- Add labels. Research on icon usability keeps finding the same thing: icons with a text label are understood faster than icons alone. Only a few symbols, such as search, home and close, are safe without one.
- Test at real size. Look at the icon at the size it will ship, not zoomed in.
Which should you download?
If you are choosing one style for a whole project: outline for interfaces with plenty of space, solid for small sizes, dark themes and print. If you can, take both and use solid for the active state.
View all 106 free Interface icons
Questions
Are solid icons easier to recognise than outline icons?
It depends on the icon more than the style. Icons whose shape is distinctive, such as a heart or a bell, work in either style. Icons that rely on inner detail are usually clearer as outlines at larger sizes and clearer as solids when very small.
Can I change the line thickness of an outline icon?
Yes. Outline icons here keep live strokes, so you can change stroke-width in the SVG code or the stroke weight in any vector editor. Keep it the same across the set.
Is "filled" the same as "solid"?
Yes. Solid, filled and glyph are different names for the same style. Outline icons are also called line or stroke icons.
Every icon on this site is free to download. If this guide helped, you can say thanks by buying a pack from the LinearAndLoom Etsy shop.
