0
# Additional Icon Libraries
1

2
Bootstrap Icons, Eva Icons, Themify Icons, and Line Awesome provide additional icon choices for specific design needs and preferences.
3

4
## Capabilities
5

6
### Bootstrap Icons
7

8
Official icon library for Bootstrap with simple, clean designs.
9

10
```typescript { .api }
11
/**
12
 * Bootstrap Icons v1.13.1 SVG exports
13
 * Clean, consistent icons designed for Bootstrap framework
14
 */
15
export declare const biHouse: string;
16
export declare const biHouseFill: string;
17
export declare const biHouseDoor: string;
18
export declare const biHouseDoorFill: string;
19
export declare const biPerson: string;
20
export declare const biPersonFill: string;
21
export declare const biPersonCircle: string;
22
export declare const biPersonBadge: string;
23
export declare const biGear: string;
24
export declare const biGearFill: string;
25
export declare const biGearWide: string;
26
export declare const biGearWideConnected: string;
27
export declare const biPlus: string;
28
export declare const biPlusCircle: string;
29
export declare const biPlusCircleFill: string;
30
export declare const biPlusSquare: string;
31
export declare const biPlusSquareFill: string;
32
export declare const biDash: string;
33
export declare const biDashCircle: string;
34
export declare const biDashCircleFill: string;
35
export declare const biDashSquare: string;
36
export declare const biDashSquareFill: string;
37
export declare const biX: string;
38
export declare const biXCircle: string;
39
export declare const biXCircleFill: string;
40
export declare const biXSquare: string;
41
export declare const biXSquareFill: string;
42
export declare const biCheck: string;
43
export declare const biCheck2: string;
44
export declare const biCheckAll: string;
45
export declare const biCheckCircle: string;
46
export declare const biCheckCircleFill: string;
47
export declare const biCheckSquare: string;
48
export declare const biCheckSquareFill: string;
49
export declare const biExclamation: string;
50
export declare const biExclamationCircle: string;
51
export declare const biExclamationCircleFill: string;
52
export declare const biExclamationTriangle: string;
53
export declare const biExclamationTriangleFill: string;
54
export declare const biInfo: string;
55
export declare const biInfoCircle: string;
56
export declare const biInfoCircleFill: string;
57
export declare const biInfoSquare: string;
58
export declare const biInfoSquareFill: string;
59
export declare const biQuestion: string;
60
export declare const biQuestionCircle: string;
61
export declare const biQuestionCircleFill: string;
62
export declare const biQuestionSquare: string;
63
export declare const biQuestionSquareFill: string;
64
export declare const biSearch: string;
65
export declare const biEye: string;
66
export declare const biEyeFill: string;
67
export declare const biEyeSlash: string;
68
export declare const biEyeSlashFill: string;
69
export declare const biPencil: string;
70
export declare const biPencilFill: string;
71
export declare const biPencilSquare: string;
72
export declare const biTrash: string;
73
export declare const biTrashFill: string;
74
export declare const biTrash2: string;
75
export declare const biTrash2Fill: string;
76
export declare const biDownload: string;
77
export declare const biUpload: string;
78
export declare const biShare: string;
79
export declare const biShareFill: string;
80
export declare const biHeart: string;
81
export declare const biHeartFill: string;
82
export declare const biStar: string;
83
export declare const biStarFill: string;
84
export declare const biStarHalf: string;
85
export declare const biHandThumbsUp: string;
86
export declare const biHandThumbsUpFill: string;
87
export declare const biHandThumbsDown: string;
88
export declare const biHandThumbsDownFill: string;
89
export declare const biChatDots: string;
90
export declare const biChatDotsFill: string;
91
export declare const biEnvelope: string;
92
export declare const biEnvelopeFill: string;
93
export declare const biTelephone: string;
94
export declare const biTelephoneFill: string;
95
export declare const biBell: string;
96
export declare const biBellFill: string;
97
export declare const biCalendar: string;
98
export declare const biCalendarFill: string;
99
export declare const biCalendar2: string;
100
export declare const biCalendar2Fill: string;
101
export declare const biClock: string;
102
export declare const biClockFill: string;
103
export declare const biGeoAlt: string;
104
export declare const biGeoAltFill: string;
105
export declare const biLock: string;
106
export declare const biLockFill: string;
107
export declare const biUnlock: string;
108
export declare const biUnlockFill: string;
109
export declare const biCart: string;
110
export declare const biCartFill: string;
111
export declare const biCreditCard: string;
112
export declare const biCreditCardFill: string;
113
export declare const biCurrencyDollar: string;
114
export declare const biCurrencyEuro: string;
115
export declare const biList: string;
116
export declare const biThreeDots: string;
117
export declare const biThreeDotsVertical: string;
118
export declare const biChevronUp: string;
119
export declare const biChevronDown: string;
120
export declare const biChevronLeft: string;
121
export declare const biChevronRight: string;
122
export declare const biArrowUp: string;
123
export declare const biArrowDown: string;
124
export declare const biArrowLeft: string;
125
export declare const biArrowRight: string;
126
// ... hundreds more Bootstrap icons
127
```
128

129
**Usage Examples:**
130

131
```javascript
132
import { 
133
  biHouse, 
134
  biPerson, 
135
  biGear, 
136
  biPlus,
137
  biTrash,
138
  biPencil,
139
  biHeart,
140
  biShare
141
} from "@quasar/extras/bootstrap-icons";
142

143
// Use with Quasar QIcon
144
<template>
145
  <q-icon :name="homeIcon" />
146
  <q-btn :icon="addIcon" />
147
  <q-btn :icon="editIcon" />
148
  <q-btn :icon="deleteIcon" />
149
</template>
150

151
<script>
152
export default {
153
  data() {
154
    return {
155
      homeIcon: biHouse,
156
      personIcon: biPerson,
157
      gearIcon: biGear,
158
      addIcon: biPlus,
159
      editIcon: biPencil,
160
      deleteIcon: biTrash,
161
      heartIcon: biHeart,
162
      shareIcon: biShare
163
    };
164
  }
165
}
166
</script>
167
```
168

169
### Eva Icons
170

171
Beautiful outline icons with consistent design and optimal clarity.
172

173
```typescript { .api }
174
/**
175
 * Eva Icons v1.1.3 SVG exports
176
 * Beautiful outline icons with consistent design
177
 */
178
export declare const evaActivity: string;
179
export declare const evaActivityOutline: string;
180
export declare const evaHome: string;
181
export declare const evaHomeOutline: string;
182
export declare const evaPerson: string;
183
export declare const evaPersonOutline: string;
184
export declare const evaSettings: string;
185
export declare const evaSettingsOutline: string;
186
export declare const evaSettings2: string;
187
export declare const evaSettings2Outline: string;
188
export declare const evaPlus: string;
189
export declare const evaPlusOutline: string;
190
export declare const evaPlusCircle: string;
191
export declare const evaPlusCircleOutline: string;
192
export declare const evaPlusSquare: string;
193
export declare const evaPlusSquareOutline: string;
194
export declare const evaMinus: string;
195
export declare const evaMinusOutline: string;
196
export declare const evaMinusCircle: string;
197
export declare const evaMinusCircleOutline: string;
198
export declare const evaMinusSquare: string;
199
export declare const evaMinusSquareOutline: string;
200
export declare const evaClose: string;
201
export declare const evaCloseOutline: string;
202
export declare const evaCloseCircle: string;
203
export declare const evaCloseCircleOutline: string;
204
export declare const evaCloseSquare: string;
205
export declare const evaCloseSquareOutline: string;
206
export declare const evaCheckmark: string;
207
export declare const evaCheckmarkOutline: string;
208
export declare const evaCheckmarkCircle: string;
209
export declare const evaCheckmarkCircleOutline: string;
210
export declare const evaCheckmarkSquare: string;
211
export declare const evaCheckmarkSquareOutline: string;
212
export declare const evaAlert: string;
213
export declare const evaAlertOutline: string;
214
export declare const evaAlertCircle: string;
215
export declare const evaAlertCircleOutline: string;
216
export declare const evaAlertTriangle: string;
217
export declare const evaAlertTriangleOutline: string;
218
export declare const evaInfo: string;
219
export declare const evaInfoOutline: string;
220
export declare const evaQuestion: string;
221
export declare const evaQuestionOutline: string;
222
export declare const evaQuestionMark: string;
223
export declare const evaQuestionMarkOutline: string;
224
export declare const evaSearch: string;
225
export declare const evaSearchOutline: string;
226
export declare const evaEye: string;
227
export declare const evaEyeOutline: string;
228
export declare const evaEyeOff: string;
229
export declare const evaEyeOffOutline: string;
230
export declare const evaEdit: string;
231
export declare const evaEditOutline: string;
232
export declare const evaEdit2: string;
233
export declare const evaEdit2Outline: string;
234
export declare const evaTrash: string;
235
export declare const evaTrashOutline: string;
236
export declare const evaTrash2: string;
237
export declare const evaTrash2Outline: string;
238
export declare const evaDownload: string;
239
export declare const evaDownloadOutline: string;
240
export declare const evaUpload: string;
241
export declare const evaUploadOutline: string;
242
export declare const evaShare: string;
243
export declare const evaShareOutline: string;
244
export declare const evaHeart: string;
245
export declare const evaHeartOutline: string;
246
export declare const evaStar: string;
247
export declare const evaStarOutline: string;
248
export declare const evaThumbsUp: string;
249
export declare const evaThumbsUpOutline: string;
250
export declare const evaThumbsDown: string;
251
export declare const evaThumbsDownOutline: string;
252
export declare const evaMessage: string;
253
export declare const evaMessageOutline: string;
254
export declare const evaMessageCircle: string;
255
export declare const evaMessageCircleOutline: string;
256
export declare const evaMessageSquare: string;
257
export declare const evaMessageSquareOutline: string;
258
export declare const evaEmail: string;
259
export declare const evaEmailOutline: string;
260
export declare const evaPhone: string;
261
export declare const evaPhoneOutline: string;
262
export declare const evaBell: string;
263
export declare const evaBellOutline: string;
264
export declare const evaBellOff: string;
265
export declare const evaBellOffOutline: string;
266
export declare const evaCalendar: string;
267
export declare const evaCalendarOutline: string;
268
export declare const evaClock: string;
269
export declare const evaClockOutline: string;
270
export declare const evaPin: string;
271
export declare const evaPinOutline: string;
272
export declare const evaLock: string;
273
export declare const evaLockOutline: string;
274
export declare const evaUnlock: string;
275
export declare const evaUnlockOutline: string;
276
export declare const evaShoppingBag: string;
277
export declare const evaShoppingBagOutline: string;
278
export declare const evaShoppingCart: string;
279
export declare const evaShoppingCartOutline: string;
280
export declare const evaCreditCard: string;
281
export declare const evaCreditCardOutline: string;
282
// ... more Eva icons
283
```
284

285
### Themify Icons
286

287
Themify Icons collection with web design focus.
288

289
```typescript { .api }
290
/**
291
 * Themify Icons v1.0.1 SVG exports
292
 * Web-focused icon collection
293
 */
294
export declare const tiHome: string;
295
export declare const tiUser: string;
296
export declare const tiSettings: string;
297
export declare const tiPlus: string;
298
export declare const tiMinus: string;
299
export declare const tiClose: string;
300
export declare const tiCheck: string;
301
export declare const tiAlert: string;
302
export declare const tiInfo: string;
303
export declare const tiHelp: string;
304
export declare const tiSearch: string;
305
export declare const tiEye: string;
306
export declare const tiPencil: string;
307
export declare const tiTrash: string;
308
export declare const tiSave: string;
309
export declare const tiDownload: string;
310
export declare const tiUpload: string;
311
export declare const tiShare: string;
312
export declare const tiHeart: string;
313
export declare const tiStar: string;
314
export declare const tiThumbUp: string;
315
export declare const tiThumbDown: string;
316
export declare const tiComment: string;
317
export declare const tiEmail: string;
318
export declare const tiMobile: string;
319
export declare const tiAlarm: string;
320
export declare const tiCalendar: string;
321
export declare const tiTime: string;
322
export declare const tiLocation: string;
323
export declare const tiLock: string;
324
export declare const tiUnlock: string;
325
export declare const tiShoppingCart: string;
326
export declare const tiCreditCard: string;
327
export declare const tiMoney: string;
328
export declare const tiMenu: string;
329
export declare const tiMore: string;
330
export declare const tiMoreAlt: string;
331
export declare const tiAngleUp: string;
332
export declare const tiAngleDown: string;
333
export declare const tiAngleLeft: string;
334
export declare const tiAngleRight: string;
335
export declare const tiArrowUp: string;
336
export declare const tiArrowDown: string;
337
export declare const tiArrowLeft: string;
338
export declare const tiArrowRight: string;
339
// ... more Themify icons
340
```
341

342
### Line Awesome
343

344
FontAwesome alternative with line-style icons.
345

346
```typescript { .api }
347
/**
348
 * Line Awesome v1.3.0 SVG exports
349
 * Line-style alternative to FontAwesome
350
 */
351

352
// Solid style (las prefix)
353
export declare const lasHome: string;
354
export declare const lasUser: string;
355
export declare const lasUsers: string;
356
export declare const lasCog: string;
357
export declare const lasPlus: string;
358
export declare const lasMinus: string;
359
export declare const lasTimes: string;
360
export declare const lasCheck: string;
361
export declare const lasExclamation: string;
362
export declare const lasExclamationTriangle: string;
363
export declare const lasInfo: string;
364
export declare const lasInfoCircle: string;
365
export declare const lasQuestion: string;
366
export declare const lasQuestionCircle: string;
367
export declare const lasSearch: string;
368
export declare const lasEye: string;
369
export declare const lasEyeSlash: string;
370
export declare const lasPen: string;
371
export declare const lasEdit: string;
372
export declare const lasTrash: string;
373
export declare const lasTrashAlt: string;
374
export declare const lasSave: string;
375
export declare const lasDownload: string;
376
export declare const lasUpload: string;
377
export declare const lasShare: string;
378
export declare const lasShareAlt: string;
379
export declare const lasHeart: string;
380
export declare const lasStar: string;
381
export declare const lasThumbsUp: string;
382
export declare const lasThumbsDown: string;
383
export declare const lasComments: string;
384
export declare const lasComment: string;
385
export declare const lasEnvelope: string;
386
export declare const lasPhone: string;
387
export declare const lasBell: string;
388
export declare const lasCalendar: string;
389
export declare const lasCalendarAlt: string;
390
export declare const lasClock: string;
391
export declare const lasMapMarker: string;
392
export declare const lasMapMarkerAlt: string;
393
export declare const lasLock: string;
394
export declare const lasUnlock: string;
395
export declare const lasShoppingCart: string;
396
export declare const lasCreditCard: string;
397
export declare const lasDollarSign: string;
398
export declare const lasBars: string;
399
export declare const lasEllipsisV: string;
400
export declare const lasEllipsisH: string;
401
export declare const lasChevronUp: string;
402
export declare const lasChevronDown: string;
403
export declare const lasChevronLeft: string;
404
export declare const lasChevronRight: string;
405
export declare const lasArrowUp: string;
406
export declare const lasArrowDown: string;
407
export declare const lasArrowLeft: string;
408
export declare const lasArrowRight: string;
409

410
// Regular style (lar prefix)
411
export declare const larUser: string;
412
export declare const larEdit: string;
413
export declare const larTrashAlt: string;
414
export declare const larSave: string;
415
export declare const larCopy: string;
416
export declare const larFile: string;
417
export declare const larFolder: string;
418
export declare const larFolderOpen: string;
419
export declare const larHeart: string;
420
export declare const larStar: string;
421
export declare const larThumbsUp: string;
422
export declare const larThumbsDown: string;
423
export declare const larComments: string;
424
export declare const larComment: string;
425
export declare const larEnvelope: string;
426
export declare const larBell: string;
427
export declare const larCalendar: string;
428
export declare const larCalendarAlt: string;
429
export declare const larClock: string;
430
export declare const larEye: string;
431
export declare const larEyeSlash: string;
432

433
// Brand style (lab prefix)
434
export declare const labFacebook: string;
435
export declare const labTwitter: string;
436
export declare const labGoogle: string;
437
export declare const labGithub: string;
438
export declare const labLinkedin: string;
439
export declare const labInstagram: string;
440
export declare const labYoutube: string;
441
export declare const labApple: string;
442
export declare const labMicrosoft: string;
443
export declare const labAmazon: string;
444
// ... more Line Awesome icons
445
```
446

447
## Webfont Usage
448

449
All additional icon libraries support webfont usage with their respective CSS imports.
450

451
### CSS Import
452

453
```css { .api }
454
/* Import CSS for webfont usage */
455
@import '@quasar/extras/bootstrap-icons/bootstrap-icons.css';
456
@import '@quasar/extras/eva-icons/eva-icons.css';
457
@import '@quasar/extras/themify/themify.css';
458
@import '@quasar/extras/line-awesome/line-awesome.css';
459
```
460

461
### HTML Usage
462

463
```html
464
<!-- Bootstrap Icons -->
465
<i class="bi bi-house"></i>
466
<i class="bi bi-person"></i>
467
<i class="bi bi-gear"></i>
468

469
<!-- Eva Icons -->
470
<i class="eva eva-home"></i>
471
<i class="eva eva-home-outline"></i>
472
<i class="eva eva-person"></i>
473

474
<!-- Themify Icons -->
475
<i class="ti ti-home"></i>
476
<i class="ti ti-user"></i>
477
<i class="ti ti-settings"></i>
478

479
<!-- Line Awesome -->
480
<i class="las la-home"></i>
481
<i class="lar la-user"></i>
482
<i class="lab la-facebook"></i>
483
```
484

485
### QIcon Usage
486

487
```html
488
<!-- With Quasar QIcon component -->
489
<q-icon name="bi-house" />
490
<q-icon name="eva-home-outline" />
491
<q-icon name="ti-home" />
492
<q-icon name="las la-home" />
493
```
494

495
## Icon Naming Conventions
496

497
### Bootstrap Icons
498
- **SVG Exports**: Prefix `bi` (e.g., `biHouse`, `biPerson`)
499
- **Webfont**: Prefix `bi-` (e.g., `bi-house`, `bi-person`)
500
- **Variants**: Fill variants end with `Fill` (e.g., `biHouseFill`)
501

502
### Eva Icons
503
- **SVG Exports**: Prefix `eva` (e.g., `evaHome`, `evaPerson`)
504
- **Webfont**: Prefix `eva-` (e.g., `eva-home`, `eva-person`)
505
- **Variants**: Outline variants end with `Outline` (e.g., `evaHomeOutline`)
506

507
### Themify Icons
508
- **SVG Exports**: Prefix `ti` (e.g., `tiHome`, `tiUser`)
509
- **Webfont**: Prefix `ti-` (e.g., `ti-home`, `ti-user`)
510

511
### Line Awesome
512
- **SVG Exports**: Style-based prefixes `las`, `lar`, `lab` (e.g., `lasHome`, `larUser`, `labFacebook`)
513
- **Webfont**: Two-class system like FontAwesome (e.g., `las la-home`, `lar la-user`, `lab la-facebook`)
514

515
## Use Cases
516

517
- **Bootstrap Icons**: Perfect for Bootstrap-based projects, clean modern designs
518
- **Eva Icons**: Excellent for applications requiring consistent outline-style icons
519
- **Themify Icons**: Good for web design projects with focus on usability
520
- **Line Awesome**: Great FontAwesome alternative with line-style aesthetics