0
# Icons Listing
1

2
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.
3

4
## Capabilities
5

6
### Namespace Import
7

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

10
```typescript { .api }
11
/**
12
 * Namespace object containing all 5,945 icon components
13
 * Usage: icons.IconHome, icons.IconUser, etc.
14
 * Note: Not recommended for production due to bundle size
15
 */
16
export const icons: Record<string, React.ComponentType<IconProps>>;
17

18
// Example usage
19
import { icons } from '@tabler/icons-react';
20
const HomeIcon = icons.IconHome;
21
const UserIcon = icons.IconUser;
22
```
23

24
### Icons List Metadata
25

26
Programmatic access to icon metadata for building dynamic interfaces.
27

28
```typescript { .api }
29
/**
30
 * Namespace export containing icon list metadata
31
 * Useful for building icon pickers, search interfaces, etc.
32
 */
33
export const iconsList: Record<string, any>;
34
```
35

36
### Dynamic Icon Import
37

38
Utilities for dynamically importing icons by name.
39

40
```typescript { .api }
41
/**
42
 * Import an icon component by name
43
 * Useful for dynamic icon loading based on user input or configuration
44
 */
45
function getIconByName(iconName: string): Promise<React.ComponentType<IconProps> | null>;
46

47
// Example implementation pattern
48
const dynamicIconImport = async (iconName: string) => {
49
  try {
50
    const module = await import(`@tabler/icons-react`);
51
    return module[`Icon${iconName}`] || null;
52
  } catch {
53
    return null;
54
  }
55
};
56
```
57

58
### Icon Categories
59

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

62
```typescript { .api }
63
/**
64
 * Enumeration of icon categories
65
 */
66
enum IconCategory {
67
  NAVIGATION = 'navigation',
68
  ACTIONS = 'actions',
69
  ARROWS = 'arrows',
70
  COMMUNICATION = 'communication',
71
  MEDIA = 'media',
72
  BUSINESS = 'business',
73
  TECHNOLOGY = 'technology',
74
  SOCIAL = 'social',
75
  WEATHER = 'weather',
76
  TRANSPORT = 'transport',
77
  HEALTH = 'health',
78
  EDUCATION = 'education',
79
  FOOD = 'food',
80
  SPORTS = 'sports',
81
  MISCELLANEOUS = 'miscellaneous'
82
}
83

84
/**
85
 * Get icons by category
86
 */
87
function getIconsByCategory(category: IconCategory): IconMetadata[];
88
```
89

90
## Usage Examples
91

92
### Dynamic Icon Rendering
93

94
```typescript
95
import { icons, iconsList } from '@tabler/icons-react';
96

97
function DynamicIcon({ iconName, ...props }: { iconName: string } & IconProps) {
98
  const IconComponent = icons[`Icon${iconName}`];
99
  
100
  if (!IconComponent) {
101
    return <div>Icon not found</div>;
102
  }
103
  
104
  return <IconComponent {...props} />;
105
}
106

107
// Usage
108
function MyComponent() {
109
  return (
110
    <div>
111
      <DynamicIcon iconName="Home" size={24} />
112
      <DynamicIcon iconName="User" size={24} />
113
      <DynamicIcon iconName="Settings" size={24} />
114
    </div>
115
  );
116
}
117
```
118

119
### Icon Picker Component
120

121
```typescript
122
import { iconsList, icons } from '@tabler/icons-react';
123
import { useState } from 'react';
124

125
function IconPicker({ onSelect }: { onSelect: (iconName: string) => void }) {
126
  const [search, setSearch] = useState('');
127
  
128
  const filteredIcons = iconsList.filter(icon =>
129
    icon.name.toLowerCase().includes(search.toLowerCase()) ||
130
    icon.tags?.some(tag => tag.toLowerCase().includes(search.toLowerCase()))
131
  );
132
  
133
  return (
134
    <div>
135
      <input
136
        type="text"
137
        placeholder="Search icons..."
138
        value={search}
139
        onChange={(e) => setSearch(e.target.value)}
140
      />
141
      
142
      <div className="icon-grid">
143
        {filteredIcons.slice(0, 100).map((icon) => {
144
          const IconComponent = icons[`Icon${icon.name.replace(/-./g, x => x[1].toUpperCase())}`];
145
          return (
146
            <button
147
              key={icon.name}
148
              onClick={() => onSelect(icon.name)}
149
              title={icon.name}
150
            >
151
              {IconComponent && <IconComponent size={24} />}
152
            </button>
153
          );
154
        })}
155
      </div>
156
    </div>
157
  );
158
}
159
```
160

161
### Icon Category Browser
162

163
```typescript
164
import { iconsList, icons } from '@tabler/icons-react';
165

166
function IconCategoryBrowser() {
167
  const categories = Array.from(new Set(iconsList.map(icon => icon.category).filter(Boolean)));
168
  
169
  return (
170
    <div>
171
      {categories.map(category => (
172
        <div key={category}>
173
          <h3>{category}</h3>
174
          <div className="icon-category">
175
            {iconsList
176
              .filter(icon => icon.category === category)
177
              .slice(0, 20)
178
              .map(icon => {
179
                const IconComponent = icons[`Icon${icon.name.replace(/-./g, x => x[1].toUpperCase())}`];
180
                return IconComponent ? (
181
                  <div key={icon.name} title={icon.name}>
182
                    <IconComponent size={32} />
183
                  </div>
184
                ) : null;
185
              })
186
            }
187
          </div>
188
        </div>
189
      ))}
190
    </div>
191
  );
192
}
193
```
194

195
### Icon Search with Tags
196

197
```typescript
198
import { iconsList, icons } from '@tabler/icons-react';
199

200
function IconSearch({ query }: { query: string }) {
201
  const searchResults = iconsList.filter(icon => {
202
    const searchTerms = query.toLowerCase().split(' ');
203
    return searchTerms.every(term =>
204
      icon.name.toLowerCase().includes(term) ||
205
      icon.tags?.some(tag => tag.toLowerCase().includes(term)) ||
206
      icon.category?.toLowerCase().includes(term)
207
    );
208
  });
209
  
210
  return (
211
    <div>
212
      <p>Found {searchResults.length} icons matching "{query}"</p>
213
      <div className="search-results">
214
        {searchResults.map(icon => {
215
          const pascal = icon.name.replace(/-./g, x => x[1].toUpperCase());
216
          const IconComponent = icons[`Icon${pascal}`];
217
          
218
          return IconComponent ? (
219
            <div key={icon.name} className="search-result">
220
              <IconComponent size={48} />
221
              <span>{icon.name}</span>
222
              {icon.tags && (
223
                <div className="tags">
224
                  {icon.tags.map(tag => (
225
                    <span key={tag} className="tag">{tag}</span>
226
                  ))}
227
                </div>
228
              )}
229
            </div>
230
          ) : null;
231
        })}
232
      </div>
233
    </div>
234
  );
235
}
236
```
237

238
### Configuration-based Icon Rendering
239

240
```typescript
241
import { icons } from '@tabler/icons-react';
242

243
interface NavigationItem {
244
  label: string;
245
  iconName: string;
246
  href: string;
247
}
248

249
const navigationConfig: NavigationItem[] = [
250
  { label: 'Home', iconName: 'Home', href: '/' },
251
  { label: 'Profile', iconName: 'User', href: '/profile' },
252
  { label: 'Settings', iconName: 'Settings', href: '/settings' },
253
  { label: 'Messages', iconName: 'Mail', href: '/messages' },
254
];
255

256
function Navigation() {
257
  return (
258
    <nav>
259
      {navigationConfig.map(item => {
260
        const IconComponent = icons[`Icon${item.iconName}`];
261
        return (
262
          <a key={item.href} href={item.href}>
263
            {IconComponent && <IconComponent size={20} />}
264
            {item.label}
265
          </a>
266
        );
267
      })}
268
    </nav>
269
  );
270
}
271
```
272

273
## Icon Statistics
274

275
The complete Tabler Icons React library includes:
276

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

284
## Programmatic Usage Patterns
285

286
### Icon Validation
287

288
```typescript
289
import { icons } from '@tabler/icons-react';
290

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

295
function getIconComponent(iconName: string) {
296
  const componentName = `Icon${iconName}`;
297
  return icons[componentName] || null;
298
}
299
```
300

301
### Icon Enumeration
302

303
```typescript
304
import { icons } from '@tabler/icons-react';
305

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

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

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

315
// Get icon pairs (outline + filled)
316
const iconPairs = outlineIcons
317
  .map(outline => ({
318
    outline,
319
    filled: `${outline}Filled`
320
  }))
321
  .filter(pair => allIconNames.includes(pair.filled));
322
```
323

324
### Type-safe Icon Props
325

326
```typescript
327
import { icons, IconProps } from '@tabler/icons-react';
328

329
type IconName = keyof typeof icons;
330

331
interface TypedIconProps extends IconProps {
332
  name: IconName;
333
}
334

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

340
// Usage with full type safety
341
function App() {
342
  return (
343
    <div>
344
      <TypedIcon name="IconHome" size={24} />  {/* ✓ Valid */}
345
      <TypedIcon name="IconInvalid" size={24} /> {/* ✗ TypeScript error */}
346
    </div>
347
  );
348
}
349
```
350

351
## Performance Considerations
352

353
### Bundle Size Optimization
354

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

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

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

369
### Runtime Performance
370

371
```typescript
372
// ✓ Efficient: Pre-resolve icon components
373
const iconMap = {
374
  home: IconHome,
375
  user: IconUser,
376
  settings: IconSettings,
377
} as const;
378

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

384
// ✓ Efficient: Pre-resolved components
385
function FastIcon({ name }: { name: keyof typeof iconMap }) {
386
  const Icon = iconMap[name];
387
  return <Icon />;
388
}
389
```