0
# Ionicons
1

2
Ionic Framework's icon library providing beautifully crafted icons designed for iOS, Android, and web applications. Multiple versions available for compatibility across different Ionic and framework versions.
3

4
## Capabilities
5

6
### Ionicons v8 (Latest)
7

8
Latest Ionicons v8.0.8 with newest icon designs and optimizations.
9

10
```typescript { .api }
11
/**
12
 * Ionicons v8 SVG exports
13
 * Each constant contains SVG path data for the icon
14
 */
15
export declare const ionAdd: string;
16
export declare const ionAddCircle: string;
17
export declare const ionAddCircleOutline: string;
18
export declare const ionAddOutline: string;
19
export declare const ionAlert: string;
20
export declare const ionAlertCircle: string;
21
export declare const ionAlertCircleOutline: string;
22
export declare const ionAlertOutline: string;
23
export declare const ionArrowBack: string;
24
export declare const ionArrowBackCircle: string;
25
export declare const ionArrowBackCircleOutline: string;
26
export declare const ionArrowBackOutline: string;
27
export declare const ionArrowDown: string;
28
export declare const ionArrowDownCircle: string;
29
export declare const ionArrowDownCircleOutline: string;
30
export declare const ionArrowDownOutline: string;
31
export declare const ionArrowForward: string;
32
export declare const ionArrowForwardCircle: string;
33
export declare const ionArrowForwardCircleOutline: string;
34
export declare const ionArrowForwardOutline: string;
35
export declare const ionArrowUp: string;
36
export declare const ionArrowUpCircle: string;
37
export declare const ionArrowUpCircleOutline: string;
38
export declare const ionArrowUpOutline: string;
39
export declare const ionAt: string;
40
export declare const ionAtCircle: string;
41
export declare const ionAtCircleOutline: string;
42
export declare const ionAtOutline: string;
43
export declare const ionAttach: string;
44
export declare const ionAttachOutline: string;
45
export declare const ionBookmark: string;
46
export declare const ionBookmarkOutline: string;
47
export declare const ionCall: string;
48
export declare const ionCallOutline: string;
49
export declare const ionCamera: string;
50
export declare const ionCameraOutline: string;
51
export declare const ionCameraReverse: string;
52
export declare const ionCameraReverseOutline: string;
53
export declare const ionCart: string;
54
export declare const ionCartOutline: string;
55
export declare const ionCheckbox: string;
56
export declare const ionCheckboxOutline: string;
57
export declare const ionCheckmark: string;
58
export declare const ionCheckmarkCircle: string;
59
export declare const ionCheckmarkCircleOutline: string;
60
export declare const ionCheckmarkOutline: string;
61
export declare const ionChevronBack: string;
62
export declare const ionChevronBackCircle: string;
63
export declare const ionChevronBackCircleOutline: string;
64
export declare const ionChevronBackOutline: string;
65
export declare const ionChevronDown: string;
66
export declare const ionChevronDownCircle: string;
67
export declare const ionChevronDownCircleOutline: string;
68
export declare const ionChevronDownOutline: string;
69
export declare const ionChevronForward: string;
70
export declare const ionChevronForwardCircle: string;
71
export declare const ionChevronForwardCircleOutline: string;
72
export declare const ionChevronForwardOutline: string;
73
export declare const ionChevronUp: string;
74
export declare const ionChevronUpCircle: string;
75
export declare const ionChevronUpCircleOutline: string;
76
export declare const ionChevronUpOutline: string;
77
export declare const ionClose: string;
78
export declare const ionCloseCircle: string;
79
export declare const ionCloseCircleOutline: string;
80
export declare const ionCloseOutline: string;
81
export declare const ionCog: string;
82
export declare const ionCogOutline: string;
83
export declare const ionDownload: string;
84
export declare const ionDownloadOutline: string;
85
export declare const ionDuplicate: string;
86
export declare const ionDuplicateOutline: string;
87
export declare const ionEye: string;
88
export declare const ionEyeOff: string;
89
export declare const ionEyeOffOutline: string;
90
export declare const ionEyeOutline: string;
91
export declare const ionHeart: string;
92
export declare const ionHeartOutline: string;
93
export declare const ionHome: string;
94
export declare const ionHomeOutline: string;
95
export declare const ionInformationCircle: string;
96
export declare const ionInformationCircleOutline: string;
97
export declare const ionInformationOutline: string;
98
export declare const ionMail: string;
99
export declare const ionMailOutline: string;
100
export declare const ionMenu: string;
101
export declare const ionMenuOutline: string;
102
export declare const ionNotifications: string;
103
export declare const ionNotificationsOutline: string;
104
export declare const ionPerson: string;
105
export declare const ionPersonOutline: string;
106
export declare const ionPlay: string;
107
export declare const ionPlayCircle: string;
108
export declare const ionPlayCircleOutline: string;
109
export declare const ionPlayOutline: string;
110
export declare const ionRemove: string;
111
export declare const ionRemoveCircle: string;
112
export declare const ionRemoveCircleOutline: string;
113
export declare const ionRemoveOutline: string;
114
export declare const ionSearch: string;
115
export declare const ionSearchOutline: string;
116
export declare const ionSettings: string;
117
export declare const ionSettingsOutline: string;
118
export declare const ionShare: string;
119
export declare const ionShareOutline: string;
120
export declare const ionStar: string;
121
export declare const ionStarOutline: string;
122
export declare const ionTrash: string;
123
export declare const ionTrashOutline: string;
124
export declare const ionWarning: string;
125
export declare const ionWarningOutline: string;
126
// ... hundreds more icons
127
```
128

129
**Usage Examples:**
130

131
```javascript
132
import { 
133
  ionHome, 
134
  ionHomeOutline,
135
  ionPerson, 
136
  ionPersonOutline,
137
  ionSettings,
138
  ionSettingsOutline,
139
  ionAdd,
140
  ionAddOutline,
141
  ionTrash,
142
  ionTrashOutline
143
} from "@quasar/extras/ionicons-v8";
144

145
// Use with Quasar QIcon
146
<template>
147
  <q-icon :name="homeIcon" />
148
  <q-btn :icon="addIcon" color="primary" />
149
  <q-btn :icon="editIcon" flat round />
150
  <q-btn :icon="deleteIcon" color="negative" />
151
</template>
152

153
<script>
154
export default {
155
  data() {
156
    return {
157
      homeIcon: ionHome,
158
      homeOutlineIcon: ionHomeOutline,
159
      personIcon: ionPerson,
160
      addIcon: ionAdd,
161
      addOutlineIcon: ionAddOutline,
162
      settingsIcon: ionSettings,
163
      deleteIcon: ionTrash,
164
      trashOutlineIcon: ionTrashOutline
165
    };
166
  }
167
}
168
</script>
169
```
170

171
### Ionicons v7
172

173
Ionicons v7.4.0 for compatibility with recent Ionic versions.
174

175
```typescript { .api }
176
/**
177
 * Ionicons v7 SVG exports - similar structure to v8
178
 */
179
export declare const ionHome: string;
180
export declare const ionHomeOutline: string;
181
export declare const ionPerson: string;
182
export declare const ionPersonOutline: string;
183
export declare const ionSettings: string;
184
export declare const ionSettingsOutline: string;
185
export declare const ionAdd: string;
186
export declare const ionAddOutline: string;
187
export declare const ionRemove: string;
188
export declare const ionRemoveOutline: string;
189
export declare const ionClose: string;
190
export declare const ionCloseOutline: string;
191
export declare const ionCheckmark: string;
192
export declare const ionCheckmarkOutline: string;
193
// ... more v7 icons
194
```
195

196
### Ionicons v6
197

198
Ionicons v6.1.3 for compatibility with Ionic v6 projects.
199

200
```typescript { .api }
201
/**
202
 * Ionicons v6 SVG exports
203
 */
204
export declare const ionHome: string;
205
export declare const ionHomeOutline: string;
206
export declare const ionPerson: string;
207
export declare const ionPersonOutline: string;
208
export declare const ionSettings: string;
209
export declare const ionAdd: string;
210
export declare const ionRemove: string;
211
export declare const ionClose: string;
212
export declare const ionCheckmark: string;
213
// ... more v6 icons
214
```
215

216
### Ionicons v5
217

218
Ionicons v5.5.4 for compatibility with Ionic v5 projects.
219

220
```typescript { .api }
221
/**
222
 * Ionicons v5 SVG exports - first version to go SVG-only
223
 */
224
export declare const ionHome: string;
225
export declare const ionHomeOutline: string;
226
export declare const ionPerson: string;
227
export declare const ionPersonOutline: string;
228
export declare const ionSettings: string;
229
export declare const ionAdd: string;
230
export declare const ionRemove: string;
231
export declare const ionClose: string;
232
export declare const ionCheckmark: string;
233
// ... more v5 icons
234
```
235

236
### Ionicons v4 (Legacy Webfont)
237

238
Ionicons v4.6.3 - the last version to include webfonts.
239

240
```typescript { .api }
241
/**
242
 * Ionicons v4 SVG exports - legacy version with webfont support
243
 */
244
export declare const ionHome: string;
245
export declare const ionPerson: string;
246
export declare const ionSettings: string;
247
export declare const ionAdd: string;
248
export declare const ionRemove: string;
249
export declare const ionClose: string;
250
export declare const ionCheckmark: string;
251
// ... more v4 icons
252
```
253

254
## Webfont Usage (v4 Only)
255

256
**Note**: Ionicons v5+ no longer provide webfonts - only SVG icons are available.
257

258
### CSS Import (v4 Only)
259

260
```css { .api }
261
/* Only available for Ionicons v4 */
262
@import '@quasar/extras/ionicons-v4/ionicons-v4.css';
263
```
264

265
### HTML Usage (v4 Only)
266

267
```html
268
<!-- Ionicons v4 webfont usage -->
269
<i class="ion ion-home"></i>
270
<i class="ion ion-person"></i>
271
<i class="ion ion-settings"></i>
272
<i class="ion ion-plus"></i>
273
<i class="ion ion-minus"></i>
274
<i class="ion ion-close"></i>
275

276
<!-- iOS-specific variants -->
277
<i class="ion ion-ios-home"></i>
278
<i class="ion ion-ios-person"></i>
279
<i class="ion ion-ios-settings"></i>
280

281
<!-- Material Design variants -->  
282
<i class="ion ion-md-home"></i>
283
<i class="ion ion-md-person"></i>
284
<i class="ion ion-md-settings"></i>
285

286
<!-- Logo icons -->
287
<i class="ion ion-logo-apple"></i>
288
<i class="ion ion-logo-google"></i>
289
<i class="ion ion-logo-facebook"></i>
290
```
291

292
### QIcon Usage (v4 Only)
293

294
```html
295
<!-- With Quasar QIcon component -->
296
<q-icon name="ion-home" />
297
<q-icon name="ion-ios-person" />
298
<q-icon name="ion-md-settings" />
299
<q-icon name="ion-logo-apple" />
300
```
301

302
## Icon Styles and Variants
303

304
### Filled vs Outlined
305
Most Ionicons come in two variants:
306
- **Filled**: Default solid style (e.g., `ionHome`)
307
- **Outlined**: Outlined style (e.g., `ionHomeOutline`)
308

309
### Platform-Specific (v4 Only)
310
Ionicons v4 provided platform-specific variants:
311
- **ios-**: iOS-styled icons optimized for iOS design patterns
312
- **md-**: Material Design-styled icons for Android
313
- **logo-**: Brand and logo icons
314

315
### Version Evolution
316
- **v8**: Latest with newest designs and optimizations
317
- **v7**: Recent version with good icon coverage
318
- **v6**: Stable version for Ionic v6 compatibility  
319
- **v5**: First SVG-only version, no webfonts
320
- **v4**: Last version with webfont support, platform-specific variants
321

322
## Icon Naming Convention
323

324
### SVG Export Names
325
- Prefix: `ion` (e.g., `ionHome`, `ionPerson`)
326
- CamelCase after prefix
327
- Outlined variants end with `Outline` (e.g., `ionHomeOutline`)
328

329
### Webfont Class Names (v4 Only)
330
- Two-class system: `ion` + icon name
331
- Icon names with prefixes: `ion-`, `ion-ios-`, `ion-md-`, `ion-logo-`
332
- Dash-separated names (e.g., `ion-home`, `ion-ios-person`, `ion-logo-apple`)
333

334
## SVG Format
335

336
Ionicons SVG exports use the standard format:
337

338
```
339
Syntax: "<path>|<viewBox>" or "<path>" (with implicit viewBox of '0 0 512 512')
340
```
341

342
Most Ionicons use a 512x512 viewBox for crisp rendering at various sizes.