0
# Tabler Icons
1
2
Tabler Icons is a comprehensive ecosystem of 5,945 free MIT-licensed SVG icons designed for modern web projects. Each icon is meticulously crafted on a 24x24 grid with a consistent 2px stroke, providing visual consistency across all designs. The library offers both outline and filled variants, extensive categorization, and framework-specific components for React, Vue, Svelte, and more.
3
4
## Package Information
5
6
**Core Package:**
7
- **Package Name**: @tabler/icons
8
- **Package Type**: npm
9
- **Language**: JavaScript/TypeScript
10
- **Installation**: `npm install @tabler/icons`
11
12
**Framework Packages:**
13
- **React**: `npm install @tabler/icons-react`
14
- **Vue**: `npm install @tabler/icons-vue`
15
- **Svelte**: `npm install @tabler/icons-svelte`
16
- **Additional**: PNG, PDF, Webfont, Sprite formats available
17
18
## Core Imports
19
20
**Framework Components (Recommended):**
21
22
```typescript
23
// React
24
import { IconHome, IconHeart } from '@tabler/icons-react';
25
26
// Vue
27
import { IconHome, IconHeart } from '@tabler/icons-vue';
28
29
// Svelte
30
import { IconHome, IconHeart } from '@tabler/icons-svelte';
31
```
32
33
**Raw SVG Files:**
34
35
```javascript
36
// Import individual SVG files
37
import homeIcon from "@tabler/icons/outline/home.svg";
38
import heartFilledIcon from "@tabler/icons/filled/heart.svg";
39
40
// Import metadata files
41
import iconsData from "@tabler/icons/icons.json";
42
import outlineNodes from "@tabler/icons/tabler-nodes-outline.json";
43
import filledNodes from "@tabler/icons/tabler-nodes-filled.json";
44
```
45
46
## Basic Usage
47
48
**Framework Components:**
49
50
```typescript
51
// React
52
function MyApp() {
53
return (
54
<div>
55
<IconHome size={24} color="blue" />
56
<IconHeart size={32} color="red" stroke={1.5} />
57
</div>
58
);
59
}
60
61
// Vue
62
<template>
63
<div>
64
<IconHome size="24" color="blue" />
65
<IconHeart size="32" color="red" stroke-width="1.5" />
66
</div>
67
</template>
68
69
// Svelte
70
<main>
71
<IconHome size={24} color="blue" />
72
<IconHeart size={32} color="red" stroke={1.5} />
73
</main>
74
```
75
76
**Raw SVG Usage:**
77
78
```javascript
79
// HTML image usage
80
<img src="node_modules/@tabler/icons/icons/outline/home.svg" alt="Home" />
81
82
// Dynamic icon loading
83
const loadIcon = async (iconName, style = 'outline') => {
84
return await import(`@tabler/icons/${style}/${iconName}.svg`);
85
};
86
87
// Programmatic metadata access
88
import iconsData from "@tabler/icons/icons.json";
89
90
// Find icons by category
91
const designIcons = Object.values(iconsData).filter(icon =>
92
icon.category === 'Design'
93
);
94
```
95
96
## Architecture
97
98
Tabler Icons is built around several key components:
99
100
- **Framework Components**: Ready-to-use React, Vue, and Svelte components with full TypeScript support
101
- **SVG Files**: Individual optimized SVG files for each icon in outline and filled styles
102
- **Metadata System**: Complete icon metadata with categories, tags, and unicode values
103
- **Path Data API**: Programmatic access to SVG path elements for custom rendering
104
- **Export System**: Wildcard exports allowing import of any icon file
105
- **Consistent Format**: Standardized 24x24 grid with customizable stroke properties
106
107
## Capabilities
108
109
### React Components
110
111
Tree-shakable React components for all 5,945 icons with full TypeScript support, forwardRef compatibility, and consistent prop interfaces.
112
113
```typescript { .api }
114
import { IconHome, IconHeart, IconHeartFilled } from '@tabler/icons-react';
115
116
interface IconProps {
117
size?: string | number;
118
stroke?: string | number;
119
color?: string;
120
title?: string;
121
className?: string;
122
}
123
124
type TablerIcon = React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
125
```
126
127
[React Components](./react-components.md)
128
129
### Vue Components
130
131
Vue 3 components for all 5,945 icons with reactive props and composition API support.
132
133
```typescript { .api }
134
import { IconHome, IconHeart, IconHeartFilled } from '@tabler/icons-vue';
135
136
interface IconProps {
137
size?: string | number;
138
color?: string;
139
stroke?: string;
140
strokeWidth?: string | number;
141
class?: string;
142
}
143
```
144
145
[Vue Components](./vue-components.md)
146
147
### Svelte Components
148
149
Svelte components for all 5,945 icons with reactive props and full TypeScript support.
150
151
```typescript { .api }
152
import { IconHome, IconHeart, IconHeartFilled } from '@tabler/icons-svelte';
153
154
interface IconProps {
155
size?: number;
156
color?: string;
157
stroke?: number;
158
class?: string;
159
}
160
```
161
162
[Svelte Components](./svelte-components.md)
163
164
### SVG File Access
165
166
Direct access to individual SVG files for use in HTML, CSS, or JavaScript applications. Supports both outline and filled style variants.
167
168
```javascript { .api }
169
// Import pattern for individual SVG files
170
import iconName from "@tabler/icons/outline/{icon-name}.svg";
171
import iconName from "@tabler/icons/filled/{icon-name}.svg";
172
```
173
174
[SVG File Access](./svg-files.md)
175
176
### Icon Metadata
177
178
Complete metadata system providing icon information including categories, tags, unicode values, and version data for all 5,945 icons.
179
180
```javascript { .api }
181
interface IconMetadata {
182
name: string;
183
category: string;
184
tags: string[];
185
styles: {
186
outline?: {
187
version: string;
188
unicode: string;
189
};
190
filled?: {
191
version: string;
192
unicode: string;
193
};
194
};
195
}
196
197
// Main metadata export
198
const iconsData: Record<string, IconMetadata>;
199
```
200
201
[Icon Metadata](./metadata.md)
202
203
### Programmatic SVG Data
204
205
Access to raw SVG path data for programmatic icon rendering and custom SVG generation.
206
207
```javascript { .api }
208
type SVGPathElement = [string, Record<string, string>];
209
type IconPathData = SVGPathElement[];
210
211
// SVG path data exports
212
const outlineNodes: Record<string, IconPathData>;
213
const filledNodes: Record<string, IconPathData>;
214
```
215
216
[Programmatic SVG Data](./svg-data.md)
217
218
## Types
219
220
```javascript { .api }
221
interface IconMetadata {
222
name: string;
223
category: string;
224
tags: string[];
225
styles: {
226
outline?: StyleInfo;
227
filled?: StyleInfo;
228
};
229
}
230
231
interface StyleInfo {
232
version: string;
233
unicode: string;
234
}
235
236
type SVGPathElement = [string, Record<string, string>];
237
type IconPathData = SVGPathElement[];
238
```