Tabler Icons
Tabler Icons is the largest free open-source icon library available today, offering over 6,100 carefully crafted SVG icons. It was created by Paweł Kuna as part of the Tabler admin dashboard project and has since grown into one of the most comprehensive icon sets in the developer ecosystem. What makes Tabler stand out is sheer volume combined with consistency. Every icon follows the same design grid, stroke width, and visual language. Whether you need common UI icons or highly specific symbols for finance, medicine, sports, or technology — Tabler almost certainly has what you need. The collection is licensed under MIT; review the icon license guide for commercial-use details.
Tabler Icons Specifications & Framework Compatibility
| Property | Specification Details |
|---|---|
| Total Icons | 12,524 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 | @tabler/icons-react |
| Source Repository | Official GitHub Repository → |
How many icons does Tabler Icons have?
Tabler Icons currently includes 12,524 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 Tabler Icons free for commercial use?
Yes, Tabler Icons 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 Tabler Icons in React, Next.js, and Vue?
Install the package using npm install @tabler/icons-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 @tabler/icons-react
// React & Next.js App Router usage
import { AB } from '@tabler/icons-react'
export default function Header() {
return <AB className="w-5 h-5 text-indigo-500" />
}Tabler Icons FAQ & Technical Guide
Is Tabler Icons free for commercial use?
Yes. Tabler Icons uses the MIT license, one of the most permissive open source licenses. You can use it in any commercial project without attribution.
How do I use Tabler Icons in Next.js?
Install @tabler/icons-react and import icons individually. For example: import { IconHome } from '@tabler/icons-react'. This works in both App Router and Pages Router without any additional configuration.
Does Tabler have filled icons?
Yes. Tabler offers filled variants for many icons. Filled icon names end with Filled — for example IconHomeFilled, IconHeartFilled. Not all icons have a filled variant yet.
How is Tabler Icons different from Lucide Icons?
The main differences are icon count (6,100 vs 1,400) and style options. Tabler has far more icons and offers filled variants. Lucide has a slightly more polished and consistent design language and is more popular in the React community.
Will Tabler Icons slow down my app?
Only if you import incorrectly. Never do import * from '@tabler/icons-react'. Always import individual icons. With proper tree-shaking each icon adds roughly 1kb to your bundle.