0
# Icon Components
1

2
Individual Vue components for each Tabler icon, providing a comprehensive set of 5,945 icons available as tree-shakable Vue 3 components. Each icon comes in outline (default) and filled variants with consistent prop interfaces.
3

4
## Capabilities
5

6
### Icon Component Interface
7

8
All icon components share the same props interface and behavior patterns.
9

10
```typescript { .api }
11
/**
12
 * Base interface for all icon components
13
 * Extends Vue's SVGAttributes but replaces 'stroke' prop for better Vue compatibility
14
 */
15
interface IconProps extends Partial<Omit<SVGAttributes, 'stroke'>> {
16
  /** Icon size in pixels (width and height) - Default: 24 */
17
  size?: string | number;
18
  /** Stroke color for outline icons or fill color for filled icons - Default: 'currentColor' */
19
  stroke?: string | number;
20
  /** Accessibility title element content */
21
  title?: string;
22
}
23

24
/**
25
 * Functional component type for all icon components
26
 */
27
type Icon = FunctionalComponent<IconProps>;
28
```
29

30
### Outline Icons
31

32
Default icon style with configurable stroke properties. 4,964 outline icons available.
33

34
```typescript { .api }
35
// Examples of outline icon components
36
declare const IconHome: Icon;
37
declare const IconSettings: Icon;
38
declare const IconUser: Icon;
39
declare const IconMail: Icon;
40
declare const IconPhone: Icon;
41
declare const IconCalendar: Icon;
42
declare const IconSearch: Icon;
43
declare const IconMenu: Icon;
44
declare const IconChevronDown: Icon;
45
declare const IconPlus: Icon;
46
```
47

48
**Usage Examples:**
49

50
```vue
51
<template>
52
  <!-- Basic outline icon -->
53
  <IconHome />
54
  
55
  <!-- Customized outline icon -->
56
  <IconHome 
57
    color="blue" 
58
    size="32" 
59
    stroke-width="1"
60
  />
61
  
62
  <!-- With accessibility title -->
63
  <IconSettings title="Open Settings" />
64
  
65
  <!-- With event handlers -->
66
  <IconSearch @click="performSearch" />
67
</template>
68

69
<script setup>
70
import { IconHome, IconSettings, IconSearch } from '@tabler/icons-vue';
71

72
function performSearch() {
73
  console.log('Search clicked');
74
}
75
</script>
76
```
77

78
### Filled Icons
79

80
Solid icon style with fill color control. 981 filled icons available.
81

82
```typescript { .api }
83
// Examples of filled icon components  
84
declare const IconHomeFilled: Icon;
85
declare const IconSettingsFilled: Icon;
86
declare const IconUserFilled: Icon;
87
declare const IconMailFilled: Icon;
88
declare const IconPhoneFilled: Icon;
89
declare const IconCalendarFilled: Icon;
90
declare const IconSearchFilled: Icon;
91
declare const IconMenuFilled: Icon;
92
declare const IconChevronDownFilled: Icon;
93
declare const IconPlusFilled: Icon;
94
```
95

96
**Usage Examples:**
97

98
```vue
99
<template>
100
  <!-- Basic filled icon -->
101
  <IconHomeFilled />
102
  
103
  <!-- Customized filled icon -->
104
  <IconHomeFilled 
105
    color="red" 
106
    size="28"
107
  />
108
  
109
  <!-- Filled icons don't use stroke-width -->
110
  <IconSettingsFilled fill="green" />
111
</template>
112

113
<script setup>
114
import { IconHomeFilled, IconSettingsFilled } from '@tabler/icons-vue';
115
</script>
116
```
117

118
### Icon Naming Patterns
119

120
Icons follow consistent naming conventions for predictable imports.
121

122
```typescript { .api }
123
// Naming pattern examples
124
declare const IconHome: Icon;              // outline version
125
declare const IconHomeFilled: Icon;        // filled version
126

127
declare const IconArrowUp: Icon;           // outline version  
128
declare const IconArrowUpFilled: Icon;     // filled version
129

130
declare const IconBrandGithub: Icon;       // brand icons (outline only)
131
declare const IconNumber123: Icon;         // number icons
132
declare const IconLetterA: Icon;           // letter icons
133

134
// Multi-word icons use PascalCase
135
declare const IconAccessible: Icon;
136
declare const IconAccessibleFilled: Icon;
137
declare const IconShoppingCart: Icon;
138
declare const IconShoppingCartFilled: Icon;
139
```
140

141
### Component Properties
142

143
All icon components support consistent properties and behaviors.
144

145
```typescript { .api }
146
/**
147
 * Size property - controls both width and height
148
 * @param size - Number in pixels or string with units
149
 */
150
size?: string | number; // Default: 24
151

152
/**
153
 * Color property - stroke color for outline, fill color for filled
154
 * @param stroke - CSS color value
155
 */
156
stroke?: string | number; // Default: 'currentColor'
157

158
/**
159
 * Alternative color properties (Vue attribute compatibility)
160
 */
161
color?: string;      // Alternative to stroke
162
strokeWidth?: string | number; // Outline icons only
163

164
/**
165
 * Accessibility support
166
 * @param title - Screen reader title text
167
 */
168
title?: string;
169

170
/**
171
 * CSS class support
172
 */
173
class?: string | string[] | Record<string, boolean>;
174

175
/**
176
 * Style attribute support
177
 */
178
style?: string | Record<string, string>;
179
```
180

181
### CSS Classes and Styling
182

183
All icon components automatically receive CSS classes for styling and theming.
184

185
```typescript { .api }
186
// Automatic CSS classes applied to all icons
187
class="tabler-icon tabler-icon-{icon-name}"
188

189
// Examples:
190
// <IconHome /> gets: class="tabler-icon tabler-icon-home"
191
// <IconSettings /> gets: class="tabler-icon tabler-icon-settings"
192
// <IconShoppingCart /> gets: class="tabler-icon tabler-icon-shopping-cart"
193
```
194

195
**CSS Styling Examples:**
196

197
```css
198
/* Style all tabler icons */
199
.tabler-icon {
200
  transition: color 0.2s ease;
201
}
202

203
/* Style specific icon */
204
.tabler-icon-home {
205
  color: blue;
206
}
207

208
/* Hover effects */
209
.tabler-icon:hover {
210
  color: var(--primary-color);
211
}
212
```
213

214
### Event Handling 
215

216
Icon components support all Vue event handlers like regular components.
217

218
**Usage Examples:**
219

220
```vue
221
<template>
222
  <!-- Click events -->
223
  <IconHome @click="goHome" />
224
  
225
  <!-- Mouse events -->
226
  <IconSettings 
227
    @mouseenter="showTooltip"
228
    @mouseleave="hideTooltip"
229
  />
230
  
231
  <!-- Keyboard events -->
232
  <IconSearch 
233
    tabindex="0"
234
    @keydown.enter="performSearch"
235
  />
236
</template>
237

238
<script setup>
239
import { IconHome, IconSettings, IconSearch } from '@tabler/icons-vue';
240

241
function goHome() {
242
  console.log('Home clicked');
243
}
244

245
function showTooltip() {
246
  console.log('Show tooltip');
247
}
248

249
function hideTooltip() {
250
  console.log('Hide tooltip');
251
}
252

253
function performSearch() {
254
  console.log('Search triggered');
255
}
256
</script>
257
```
258

259
### Slot Support
260

261
Icon components support default slots for adding custom SVG content.
262

263
**Usage Examples:**
264

265
```vue
266
<template>
267
  <!-- Add custom SVG elements to an icon -->
268
  <IconHome>
269
    <circle cx="12" cy="12" r="2" fill="red" />
270
  </IconHome>
271
  
272
  <!-- Add text elements -->
273
  <IconSettings>
274
    <text x="12" y="16" text-anchor="middle" font-size="6">!</text>
275
  </IconSettings>
276
</template>
277

278
<script setup>
279
import { IconHome, IconSettings } from '@tabler/icons-vue';
280
</script>
281
```
282

283
### Icon Aliases
284

285
Alternative names for icons to maintain backward compatibility and provide intuitive naming options.
286

287
```typescript { .api }
288
// Example aliases (100+ available)
289
declare const IconCodeAsterix: Icon;        // Alias for IconCodeAsterisk
290
declare const IconDiscount2: Icon;          // Alias for IconRosetteDiscount  
291
declare const Icon2fa: Icon;                // Alias for IconAuth2fa
292
declare const Icon3dCubeSphere: Icon;       // Alias for IconCube3dSphere
293
declare const IconCircle0: Icon;            // Alias for IconCircleNumber0
294
declare const IconSquare1: Icon;            // Alias for IconSquareNumber1
295
```
296

297
**Usage Examples:**
298

299
```vue
300
<template>
301
  <!-- Using aliases - same as regular icons -->
302
  <IconCodeAsterix />
303
  <Icon2fa />
304
  <IconCircle0 />
305
</template>
306

307
<script setup>
308
import { IconCodeAsterix, Icon2fa, IconCircle0 } from '@tabler/icons-vue';
309
</script>
310
```