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
```