or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

component-factory.mdicon-components.mdicons-listing.mdindex.md
tile.json

tessl/npm-tabler--icons-react

A set of free MIT-licensed high-quality SVG icons as React components for web projects.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@tabler/icons-react@3.34.x

To install, run

npx @tessl/cli install tessl/npm-tabler--icons-react@3.34.0

index.mddocs/

Tabler Icons React

Tabler Icons React provides 5,945 high-quality SVG icons as tree-shakable React components. The library includes 4,964 outline icons and 981 filled icons, each available as a React component with full TypeScript support and customizable properties.

Package Information

  • Package Name: @tabler/icons-react
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @tabler/icons-react

Core Imports

import { IconHome, IconUser, IconSettings } from "@tabler/icons-react";

For CommonJS environments:

const { IconHome, IconUser, IconSettings } = require("@tabler/icons-react");

Namespace import (not recommended for bundle size):

import { icons } from "@tabler/icons-react";
// Usage: icons.IconHome

Basic Usage

import React from 'react';
import { IconHome, IconUser, IconArrowLeft } from '@tabler/icons-react';

function App() {
  return (
    <div>
      {/* Basic icon usage */}
      <IconHome />
      
      {/* Custom size and color */}
      <IconUser size={32} color="blue" />
      
      {/* Custom stroke width */}
      <IconArrowLeft stroke={1.5} />
      
      {/* Accessibility with title */}
      <IconSettings title="Open Settings" />
      
      {/* Additional HTML attributes */}
      <IconHome 
        className="custom-icon" 
        style={{ marginRight: '8px' }}
        onClick={() => console.log('Home clicked')}
      />
    </div>
  );
}

Architecture

Tabler Icons React is built around several key components:

  • Icon Components: 5,945 individual React components, each representing a specific icon
  • Component Factory: createReactComponent function that generates icon components from SVG data
  • Type System: Full TypeScript integration with IconProps interface and component type definitions
  • SVG Rendering: Server-side compatible SVG rendering with proper accessibility attributes
  • Tree Shaking: Each icon is a separate module enabling optimal bundle sizes

Capabilities

Icon Components

Individual React components for each of the 5,945 Tabler icons. Each icon is available in outline style, with filled variants available for 981 icons.

// Outline icons (default style)
function IconHome(props: IconProps): JSX.Element;
function IconUser(props: IconProps): JSX.Element;
function IconSettings(props: IconProps): JSX.Element;

// Filled icons (981 available)
function IconHomeFilled(props: IconProps): JSX.Element;
function IconUserFilled(props: IconProps): JSX.Element;
function IconSettingsFilled(props: IconProps): JSX.Element;

interface IconProps extends Partial<Omit<React.ComponentPropsWithoutRef<'svg'>, 'stroke'>> {
  /** Icon size in pixels (width and height). Default: 24 */
  size?: string | number;
  /** Icon stroke width for outline icons. Default: 2 */
  stroke?: string | number;
  /** Icon color. For outline icons: sets stroke color. For filled icons: sets fill color. Default: 'currentColor' */
  color?: string;
  /** Accessible title for screen readers */
  title?: string;
}

Icon Components

Component Factory

Utility function for creating custom icon components from SVG data.

function createReactComponent(
  type: 'outline' | 'filled',
  iconName: string,
  iconNamePascal: string,
  iconNode: IconNode
): TablerIcon;

type IconNode = [elementName: keyof ReactSVG, attrs: Record<string, string>][];
type TablerIcon = ForwardRefExoticComponent<Omit<IconProps, "ref"> & RefAttributes<Icon>>;
type Icon = FunctionComponent<IconProps>;

Component Factory

Icons Listing

Metadata and utilities for working with the complete icon set.

// Namespace export containing all icons
export const icons: Record<string, React.ComponentType<IconProps>>;

// Icon list metadata (namespace export)
export const iconsList: Record<string, any>;

Icons Listing

Types

interface IconProps extends Partial<Omit<React.ComponentPropsWithoutRef<'svg'>, 'stroke'>> {
  /** Icon size in pixels (width and height). Default: 24 */
  size?: string | number;
  /** Icon stroke width for outline icons. Default: 2 */
  stroke?: string | number;
  /** Icon color. For outline icons: sets stroke color. For filled icons: sets fill color. Default: 'currentColor' */
  color?: string;
  /** Accessible title for screen readers */
  title?: string;
}

type IconNode = [elementName: keyof ReactSVG, attrs: Record<string, string>][];

type Icon = FunctionComponent<IconProps>;

type TablerIcon = ForwardRefExoticComponent<Omit<IconProps, "ref"> & RefAttributes<Icon>>;