Design AtlasA line icon draws its shape with a stroke of consistent weight and no fill — the icon and its background are separated only by that outline. That reads as visually light and sits comfortably next to body text, which is why line icons dominate navigation bars and toolbars where several icons sit close together.
The one thing that has to stay uniform is the stroke weight across the whole set. A common baseline is 1.5–2px at 24px, with line caps and joins locked to either round or square so unrelated icons still look like they were drawn by the same hand. Curvy icons (a heart, a bell) tend to read thinner than icons built from straight lines (a house, a folder), so in practice they get lined up side by side and weight-matched by eye.
At very small sizes (16px and under), strokes start to overlap and blur together — if an icon has to run that small, it's usually worth drawing a simplified version or switching to a solid-icon instead.
When to use
Reach for it first in navigation bars, toolbars, or anywhere icons sit close to text. Below 16px, simplify the detail or switch to a solid icon instead.