Two free icon libraries: Devigner Icons and Reicon

Every side project hits the same small decision sooner or later. You need a cart, a chevron and a settings gear, and you'd rather not draw them. Lucide, Heroicons and Phosphor are the usual answers, and they're good ones. Two newer libraries turned up in my bookmarks this month, Devigner Icons and Reicon. Both are free, both are MIT on the code side, both are tree-shakeable, and both ship as React components. They make different trade-offs, so this post goes through what each one gives you and where I'd use it.

Devigner Icons

Devigner Icons is the bigger of the two. The homepage counts 8,588 SVG variants, which works out to 2,146 distinct icons in four styles: outline, twotone, bold and bulk. The site makes a point of saying the styles are drawn separately, in its words "four separate drawings of the same subject, not one drawing transformed four ways." That matters more than it sounds. A bold icon generated by thickening an outline tends to clog up at 16px, and a bulk style (a solid shape with a lighter secondary layer) can't be derived from a stroke at all.

The React package is @devigner-ui/icons. Components are named with an Icon prefix (IconShoppingCart, IconArrowRight, IconUser), and each one takes a variant prop set to TwoTone, Bold and so on, falling back to outline when you leave it off. Sizing goes through className, so a Tailwind class like size-6 is all you need, which makes it sit naturally in a Tailwind project. The docs list React 18+, Next.js 13+ with the App Router, Vite, Remix and Astro (through its React integration), and the site also mentions Vue, Svelte and React Native packages and jsDelivr for CDN use. Outline and twotone icons default to a 1.5px stroke.

The part I liked most is the search. It runs on-device embeddings alongside keyword matching, so a query like "money" or "leave" finds icons whose names don't contain that word. The preview lets you change size, colour and stroke width live, and there are seven snippet tabs for copying the result as SVG, JSX and the other formats.

Read the license page before you ship. The code is MIT, but the artwork is CC BY 4.0 and comes from two existing sets, the Solar Icon Set by 480 Design and Iconsax by Vuesax. CC BY means you owe those authors a credit, and the page asks for it "wherever you keep third-party notices." For most apps that's a line in an open-source credits screen or a NOTICES file. It's easy to do and easy to forget.

Reicon

Reicon, made by Dev Chauhan, is smaller and stricter. It has about 2,700 icons (the React package README says 2,674+) on a 24×24 grid, in two weights, Outline at a 1.5px stroke and Filled. The pairing is meant for UI states, outline for an inactive tab and filled for the active one, and the corner radii are kept consistent between the two so the swap doesn't make an icon jump.

Where Reicon spreads wide is platforms. There are packages for vanilla JS (reicon), React (reicon-react), Vue (reicon-vue) and Svelte (reicon-svelte), plus a React Native package, a Flutter package on pub.dev, a Figma plugin and a VS Code extension. The React package has zero dependencies and needs React 16.8 or newer.

The props are the familiar set. Size defaults to 24, color to currentColor, and weight takes Outline or Filled. There's also strokeWidth, className, and a secondaryColor that defaults to the main colour. Names are plain (Home, ShieldCheck, AltArrowDown), and you can import a single icon by path from reicon-react/icons/Home if you don't trust your bundler's tree-shaking. Without a build step, loading the reicon script from unpkg gives you functions like Home() that return DOM nodes you append yourself. The whole thing is MIT, artwork included, so there's no attribution to track.

How they compare

• Distinct icons: Devigner 2,146, Reicon about 2,700
• Styles: Devigner has outline, twotone, bold and bulk; Reicon has outline and filled
• Default stroke: 1.5px in both
• React package: @devigner-ui/icons against reicon-react
• Switching style: a variant prop in Devigner, a weight prop in Reicon
• Sizing: className in Devigner, a size prop in Reicon
• Other targets: Devigner adds Vue, Svelte, React Native and a CDN; Reicon adds vanilla JS, Vue, Svelte, React Native, Flutter, Figma and VS Code
• License: Devigner is MIT code with CC BY 4.0 artwork that needs a credit to Solar and Iconsax; Reicon is MIT throughout with no credit needed

Which one I'd pick

For a marketing site or a dashboard where icons carry some of the visual weight, I'd use Devigner. The twotone and bulk styles give you an illustrated look that a two-weight set can't, and the semantic search saves real time when you don't know what an icon is called. Add the credit line on day one so it doesn't get forgotten.

For an app UI, especially one that also has a Flutter or Figma side, I'd use Reicon. Outline and filled is all a tab bar or toolbar needs, the larger catalogue covers more edge cases, and one MIT license across every platform is one less thing to think about.

Don't mix them in the same interface. Both use 1.5px strokes, but corner radii, line ends and optical sizing differ between sets, and two families side by side in one toolbar look off even when nobody can say why. Pick one per product and stay with it.