0
# Icon Components
1

2
Individual React components for each of the 5,945 Tabler icons. Each icon follows a consistent naming pattern and implements the same component interface.
3

4
## Capabilities
5

6
### Icon Component Structure
7

8
All icon components are React functional components with forward ref support and consistent prop handling.
9

10
```typescript { .api }
11
/**
12
 * All icon components follow this structure:
13
 * - Outline icons: Icon{PascalCaseName}
14
 * - Filled icons: Icon{PascalCaseName}Filled
15
 */
16
type IconComponent = ForwardRefExoticComponent<Omit<IconProps, "ref"> & RefAttributes<Icon>>;
17

18
interface IconProps extends Partial<Omit<React.ComponentPropsWithoutRef<'svg'>, 'stroke'>> {
19
  /** Icon size in pixels (width and height). Default: 24 */
20
  size?: string | number;
21
  /** Icon stroke width for outline icons. Default: 2 */
22
  stroke?: string | number;
23
  /** Icon color. For outline icons: sets stroke color. For filled icons: sets fill color. Default: 'currentColor' */
24
  color?: string;
25
  /** Accessible title for screen readers */
26
  title?: string;
27
}
28
```
29

30
### Sample Icon Components
31

32
Here are examples of available icon components (representing the full set of 5,945 icons):
33

34
```typescript { .api }
35
// Navigation and UI icons
36
function IconHome(props: IconProps): JSX.Element;
37
function IconHomeFilled(props: IconProps): JSX.Element;
38
function IconUser(props: IconProps): JSX.Element;
39
function IconUserFilled(props: IconProps): JSX.Element;
40
function IconSettings(props: IconProps): JSX.Element;
41
function IconSettingsFilled(props: IconProps): JSX.Element;
42

43
// Arrows and directions
44
function IconArrowLeft(props: IconProps): JSX.Element;
45
function IconArrowRight(props: IconProps): JSX.Element;
46
function IconArrowUp(props: IconProps): JSX.Element;
47
function IconArrowDown(props: IconProps): JSX.Element;
48
function IconChevronLeft(props: IconProps): JSX.Element;
49
function IconChevronRight(props: IconProps): JSX.Element;
50

51
// Actions and controls
52
function IconPlus(props: IconProps): JSX.Element;
53
function IconMinus(props: IconProps): JSX.Element;
54
function IconX(props: IconProps): JSX.Element;
55
function IconCheck(props: IconProps): JSX.Element;
56
function IconEdit(props: IconProps): JSX.Element;
57
function IconTrash(props: IconProps): JSX.Element;
58
function IconDownload(props: IconProps): JSX.Element;
59
function IconUpload(props: IconProps): JSX.Element;
60

61
// Communication
62
function IconMail(props: IconProps): JSX.Element;
63
function IconMailFilled(props: IconProps): JSX.Element;
64
function IconPhone(props: IconProps): JSX.Element;
65
function IconPhoneFilled(props: IconProps): JSX.Element;
66
function IconMessage(props: IconProps): JSX.Element;
67
function IconMessageFilled(props: IconProps): JSX.Element;
68

69
// Media and files
70
function IconPhoto(props: IconProps): JSX.Element;
71
function IconPhotoFilled(props: IconProps): JSX.Element;
72
function IconVideo(props: IconProps): JSX.Element;
73
function IconVideoFilled(props: IconProps): JSX.Element;
74
function IconFile(props: IconProps): JSX.Element;
75
function IconFileFilled(props: IconProps): JSX.Element;
76
function IconFolder(props: IconProps): JSX.Element;
77
function IconFolderFilled(props: IconProps): JSX.Element;
78

79
// Accessibility icons
80
function IconAccessible(props: IconProps): JSX.Element;
81
function IconAccessibleFilled(props: IconProps): JSX.Element;
82
function IconEye(props: IconProps): JSX.Element;
83
function IconEyeFilled(props: IconProps): JSX.Element;
84
function IconEyeOff(props: IconProps): JSX.Element;
85

86
// And 5,900+ more icons following the same pattern...
87
```
88

89
### Icon Naming Convention
90

91
All icons follow a consistent naming convention:
92

93
- **Outline Icons**: `Icon{PascalCaseName}` (e.g., `IconArrowLeft`, `IconHomeEdit`)
94
- **Filled Icons**: `Icon{PascalCaseName}Filled` (e.g., `IconArrowLeftFilled`, `IconHomeFilled`)
95

96
The PascalCase name is derived from the kebab-case SVG filename:
97
- `arrow-left.svg` → `IconArrowLeft`
98
- `home-edit.svg` → `IconHomeEdit`
99
- `user-circle.svg` → `IconUserCircle`
100

101
### Icon Categories
102

103
Icons are organized into various categories (examples):
104

105
**Navigation & UI**
106
- `IconHome`, `IconUser`, `IconSettings`, `IconDashboard`, `IconMenu`
107

108
**Actions & Controls**
109
- `IconPlus`, `IconMinus`, `IconEdit`, `IconTrash`, `IconSave`, `IconCopy`
110

111
**Arrows & Directions**
112
- `IconArrowLeft`, `IconArrowRight`, `IconChevronUp`, `IconCaretDown`
113

114
**Communication**
115
- `IconMail`, `IconPhone`, `IconMessage`, `IconBell`, `IconAt`
116

117
**Media & Files**
118
- `IconPhoto`, `IconVideo`, `IconFile`, `IconFolder`, `IconMusic`
119

120
**Business & Finance**
121
- `IconCoin`, `IconCreditCard`, `IconReceipt`, `IconChartLine`, `IconReportMoney`
122

123
**Technology**
124
- `IconCode`, `IconTerminal`, `IconDatabase`, `IconServer`, `IconApi`
125

126
**Social & Brands**
127
- `IconBrandFacebook`, `IconBrandTwitter`, `IconBrandGithub`, `IconBrandGoogle`
128

129
## Usage Examples
130

131
### Basic Icon Usage
132

133
```typescript
134
import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
135

136
function Navigation() {
137
  return (
138
    <nav>
139
      <IconHome />
140
      <IconUser />
141
      <IconSettings />
142
    </nav>
143
  );
144
}
145
```
146

147
### Icon with Custom Properties
148

149
```typescript
150
import { IconHeart, IconHeartFilled } from '@tabler/icons-react';
151

152
function LikeButton({ liked, onToggle }: { liked: boolean; onToggle: () => void }) {
153
  const HeartIcon = liked ? IconHeartFilled : IconHeart;
154
  
155
  return (
156
    <button onClick={onToggle}>
157
      <HeartIcon 
158
        size={24}
159
        color={liked ? 'red' : 'currentColor'}
160
        title={liked ? 'Unlike' : 'Like'}
161
      />
162
    </button>
163
  );
164
}
165
```
166

167
### Icon with Custom Styling
168

169
```typescript
170
import { IconLoader } from '@tabler/icons-react';
171

172
function LoadingSpinner() {
173
  return (
174
    <IconLoader 
175
      size={32}
176
      className="animate-spin"
177
      style={{ color: '#3b82f6' }}
178
    />
179
  );
180
}
181
```
182

183
### Accessibility with Title
184

185
```typescript
186
import { IconSearch } from '@tabler/icons-react';
187

188
function SearchButton() {
189
  return (
190
    <button>
191
      <IconSearch title="Search products" />
192
    </button>
193
  );
194
}
195
```
196

197
## Component Behavior
198

199
### Default Properties
200

201
All icon components have consistent default properties:
202

203
- `size`: 24 (pixels, applied to both width and height)
204
- `color`: 'currentColor' (inherits from parent text color)
205
- `stroke`: 2 (for outline icons only, filled icons have stroke: 'none')
206

207
### CSS Classes
208

209
Each icon component automatically receives CSS classes:
210

211
- `tabler-icon`: Base class applied to all icons
212
- `tabler-icon-{icon-name}`: Specific class based on the icon name (e.g., `tabler-icon-home`)
213

214
### SVG Attributes
215

216
Icon components render as `<svg>` elements with:
217

218
- Proper `xmlns` attribute for SVG namespace
219
- `viewBox="0 0 24 24"` for consistent scaling
220
- `fill` and `stroke` attributes based on icon type (outline vs filled)
221
- `strokeLinecap="round"` and `strokeLinejoin="round"` for outline icons
222

223
### Forward Ref Support
224

225
All icon components support React forward refs for direct DOM access:
226

227
```typescript
228
import { useRef } from 'react';
229
import { IconHome } from '@tabler/icons-react';
230

231
function MyComponent() {
232
  const iconRef = useRef<SVGSVGElement>(null);
233
  
234
  return <IconHome ref={iconRef} />;
235
}
236
```
237

238
### Tree Shaking
239

240
Icons are fully tree-shakable. Only imported icons are included in your bundle:
241

242
```typescript
243
// Only IconHome will be included in the bundle
244
import { IconHome } from '@tabler/icons-react';
245

246
// This will include all icons (not recommended)
247
import * as icons from '@tabler/icons-react';
248
```
249

250
## Complete Icon List
251

252
The library includes 5,945 icons across numerous categories. For a complete list of available icons, you can:
253

254
1. Browse the official [Tabler Icons website](https://tabler-icons.io)
255
2. Use the `iconsList` export for programmatic access
256
3. Check your IDE's auto-completion when importing from `@tabler/icons-react`
257

258
All icons follow the naming convention `Icon{PascalCaseName}` with filled variants available as `Icon{PascalCaseName}Filled` for 981 icons.