0
# Tabler Icons React
1

2
Tabler Icons React provides 5,945 high-quality SVG icons as tree-shakable React components. The library includes 4,964 outline icons and 981 filled icons, each available as a React component with full TypeScript support and customizable properties.
3

4
## Package Information
5

6
- **Package Name**: @tabler/icons-react
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @tabler/icons-react`
10

11
## Core Imports
12

13
```typescript
14
import { IconHome, IconUser, IconSettings } from "@tabler/icons-react";
15
```
16

17
For CommonJS environments:
18

19
```javascript
20
const { IconHome, IconUser, IconSettings } = require("@tabler/icons-react");
21
```
22

23
Namespace import (not recommended for bundle size):
24

25
```typescript
26
import { icons } from "@tabler/icons-react";
27
// Usage: icons.IconHome
28
```
29

30
## Basic Usage
31

32
```typescript
33
import React from 'react';
34
import { IconHome, IconUser, IconArrowLeft } from '@tabler/icons-react';
35

36
function App() {
37
  return (
38
    <div>
39
      {/* Basic icon usage */}
40
      <IconHome />
41
      
42
      {/* Custom size and color */}
43
      <IconUser size={32} color="blue" />
44
      
45
      {/* Custom stroke width */}
46
      <IconArrowLeft stroke={1.5} />
47
      
48
      {/* Accessibility with title */}
49
      <IconSettings title="Open Settings" />
50
      
51
      {/* Additional HTML attributes */}
52
      <IconHome 
53
        className="custom-icon" 
54
        style={{ marginRight: '8px' }}
55
        onClick={() => console.log('Home clicked')}
56
      />
57
    </div>
58
  );
59
}
60
```
61

62
## Architecture
63

64
Tabler Icons React is built around several key components:
65

66
- **Icon Components**: 5,945 individual React components, each representing a specific icon
67
- **Component Factory**: `createReactComponent` function that generates icon components from SVG data
68
- **Type System**: Full TypeScript integration with `IconProps` interface and component type definitions
69
- **SVG Rendering**: Server-side compatible SVG rendering with proper accessibility attributes
70
- **Tree Shaking**: Each icon is a separate module enabling optimal bundle sizes
71

72
## Capabilities
73

74
### Icon Components
75

76
Individual React components for each of the 5,945 Tabler icons. Each icon is available in outline style, with filled variants available for 981 icons.
77

78
```typescript { .api }
79
// Outline icons (default style)
80
function IconHome(props: IconProps): JSX.Element;
81
function IconUser(props: IconProps): JSX.Element;
82
function IconSettings(props: IconProps): JSX.Element;
83

84
// Filled icons (981 available)
85
function IconHomeFilled(props: IconProps): JSX.Element;
86
function IconUserFilled(props: IconProps): JSX.Element;
87
function IconSettingsFilled(props: IconProps): JSX.Element;
88

89
interface IconProps extends Partial<Omit<React.ComponentPropsWithoutRef<'svg'>, 'stroke'>> {
90
  /** Icon size in pixels (width and height). Default: 24 */
91
  size?: string | number;
92
  /** Icon stroke width for outline icons. Default: 2 */
93
  stroke?: string | number;
94
  /** Icon color. For outline icons: sets stroke color. For filled icons: sets fill color. Default: 'currentColor' */
95
  color?: string;
96
  /** Accessible title for screen readers */
97
  title?: string;
98
}
99
```
100

101
[Icon Components](./icon-components.md)
102

103
### Component Factory
104

105
Utility function for creating custom icon components from SVG data.
106

107
```typescript { .api }
108
function createReactComponent(
109
  type: 'outline' | 'filled',
110
  iconName: string,
111
  iconNamePascal: string,
112
  iconNode: IconNode
113
): TablerIcon;
114

115
type IconNode = [elementName: keyof ReactSVG, attrs: Record<string, string>][];
116
type TablerIcon = ForwardRefExoticComponent<Omit<IconProps, "ref"> & RefAttributes<Icon>>;
117
type Icon = FunctionComponent<IconProps>;
118
```
119

120
[Component Factory](./component-factory.md)
121

122
### Icons Listing
123

124
Metadata and utilities for working with the complete icon set.
125

126
```typescript { .api }
127
// Namespace export containing all icons
128
export const icons: Record<string, React.ComponentType<IconProps>>;
129

130
// Icon list metadata (namespace export)
131
export const iconsList: Record<string, any>;
132
```
133

134
[Icons Listing](./icons-listing.md)
135

136
## Types
137

138
```typescript { .api }
139
interface IconProps extends Partial<Omit<React.ComponentPropsWithoutRef<'svg'>, 'stroke'>> {
140
  /** Icon size in pixels (width and height). Default: 24 */
141
  size?: string | number;
142
  /** Icon stroke width for outline icons. Default: 2 */
143
  stroke?: string | number;
144
  /** Icon color. For outline icons: sets stroke color. For filled icons: sets fill color. Default: 'currentColor' */
145
  color?: string;
146
  /** Accessible title for screen readers */
147
  title?: string;
148
}
149

150
type IconNode = [elementName: keyof ReactSVG, attrs: Record<string, string>][];
151

152
type Icon = FunctionComponent<IconProps>;
153

154
type TablerIcon = ForwardRefExoticComponent<Omit<IconProps, "ref"> & RefAttributes<Icon>>;
155
```