Line icons with real strokes, not outlined fills
3,700+ hand-crafted line icons on a 24×24 grid. Because every icon is built from uniform strokes — round caps, round joins — the stroke width stays editable in code and in Figma, from hairline-minimal to bold.
Built from strokes
Why stroke-based beats outlined
Most outline icon sets flatten their strokes into fills on export. Ours never do — and that changes what you can do with them.
Editable stroke width
Set stroke-width to 1 for a minimal look or 2 for emphasis — one property adjusts the whole icon evenly, no redrawing, no broken corners.
Uniform round geometry
Every cap and join is round across the entire set, so mixed icons sit next to each other like they were drawn for the same screen. They were.
One color property
Strokes inherit currentColor, so hover states, dark mode and theming come from the CSS you already have.
Try it live
Drag the stroke width — watch the set keep up
This is the real SVG source restyled in your browser, exactly what you'd copy with a license.
Every icon works like this — pick a style, match your stroke width, drop it in. Try the full explorer
Beyond line
Every line icon has duotone and solid siblings
Same grid, same geometry, three visual weights — switch styles without your layout noticing.
Use line icons for calm, minimal interfaces, then reach for the duotone or solid variant of the same icon for active states, empty states or marketing pages. Designers get the whole system as native Figma components; developers can paste the SVG straight into React.
Coverage
54 categories of line icons
From interface staples to niche sets — every category previews free.
Questions
Frequently asked questions
Everything about licensing, updates and how the library works.
- Line icons, outline icons, stroke icons — is there a difference?
- The names are interchangeable: an icon drawn as thin strokes rather than filled shapes. What actually differs between libraries is how the strokes are built. Many "outline" sets convert their strokes to outlined fills on export, which locks the weight forever. Majesticons line icons keep real SVG strokes, so the weight stays editable in code, in Figma and in the icon explorer.
- Can I change the stroke width?
- Yes — that is the point of the set. Every line icon uses uniform strokes with round caps and joins, so setting stroke-width to 1, 1.5 or 2 adjusts the whole icon evenly with no broken corners. You can preview any weight in the icon explorer before copying.
- Do the line icons have matching filled versions?
- Every icon family ships in three styles — line, duotone and solid — drawn on the same 24×24 grid with the same geometry. You can switch a line icon to its solid sibling without anything shifting in your layout.
- Are the line icons free to download?
- Browsing and previewing every icon is free, and 760 icons are MIT-licensed on npm as "majesticons". Copying and downloading the full set of 3,700+ line icons (plus duotone and solid) takes a one-time license — no subscription.
- What format do the line icons come in?
- Optimized SVG on a 24×24 grid, ready for the web, and native Figma components in the master file included with every license. Line icons use currentColor-friendly strokes, so they inherit your CSS text color.
One line icon set that covers every screen
Pay once, get every icon in all three styles, the Figma master file and lifetime updates.
