tessl/npm-tabler--icons-react

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

—

Pending

Overview

Eval results

Files

Icon Components

Name: tessl/npm-tabler--icons-react
Author: tessl

Individual React components for each of the 5,945 Tabler icons. Each icon follows a consistent naming pattern and implements the same component interface.

Capabilities

Icon Component Structure

All icon components are React functional components with forward ref support and consistent prop handling.

/**
 * All icon components follow this structure:
 * - Outline icons: Icon{PascalCaseName}
 * - Filled icons: Icon{PascalCaseName}Filled
 */
type IconComponent = ForwardRefExoticComponent<Omit<IconProps, "ref"> & RefAttributes<Icon>>;

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;
}

Sample Icon Components

Here are examples of available icon components (representing the full set of 5,945 icons):

// Navigation and UI icons
function IconHome(props: IconProps): JSX.Element;
function IconHomeFilled(props: IconProps): JSX.Element;
function IconUser(props: IconProps): JSX.Element;
function IconUserFilled(props: IconProps): JSX.Element;
function IconSettings(props: IconProps): JSX.Element;
function IconSettingsFilled(props: IconProps): JSX.Element;

// Arrows and directions
function IconArrowLeft(props: IconProps): JSX.Element;
function IconArrowRight(props: IconProps): JSX.Element;
function IconArrowUp(props: IconProps): JSX.Element;
function IconArrowDown(props: IconProps): JSX.Element;
function IconChevronLeft(props: IconProps): JSX.Element;
function IconChevronRight(props: IconProps): JSX.Element;

// Actions and controls
function IconPlus(props: IconProps): JSX.Element;
function IconMinus(props: IconProps): JSX.Element;
function IconX(props: IconProps): JSX.Element;
function IconCheck(props: IconProps): JSX.Element;
function IconEdit(props: IconProps): JSX.Element;
function IconTrash(props: IconProps): JSX.Element;
function IconDownload(props: IconProps): JSX.Element;
function IconUpload(props: IconProps): JSX.Element;

// Communication
function IconMail(props: IconProps): JSX.Element;
function IconMailFilled(props: IconProps): JSX.Element;
function IconPhone(props: IconProps): JSX.Element;
function IconPhoneFilled(props: IconProps): JSX.Element;
function IconMessage(props: IconProps): JSX.Element;
function IconMessageFilled(props: IconProps): JSX.Element;

// Media and files
function IconPhoto(props: IconProps): JSX.Element;
function IconPhotoFilled(props: IconProps): JSX.Element;
function IconVideo(props: IconProps): JSX.Element;
function IconVideoFilled(props: IconProps): JSX.Element;
function IconFile(props: IconProps): JSX.Element;
function IconFileFilled(props: IconProps): JSX.Element;
function IconFolder(props: IconProps): JSX.Element;
function IconFolderFilled(props: IconProps): JSX.Element;

// Accessibility icons
function IconAccessible(props: IconProps): JSX.Element;
function IconAccessibleFilled(props: IconProps): JSX.Element;
function IconEye(props: IconProps): JSX.Element;
function IconEyeFilled(props: IconProps): JSX.Element;
function IconEyeOff(props: IconProps): JSX.Element;

// And 5,900+ more icons following the same pattern...

Icon Naming Convention

All icons follow a consistent naming convention:

Outline Icons: Icon{PascalCaseName} (e.g., IconArrowLeft, IconHomeEdit)
Filled Icons: Icon{PascalCaseName}Filled (e.g., IconArrowLeftFilled, IconHomeFilled)

The PascalCase name is derived from the kebab-case SVG filename:

arrow-left.svg → IconArrowLeft
home-edit.svg → IconHomeEdit
user-circle.svg → IconUserCircle

Icon Categories

Icons are organized into various categories (examples):

Navigation & UI

IconHome, IconUser, IconSettings, IconDashboard, IconMenu

Actions & Controls

IconPlus, IconMinus, IconEdit, IconTrash, IconSave, IconCopy

Arrows & Directions

IconArrowLeft, IconArrowRight, IconChevronUp, IconCaretDown

Communication

IconMail, IconPhone, IconMessage, IconBell, IconAt

Media & Files

IconPhoto, IconVideo, IconFile, IconFolder, IconMusic

Business & Finance

IconCoin, IconCreditCard, IconReceipt, IconChartLine, IconReportMoney

Technology

IconCode, IconTerminal, IconDatabase, IconServer, IconApi

Social & Brands

IconBrandFacebook, IconBrandTwitter, IconBrandGithub, IconBrandGoogle

Usage Examples

Basic Icon Usage

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

function Navigation() {
  return (
    <nav>
      <IconHome />
      <IconUser />
      <IconSettings />
    </nav>
  );
}

Icon with Custom Properties

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

function LikeButton({ liked, onToggle }: { liked: boolean; onToggle: () => void }) {
  const HeartIcon = liked ? IconHeartFilled : IconHeart;
  
  return (
    <button onClick={onToggle}>
      <HeartIcon 
        size={24}
        color={liked ? 'red' : 'currentColor'}
        title={liked ? 'Unlike' : 'Like'}
      />
    </button>
  );
}

Icon with Custom Styling

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

function LoadingSpinner() {
  return (
    <IconLoader 
      size={32}
      className="animate-spin"
      style={{ color: '#3b82f6' }}
    />
  );
}

Accessibility with Title

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

function SearchButton() {
  return (
    <button>
      <IconSearch title="Search products" />
    </button>
  );
}

Component Behavior

Default Properties

All icon components have consistent default properties:

size: 24 (pixels, applied to both width and height)
color: 'currentColor' (inherits from parent text color)
stroke: 2 (for outline icons only, filled icons have stroke: 'none')

CSS Classes

Each icon component automatically receives CSS classes:

tabler-icon: Base class applied to all icons
tabler-icon-{icon-name}: Specific class based on the icon name (e.g., tabler-icon-home)

SVG Attributes

Icon components render as <svg> elements with:

Proper xmlns attribute for SVG namespace
viewBox="0 0 24 24" for consistent scaling
fill and stroke attributes based on icon type (outline vs filled)
strokeLinecap="round" and strokeLinejoin="round" for outline icons

Forward Ref Support

All icon components support React forward refs for direct DOM access:

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

function MyComponent() {
  const iconRef = useRef<SVGSVGElement>(null);
  
  return <IconHome ref={iconRef} />;
}

Tree Shaking

Icons are fully tree-shakable. Only imported icons are included in your bundle:

// Only IconHome will be included in the bundle
import { IconHome } from '@tabler/icons-react';

// This will include all icons (not recommended)
import * as icons from '@tabler/icons-react';

Complete Icon List

The library includes 5,945 icons across numerous categories. For a complete list of available icons, you can:

Browse the official Tabler Icons website
Use the iconsList export for programmatic access
Check your IDE's auto-completion when importing from @tabler/icons-react

All icons follow the naming convention Icon{PascalCaseName} with filled variants available as Icon{PascalCaseName}Filled for 981 icons.

Install with Tessl CLI

npx tessl i tessl/npm-tabler--icons-react

docs