Tabler Icons

Overview

Tabler Icons is the largest set in Icony: 4,985 outline icons and 1,001 filled icons in the React package, all on a 24×24 grid. The outline style uses the same 2px round-capped strokes as Lucide, so the two look like siblings, but Tabler goes much further into specialist territory: medical, finance, hardware, weather, maps and hundreds of brand logos. Reach for it when you’re tired of drawing the one icon your set is missing.

At a Glance

Version examined

@tabler/icons-react 3.36.1

Icons in the package

5,986 (4,985 outline, 1,001 filled)

Icons available in Icony

5,986

Canvas

24×24 viewBox

Drawing model

Outline: strokes. Filled: fill="currentColor", stroke="none"

Default stroke

2, round caps and round joins

Rendered IconHome SVG

386 bytes (234 gzipped)

License

MIT

Design language

A rendered <IconHome /> has the same root attributes as a Lucide icon: viewBox="0 0 24 24", fill="none", stroke="currentColor", stroke-width="2", round caps and joins. The drawing is more geometric, though.

The house is three paths (roof, walls, door), written mostly as straight line commands (l9 -9l9 9), with rounded corners only where walls meet the floor. Tabler shapes tend to be built from simple primitives, which keeps 5,000+ icons looking related.

The raw SVG files in the companion @tabler/icons package contain one extra element: <path stroke="none" d="M0 0h24v24H0z" fill="none"/>, an invisible 24×24 box that keeps the bounding box stable in design tools. The React components leave it out, so a file copied from the website can differ slightly from what React renders.

Filled icons are a different drawing model. IconHomeFilled renders fill="currentColor" and stroke="none", with the door cut out of a single solid path. Only about one in five outline icons has a filled twin (1,001 of 4,985), so you can’t build a fully filled UI from Tabler alone.

Coverage, cost and trade-offs

• Coverage. With 5,986 icons, a niche concept (a specific medical device, a payment brand, a chart type) is far more likely to exist here than in any other set on this site.
• Strokes are adjustable, as in Lucide. The stroke prop maps directly to stroke-width.
• Per-icon modules are small: IconHome.mjs is 651 bytes (385 gzipped), and the package is marked sideEffects: false.
• The install is big. @tabler/icons-react takes about 74 MB in node_modules. Your users never download it, but it slows fresh installs and CI caches.
• Filled coverage is uneven. Switching between outline and filled states only works for icons that have both.
• In a catalog this large, some specialized icons carry more detail than the core set and get busy at 16px.

Cases where Tabler is overkill

• You need every icon in both outline and solid: Phosphor or Heroicons cover that fully.
• Your UI only needs 50–100 common icons and you want the most polished small set. Heroicons or Lucide will do, and they are easier to browse.
• You mostly render below 16px, where a 24-unit grid with 2-unit strokes gets muddy. A 16×16 set like Bootstrap Icons holds up better.

Tabler vs. Lucide vs. Bootstrap Icons

Tabler and Lucide are visually compatible, so the choice is mostly about catalog size and API. Lucide calls the prop strokeWidth; Tabler calls it stroke. Lucide exports House; Tabler exports IconHome.

That Icon prefix means Tabler names almost never collide with your own components.

Bootstrap Icons is the other large set (2,078 components), but it draws on a 16×16 grid with filled outlines instead of strokes, so line weight is fixed. Pick Tabler to tune stroke weight. Pick Bootstrap for crisp small sizes and a more traditional look.

Installation gotchas

• The React package is @tabler/icons-react. The companion @tabler/icons package holds the raw SVG files and JSON icon data. That’s useful outside React or in build scripts, but it isn’t what you import in components.
• Next.js 16 includes @tabler/icons-react in its default optimizePackageImports, so named imports stay cheap in development. In other setups, import named components and avoid namespace imports.
• Use stroke, not strokeWidth. Passing strokeWidth also works because extra props are spread onto the <svg> last, but it bypasses the component’s own prop and is easy to miss in reviews.
• Filled components ignore stroke. Size them with size and color them with color like any other icon.
• Tabler does not set aria-hidden. Mark decorative icons yourself; pass title only when the icon is the sole label for something.

License: MIT, no credit required

Tabler Icons is MIT-licensed. For a set of nearly 6,000 icons that is unusually generous: you can use them in commercial and closed-source products, modify them and redistribute them. Keep the copyright and license notice with the code you ship. A notices file is enough, and no credit is required in the interface.

The license covers the whole catalog, including the drawings of the brand-logo icons. The trademarks themselves still belong to their owners.

Key Features

• 4,985 outline + 1,001 filled icons in one package
• 24×24 grid, 2px round strokes by default
• stroke prop changes line weight on outline icons
• Filled variants as separate …Filled components
• title prop renders an accessible <title> element
• MIT license

Installation

npm install @tabler/icons-react

Usage Example

Basic React usage with Tabler Icons

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

export function Nav({ active }: { active: boolean }) {
  return (
    <div className="flex gap-3">
      {/* Outline: stroke controls line weight */}
      <IconSettings size={20} stroke={1.5} aria-hidden="true" />

      {/* Filled variant is a separate component; stroke has no effect on it */}
      {active
        ? <IconHomeFilled size={20} aria-hidden="true" />
        : <IconHome size={20} stroke={1.5} aria-hidden="true" />}
    </div>
  );
}

Best For

Common Questions