CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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[];
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@tabler/icons@3.34.x
Publish Source
CLI
Badge
tessl/npm-tabler--icons badge