Iconoir
Iconoir is a high-quality, open-source library that has quickly become a favorite in the modern React and Figma communities. Featuring over 1,500 meticulously crafted icons, it offers a consistent, premium line-art style that feels incredibly sleek and modern. Unlike older libraries, Iconoir is designed entirely on a consistent grid with a unified stroke weight, making it highly suitable for modern SaaS, dashboard, and marketing applications. It supports React, React Native, Vue, SolidJS, and even Flutter out of the box with official packages. The collection is licensed under MIT; review the icon license guide for commercial-use details.
Iconoir Specifications & Framework Compatibility
| Property | Specification Details |
|---|---|
| Total Icons | 3,403 vector SVG icons |
| License | MIT (Commercial & Personal Use) |
| TypeScript Support | Native .d.ts definitions included |
| Framework Support | React, Next.js, Vue, Svelte, Tailwind CSS |
| Primary NPM Package | iconoir |
| Source Repository | Official GitHub Repository → |
How many icons does Iconoir have?
Iconoir currently includes 3,403 vector icons indexed in the IconSearch catalog. Every icon is available in clean SVG format with customizable stroke widths, colors, and direct multi-framework code exports for modern web applications.
Is Iconoir free for commercial use?
Yes, Iconoir is distributed under the MIT license. This permissive open-source license allows unrestricted commercial and personal usage in proprietary software, SaaS platforms, client websites, and digital products without licensing fees.
How do you install and use Iconoir in React, Next.js, and Vue?
Install the package using npm install iconoir-react, then import icons directly into your JSX, TSX, or Vue components. Alternatively, copy raw customized SVG markup directly from IconSearch with zero client-side JavaScript overhead.
// Install package
npm install iconoir-react
// React & Next.js App Router usage
import { Accessibility } from 'iconoir'
export default function Header() {
return <Accessibility className="w-5 h-5 text-indigo-500" />
}Iconoir FAQ & Technical Guide
Does Iconoir support Next.js App Router?
Yes! Iconoir works perfectly in Next.js Server Components out of the box with zero configuration required.
Can I change the stroke width of Iconoir icons?
Absolutely. The React package accepts a strokeWidth prop (default is 1.5) allowing you to seamlessly scale the visual weight of the icons.
Is Iconoir completely free for commercial use?
Yes. Iconoir is licensed under the MIT License, which means it is 100% free for personal, commercial, and enterprise usage with no strict attribution required.