Meet Devigner Icons: 8,580 Icons, 4 variants for React, Next.js, Vue & Svelte, 100% Free+Open Source
Hey everyone! 👋
I built Devigner Icons (icons.remidevigner.pro) to solve a recurring frustration in modern product design and frontend engineering: choosing between lightweight icon libraries with limited stylistic depth, or bloated icon packages that sacrifice bundle size, stroke consistency, and geometric precision.
Devigner Icons is an uncompromising, production-ready vector icon system built from the ground up for modern developer stacks and design workflows.
The Vector Architecture & Volume
8,580 Production-Ready Assets: A comprehensive library covering 2,145 unique conceptual glyphs, each drawn across 4 discrete, handcrafted styles.
33 Curated Semantic Categories: Deep coverage across Fintech, Crypto, Cloud & DevOps, Security, AI & ML, Hardware, Media, Layout Controls, Navigation, and E-commerce.
Strict 24px Native Grid: Every icon is calibrated to a 24×24px bounding box with standardized keylines, optical balance, and uniform padding.
4 Handcrafted Styles (Zero Auto-Expanded Line Hacks)
Unlike automated converters that simply apply a heavy stroke to create bold variants, every style in Devigner Icons is manually constructed:
Outline: Ultra-clean reference linework engineered with a precise 1.5px baseline stroke on a 24px grid.
Twotone: Crisp linework geometry paired with secondary accent elements rendered at 50% opacity for visual hierarchy.
Bold: Solid filled silhouettes constructed with even-odd boolean interior cutouts to maintain razor-sharp optical weight and negative space.
Bulk: Solid primary mass shapes combined with secondary fill layers rendered at 50% opacity for depth in selected and active states.
Developer Experience & Framework Ecosystem
Devigner Icons ships official, standalone packages optimized for modern runtimes:
Official NPM Packages:
Zero Runtime Overhead: No external CSS stylesheets or bloated runtime parsers. All icons compile directly down to pure, optimized SVG primitives.
100% Tree-Shakable: Bundlers (Vite, Turbopack, Rollup, Webpack) automatically drop unimported assets, keeping your production bundle lean.
Strict TypeScript Support: First-class TypeScript definitions, auto-complete for icon names, and full typing for standard HTML/SVG attributes.
Native Tailwind CSS & Styling Integration
Dynamic currentColor Inheritance: Icons automatically inherit color from parent text classes (text-indigo-500, hover:text-cyan-400).
Tailwind Sizing Utilities: Seamlessly scale with Tailwind width/height presets (size-4, size-6, size-8, w-10 h-10).
Micro-Customization Props: Pass custom size, strokeWidth, className, and variant props directly into component calls.
Interactive Web Asset Explorer (icons.remidevigner.pro)
Experience and test the entire library live in the browser without installing anything:
Instant Client-Side Search: Real-time, zero-latency natural language search across names, tags, and semantic categories.
Global Style Matrix Switcher: 1-click toggle to transform the entire browsing grid across Outline, Twotone, Bold, and Bulk.
Live Vector Parameter Playground:
Dynamic stroke-width slider (1.0px to 3.0px with 0.1px increments).
Canvas bounding scale presets (16px, 20px, 24px, 32px, 48px).
Real-time color palette preview switcher.
1-Click Quick Actions: Instant copy-to-clipboard for JSX/TSX component snippets, raw SVG code, and direct download formats.
100% Free & Open Source
The entire library, all 8,580 icons and every framework package is completely free and open-source for personal and commercial projects.
I’d Love Your Feedback!
What niche categories or specific symbols do you find missing in standard icon sets?
Which framework adapters, CLI commands, or ecosystem integrations should I prioritize next?
Drop your thoughts, questions, or feature requests below!
Replies