Tabler Icons React

Tabler Icons React is the official React binding for the Tabler Icons set, exposing over 6000 free, MIT-licensed SVG icons as individual React components. Each icon is drawn on a 24x24 grid with a consistent 2px stroke, giving interfaces a uniform, professional look across outline and filled variants.

Because every icon ships as its own ES module component, bundlers tree-shake away anything you do not import, keeping production bundles small. Icons render as inline SVG, so they inherit color from CSS and accept props for size, color, and stroke width, making them trivial to theme and animate.

What You Get

• Over 6000 MIT-licensed icons in outline and filled variants, each as a dedicated React component
• Full tree-shaking via per-icon ES modules so only imported icons ship to production
• TypeScript types out of the box, including typed props and forwardRef support
• Customizable size, color, and stroke width through simple component props
• Inline SVG rendering that inherits currentColor and supports titles for accessibility

Common Use Cases

• Adding consistent iconography to buttons, menus, and navigation in a React app
• Building design systems that need a large, uniform icon set with theming support
• Rendering status, action, and brand icons that scale crisply at any size
• Prototyping UIs quickly with a familiar named-import API

Under The Hood

Architecture - The React package is generated from a shared SVG icon corpus by a build script (packages/icons-react/build.mjs) that emits one component file per icon plus a barrel index.ts. Every icon is created through a single factory, src/createReactComponent.ts, which returns a forwardRef component that calls React.createElement(‘svg’, …) with per-type default attributes from src/defaultAttributes.ts and maps the icon’s node array into child SVG elements. This keeps all rendering logic in one tiny factory while the thousands of generated modules carry only their icon path data.

Tech Stack - Written in TypeScript against React (declared as a peer dependency of react >= 16) and depending on the sibling @tabler/icons package for raw icon data. Rollup bundles both CommonJS and preserved-module ESM outputs (rollup.config.mjs), rollup-plugin-dts generates type declarations, and the package is marked sideEffects:false to enable tree-shaking. Tests run under Vitest with type-checking enabled.

Code Quality - The codebase is small, typed, and consistent: a typed IconProps interface (src/types.ts) extends the standard SVG element props, the factory destructures sensible defaults (color currentColor, size 24, stroke 2), and each component sets a displayName. Because the icon components themselves are code-generated, correctness rests on the single well-scoped factory, which is exercised by the Vitest suite (vitest run —typecheck).

API Design - Developer experience is excellent and idiomatic: import the named icon you need (import { IconArrowLeft } from ‘@tabler/icons-react’) and render it like any component, adjusting appearance with plain props such as size, color, and stroke. Icons inherit currentColor by default, accept a title prop for accessibility, and forward refs to the SVG node, so there is essentially no boilerplate or configuration to learn.