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

Overview

Eval results

Files

SVG File Access

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

Direct access to individual SVG files for use in HTML, CSS, or JavaScript applications. Each of the 5,945 icons is available as an optimized SVG file with consistent formatting and styling.

Capabilities

Individual Icon Import

Import specific SVG files as static assets for bundling and optimization.

/**
 * Import individual SVG files using ES modules
 * Available paths:
 * - @tabler/icons/outline/{icon-name}.svg (4,964 icons)
 * - @tabler/icons/filled/{icon-name}.svg (981 icons)
 */
import iconName from "@tabler/icons/outline/{icon-name}.svg";
import iconName from "@tabler/icons/filled/{icon-name}.svg";

Usage Examples:

// Import specific icons
import homeIcon from "@tabler/icons/outline/home.svg";
import heartIcon from "@tabler/icons/filled/heart.svg";
import userIcon from "@tabler/icons/outline/user.svg";
import settingsIcon from "@tabler/icons/outline/settings.svg";

// Use in React/Vue components
function MyComponent() {
  return <img src={homeIcon} alt="Home" width="24" height="24" />;
}

// Use with CSS background-image
.icon-home {
  background-image: url('@tabler/icons/outline/home.svg');
  width: 24px;
  height: 24px;
}

HTML Image Reference

Direct file path usage for HTML image tags and CSS background images.

/**
 * Direct file paths for HTML usage
 * Path format: node_modules/@tabler/icons/icons/{style}/{icon-name}.svg
 */
<img src="path/to/@tabler/icons/icons/outline/{icon-name}.svg" alt="Icon" />
<img src="path/to/@tabler/icons/icons/filled/{icon-name}.svg" alt="Icon" />

Usage Examples:

<!-- Direct HTML usage -->
<img src="node_modules/@tabler/icons/icons/outline/home.svg" alt="Home" />
<img src="node_modules/@tabler/icons/icons/filled/heart.svg" alt="Heart" />

<!-- CSS background usage -->
<div class="icon" style="background-image: url('node_modules/@tabler/icons/icons/outline/arrow-left.svg')"></div>

Dynamic Icon Loading

Programmatic loading of icons based on name and style parameters.

/**
 * Dynamic icon import function
 * @param iconName - Name of the icon (kebab-case)
 * @param style - Icon style ('outline' or 'filled')
 * @returns Promise resolving to the imported SVG module
 */
async function loadIcon(iconName: string, style: 'outline' | 'filled' = 'outline'): Promise<any>;

Usage Examples:

// Dynamic loading function
const loadIcon = async (iconName, style = 'outline') => {
  try {
    return await import(`@tabler/icons/${style}/${iconName}.svg`);
  } catch (error) {
    console.error(`Icon ${iconName} (${style}) not found`);
    return null;
  }
};

// Usage in applications
const homeIcon = await loadIcon('home', 'outline');
const heartIcon = await loadIcon('heart', 'filled');

// With error handling
const iconNames = ['home', 'user', 'settings', 'heart'];
const loadedIcons = await Promise.all(
  iconNames.map(name => loadIcon(name, 'outline'))
);

Inline SVG Usage

Direct inline SVG usage by copying SVG content into HTML.

/**
 * Inline SVG format - standard across all icons
 * Outline icons: stroke-based with currentColor
 * Filled icons: fill-based with currentColor
 */
interface SVGFormat {
  xmlns: "http://www.w3.org/2000/svg";
  width: "24";
  height: "24";
  viewBox: "0 0 24 24";
  // Outline icons
  fill?: "none";
  stroke?: "currentColor";
  strokeWidth?: "2";
  strokeLinecap?: "round";
  strokeLinejoin?: "round";
  // Filled icons
  fill?: "currentColor";
}

Usage Examples:

<!-- Inline outline icon -->
<svg xmlns="http://www.w3.org/2000/svg" 
     width="24" height="24" 
     viewBox="0 0 24 24" 
     fill="none" 
     stroke="currentColor" 
     stroke-width="2" 
     stroke-linecap="round" 
     stroke-linejoin="round">
  <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
  <polyline points="9,22 9,12 15,12 15,22"/>
</svg>

<!-- Inline filled icon -->
<svg xmlns="http://www.w3.org/2000/svg" 
     width="24" height="24" 
     viewBox="0 0 24 24" 
     fill="currentColor">
  <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.566"/>
</svg>

Icon Naming Conventions

Name Format

All icon names follow kebab-case convention with descriptive, semantic naming.

/**
 * Icon naming patterns:
 * - Simple names: home, user, heart, star
 * - Compound names: arrow-left, user-circle, home-2
 * - Directional: arrow-up, arrow-down, arrow-left, arrow-right
 * - Variants: icon-name, icon-name-2, icon-name-off (disabled state)
 */
type IconName = string; // kebab-case format

Examples:

// Simple icons
import home from "@tabler/icons/outline/home.svg";
import user from "@tabler/icons/outline/user.svg";
import heart from "@tabler/icons/filled/heart.svg";

// Compound names
import arrowLeft from "@tabler/icons/outline/arrow-left.svg";
import userCircle from "@tabler/icons/outline/user-circle.svg";
import home2 from "@tabler/icons/outline/home-2.svg";

// Variants
import wifiIcon from "@tabler/icons/outline/wifi.svg";
import wifiOff from "@tabler/icons/outline/wifi-off.svg";

Style Variants

Icons are available in two primary styles with different visual characteristics.

/**
 * Style variants:
 * - outline: Line-based icons with 2px stroke (4,964 icons)
 * - filled: Solid-filled icons (981 icons)
 */
type IconStyle = 'outline' | 'filled';

Style Differences:

<!-- Outline style: stroke-based -->
<svg stroke="currentColor" stroke-width="2" fill="none">
  <path d="..."/> <!-- stroke-based paths -->
</svg>

<!-- Filled style: fill-based -->
<svg fill="currentColor">
  <path d="..."/> <!-- solid fill paths -->
</svg>

File Structure

Directory Organization

Icons are organized in a predictable directory structure for easy access.

@tabler/icons/
├── icons/
│   ├── outline/           # 4,964 outline SVG files
│   │   ├── home.svg
│   │   ├── user.svg
│   │   └── ...
│   └── filled/            # 981 filled SVG files
│       ├── heart.svg
│       ├── star.svg
│       └── ...
├── icons.json             # Complete metadata
├── tabler-nodes-outline.json
└── tabler-nodes-filled.json

File Specifications

All SVG files follow consistent specifications for predictable behavior.

/**
 * SVG file specifications
 */
interface SVGSpecs {
  dimensions: "24x24px";
  viewBox: "0 0 24 24";
  strokeWidth: "2px" | "none"; // outline vs filled
  strokeCaps: "round";
  strokeJoins: "round";
  colorInheritance: "currentColor";
  optimization: "SVGO optimized";
  fileSize: "~500-2000 bytes";
}

CSS Integration

Styling Icons

Icons inherit color from CSS and can be styled like any other element.

/* Color inheritance */
.icon {
  color: #3b82f6; /* Icon will be blue */
}

/* Size customization */
.icon-large {
  width: 32px;
  height: 32px;
}

/* Stroke width customization (outline icons only) */
.icon-thin {
  stroke-width: 1;
}

.icon-thick {
  stroke-width: 3;
}

/* Background usage */
.icon-bg {
  background-image: url('@tabler/icons/outline/home.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
}

Responsive Icons

Icons can be made responsive using CSS techniques.

/* Responsive sizing */
.icon-responsive {
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
}

/* Media query sizing */
@media (max-width: 768px) {
  .icon-mobile {
    width: 20px;
    height: 20px;
  }
}

Install with Tessl CLI