Tabler Icons

About Tabler Icons

Tabler Icons is an open-source library of 5,000+ free SVG icons optimised for web and mobile interfaces. All icons follow a consistent 24px grid with a 2px stroke — visually compatible with Lucide and Heroicons. Both outline and filled variants are available for most icons, making it straightforward to indicate active and inactive states across navigation, tabs, and button groups. MIT licensed: completely free for personal and commercial projects. The library ships an official React package (@tabler/icons-react), Vue package, Angular package, and a Figma plugin. With 5,000+ icons, Tabler offers the widest selection among free outline icon sets — covering finance, medical, tech, brand, and UI categories not found in smaller libraries. Search Tabler icons, copy SVG code to clipboard, export as React JSX, or download as PNG. The commercial Tabler Icons Pro extension adds colored and duotone styles. Ideal for SaaS products, admin dashboards, e-commerce, and productivity tools where comprehensive icon coverage matters.

How to use Tabler Icons icons

npm install @tabler/icons-react

import { IconSearch, IconHome, IconSettings } from '@tabler/icons-react';

export default function App() {
  return <IconSearch size={24} stroke={1.5} />;
}

<script setup>
import { IconSearch } from '@tabler/icons-vue';
</script>
<template>
  <IconSearch :size="24" :stroke="1.5" />
</template>

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="tabler:icon-name" width="24"></iconify-icon>

import { Icon } from '@iconify/react';

export default function App() {
  return <Icon icon="tabler:icon-name" width={24} />;
}

Compare Tabler Icons with similar icon packs