Tabler Icons

Tabler Icons provides a "filled" version of certain icons. These icons use the fill="currentColor" attribute on their internal paths and typically set stroke-width="0" to achieve a solid look. You can identify these in the library by their naming convention (e.g., icon-tabler-bell-filled).

<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-bell-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  <path d="M14.235 19c.865 0 1.322 1.024 .745 1.668a3.992 3.992 0 0 1 -2.98 1.332a3.992 3.992 0 0 1 -2.98 -1.332c-.552 -.616 -.158 -1.579 .634 -1.661l.11 -.006h4.471z" stroke-width="0" fill="currentColor"></path>
  ...
</svg>

The package is tree-shakable, allowing you to choose exactly which icons to include in your bundle. There are two primary ways to use icons:

1. Using the provider (by name): Register icons via provideTablerIcons() and use their string names in templates. This is recommended for standalone applications.
2. Passing an icon object (by reference): Import the specific Icon... symbol and bind it directly to the [icon] input. This method does not require a provider.

Icons are exported as Icon… named symbols from @tabler/icons-angular.

You can reference icons directly from unpkg by using the following URL pattern, replacing $ICONS_VERSION with your desired version number.

<img src="https://unpkg.com/@tabler/icons@$ICONS_VERSION/icons/home.svg" />

To use Tabler Icons in an Astro application, install the @tabler/icons-astro package using your preferred package manager.

npm install @tabler/icons-astro
# or
pnpm install @tabler/icons-astro
# or
yarn add @tabler/icons-astro

To use Tabler Icons in a React Native project, install the @tabler/icons-react-native package via your preferred package manager, or download the package directly from the GitHub releases page.

npm install @tabler/icons-react-native

You can install the Tabler Icons implementation for Preact using your preferred package manager.

npm install @tabler/icons-preact

Or using yarn:

yarn add @tabler/icons-preact

Or using pnpm:

pnpm install @tabler/icons-preact

You can browse the full collection of over 5,000 high-quality icons at the official website: https://tabler.io/icons.

On the website, you can:

1. Search for specific icons using the search bar.
2. Browse icons by category.
3. Download icons in various formats, including SVG, PNG, and Icon Font.

Install the @tabler/icons-astro package via your preferred package manager to use Tabler Icons as Astro components.

npm install @tabler/icons-astro

You can install the EPS version of Tabler Icons via npm using the @tabler/icons-eps package, or by downloading the files directly from the GitHub releases page. Once installed, all EPS files are located in the icons subdirectory.

npm install @tabler/icons-eps

Install the Tabler Icons implementation for Angular using your preferred package manager.

Prerequisites:

• Angular >=21.0.0 (@angular/core and @angular/common).

yarn add @tabler/icons-angular
# or
npm install @tabler/icons-angular
# or
pnpm add @tabler/icons-angular

You can install the Tabler Icons sprite package using any of the following package managers:

yarn add @tabler/icons-sprite

npm install @tabler/icons-sprite

pnpm install @tabler/icons-sprite

Alternatively, you can download the sprite files directly from the GitHub releases page.