tabler-icons-react-esm

Fork notice. This is an unofficial, drop-in republish of @tabler/icons-react reworked to be maximally tree-shakeable: it ships a full exports map with per-icon deep imports, dual ESM/CJS output that preserves one module per icon, per-icon type declarations, and a working dynamic-import entry. The icon set and component API are unchanged. All credit for the icons goes to the Tabler authors.

Sponsors

If you want to support my project and help me grow it, you can become a sponsor on GitHub or just donate on PayPal :)

Installation

npm install tabler-icons-react-esm
# or: yarn add tabler-icons-react-esm
# or: pnpm add tabler-icons-react-esm

How to use

Each icon is its own module, so unused icons are dropped from your bundle.

Named import (recommended for app code)

import { IconArrowLeft } from 'tabler-icons-react-esm';

const App = () => <IconArrowLeft color="red" size={48} />;

This tree-shakes reliably in modern bundlers (Vite/Rollup, esbuild, webpack 5 production builds). See Guaranteed tree-shaking below if you target older toolchains.

Deep import (guaranteed one-icon load, every bundler)

Import an icon directly by its component name to load exactly one icon — no barrel, no bundler analysis required:

import IconArrowLeft from 'tabler-icons-react-esm/IconArrowLeft';

Outline icons (IconArrowLeft), filled variants (IconArrowLeftFilled), and legacy aliases are all available as deep imports (default export).

Dynamic import

Lazy-load an icon at runtime. The simplest form is a native deep dynamic import:

const { default: IconArrowLeft } = await import('tabler-icons-react-esm/IconArrowLeft');

If you have a kebab-case icon name (e.g. from a CMS or config), use the loader map, which is keyed by icon name (arrow-left, arrow-left-filled, …):

import dynamicIconImports from 'tabler-icons-react-esm/dynamic';

const { default: IconHome } = await dynamicIconImports['home']();

Icon list

The array of all icon names is available at a dedicated subpath:

import iconsList from 'tabler-icons-react-esm/icons-list';

Props

| name | type | default | | -------- | -------- | ------------ | | size | Number | 24 | | color | String | currentColor | | stroke | Number | 2 |

Guaranteed tree-shaking

Named imports from the package root tree-shake correctly in modern bundlers. For a guaranteed minimal bundle in every setup, prefer deep imports, or let your bundler rewrite named imports into deep ones automatically.

Next.js — add the package to optimizePackageImports:

// next.config.js
module.exports = {
  experimental: {
    optimizePackageImports: ['tabler-icons-react-esm'],
  },
};

Migrating from @tabler/icons-react? The component API is identical. The one change: the icons and iconsList namespace re-exports were removed from the package root (they defeated tree-shaking). The icon-name list now lives at tabler-icons-react-esm/icons-list.

Contributing

For more info on how to contribute please see the contribution guidelines.

Caught a mistake or want to contribute to the documentation? Edit this page on Github

License

Tabler Icons is licensed under the MIT License.

Sponsor Tabler