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

Icons Listing

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

Metadata and utilities for working with the complete set of 5,945 Tabler icons. This includes namespace exports, icon metadata, and programmatic access to the icon collection.

Capabilities

Namespace Import

All icons are available via namespace import for scenarios where you need dynamic icon access.

/**
 * Namespace object containing all 5,945 icon components
 * Usage: icons.IconHome, icons.IconUser, etc.
 * Note: Not recommended for production due to bundle size
 */
export const icons: Record<string, React.ComponentType<IconProps>>;

// Example usage
import { icons } from '@tabler/icons-react';
const HomeIcon = icons.IconHome;
const UserIcon = icons.IconUser;

Icons List Metadata

Programmatic access to icon metadata for building dynamic interfaces.

/**
 * Namespace export containing icon list metadata
 * Useful for building icon pickers, search interfaces, etc.
 */
export const iconsList: Record<string, any>;

Dynamic Icon Import

Utilities for dynamically importing icons by name.

/**
 * Import an icon component by name
 * Useful for dynamic icon loading based on user input or configuration
 */
function getIconByName(iconName: string): Promise<React.ComponentType<IconProps> | null>;

// Example implementation pattern
const dynamicIconImport = async (iconName: string) => {
  try {
    const module = await import(`@tabler/icons-react`);
    return module[`Icon${iconName}`] || null;
  } catch {
    return null;
  }
};

Icon Categories

Icons are organized into logical categories for easier discovery and organization.

/**
 * Enumeration of icon categories
 */
enum IconCategory {
  NAVIGATION = 'navigation',
  ACTIONS = 'actions',
  ARROWS = 'arrows',
  COMMUNICATION = 'communication',
  MEDIA = 'media',
  BUSINESS = 'business',
  TECHNOLOGY = 'technology',
  SOCIAL = 'social',
  WEATHER = 'weather',
  TRANSPORT = 'transport',
  HEALTH = 'health',
  EDUCATION = 'education',
  FOOD = 'food',
  SPORTS = 'sports',
  MISCELLANEOUS = 'miscellaneous'
}

/**
 * Get icons by category
 */
function getIconsByCategory(category: IconCategory): IconMetadata[];

Usage Examples

Dynamic Icon Rendering

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

function DynamicIcon({ iconName, ...props }: { iconName: string } & IconProps) {
  const IconComponent = icons[`Icon${iconName}`];
  
  if (!IconComponent) {
    return <div>Icon not found</div>;
  }
  
  return <IconComponent {...props} />;
}

// Usage
function MyComponent() {
  return (
    <div>
      <DynamicIcon iconName="Home" size={24} />
      <DynamicIcon iconName="User" size={24} />
      <DynamicIcon iconName="Settings" size={24} />
    </div>
  );
}

Icon Picker Component

import { iconsList, icons } from '@tabler/icons-react';
import { useState } from 'react';

function IconPicker({ onSelect }: { onSelect: (iconName: string) => void }) {
  const [search, setSearch] = useState('');
  
  const filteredIcons = iconsList.filter(icon =>
    icon.name.toLowerCase().includes(search.toLowerCase()) ||
    icon.tags?.some(tag => tag.toLowerCase().includes(search.toLowerCase()))
  );
  
  return (
    <div>
      <input
        type="text"
        placeholder="Search icons..."
        value={search}
        onChange={(e) => setSearch(e.target.value)}
      />
      
      <div className="icon-grid">
        {filteredIcons.slice(0, 100).map((icon) => {
          const IconComponent = icons[`Icon${icon.name.replace(/-./g, x => x[1].toUpperCase())}`];
          return (
            <button
              key={icon.name}
              onClick={() => onSelect(icon.name)}
              title={icon.name}
            >
              {IconComponent && <IconComponent size={24} />}
            </button>
          );
        })}
      </div>
    </div>
  );
}

Icon Category Browser

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

function IconCategoryBrowser() {
  const categories = Array.from(new Set(iconsList.map(icon => icon.category).filter(Boolean)));
  
  return (
    <div>
      {categories.map(category => (
        <div key={category}>
          <h3>{category}</h3>
          <div className="icon-category">
            {iconsList
              .filter(icon => icon.category === category)
              .slice(0, 20)
              .map(icon => {
                const IconComponent = icons[`Icon${icon.name.replace(/-./g, x => x[1].toUpperCase())}`];
                return IconComponent ? (
                  <div key={icon.name} title={icon.name}>
                    <IconComponent size={32} />
                  </div>
                ) : null;
              })
            }
          </div>
        </div>
      ))}
    </div>
  );
}

Icon Search with Tags

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

function IconSearch({ query }: { query: string }) {
  const searchResults = iconsList.filter(icon => {
    const searchTerms = query.toLowerCase().split(' ');
    return searchTerms.every(term =>
      icon.name.toLowerCase().includes(term) ||
      icon.tags?.some(tag => tag.toLowerCase().includes(term)) ||
      icon.category?.toLowerCase().includes(term)
    );
  });
  
  return (
    <div>
      <p>Found {searchResults.length} icons matching "{query}"</p>
      <div className="search-results">
        {searchResults.map(icon => {
          const pascal = icon.name.replace(/-./g, x => x[1].toUpperCase());
          const IconComponent = icons[`Icon${pascal}`];
          
          return IconComponent ? (
            <div key={icon.name} className="search-result">
              <IconComponent size={48} />
              <span>{icon.name}</span>
              {icon.tags && (
                <div className="tags">
                  {icon.tags.map(tag => (
                    <span key={tag} className="tag">{tag}</span>
                  ))}
                </div>
              )}
            </div>
          ) : null;
        })}
      </div>
    </div>
  );
}

Configuration-based Icon Rendering

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

interface NavigationItem {
  label: string;
  iconName: string;
  href: string;
}

const navigationConfig: NavigationItem[] = [
  { label: 'Home', iconName: 'Home', href: '/' },
  { label: 'Profile', iconName: 'User', href: '/profile' },
  { label: 'Settings', iconName: 'Settings', href: '/settings' },
  { label: 'Messages', iconName: 'Mail', href: '/messages' },
];

function Navigation() {
  return (
    <nav>
      {navigationConfig.map(item => {
        const IconComponent = icons[`Icon${item.iconName}`];
        return (
          <a key={item.href} href={item.href}>
            {IconComponent && <IconComponent size={20} />}
            {item.label}
          </a>
        );
      })}
    </nav>
  );
}

Icon Statistics

The complete Tabler Icons React library includes:

Total Icons: 5,945
Outline Icons: 4,964 (all icons have outline versions)
Filled Icons: 981 (subset of icons with filled variants)
Categories: ~15 major categories
File Size: Each icon component is typically 1-3KB
Bundle Impact: Tree-shakeable - only imported icons affect bundle size

Programmatic Usage Patterns

Icon Validation

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

function isValidIcon(iconName: string): boolean {
  return `Icon${iconName}` in icons;
}

function getIconComponent(iconName: string) {
  const componentName = `Icon${iconName}`;
  return icons[componentName] || null;
}

Icon Enumeration

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

// Get all icon component names
const allIconNames = Object.keys(icons);

// Get only outline icons (exclude filled variants)
const outlineIcons = allIconNames.filter(name => !name.endsWith('Filled'));

// Get only filled icons
const filledIcons = allIconNames.filter(name => name.endsWith('Filled'));

// Get icon pairs (outline + filled)
const iconPairs = outlineIcons
  .map(outline => ({
    outline,
    filled: `${outline}Filled`
  }))
  .filter(pair => allIconNames.includes(pair.filled));

Type-safe Icon Props

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

type IconName = keyof typeof icons;

interface TypedIconProps extends IconProps {
  name: IconName;
}

function TypedIcon({ name, ...props }: TypedIconProps) {
  const IconComponent = icons[name];
  return <IconComponent {...props} />;
}

// Usage with full type safety
function App() {
  return (
    <div>
      <TypedIcon name="IconHome" size={24} />  {/* ✓ Valid */}
      <TypedIcon name="IconInvalid" size={24} /> {/* ✗ TypeScript error */}
    </div>
  );
}

Performance Considerations

Bundle Size Optimization

// ✓ Recommended: Named imports (tree-shakeable)
import { IconHome, IconUser } from '@tabler/icons-react';

// ✗ Avoid: Namespace import (includes all icons)
import { icons } from '@tabler/icons-react';

// ✓ For dynamic usage: Use lazy loading
const loadIcon = async (iconName: string) => {
  const { [iconName]: IconComponent } = await import('@tabler/icons-react');
  return IconComponent;
};

Runtime Performance

// ✓ Efficient: Pre-resolve icon components
const iconMap = {
  home: IconHome,
  user: IconUser,
  settings: IconSettings,
} as const;

// ✗ Inefficient: Runtime icon resolution
function SlowIcon({ name }: { name: string }) {
  return icons[`Icon${name}`] ? React.createElement(icons[`Icon${name}`]) : null;
}

// ✓ Efficient: Pre-resolved components
function FastIcon({ name }: { name: keyof typeof iconMap }) {
  const Icon = iconMap[name];
  return <Icon />;
}

Install with Tessl CLI

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

docs