Tabler Icons
5500+ free MIT-licensed high-quality SVG icons
STATS
OVERVIEW
Tabler Icons is the largest free open-source icon library available today, offering over 5,500 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.
Tabler Icons ships with full React, Vue, and Svelte support via separate packages. All packages are fully tree-shakable and include complete TypeScript definitions. Icons accept size, color, strokeWidth, and className props. A Figma plugin is available for design teams.
// VERDICTIf you need the largest possible icon selection without paying, Tabler Icons is the clear winner. The only caution is bundle size — make sure you import icons individually rather than the entire library, or your bundle will bloat significantly.
INSTALLATION
npm install @tabler/icons-react
npm install @tabler/icons-react // Note: Works with Next.js App Router. Import icons individually for best tree-shaking performance.
npm install @tabler/icons-vue
npm install @tabler/icons-svelte
npm install @tabler/icons
CODE EXAMPLES
import { IconHome, IconSettings, IconUser } from '@tabler/icons-react'
export default function App() {
return (
<div>
<IconHome size={24} />
<IconSettings size={24} color="#6366f1" />
<IconUser size={24} strokeWidth={1.5} />
</div>
)
}import { IconBell } from '@tabler/icons-react'
export default function Navbar() {
return (
<button className="flex items-center gap-2">
<IconBell className="h-5 w-5 text-gray-500" />
<span>Notifications</span>
</button>
)
}// Tabler also offers filled variants
import { IconHomeFilled, IconHeartFilled } from '@tabler/icons-react'
export default function App() {
return (
<div>
<IconHomeFilled size={24} />
<IconHeartFilled size={24} color="red" />
</div>
)
}