or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.mdmetadata.mdreact-components.mdsvelte-components.mdsvg-data.mdsvg-files.mdvue-components.md
tile.json

tessl/npm-tabler--icons

Comprehensive ecosystem of 5,945 free MIT-licensed SVG icons with framework components for React, Vue, Svelte and raw SVG files.

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

To install, run

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

index.mddocs/

Tabler Icons

Tabler Icons is a comprehensive ecosystem of 5,945 free MIT-licensed SVG icons designed for modern web projects. Each icon is meticulously crafted on a 24x24 grid with a consistent 2px stroke, providing visual consistency across all designs. The library offers both outline and filled variants, extensive categorization, and framework-specific components for React, Vue, Svelte, and more.

Package Information

Core Package:

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

Framework Packages:

  • React: npm install @tabler/icons-react
  • Vue: npm install @tabler/icons-vue
  • Svelte: npm install @tabler/icons-svelte
  • Additional: PNG, PDF, Webfont, Sprite formats available

Core Imports

Framework Components (Recommended):

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

// Vue  
import { IconHome, IconHeart } from '@tabler/icons-vue';

// Svelte
import { IconHome, IconHeart } from '@tabler/icons-svelte';

Raw SVG Files:

// Import individual SVG files
import homeIcon from "@tabler/icons/outline/home.svg";
import heartFilledIcon from "@tabler/icons/filled/heart.svg";

// Import metadata files
import iconsData from "@tabler/icons/icons.json";
import outlineNodes from "@tabler/icons/tabler-nodes-outline.json";
import filledNodes from "@tabler/icons/tabler-nodes-filled.json";

Basic Usage

Framework Components:

// React
function MyApp() {
  return (
    <div>
      <IconHome size={24} color="blue" />
      <IconHeart size={32} color="red" stroke={1.5} />
    </div>
  );
}

// Vue
<template>
  <div>
    <IconHome size="24" color="blue" />
    <IconHeart size="32" color="red" stroke-width="1.5" />
  </div>
</template>

// Svelte
<main>
  <IconHome size={24} color="blue" />
  <IconHeart size={32} color="red" stroke={1.5} />
</main>

Raw SVG Usage:

// HTML image usage
<img src="node_modules/@tabler/icons/icons/outline/home.svg" alt="Home" />

// Dynamic icon loading
const loadIcon = async (iconName, style = 'outline') => {
  return await import(`@tabler/icons/${style}/${iconName}.svg`);
};

// Programmatic metadata access
import iconsData from "@tabler/icons/icons.json";

// Find icons by category
const designIcons = Object.values(iconsData).filter(icon => 
  icon.category === 'Design'
);

Architecture

Tabler Icons is built around several key components:

  • Framework Components: Ready-to-use React, Vue, and Svelte components with full TypeScript support
  • SVG Files: Individual optimized SVG files for each icon in outline and filled styles
  • Metadata System: Complete icon metadata with categories, tags, and unicode values
  • Path Data API: Programmatic access to SVG path elements for custom rendering
  • Export System: Wildcard exports allowing import of any icon file
  • Consistent Format: Standardized 24x24 grid with customizable stroke properties

Capabilities

React Components

Tree-shakable React components for all 5,945 icons with full TypeScript support, forwardRef compatibility, and consistent prop interfaces.

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

interface IconProps {
  size?: string | number;
  stroke?: string | number;
  color?: string;
  title?: string;
  className?: string;
}

type TablerIcon = React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

React Components

Vue Components

Vue 3 components for all 5,945 icons with reactive props and composition API support.

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

interface IconProps {
  size?: string | number;
  color?: string;
  stroke?: string;
  strokeWidth?: string | number;
  class?: string;
}

Vue Components

Svelte Components

Svelte components for all 5,945 icons with reactive props and full TypeScript support.

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

interface IconProps {
  size?: number;
  color?: string;
  stroke?: number;
  class?: string;
}

Svelte Components

SVG File Access

Direct access to individual SVG files for use in HTML, CSS, or JavaScript applications. Supports both outline and filled style variants.

// Import pattern for individual SVG files
import iconName from "@tabler/icons/outline/{icon-name}.svg";
import iconName from "@tabler/icons/filled/{icon-name}.svg";

SVG File Access

Icon Metadata

Complete metadata system providing icon information including categories, tags, unicode values, and version data for all 5,945 icons.

interface IconMetadata {
  name: string;
  category: string;
  tags: string[];
  styles: {
    outline?: {
      version: string;
      unicode: string;
    };
    filled?: {
      version: string;
      unicode: string;
    };
  };
}

// Main metadata export
const iconsData: Record<string, IconMetadata>;

Icon Metadata

Programmatic SVG Data

Access to raw SVG path data for programmatic icon rendering and custom SVG generation.

type SVGPathElement = [string, Record<string, string>];
type IconPathData = SVGPathElement[];

// SVG path data exports
const outlineNodes: Record<string, IconPathData>;
const filledNodes: Record<string, IconPathData>;

Programmatic SVG Data

Types

interface IconMetadata {
  name: string;
  category: string;
  tags: string[];
  styles: {
    outline?: StyleInfo;
    filled?: StyleInfo;
  };
}

interface StyleInfo {
  version: string;
  unicode: string;
}

type SVGPathElement = [string, Record<string, string>];
type IconPathData = SVGPathElement[];