Tabler Icons

Open source alternative to Font Awesome Pro, Flaticon and Streamline Icons

22.4K stars
MIT
Active this week
Last commit 6 days ago

Last verified Oct 20, 2026

Build web interfaces with 6,238 free, MIT-licensed SVG icons designed on a consistent 24x24 grid with configurable stroke and color.

Visit website GitHub22.4K

Read the full breakdownWho it is for, how it works, trade-offs, the quick start and the FAQ

who it's for

Who Tabler Icons is for#

Frontend developers building web applications

Tabler's framework packages drop into a React, Vue, or Svelte project with typed components. Icons inherit currentColor so they pick up the text color from the surrounding element without extra configuration. The tree-shaking support keeps bundle size low even when importing from a large set.

Skip if:

If your project already uses Font Awesome or a brand icon set that covers your design requirements and the switching cost is high, adding a second icon library creates complexity without clear gain.

UI/UX designers working in Figma

The Figma plugin brings the full 6,238-icon set into Figma with search, size, stroke, and color customization. The plugin tracks the latest release, so design files stay aligned with the npm package version used in production code.

Skip if:

If your team's design system is built on a paid icon font already embedded in a style guide, adding Tabler creates a parallel set that can diverge from production over time.

Teams building admin dashboards and internal tools

Tabler Icons was developed alongside the Tabler admin HTML template and is designed for data-dense interfaces. The 20+ categories cover most dashboard needs: arrows, charts, database, development, devices, e-commerce, and system icons are all included with consistent stroke and spacing.

Skip if:

If your product requires icon styles beyond outline and filled, such as duotone or animated variants, Tabler does not offer those.

the problem

The problem it solves#

Icons in UI projects accumulate from multiple sources. One library covers arrows, another brand logos, a third action icons, and by the third sprint the interface shows three inconsistent stroke weights on two different grids. Visual inconsistency at that scale is hard to catch in code review and expensive to fix after designs are approved.

Paid icon services charge subscription fees for full catalog access, require attribution on free tiers, or lock certain formats behind paid plans. For teams shipping commercial products, licensing ambiguity is a real concern. Some libraries restrict commercial use or require per-project licenses. Free tiers typically cap the icon count well below what a production UI needs.

how Tabler Icons solves it

How it solves it#

6,238 icons in outline and filled styles

The outline set contains 5,184 icons and the filled set adds 1,054 more, covering 20+ categories including arrows, brands, charts, e-commerce, development, health, and vehicles. Both sets share the same 24x24 grid and naming scheme, so switching between outline and filled variants requires changing only the package import.

Framework packages for React, Vue, Svelte, and more

Official npm packages exist for React, Vue, Svelte (v4 and v5 with runes), SolidJS, Astro, Angular, Preact, React Native, and core SVG files. React, Preact, and SolidJS packages are ES module builds, so only the icons you import are included in the bundle. Angular uses a standalone TablerIconComponent with tree-shakeable icon providers.

Configurable stroke width via CSS

Every outline icon is drawn to render cleanly at stroke widths from 1px to 3px, not only the default 2px. Color and stroke width are set through CSS using currentColor, so icons inherit the parent element's text color and can be resized with a single CSS rule. No per-icon overrides are needed.

CDN delivery via jsDelivr

All packages are mirrored to jsDelivr and available without an npm install. Individual SVG files load at a predictable URL pattern, and an SVG sprite serves all icons through a single HTTP request using the <use> element. The CSS webfont is also on jsDelivr, covering setups without a JavaScript build step.

Official Figma plugin

The official Figma plugin gives designers access to the full 6,238-icon set from within Figma. Icons can be searched by name, and size, stroke width, and color are adjustable before insertion. The plugin tracks the latest release, so Figma files stay in sync with the npm package version in production code.

strengths · trade-offs

Strengths and trade-offs#

Strengths

MIT license, no attribution requiredEvery icon in the set is MIT licensed. You can use them in commercial products, modify them, and ship modified versions without attribution or payment. Unlike Flaticon's free tier, which requires a backlink on every use, or Font Awesome Pro, which requires a paid subscription for commercial use, Tabler imposes no licensing cost or attribution requirement at any usage level.
Actively maintained since 2020The repository received its last push on October 10, 2026, with 22,195 GitHub stars and 1,234 forks. The project has grown the icon catalog continuously since February 2020 and publishes a public changelog on the website. Icon requests are tracked in the GitHub issue tracker and added to future releases.
Tree-shaking in ES module framework packagesThe React, Preact, and SolidJS packages are built as ES modules. Only the icons you import appear in your production bundle, regardless of how large the full set is. A project that uses 50 icons from a set of 6,238 does not carry the byte cost of the rest. This is a concrete advantage over webfont delivery, where every glyph loads even if unused.

Trade-offs

-No duotone, hand-drawn, or animated icon stylesTabler icons have a uniform 2px line-art look in outline and filled variants. If your design calls for duotone icons, expressive illustrations, or animated icons, Tabler does not offer them. Paid services like Font Awesome Pro and premium icon libraries include additional style families that some brand guidelines specifically require.
-No hosted icon kit or usage dashboardFont Awesome Pro and similar paid services provide a hosted kit system where you configure which icons to serve, the CDN delivers only that subset with version management, and a dashboard shows load statistics. Tabler provides package files and CDN hosting via jsDelivr but no managed kit or usage dashboard. Teams that rely on kit-based workflows manage their own icon bundles.

versus alternatives

Tabler Icons vs alternatives#

Tabler Icons vs Font Awesome Pro

Font Awesome Pro is a commercial icon library that extends the free Font Awesome set with additional icon styles (thin, light, duotone) and a hosted kit management system. Both target frontend developers building icon-heavy web products.

Feature	Tabler Icons	Font Awesome Pro
License	MIT	Proprietary
Styles	Outline, filled	Thin, light, regular, solid, duotone
Self-hosting	Yes, via npm	Yes or hosted CDN
Pricing	Free	Paid subscription
Framework packages	React, Vue, Svelte, Angular, and more	React, Vue, Angular

Tabler Icons is the better choice when you need MIT-licensed icons at no cost and your design fits a clean line-art style. Font Awesome Pro is worth considering when you need a wider range of weight styles (especially duotone or light) or the hosted kit management system that tracks icon usage across projects.

Tabler Icons vs Flaticon

Flaticon is a stock icon marketplace with icons from multiple designers. Free use requires attribution on every use; paid plans remove that requirement.

Feature	Tabler Icons	Flaticon
License	MIT, no attribution	Free tier requires attribution
Style consistency	Uniform grid and stroke	Mixed (multiple designers)
Self-hosting	Yes	Downloads available
Pricing	Free	Free with attribution, or paid

Tabler's single-designer origin gives it consistent stroke weight and grid alignment across all 6,238 icons. Flaticon's large catalog is useful when searching for a very specific icon not covered by Tabler, but mixed-designer styles create visual inconsistency in production UIs where every icon needs to read as part of the same family.

Tabler Icons vs premium icon libraries

premium icon libraries is a commercial icon library offering multiple families and styles under a subscription model.

Feature	Tabler Icons	premium icon libraries
License	MIT	Proprietary
Pricing	Free	Paid subscription
Framework packages	React, Vue, Svelte, and more	Limited
Self-hosting	Yes	Export only

Tabler Icons covers most web UI icon needs at no cost. premium is worth considering for teams that need multiple distinct visual styles or illustrative icon families that go beyond line art.

install · quick start

Quick start#

bash

Install the framework package for your stack with npm, yarn, or pnpm.
```bash
npm install @tabler/icons-react
```

tech stack · detected from GitHub

What it's built on#

Languages: JavaScriptTypeScript
Frameworks: AngularReactSvelte
Tooling: esbuildRollup

frequently asked

FAQ#

Is Tabler Icons free for commercial use?

Yes. Every icon is MIT licensed, so you can use them in commercial products, modify them, and ship modified versions without attribution or payment. The MIT license has no commercial restriction.

How do I add Tabler Icons to a React project?

Install the React package with npm install @tabler/icons-react, then import individual icon components: import { IconHome } from '@tabler/icons-react'. The package is built as ES modules, so unused icons are tree-shaken and do not increase bundle size. The same pattern applies to the Vue, Svelte, SolidJS, Astro, and Angular packages.

Does Tabler Icons have a Figma plugin?

Yes. There is an official Figma plugin that provides access to all 6,238 icons from within Figma. You can search by name, adjust size, stroke width, and color, and insert icons directly into design files. The plugin reflects the latest release.

What is the difference between the free icons and the paid Bundle?

The SVG source files and all framework npm packages for all 6,238 icons are free under MIT. The paid Bundle option ($9 one-time) provides compiled PNG and PDF formats plus the webfont, which is useful for non-developers who need ready-to-use files without npm. The webfont and all framework packages are also available free via npm; the Bundle is a convenience download, not a license upgrade.

Can I use Tabler Icons without a build tool?

Yes. Individual SVG files are available from jsDelivr CDN at predictable URLs, and a prebuilt CSS webfont is available at cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css. Include the stylesheet link and use icons with the ti base class and ti-{name} modifier, with no build step required.

also worth a look

Similar open-source tools#

God's Eye View

Featured

Alternative toFlightradar24

Real-time global intelligence on a 3D globe

58,501 GitHub stars
Licence MIT with third-party data restrictions

Lyrimuse

Alternative toVerse

Word-by-word lyrics for Mac, nine players, Last.fm built in

276 GitHub stars
Licence GPL-3.0

Caret

Alternative toPlasmic

Your design canvas is backed by real files in git

38 GitHub stars
Licence Apache-2.0

VvvebJs

Alternative toUnlayer

Open source drag-and-drop page builder for Bootstrap 5 sites

8,694 GitHub stars
Licence Apache-2.0

inspo

Alternative toRefero

Real production sites as design reference for AI coding agents

903 GitHub stars
Licence MIT

bg0

Alternative toremove.bg

Background removal that runs in your browser, never uploads

451 GitHub stars
Licence Apache-2.0

by category

Open source tools in these categories#

196

Web Development

freeCodeCamp, superpowers, Skills for Real Engineers 97

Design & Creative

ComfyUI, Excalidraw, Godot Engine

Featured

Inbox Zero

Alternative toSuperhuman

AI email assistant that drafts replies and clears your inbox

12,712 GitHub stars
Licence AGPL-3.0
#Email

rakazo

Alternative toGrok Bot

AI teammates you own: your keys, your model, your machine.

4,904 GitHub stars
Licence Apache-2.0
#AI Agents

Omnara

Alternative toClaude Managed Agents

Open-source agent deployment API. Self-host or use Omnara Cloud.

2,957 GitHub stars
Licence Apache-2.0
#AI Agents

Feature your project

The projects we add and every new guide. Free, unsubscribe any time.

Find open source alternatives to paid software

Tabler Icons vs Font Awesome Pro

Feature	Tabler Icons	Font Awesome Pro
License	MIT	Proprietary
Styles	Outline, filled	Thin, light, regular, solid, duotone
Self-hosting	Yes, via npm	Yes or hosted CDN
Pricing	Free	Paid subscription
Framework packages	React, Vue, Svelte, Angular, and more	React, Vue, Angular

Tabler Icons vs Flaticon

Flaticon is a stock icon marketplace with icons from multiple designers. Free use requires attribution on every use; paid plans remove that requirement.

Feature	Tabler Icons	Flaticon
License	MIT, no attribution	Free tier requires attribution
Style consistency	Uniform grid and stroke	Mixed (multiple designers)
Self-hosting	Yes	Downloads available
Pricing	Free	Free with attribution, or paid

Tabler Icons vs premium icon libraries

premium icon libraries is a commercial icon library offering multiple families and styles under a subscription model.

Feature	Tabler Icons	premium icon libraries
License	MIT	Proprietary
Pricing	Free	Paid subscription
Framework packages	React, Vue, Svelte, and more	Limited
Self-hosting	Yes	Export only

Tabler Icons covers most web UI icon needs at no cost. premium is worth considering for teams that need multiple distinct visual styles or illustrative icon families that go beyond line art.