Framework guide

Use Tabler icons in React

Import the icons your component uses. Tabler exposes each icon as a React component, so you can set its size, stroke, and color through props.

Install the package

npm install @tabler/icons-react

Create a labeled button

The text names the action. Hide the decorative SVG from assistive technology so the button label does not repeat.

SaveButton.jsx

import { IconHeart } from '@tabler/icons-react';

export function SaveButton() {
  return (
    <button type="button">
      <IconHeart size={20} stroke={1.5} aria-hidden="true" />
      Save item
    </button>
  );
}

Use a filled variant

Filled components use the Filled suffix where that variant exists. Change their size or color. The stroke prop applies to outline icons.

import { IconHeartFilled } from '@tabler/icons-react';

export function SavedButton() {
  return (
    <button type="button" aria-label="Remove from saved items">
      <IconHeartFilled size={20} color="crimson" aria-hidden="true" />
    </button>
  );
}

Match your interface

Use named imports for the components you need. Avoid a dynamic import of the complete icon namespace when a fixed set of icons will do.

Icons inherit the surrounding text color by default. Keep their dimensions consistent with nearby controls. Use a visible label when a symbol could have several meanings.

Choose an icon

Open the heart icon to compare available styles and copy its code. Browse topic collections or the complete catalog for another symbol.

Check the upstream package documentation for other integrations. Read the icon license and attribution before distribution.