0
# Icon Components
1

2
Individual pre-built Vue 3 functional components for all 1,600+ Lucide icons. Each component renders a specific SVG icon with consistent props interface and behavior.
3

4
## Capabilities
5

6
### All Icon Components
7

8
Every Lucide icon is available as a named export functional component. All components accept the same `LucideProps` interface and render as SVG elements with consistent styling and behavior.
9

10
```typescript { .api }
11
/**
12
 * All icon components follow this signature pattern
13
 * Each icon component is a Vue functional component accepting LucideProps
14
 */
15
type IconComponent = FunctionalComponent<LucideProps>;
16

17
// Alphabetically organized selection of available icon components:
18
const AArrowDown: IconComponent;
19
const AArrowUp: IconComponent;
20
const ALargeSmall: IconComponent;
21
const Accessibility: IconComponent;
22
const Activity: IconComponent;
23
const AirVent: IconComponent;
24
const AlarmClock: IconComponent;
25
const AlarmClockCheck: IconComponent;
26
const AlarmClockMinus: IconComponent;
27
const AlarmClockOff: IconComponent;
28
const AlarmClockPlus: IconComponent;
29
const Album: IconComponent;
30
const AlignCenter: IconComponent;
31
const AlignCenterHorizontal: IconComponent;
32
const AlignCenterVertical: IconComponent;
33
const AlignEndHorizontal: IconComponent;
34
const AlignEndVertical: IconComponent;
35
const AlignHorizontalDistributeCenter: IconComponent;
36
const AlignHorizontalDistributeEnd: IconComponent;
37
const AlignHorizontalDistributeStart: IconComponent;
38
const AlignHorizontalJustifyCenter: IconComponent;
39
const AlignHorizontalJustifyEnd: IconComponent;
40
const AlignHorizontalJustifyStart: IconComponent;
41
const AlignHorizontalSpaceAround: IconComponent;
42
const AlignHorizontalSpaceBetween: IconComponent;
43
const AlignJustify: IconComponent;
44
const AlignLeft: IconComponent;
45
const AlignRight: IconComponent;
46
const AlignStartHorizontal: IconComponent;
47
const AlignStartVertical: IconComponent;
48
const AlignVerticalDistributeCenter: IconComponent;
49
const AlignVerticalDistributeEnd: IconComponent;
50
const AlignVerticalDistributeStart: IconComponent;
51
const AlignVerticalJustifyCenter: IconComponent;
52
const AlignVerticalJustifyEnd: IconComponent;
53
const AlignVerticalJustifyStart: IconComponent;
54
const AlignVerticalSpaceAround: IconComponent;
55
const AlignVerticalSpaceBetween: IconComponent;
56
const Ambulance: IconComponent;
57
const Ampersand: IconComponent;
58
const Ampersands: IconComponent;
59
const Anchor: IconComponent;
60
const Angry: IconComponent;
61
const Annoyed: IconComponent;
62
const Antenna: IconComponent;
63
const Anvil: IconComponent;
64
const Aperture: IconComponent;
65
const AppWindow: IconComponent;
66
const AppWindowMac: IconComponent;
67
const Apple: IconComponent;
68
const Archive: IconComponent;
69
const ArchiveRestore: IconComponent;
70
const ArchiveX: IconComponent;
71
const AreaChart: IconComponent;
72
const Armchair: IconComponent;
73
const ArrowBigDown: IconComponent;
74
const ArrowBigDownDash: IconComponent;
75
const ArrowBigLeft: IconComponent;
76
const ArrowBigLeftDash: IconComponent;
77
const ArrowBigRight: IconComponent;
78
const ArrowBigRightDash: IconComponent;
79
const ArrowBigUp: IconComponent;
80
const ArrowBigUpDash: IconComponent;
81
const ArrowDown: IconComponent;
82
const ArrowDown01: IconComponent;
83
const ArrowDown10: IconComponent;
84
const ArrowDownAZ: IconComponent;
85
const ArrowDownFromLine: IconComponent;
86
const ArrowDownLeft: IconComponent;
87
const ArrowDownNarrowWide: IconComponent;
88
const ArrowDownRight: IconComponent;
89
const ArrowDownToDot: IconComponent;
90
const ArrowDownToLine: IconComponent;
91
const ArrowDownUp: IconComponent;
92
const ArrowDownWideNarrow: IconComponent;
93
const ArrowDownZA: IconComponent;
94
const ArrowLeft: IconComponent;
95
const ArrowLeftFromLine: IconComponent;
96
const ArrowLeftRight: IconComponent;
97
const ArrowLeftToLine: IconComponent;
98
const ArrowRight: IconComponent;
99
const ArrowRightFromLine: IconComponent;
100
const ArrowRightLeft: IconComponent;
101
const ArrowRightToLine: IconComponent;
102
const ArrowUp: IconComponent;
103
const ArrowUp01: IconComponent;
104
const ArrowUp10: IconComponent;
105
const ArrowUpAZ: IconComponent;
106
const ArrowUpDown: IconComponent;
107
const ArrowUpFromDot: IconComponent;
108
const ArrowUpFromLine: IconComponent;
109
const ArrowUpLeft: IconComponent;
110
const ArrowUpNarrowWide: IconComponent;
111
const ArrowUpRight: IconComponent;
112
const ArrowUpToLine: IconComponent;
113
const ArrowUpWideNarrow: IconComponent;
114
const ArrowUpZA: IconComponent;
115
const ArrowsUpFromLine: IconComponent;
116
const Asterisk: IconComponent;
117
const AtSign: IconComponent;
118
const Atom: IconComponent;
119
const AudioLines: IconComponent;
120
const AudioWaveform: IconComponent;
121
const Award: IconComponent;
122
const Axe: IconComponent;
123
const Axis3d: IconComponent;
124
// ... and approximately 1,550+ more icon components following the same pattern
125

126
// Popular icons for common use cases:
127
const Bell: IconComponent;
128
const Calendar: IconComponent;
129
const Check: IconComponent;
130
const ChevronDown: IconComponent;
131
const ChevronLeft: IconComponent;
132
const ChevronRight: IconComponent;
133
const ChevronUp: IconComponent;
134
const Download: IconComponent;
135
const Edit: IconComponent;
136
const Eye: IconComponent;
137
const EyeOff: IconComponent;
138
const Heart: IconComponent;
139
const Home: IconComponent;
140
const Mail: IconComponent;
141
const Menu: IconComponent;
142
const Plus: IconComponent;
143
const Search: IconComponent;
144
const Settings: IconComponent;
145
const Smile: IconComponent;
146
const Star: IconComponent;
147
const Trash: IconComponent;
148
const Upload: IconComponent;
149
const User: IconComponent;
150
const X: IconComponent;
151
```
152

153
**Usage Examples:**
154

155
```vue
156
<template>
157
  <div>
158
    <!-- Basic usage -->
159
    <Smile />
160
    <Activity />
161
    <Home />
162
    
163
    <!-- With customization -->
164
    <Bell :size="32" color="red" />
165
    <Star :size="24" :stroke-width="1" />
166
    
167
    <!-- With all SVG attributes -->
168
    <Heart 
169
      :size="48"
170
      color="pink"
171
      :stroke-width="2"
172
      class="animated-heart"
173
      @click="handleClick"
174
    />
175
  </div>
176
</template>
177

178
<script setup>
179
import { Smile, Activity, Home, Bell, Star, Heart } from "lucide-vue-next";
180

181
const handleClick = () => {
182
  console.log('Heart clicked!');
183
};
184
</script>
185
```
186

187
### Icon Aliases
188

189
Some icons have alias names for backward compatibility. These are deprecated but still functional.
190

191
```typescript { .api }
192
// Deprecated aliases (examples):
193
const Edit2: IconComponent; // Alias for Pen
194
const Pen: IconComponent;   // Current name
195

196
// Usage of aliases works but generates deprecation warnings:
197
const ArrowLeftCircle: IconComponent; // May be alias
198
const CircleArrowLeft: IconComponent; // Current name
199
```
200

201
### Namespace Import Usage
202

203
All icons are also available through namespace import:
204

205
```typescript { .api }
206
import { icons } from "lucide-vue-next";
207

208
// Access any icon through the icons namespace:
209
// icons.Smile, icons.Activity, icons.Home, etc.
210
```
211

212
**Usage Example:**
213

214
```vue
215
<template>
216
  <div>
217
    <component :is="icons.Smile" :size="24" />
218
    <component :is="icons[selectedIcon]" :size="32" />
219
  </div>
220
</template>
221

222
<script setup>
223
import { icons } from "lucide-vue-next";
224
import { ref } from "vue";
225

226
const selectedIcon = ref("Activity");
227
</script>
228
```
229

230
## Icon Categories
231

232
Icons are organized into logical categories (examples of major categories):
233

234
- **Arrows**: ArrowUp, ArrowDown, ArrowLeft, ArrowRight, ChevronUp, etc.
235
- **Interface**: Menu, X, Plus, Minus, Settings, Search, etc.
236
- **Communication**: Mail, Phone, MessageCircle, Send, etc.
237
- **Media**: Play, Pause, Stop, Volume, Camera, etc.
238
- **Files**: File, Folder, Download, Upload, Save, etc.
239
- **Social**: Heart, Star, Share, Bookmark, etc.
240
- **Business**: Calendar, Clock, User, Users, Building, etc.
241
- **Transport**: Car, Plane, Train, Bike, etc.
242
- **Weather**: Sun, Cloud, Rain, Snow, etc.
243
- **Emojis**: Smile, Frown, Meh, Laugh, etc.
244

245
Each category contains dozens of related icons with consistent design and styling.