0
# FontAwesome Icons
1

2
Popular icon library providing multiple icon styles including solid, regular, light, brands, and duotone variations. Available in both v6 (latest) and v5 (legacy) versions.
3

4
## Capabilities
5

6
### FontAwesome v6 (Latest)
7

8
FontAwesome Free v6.7.2 with updated icons and new features.
9

10
```typescript { .api }
11
/**
12
 * FontAwesome v6 SVG exports - categorized by style
13
 * Each constant contains SVG path data for the icon
14
 */
15

16
// Brands (fab prefix)
17
export declare const fabFacebook: string;
18
export declare const fabTwitter: string;
19
export declare const fabGoogle: string;
20
export declare const fabGithub: string;
21
export declare const fabLinkedin: string;
22
export declare const fabInstagram: string;
23
export declare const fabYoutube: string;
24
export declare const fabApple: string;
25
export declare const fabMicrosoft: string;
26
export declare const fabAmazon: string;
27
export declare const fabAndroid: string;
28
export declare const fabAngular: string;
29
export declare const fabReact: string;
30
export declare const fabVuejs: string;
31
export declare const fabBootstrap: string;
32
export declare const fabNpm: string;
33
export declare const fabNodejs: string;
34
export declare const fabPython: string;
35
export declare const fabJava: string;
36
export declare const fabJs: string;
37
export declare const fabHtml5: string;
38
export declare const fabCss3: string;
39

40
// Solid icons (fas prefix)  
41
export declare const fasHome: string;
42
export declare const fasUser: string;
43
export declare const fasUsers: string;
44
export declare const fasCog: string;
45
export declare const fasSettings: string;
46
export declare const fasPlus: string;
47
export declare const fasMinus: string;
48
export declare const fasTimes: string;
49
export declare const fasCheck: string;
50
export declare const fasExclamation: string;
51
export declare const fasExclamationTriangle: string;
52
export declare const fasInfo: string;
53
export declare const fasInfoCircle: string;
54
export declare const fasQuestion: string;
55
export declare const fasQuestionCircle: string;
56
export declare const fasSearch: string;
57
export declare const fasEye: string;
58
export declare const fasEyeSlash: string;
59
export declare const fasEdit: string;
60
export declare const fasTrash: string;
61
export declare const fasTrashAlt: string;
62
export declare const fasSave: string;
63
export declare const fasDownload: string;
64
export declare const fasUpload: string;
65
export declare const fasShare: string;
66
export declare const fasHeart: string;
67
export declare const fasStar: string;
68
export declare const fasThumbsUp: string;
69
export declare const fasThumbsDown: string;
70
export declare const fasComments: string;
71
export declare const fasComment: string;
72
export declare const fasEnvelope: string;
73
export declare const fasPhone: string;
74
export declare const fasBell: string;
75
export declare const fasCalendar: string;
76
export declare const fasClock: string;
77
export declare const fasMapMarker: string;
78
export declare const fasMapMarkerAlt: string;
79
export declare const fasLock: string;
80
export declare const fasUnlock: string;
81
export declare const fasShoppingCart: string;
82
export declare const fasCreditCard: string;
83
export declare const fasDollarSign: string;
84
export declare const fasEuroSign: string;
85
export declare const fasPoundSign: string;
86
export declare const fasYenSign: string;
87
export declare const fasBars: string;
88
export declare const fasEllipsisV: string;
89
export declare const fasEllipsisH: string;
90
export declare const fasChevronUp: string;
91
export declare const fasChevronDown: string;
92
export declare const fasChevronLeft: string;
93
export declare const fasChevronRight: string;
94
export declare const fasArrowUp: string;
95
export declare const fasArrowDown: string;
96
export declare const fasArrowLeft: string;
97
export declare const fasArrowRight: string;
98

99
// Regular icons (far prefix)
100
export declare const farUser: string;
101
export declare const farUserCircle: string;
102
export declare const farEdit: string;
103
export declare const farTrashAlt: string;
104
export declare const farSave: string;
105
export declare const farCopy: string;
106
export declare const farCut: string;
107
export declare const farPaste: string;
108
export declare const farFile: string;
109
export declare const farFolder: string;
110
export declare const farFolderOpen: string;
111
export declare const farHeart: string;
112
export declare const farStar: string;
113
export declare const farThumbsUp: string;
114
export declare const farThumbsDown: string;
115
export declare const farComments: string;
116
export declare const farComment: string;
117
export declare const farEnvelope: string;
118
export declare const farBell: string;
119
export declare const farCalendar: string;
120
export declare const farCalendarAlt: string;
121
export declare const farClock: string;
122
export declare const farEye: string;
123
export declare const farEyeSlash: string;
124
export declare const farCheckCircle: string;
125
export declare const farTimesCircle: string;
126
export declare const farQuestionCircle: string;
127
export declare const farInfoCircle: string;
128

129
// Light icons (fal prefix) - Pro version only, but declarations provided
130
export declare const falHome: string;
131
export declare const falUser: string;
132
export declare const falCog: string;
133
export declare const falPlus: string;
134
export declare const falMinus: string;
135
export declare const falTimes: string;
136
export declare const falCheck: string;
137

138
// Duotone icons (fad prefix) - Pro version only, but declarations provided  
139
export declare const fadHome: string;
140
export declare const fadUser: string;
141
export declare const fadCog: string;
142
export declare const fadPlus: string;
143
export declare const fadMinus: string;
144
export declare const fadTimes: string;
145
export declare const fadCheck: string;
146
```
147

148
**Usage Examples:**
149

150
```javascript
151
import { 
152
  fasHome, 
153
  farUser, 
154
  fabFacebook, 
155
  fasSettings,
156
  fasPlus,
157
  fasTrash,
158
  fasEdit,
159
  fasHeart,
160
  fasShare
161
} from "@quasar/extras/fontawesome-v6";
162

163
// Use with Quasar QIcon
164
<template>
165
  <q-icon :name="homeIcon" />
166
  <q-btn :icon="addIcon" color="primary" />
167
  <q-btn :icon="editIcon" flat round />
168
  <q-btn :icon="deleteIcon" color="negative" />
169
  <q-btn :icon="facebookIcon" color="primary" />
170
</template>
171

172
<script>
173
export default {
174
  data() {
175
    return {
176
      homeIcon: fasHome,
177
      userIcon: farUser,
178
      addIcon: fasPlus,
179
      editIcon: fasEdit,
180
      deleteIcon: fasTrash,
181
      settingsIcon: fasSettings,
182
      heartIcon: fasHeart,
183
      shareIcon: fasShare,
184
      facebookIcon: fabFacebook
185
    };
186
  }
187
}
188
</script>
189
```
190

191
### FontAwesome v5 (Legacy)
192

193
FontAwesome Free v5.15.4 for compatibility with older projects.
194

195
```typescript { .api }
196
/**
197
 * FontAwesome v5 SVG exports - legacy version
198
 * Similar structure to v6 but older icon set
199
 */
200

201
// Brands (fab prefix)
202
export declare const fabFacebook: string;
203
export declare const fabTwitter: string;
204
export declare const fabGoogle: string;
205
export declare const fabGithub: string;
206
export declare const fabLinkedin: string;
207

208
// Solid icons (fas prefix)
209
export declare const fasHome: string;
210
export declare const fasUser: string;
211
export declare const fasCog: string;
212
export declare const fasPlus: string;
213
export declare const fasMinus: string;
214
export declare const fasTimes: string;
215
export declare const fasCheck: string;
216

217
// Regular icons (far prefix)
218
export declare const farUser: string;
219
export declare const farEdit: string;
220
export declare const farSave: string;
221
export declare const farHeart: string;
222
export declare const farStar: string;
223

224
// Light icons (fal prefix) - Pro only
225
export declare const falHome: string;
226
export declare const falUser: string;
227

228
// Duotone icons (fad prefix) - Pro only
229
export declare const fadHome: string;
230
export declare const fadUser: string;
231
```
232

233
## Webfont Usage
234

235
### CSS Import
236

237
```css { .api }
238
/* Import FontAwesome CSS - use v6 OR v5, not both */
239
@import '@quasar/extras/fontawesome-v6/fontawesome-v6.css';
240
/* OR */
241
@import '@quasar/extras/fontawesome-v5/fontawesome-v5.css';
242
```
243

244
### HTML Usage
245

246
```html
247
<!-- FontAwesome webfont usage -->
248
<!-- Solid icons -->
249
<i class="fas fa-home"></i>
250
<i class="fas fa-user"></i>
251
<i class="fas fa-cog"></i>
252
<i class="fas fa-plus"></i>
253
<i class="fas fa-minus"></i>
254
<i class="fas fa-times"></i>
255

256
<!-- Regular icons -->
257
<i class="far fa-user"></i>
258
<i class="far fa-edit"></i>
259
<i class="far fa-save"></i>
260
<i class="far fa-heart"></i>
261

262
<!-- Brand icons -->
263
<i class="fab fa-facebook"></i>
264
<i class="fab fa-twitter"></i>
265
<i class="fab fa-github"></i>
266
<i class="fab fa-linkedin"></i>
267

268
<!-- Light icons (Pro only) -->
269
<i class="fal fa-home"></i>
270
<i class="fal fa-user"></i>
271

272
<!-- Duotone icons (Pro only) -->
273
<i class="fad fa-home"></i>
274
<i class="fad fa-user"></i>
275
```
276

277
### QIcon Usage
278

279
```html
280
<!-- With Quasar QIcon component -->
281
<q-icon name="fas fa-home" />
282
<q-icon name="far fa-user" />
283
<q-icon name="fab fa-facebook" />
284
<q-icon name="fas fa-cog" />
285
<q-icon name="fas fa-plus" />
286
```
287

288
## Icon Categories and Prefixes
289

290
### Free Icons (Included)
291
- **fas**: Solid style icons (filled)
292
- **far**: Regular style icons (outlined)  
293
- **fab**: Brand icons (logos and brand symbols)
294

295
### Pro Icons (Declarations Only)
296
- **fal**: Light style icons (thin strokes)
297
- **fad**: Duotone style icons (two-tone coloring)
298

299
**Note**: Light and Duotone styles require FontAwesome Pro license. The free version only includes Solid, Regular, and Brand styles.
300

301
## Icon Naming Convention
302

303
### SVG Export Names
304
- Prefix based on style: `fas`, `far`, `fab`, `fal`, `fad`
305
- CamelCase after prefix (e.g., `fasHome`, `farUser`, `fabFacebook`)
306
- Hyphens in icon names become CamelCase (e.g., `fas-user-circle` → `fasUserCircle`)
307

308
### Webfont Class Names
309
- Two-class system: style prefix + icon name
310
- Style prefixes: `fas`, `far`, `fab`, `fal`, `fad`
311
- Icon names with `fa-` prefix (e.g., `fa-home`, `fa-user`, `fa-facebook`)
312

313
## Version Differences
314

315
### FontAwesome v6 Features
316
- Updated and redesigned icons
317
- New icons added regularly
318
- Better consistency across styles
319
- Improved SVG optimization
320

321
### FontAwesome v5 Compatibility
322
- Stable icon set for legacy projects
323
- Well-established naming conventions
324
- Broad framework compatibility
325

326
## SVG Format
327

328
FontAwesome SVG exports use the same format as other icon libraries:
329

330
```
331
Syntax: "<path>|<viewBox>" or "<path>" (with implicit viewBox of '0 0 512 512')
332
```
333

334
Most FontAwesome icons use a 512x512 viewBox, unlike Material Icons which use 24x24.