⌘K
Over 1,000 icons on one 24px grid with one line style. Tune the size, stroke and color, then copy or download icons one at a time — or select as many as you like and export them in one go.
Everything you need to find, customize, and drop Nuvel icons into your project.
Nuvel Icons is a linear (stroke-based) icon set by Nick Alekseev — 990 icons across 9 categories, built for modern web and mobile frameworks. This site is the icon library itself: browse or search, tune size/stroke/color to match your product, then copy the SVG straight out or export a batch as a ZIP. There's no package to install — every icon is plain, dependency-free SVG.
Three ways to find an icon:
The Customize controls (toolbar on desktop, the Customize button's panel on mobile/tablet) apply globally to every icon shown on the page:
stroke="currentColor" internally, so this just swaps the stroke color on copy/export — nothing about the icon's shape changes.Opening an individual icon's detail panel (click a card) lets you override size/stroke/color for that one icon without changing the global settings.
Every icon card has a copy button (appears on hover, or via keyboard focus) that copies the icon's full <svg> markup — with your current size/stroke/color settings already applied — straight to your clipboard. A "Copied !" confirmation appears next to the button. You can also open the icon's detail panel for a larger preview and a direct SVG file download.
Select multiple icons using the checkbox in the corner of each card. A selection bar appears with a live count, the same size/stroke/color controls, and a download action that bundles every selected icon as an individual .svg file inside one ZIP archive.
Icons are plain SVG, so they work the same way anywhere SVG works. A few common patterns:
Inline in HTML
<svg viewBox="0 0 24 24" fill="none">
<path d="..." stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
As a React component
export function IconAddSquare(props) {
return (
<svg viewBox="0 0 24 24" fill="none" {...props}>
<path d="..." stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
);
}
Because every path uses stroke="currentColor", an icon inherits its parent's CSS color unless you set an explicit color when customizing it here.
viewBox="0 0 24 24"stroke="currentColor" (swapped for a literal color on copy/export if you set a custom color)add-square, copy-clipboard-check)All 9 categories, generated live from the current icon set:
| ⌘K / Ctrl K | Focus search |
| Esc | Close the open panel, dropdown, or modal |
A Figma plugin for dropping Nuvel icons straight into your designs is planned — the button is in the header today marked "Soon." This section will get real install/usage steps once it ships.
Is there an npm package? Not yet — today Nuvel Icons is a copy/export tool, not an installable package. If that'd be useful to you, let me know and we can prioritize it.
Can I use these commercially? Yes — in personal and commercial projects alike, as long as you credit the author. See License & attribution below.
Nuvel Icons are licensed under Creative Commons Attribution 4.0 International (CC BY 4.0). You are free to use, copy, modify and redistribute the icons, in personal and commercial projects, as long as you give appropriate credit.
To credit, add a short line wherever credits usually live in your project — an about page, a credits screen, the README or the docs — for example: Icons by Nick Alekseev — Nuvel Icons (nuvelicons.com), CC BY 4.0. Link to the license, and mention it if you changed the icons.
Questions about licensing? Reach out via alekseevn.com.
icon-name