Iconoir
An open source icon library with 1,500+ premium line icons.
STATS
OVERVIEW
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 React package (`iconoir-react`) is fully tree-shakable and provides excellent TypeScript definitions. Every icon can be customized via props for stroke width, color, and size, ensuring they blend seamlessly into your design system.
// VERDICTIf you want a modern, high-end alternative to Lucide or Feather that looks premium but remains completely free (MIT licensed), Iconoir is one of the absolute best choices available in 2026.
OFFICIAL LICENSE & COMMERCIAL USE
The MIT License is a highly popular, extremely permissive open-source license. Under the MIT License, you are officially allowed to use Iconoir in any personal, commercial, or corporate software projects completely free of charge. You can modify the icons, distribute them, sell software containing them, and even sublicense them. The only requirement is that you must preserve the original copyright notice and permission notice in all copies of the software.
- Commercial Use Allowed
- Modification Allowed
- Redistribution Allowed
- Sublicensing Allowed
- Must keep copyright notice in source files
- License remains active on copy/use
INSTALLATION
npm install iconoir-react // Note: Also works with Next.js (Server and Client components).
npm install iconoir-vue
npm install iconoir // Note: For vanilla CSS files.
CODE EXAMPLES
import { Camera, Search } from 'iconoir-react'
export default function App() {
return (
<div className="flex gap-4 text-blue-500">
<Camera
color="currentColor"
strokeWidth={1.5}
width={24}
height={24}
/>
<Search />
</div>
)
}// Next.js App Router (Server Component)
import { User } from 'iconoir-react'
export default function ProfileHeader() {
// Iconoir works perfectly in server components out of the box
return (
<header className="flex items-center gap-2">
<User className="h-6 w-6" strokeWidth={2} />
<h2>User Profile</h2>
</header>
)
}