Roundicons

Line icons

Line icons
pixel-crisp, infinitely scalable.

Clean single-weight outline icons drawn on a strict pixel grid. The most versatile style for modern UI — light, legible, and consistent at any size.

About line icons

Line icons,
done right.

  • Product & dashboard UI
  • Mobile navigation
  • Marketing sites
  • Design systems

Line icons (also called outline or stroke icons) are built from a single uniform stroke with no fill. Because every glyph shares the same weight, optical size and corner radius, they read as one coherent family — the reason line icons dominate modern product UI, dashboards and mobile apps.

Every Roundicons line set is drawn on a 24px grid with a fixed stroke so icons stay pixel-crisp at 16px and razor-sharp when scaled to billboard size. Because they ship as true vectors (SVG and AI), you can recolour, restroke or animate them without ever touching a raster editor.

You get each icon in SVG, PNG (multiple sizes), layered AI source and an IconJar archive — drop them straight into Figma, Sketch, Webflow, iOS, Android or any web build.

Where line icons work best

Built for the places people actually use them.

App navigation

Tab bars, sidebars and menus where a light, even stroke keeps the chrome quiet and the content loud.

Settings & forms

Long lists of options read fastest with a single consistent line weight at 20–24px.

Marketing feature rows

Pair a line icon with a short headline to break up a landing page without heavy colour.

Design systems

One stroke width and grid means the whole set drops into a component library as a coherent token set.

What you get

Every format,
fully editable.

Formats
SVG · PNG (multiple sizes) · layered AI source · IconJar archive
Grid
Drawn on a consistent pixel-snapped grid so the whole family aligns
Scaling
True vectors — crisp from a 16px control to a billboard, with no quality loss
Editing
Recolour, restroke and export right in the browser, or in Figma, Illustrator & code
Licensing
Standard or Extended commercial license — or get every pack in the bundle
Updates
One year of free pack updates · 30-day money-back guarantee

FAQ

Frequently asked questions

What are line icons best used for?

Line icons suit interface design where clarity and lightness matter — navigation bars, settings screens, dashboards and feature lists. Their uniform stroke keeps a UI calm and legible at small sizes.

Can I change the stroke weight or colour?

Yes. Every line icon ships as an editable SVG and AI source, so you can recolour, adjust the stroke or combine them with your own components in Figma, Illustrator or code.

What formats do line icons come in?

SVG, PNG at multiple resolutions, layered AI source files, and an IconJar archive — ready for web, iOS, Android and design tools.

What size should line icons be in a UI?

Most interfaces use line icons at 20px or 24px. Our line sets are drawn on a 24px grid so they stay pixel-crisp at those sizes, and because they are vectors they scale cleanly to any larger size too.

Should I use line or solid icons for active states?

A common pattern is line icons for the default state and solid (glyph) icons for the active or selected state — the extra ink signals “you are here”. Our line and solid sets share proportions so they pair without looking mismatched.

The bundle

$1,358
for $1,358.

All 29 families. Every format. One payment, lifetime download access, 30-day money-back guarantee.