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