0
# SVG File Access
1

2
Direct access to individual SVG files for use in HTML, CSS, or JavaScript applications. Each of the 5,945 icons is available as an optimized SVG file with consistent formatting and styling.
3

4
## Capabilities
5

6
### Individual Icon Import
7

8
Import specific SVG files as static assets for bundling and optimization.
9

10
```javascript { .api }
11
/**
12
 * Import individual SVG files using ES modules
13
 * Available paths:
14
 * - @tabler/icons/outline/{icon-name}.svg (4,964 icons)
15
 * - @tabler/icons/filled/{icon-name}.svg (981 icons)
16
 */
17
import iconName from "@tabler/icons/outline/{icon-name}.svg";
18
import iconName from "@tabler/icons/filled/{icon-name}.svg";
19
```
20

21
**Usage Examples:**
22

23
```javascript
24
// Import specific icons
25
import homeIcon from "@tabler/icons/outline/home.svg";
26
import heartIcon from "@tabler/icons/filled/heart.svg";
27
import userIcon from "@tabler/icons/outline/user.svg";
28
import settingsIcon from "@tabler/icons/outline/settings.svg";
29

30
// Use in React/Vue components
31
function MyComponent() {
32
  return <img src={homeIcon} alt="Home" width="24" height="24" />;
33
}
34

35
// Use with CSS background-image
36
.icon-home {
37
  background-image: url('@tabler/icons/outline/home.svg');
38
  width: 24px;
39
  height: 24px;
40
}
41
```
42

43
### HTML Image Reference
44

45
Direct file path usage for HTML image tags and CSS background images.
46

47
```javascript { .api }
48
/**
49
 * Direct file paths for HTML usage
50
 * Path format: node_modules/@tabler/icons/icons/{style}/{icon-name}.svg
51
 */
52
<img src="path/to/@tabler/icons/icons/outline/{icon-name}.svg" alt="Icon" />
53
<img src="path/to/@tabler/icons/icons/filled/{icon-name}.svg" alt="Icon" />
54
```
55

56
**Usage Examples:**
57

58
```html
59
<!-- Direct HTML usage -->
60
<img src="node_modules/@tabler/icons/icons/outline/home.svg" alt="Home" />
61
<img src="node_modules/@tabler/icons/icons/filled/heart.svg" alt="Heart" />
62

63
<!-- CSS background usage -->
64
<div class="icon" style="background-image: url('node_modules/@tabler/icons/icons/outline/arrow-left.svg')"></div>
65
```
66

67
### Dynamic Icon Loading
68

69
Programmatic loading of icons based on name and style parameters.
70

71
```javascript { .api }
72
/**
73
 * Dynamic icon import function
74
 * @param iconName - Name of the icon (kebab-case)
75
 * @param style - Icon style ('outline' or 'filled')
76
 * @returns Promise resolving to the imported SVG module
77
 */
78
async function loadIcon(iconName: string, style: 'outline' | 'filled' = 'outline'): Promise<any>;
79
```
80

81
**Usage Examples:**
82

83
```javascript
84
// Dynamic loading function
85
const loadIcon = async (iconName, style = 'outline') => {
86
  try {
87
    return await import(`@tabler/icons/${style}/${iconName}.svg`);
88
  } catch (error) {
89
    console.error(`Icon ${iconName} (${style}) not found`);
90
    return null;
91
  }
92
};
93

94
// Usage in applications
95
const homeIcon = await loadIcon('home', 'outline');
96
const heartIcon = await loadIcon('heart', 'filled');
97

98
// With error handling
99
const iconNames = ['home', 'user', 'settings', 'heart'];
100
const loadedIcons = await Promise.all(
101
  iconNames.map(name => loadIcon(name, 'outline'))
102
);
103
```
104

105
### Inline SVG Usage
106

107
Direct inline SVG usage by copying SVG content into HTML.
108

109
```javascript { .api }
110
/**
111
 * Inline SVG format - standard across all icons
112
 * Outline icons: stroke-based with currentColor
113
 * Filled icons: fill-based with currentColor
114
 */
115
interface SVGFormat {
116
  xmlns: "http://www.w3.org/2000/svg";
117
  width: "24";
118
  height: "24";
119
  viewBox: "0 0 24 24";
120
  // Outline icons
121
  fill?: "none";
122
  stroke?: "currentColor";
123
  strokeWidth?: "2";
124
  strokeLinecap?: "round";
125
  strokeLinejoin?: "round";
126
  // Filled icons
127
  fill?: "currentColor";
128
}
129
```
130

131
**Usage Examples:**
132

133
```html
134
<!-- Inline outline icon -->
135
<svg xmlns="http://www.w3.org/2000/svg" 
136
     width="24" height="24" 
137
     viewBox="0 0 24 24" 
138
     fill="none" 
139
     stroke="currentColor" 
140
     stroke-width="2" 
141
     stroke-linecap="round" 
142
     stroke-linejoin="round">
143
  <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
144
  <polyline points="9,22 9,12 15,12 15,22"/>
145
</svg>
146

147
<!-- Inline filled icon -->
148
<svg xmlns="http://www.w3.org/2000/svg" 
149
     width="24" height="24" 
150
     viewBox="0 0 24 24" 
151
     fill="currentColor">
152
  <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.566"/>
153
</svg>
154
```
155

156
## Icon Naming Conventions
157

158
### Name Format
159

160
All icon names follow kebab-case convention with descriptive, semantic naming.
161

162
```javascript { .api }
163
/**
164
 * Icon naming patterns:
165
 * - Simple names: home, user, heart, star
166
 * - Compound names: arrow-left, user-circle, home-2
167
 * - Directional: arrow-up, arrow-down, arrow-left, arrow-right
168
 * - Variants: icon-name, icon-name-2, icon-name-off (disabled state)
169
 */
170
type IconName = string; // kebab-case format
171
```
172

173
**Examples:**
174

175
```javascript
176
// Simple icons
177
import home from "@tabler/icons/outline/home.svg";
178
import user from "@tabler/icons/outline/user.svg";
179
import heart from "@tabler/icons/filled/heart.svg";
180

181
// Compound names
182
import arrowLeft from "@tabler/icons/outline/arrow-left.svg";
183
import userCircle from "@tabler/icons/outline/user-circle.svg";
184
import home2 from "@tabler/icons/outline/home-2.svg";
185

186
// Variants
187
import wifiIcon from "@tabler/icons/outline/wifi.svg";
188
import wifiOff from "@tabler/icons/outline/wifi-off.svg";
189
```
190

191
### Style Variants
192

193
Icons are available in two primary styles with different visual characteristics.
194

195
```javascript { .api }
196
/**
197
 * Style variants:
198
 * - outline: Line-based icons with 2px stroke (4,964 icons)
199
 * - filled: Solid-filled icons (981 icons)
200
 */
201
type IconStyle = 'outline' | 'filled';
202
```
203

204
**Style Differences:**
205

206
```html
207
<!-- Outline style: stroke-based -->
208
<svg stroke="currentColor" stroke-width="2" fill="none">
209
  <path d="..."/> <!-- stroke-based paths -->
210
</svg>
211

212
<!-- Filled style: fill-based -->
213
<svg fill="currentColor">
214
  <path d="..."/> <!-- solid fill paths -->
215
</svg>
216
```
217

218
## File Structure
219

220
### Directory Organization
221

222
Icons are organized in a predictable directory structure for easy access.
223

224
```
225
@tabler/icons/
226
├── icons/
227
│   ├── outline/           # 4,964 outline SVG files
228
│   │   ├── home.svg
229
│   │   ├── user.svg
230
│   │   └── ...
231
│   └── filled/            # 981 filled SVG files
232
│       ├── heart.svg
233
│       ├── star.svg
234
│       └── ...
235
├── icons.json             # Complete metadata
236
├── tabler-nodes-outline.json
237
└── tabler-nodes-filled.json
238
```
239

240
### File Specifications
241

242
All SVG files follow consistent specifications for predictable behavior.
243

244
```javascript { .api }
245
/**
246
 * SVG file specifications
247
 */
248
interface SVGSpecs {
249
  dimensions: "24x24px";
250
  viewBox: "0 0 24 24";
251
  strokeWidth: "2px" | "none"; // outline vs filled
252
  strokeCaps: "round";
253
  strokeJoins: "round";
254
  colorInheritance: "currentColor";
255
  optimization: "SVGO optimized";
256
  fileSize: "~500-2000 bytes";
257
}
258
```
259

260
## CSS Integration
261

262
### Styling Icons
263

264
Icons inherit color from CSS and can be styled like any other element.
265

266
```css
267
/* Color inheritance */
268
.icon {
269
  color: #3b82f6; /* Icon will be blue */
270
}
271

272
/* Size customization */
273
.icon-large {
274
  width: 32px;
275
  height: 32px;
276
}
277

278
/* Stroke width customization (outline icons only) */
279
.icon-thin {
280
  stroke-width: 1;
281
}
282

283
.icon-thick {
284
  stroke-width: 3;
285
}
286

287
/* Background usage */
288
.icon-bg {
289
  background-image: url('@tabler/icons/outline/home.svg');
290
  background-size: contain;
291
  background-repeat: no-repeat;
292
  width: 24px;
293
  height: 24px;
294
}
295
```
296

297
### Responsive Icons
298

299
Icons can be made responsive using CSS techniques.
300

301
```css
302
/* Responsive sizing */
303
.icon-responsive {
304
  width: 1.5em;
305
  height: 1.5em;
306
  vertical-align: middle;
307
}
308

309
/* Media query sizing */
310
@media (max-width: 768px) {
311
  .icon-mobile {
312
    width: 20px;
313
    height: 20px;
314
  }
315
}
316
```