0
# React Components
1

2
React component library providing tree-shakable components for all 5,945 Tabler Icons with full TypeScript support. Each icon is available as an optimized React component with consistent prop interfaces and forwardRef support.
3

4
## Package Information
5

6
- **Package Name**: @tabler/icons-react
7
- **Installation**: `npm install @tabler/icons-react`
8
- **Peer Dependencies**: React >= 16
9

10
## Core Imports
11

12
```tsx
13
import { IconHome, IconHeart, IconArrowLeft } from '@tabler/icons-react';
14
```
15

16
## Capabilities
17

18
### Icon Component Import
19

20
Tree-shakable imports for individual icon components with full TypeScript support.
21

22
```typescript { .api }
23
/**
24
 * Individual icon component imports
25
 * Pattern: Icon{PascalCaseName} for outline icons
26
 * Pattern: Icon{PascalCaseName}Filled for filled icons
27
 */
28
import { IconHome } from '@tabler/icons-react';
29
import { IconHeart } from '@tabler/icons-react';
30
import { IconHeartFilled } from '@tabler/icons-react';
31
import { IconArrowLeft } from '@tabler/icons-react';
32

33
interface IconProps extends Partial<Omit<React.ComponentPropsWithoutRef<'svg'>, 'stroke'>> {
34
  /** Icon size in pixels */
35
  size?: string | number;
36
  /** Icon stroke color */
37
  stroke?: string | number;
38
  /** Accessible title for the icon */
39
  title?: string;
40
  /** Icon stroke color (alias for stroke) */
41
  color?: string;
42
  /** CSS class name */
43
  className?: string;
44
}
45

46
type TablerIcon = React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<React.ComponentRef<'svg'>>>;
47
```
48

49
**Usage Examples:**
50

51
```tsx
52
import React from 'react';
53
import { IconHome, IconHeart, IconArrowLeft } from '@tabler/icons-react';
54

55
function MyComponent() {
56
  return (
57
    <div>
58
      {/* Basic usage */}
59
      <IconHome />
60
      
61
      {/* With custom props */}
62
      <IconHeart 
63
        size={32} 
64
        color="red" 
65
        stroke={1.5}
66
        className="heart-icon"
67
      />
68
      
69
      {/* With title for accessibility */}
70
      <IconArrowLeft 
71
        size={24} 
72
        title="Go back"
73
        onClick={() => history.back()}
74
      />
75
      
76
      {/* Forward ref usage */}
77
      <IconHome ref={iconRef} />
78
    </div>
79
  );
80
}
81
```
82

83
### Icon Component Props
84

85
Comprehensive prop interface for customizing icon appearance and behavior.
86

87
```typescript { .api }
88
interface IconProps extends Partial<Omit<React.ComponentPropsWithoutRef<'svg'>, 'stroke'>> {
89
  /** 
90
   * Icon size in pixels (applies to both width and height) 
91
   * @default 24
92
   */
93
  size?: string | number;
94
  
95
  /** 
96
   * Icon stroke color (outline icons) or fill color (filled icons)
97
   * @default "currentColor"
98
   */
99
  stroke?: string | number;
100
  
101
  /** 
102
   * Alias for stroke prop - icon color
103
   * @default "currentColor" 
104
   */
105
  color?: string;
106
  
107
  /** 
108
   * Accessible title element for the icon
109
   * Renders as <title> element inside SVG
110
   */
111
  title?: string;
112
  
113
  /** 
114
   * CSS class name applied to the SVG element
115
   * Automatically includes 'tabler-icon' and 'tabler-icon-{icon-name}' classes
116
   */
117
  className?: string;
118
  
119
  /** All other SVG element props are supported */
120
  onClick?: React.MouseEventHandler<SVGSVGElement>;
121
  onMouseEnter?: React.MouseEventHandler<SVGSVGElement>;
122
  style?: React.CSSProperties;
123
  'aria-label'?: string;
124
  'data-testid'?: string;
125
}
126
```
127

128
**Usage Examples:**
129

130
```tsx
131
import { IconSettings, IconUser } from '@tabler/icons-react';
132

133
function PropsExamples() {
134
  return (
135
    <div>
136
      {/* Size variations */}
137
      <IconUser size={16} />  {/* Small */}
138
      <IconUser size={24} />  {/* Default */}
139
      <IconUser size={32} />  {/* Large */}
140
      <IconUser size="2rem" /> {/* CSS units */}
141
      
142
      {/* Color variations */}
143
      <IconSettings color="#3b82f6" />
144
      <IconSettings stroke="rgb(239, 68, 68)" />
145
      <IconSettings style={{ color: 'var(--primary-color)' }} />
146
      
147
      {/* Accessibility */}
148
      <IconSettings 
149
        title="Application Settings"
150
        aria-label="Open settings menu"
151
      />
152
      
153
      {/* Event handlers */}
154
      <IconSettings 
155
        onClick={() => setShowSettings(true)}
156
        onMouseEnter={() => setHover(true)}
157
        style={{ cursor: 'pointer' }}
158
      />
159
      
160
      {/* CSS classes */}
161
      <IconSettings className="settings-icon rotating" />
162
      
163
      {/* Data attributes for testing */}
164
      <IconSettings data-testid="settings-button" />
165
    </div>
166
  );
167
}
168
```
169

170
### Outline vs Filled Variants
171

172
Access to both outline (stroke-based) and filled (solid) icon variants with different naming conventions.
173

174
```typescript { .api }
175
/**
176
 * Icon naming conventions:
177
 * - Outline icons: Icon{PascalCaseName} (default style)
178
 * - Filled icons: Icon{PascalCaseName}Filled
179
 * 
180
 * Examples:
181
 * - IconHome (outline) vs IconHomeFilled (filled)
182
 * - IconHeart (outline) vs IconHeartFilled (filled)
183
 * - IconStar (outline) vs IconStarFilled (filled)
184
 */
185

186
// Outline icons (4,964 available)
187
import { 
188
  IconHome,
189
  IconHeart, 
190
  IconStar,
191
  IconUser,
192
  IconSettings
193
} from '@tabler/icons-react';
194

195
// Filled icons (981 available) 
196
import {
197
  IconHomeFilled,
198
  IconHeartFilled,
199
  IconStarFilled,
200
  IconUserFilled,
201
  IconSettingsFilled
202
} from '@tabler/icons-react';
203
```
204

205
**Usage Examples:**
206

207
```tsx
208
import { 
209
  IconHeart, 
210
  IconHeartFilled,
211
  IconStar,
212
  IconStarFilled 
213
} from '@tabler/icons-react';
214

215
function IconVariants() {
216
  const [isFavorite, setIsFavorite] = useState(false);
217
  const [rating, setRating] = useState(0);
218
  
219
  return (
220
    <div>
221
      {/* Toggle between outline and filled */}
222
      <button onClick={() => setIsFavorite(!isFavorite)}>
223
        {isFavorite ? (
224
          <IconHeartFilled color="red" />
225
        ) : (
226
          <IconHeart color="gray" />
227
        )}
228
      </button>
229
      
230
      {/* Star rating component */}
231
      <div className="rating">
232
        {[1, 2, 3, 4, 5].map(value => (
233
          <button key={value} onClick={() => setRating(value)}>
234
            {value <= rating ? (
235
              <IconStarFilled color="gold" />
236
            ) : (
237
              <IconStar color="gray" />
238
            )}
239
          </button>
240
        ))}
241
      </div>
242
    </div>
243
  );
244
}
245
```
246

247
### TypeScript Integration
248

249
Full TypeScript support with proper type definitions and component interfaces.
250

251
```typescript { .api }
252
/**
253
 * TypeScript definitions for React components
254
 */
255
import type { ComponentPropsWithoutRef, RefAttributes, ForwardRefExoticComponent } from 'react';
256

257
// Core types
258
export interface IconProps extends Partial<Omit<ComponentPropsWithoutRef<'svg'>, 'stroke'>> {
259
  size?: string | number;
260
  stroke?: string | number;
261
  color?: string;
262
  title?: string;
263
  className?: string;
264
}
265

266
export type TablerIcon = ForwardRefExoticComponent<
267
  Omit<IconProps, "ref"> & RefAttributes<SVGSVGElement>
268
>;
269

270
// Individual icon exports with proper typing
271
export const IconHome: TablerIcon;
272
export const IconHeart: TablerIcon;
273
export const IconHeartFilled: TablerIcon;
274
export const IconArrowLeft: TablerIcon;
275
// ... 5,945 total icon exports
276
```
277

278
**Usage Examples:**
279

280
```tsx
281
import React, { forwardRef, useRef } from 'react';
282
import { IconHome, IconProps, TablerIcon } from '@tabler/icons-react';
283

284
// Using IconProps type
285
function CustomIcon(props: IconProps) {
286
  return <IconHome {...props} />;
287
}
288

289
// Using TablerIcon type
290
const StyledIcon: TablerIcon = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
291
  return <IconHome ref={ref} className="styled-icon" {...props} />;
292
});
293

294
// Ref usage with proper typing
295
function RefExample() {
296
  const iconRef = useRef<SVGSVGElement>(null);
297
  
298
  const handleClick = () => {
299
    if (iconRef.current) {
300
      iconRef.current.style.transform = 'rotate(360deg)';
301
    }
302
  };
303
  
304
  return (
305
    <IconHome 
306
      ref={iconRef} 
307
      onClick={handleClick}
308
      style={{ transition: 'transform 0.3s' }}
309
    />
310
  );
311
}
312

313
// Props with strict typing
314
interface ButtonProps {
315
  icon: TablerIcon;
316
  iconProps?: IconProps;
317
  children: React.ReactNode;
318
}
319

320
function IconButton({ icon: Icon, iconProps, children }: ButtonProps) {
321
  return (
322
    <button>
323
      <Icon size={16} {...iconProps} />
324
      {children}
325
    </button>
326
  );
327
}
328
```
329

330
### Framework Integration Patterns
331

332
Common patterns for integrating React icon components with popular frameworks and libraries.
333

334
```typescript { .api }
335
/**
336
 * Common integration patterns for React ecosystems
337
 */
338

339
// Next.js integration
340
import dynamic from 'next/dynamic';
341
const IconHome = dynamic(() => import('@tabler/icons-react').then(mod => ({ default: mod.IconHome })));
342

343
// Styled-components integration  
344
import styled from 'styled-components';
345
const StyledIcon = styled(IconHome)`
346
  color: ${props => props.theme.primary};
347
  transition: color 0.2s;
348
`;
349

350
// Material-UI integration
351
import { SvgIcon } from '@mui/material';
352
const MuiTablerIcon = (props) => (
353
  <SvgIcon component={IconHome} inheritViewBox {...props} />
354
);
355
```
356

357
**Usage Examples:**
358

359
```tsx
360
// Next.js App Router
361
import { IconHome, IconUser } from '@tabler/icons-react';
362

363
export default function HomePage() {
364
  return (
365
    <main>
366
      <IconHome size={32} />
367
      <h1>Welcome Home</h1>
368
    </main>
369
  );
370
}
371

372
// Styled Components
373
import styled from 'styled-components';
374
import { IconSettings } from '@tabler/icons-react';
375

376
const SettingsButton = styled.button`
377
  display: flex;
378
  align-items: center;
379
  gap: 8px;
380
  
381
  svg {
382
    transition: transform 0.2s;
383
  }
384
  
385
  &:hover svg {
386
    transform: rotate(90deg);
387
  }
388
`;
389

390
function Settings() {
391
  return (
392
    <SettingsButton>
393
      <IconSettings size={20} />
394
      Settings
395
    </SettingsButton>
396
  );
397
}
398

399
// React Hook Form integration
400
import { useForm } from 'react-hook-form';
401
import { IconUser, IconMail, IconLock } from '@tabler/icons-react';
402

403
function LoginForm() {
404
  const { register } = useForm();
405
  
406
  return (
407
    <form>
408
      <div className="field">
409
        <IconUser size={20} />
410
        <input {...register('username')} placeholder="Username" />
411
      </div>
412
      <div className="field">
413
        <IconMail size={20} />
414
        <input {...register('email')} type="email" placeholder="Email" />
415
      </div>
416
      <div className="field">
417
        <IconLock size={20} />
418
        <input {...register('password')} type="password" placeholder="Password" />
419
      </div>
420
    </form>
421
  );
422
}
423
```
424

425
## Common Usage Patterns
426

427
### Icon Button Components
428

429
Create reusable icon button components with consistent styling and behavior.
430

431
```tsx
432
import React from 'react';
433
import { TablerIcon, IconProps } from '@tabler/icons-react';
434

435
interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
436
  icon: TablerIcon;
437
  iconProps?: IconProps;
438
  variant?: 'primary' | 'secondary' | 'ghost';
439
  size?: 'sm' | 'md' | 'lg';
440
}
441

442
export function IconButton({ 
443
  icon: Icon, 
444
  iconProps, 
445
  variant = 'primary',
446
  size = 'md',
447
  className,
448
  children,
449
  ...props 
450
}: IconButtonProps) {
451
  const iconSize = size === 'sm' ? 16 : size === 'lg' ? 24 : 20;
452
  
453
  return (
454
    <button 
455
      className={`icon-button icon-button--${variant} icon-button--${size} ${className}`}
456
      {...props}
457
    >
458
      <Icon size={iconSize} {...iconProps} />
459
      {children}
460
    </button>
461
  );
462
}
463

464
// Usage
465
import { IconTrash, IconEdit, IconPlus } from '@tabler/icons-react';
466

467
function ActionButtons() {
468
  return (
469
    <div className="actions">
470
      <IconButton icon={IconPlus} variant="primary">
471
        Add Item
472
      </IconButton>
473
      <IconButton icon={IconEdit} variant="secondary">
474
        Edit
475
      </IconButton>
476
      <IconButton icon={IconTrash} variant="ghost" iconProps={{ color: 'red' }}>
477
        Delete
478
      </IconButton>
479
    </div>
480
  );
481
}
482
```
483

484
### Dynamic Icon Loading
485

486
Load icons dynamically based on string identifiers with TypeScript safety.
487

488
```tsx
489
import React from 'react';
490
import * as TablerIcons from '@tabler/icons-react';
491

492
type IconName = keyof typeof TablerIcons;
493

494
interface DynamicIconProps extends Omit<React.ComponentProps<'svg'>, 'ref'> {
495
  name: IconName;
496
  size?: number;
497
  color?: string;
498
}
499

500
export function DynamicIcon({ name, size = 24, color = 'currentColor', ...props }: DynamicIconProps) {
501
  const Icon = TablerIcons[name] as TablerIcons.TablerIcon;
502
  
503
  if (!Icon) {
504
    console.warn(`Icon "${name}" not found`);
505
    return null;
506
  }
507
  
508
  return <Icon size={size} color={color} {...props} />;
509
}
510

511
// Usage with type safety
512
function IconDemo() {
513
  return (
514
    <div>
515
      <DynamicIcon name="IconHome" size={32} />
516
      <DynamicIcon name="IconUser" color="blue" />
517
      <DynamicIcon name="IconSettings" className="rotating" />
518
      {/* TypeScript will error on invalid icon names */}
519
      {/* <DynamicIcon name="InvalidIcon" /> */}
520
    </div>
521
  );
522
}
523
```
524

525
### Performance Optimization
526

527
Best practices for optimizing icon performance in large applications.
528

529
```tsx
530
import React, { memo, useMemo } from 'react';
531
import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
532

533
// Memoized icon component to prevent unnecessary re-renders
534
const MemoizedIcon = memo(function MemoizedIcon({ 
535
  name, 
536
  ...props 
537
}: { name: string } & React.ComponentProps<'svg'>) {
538
  const Icon = useMemo(() => {
539
    switch (name) {
540
      case 'home': return IconHome;
541
      case 'user': return IconUser;
542
      case 'settings': return IconSettings;
543
      default: return null;
544
    }
545
  }, [name]);
546
  
547
  if (!Icon) return null;
548
  return <Icon {...props} />;
549
});
550

551
// Icon registry for code splitting
552
const iconRegistry = {
553
  home: () => import('@tabler/icons-react').then(mod => mod.IconHome),
554
  user: () => import('@tabler/icons-react').then(mod => mod.IconUser),
555
  settings: () => import('@tabler/icons-react').then(mod => mod.IconSettings),
556
};
557

558
// Lazy loaded icon component
559
function LazyIcon({ name, ...props }: { name: keyof typeof iconRegistry }) {
560
  const [Icon, setIcon] = React.useState<React.ComponentType | null>(null);
561
  
562
  React.useEffect(() => {
563
    iconRegistry[name]().then(setIcon);
564
  }, [name]);
565
  
566
  if (!Icon) return <div className="icon-placeholder" />;
567
  return <Icon {...props} />;
568
}
569
```