0
# Icon Families
1

2
Ready-to-use icon components for popular icon sets including FontAwesome, Material Design, Ant Design, and more. Each family provides a pre-configured component with its complete glyph set.
3

4
## Capabilities
5

6
### Standard Icon Components
7

8
Most icon families provide a simple component interface with consistent props.
9

10
```typescript { .api }
11
interface StandardIconProps {
12
  /** Icon name from the family's glyph set */
13
  name: string;
14
  /** Icon size in points (default: 12) */
15
  size?: number;
16
  /** Icon color (default: 'black') */
17
  color?: string;
18
  /** Additional React Native Text styles */
19
  style?: TextStyle;
20
  /** Enable font scaling with device accessibility settings */
21
  allowFontScaling?: boolean;
22
  /** All other React Native Text props */
23
  [key: string]: any;
24
}
25

26
type StandardIconComponent = React.FC<StandardIconProps> & {
27
  getImageSource(name: string, size?: number, color?: string): Promise<ImageSource>;
28
  getImageSourceSync(name: string, size?: number, color?: string): ImageSource;
29
};
30
```
31

32
### Multi-Style Icon Components
33

34
Some families (FontAwesome 5/6) support multiple font styles with additional props.
35

36
```typescript { .api }
37
interface MultiStyleIconProps {
38
  /** Icon name from the family's glyph set */
39
  name: string;
40
  /** Font style variant (varies by family) */
41
  iconStyle?: 'regular' | 'solid' | 'brand' | 'light' | 'thin' | 'duotone';
42
  /** Icon size in points (default: 12) */
43
  size?: number;
44
  /** Icon color (default: 'black') */
45
  color?: string;
46
  /** Additional React Native Text styles */
47
  style?: TextStyle;
48
  /** Enable font scaling with device accessibility settings */
49
  allowFontScaling?: boolean;
50
}
51

52
type MultiStyleIconComponent = React.FC<MultiStyleIconProps> & {
53
  getImageSource(
54
    iconStyle: string,
55
    name: string,
56
    size?: number,
57
    color?: string
58
  ): Promise<ImageSource>;
59
  getImageSourceSync(
60
    iconStyle: string,
61
    name: string,
62
    size?: number,
63
    color?: string
64
  ): ImageSource;
65
};
66
```
67

68
## Active Icon Families
69

70
### FontAwesome 6
71

72
Modern FontAwesome with multi-style support and extensive icon collection.
73

74
```typescript { .api }
75
// Component with multi-style support
76
const FontAwesome6: React.FC<{
77
  name: string;
78
  iconStyle?: 'regular' | 'solid' | 'brand';
79
  size?: number;
80
  color?: string;
81
  style?: TextStyle;
82
  allowFontScaling?: boolean;
83
}> & {
84
  getImageSource(
85
    iconStyle: 'regular' | 'solid' | 'brand',
86
    name: string,
87
    size?: number,
88
    color?: string
89
  ): Promise<ImageSource>;
90
  getImageSourceSync(
91
    iconStyle: 'regular' | 'solid' | 'brand',
92
    name: string,
93
    size?: number,
94
    color?: string
95
  ): ImageSource;
96
};
97

98
// Type exports for icon names
99
type FontAwesome6IconName = string;
100
type FontAwesome6RegularIconName = string;
101
type FontAwesome6SolidIconName = string;
102
type FontAwesome6BrandIconName = string;
103
```
104

105
**Package**: `@react-native-vector-icons/fontawesome6`  
106
**Icons**: 2,060 free icons, 52,663 pro icons  
107
**Styles**: regular, solid, brand
108

109
```typescript
110
import FontAwesome6 from '@react-native-vector-icons/fontawesome6';
111

112
// Default style (regular)
113
<FontAwesome6 name="home" size={20} color="#4F8EF7" />
114

115
// Specific styles
116
<FontAwesome6 name="star" iconStyle="solid" size={24} color="gold" />
117
<FontAwesome6 name="github" iconStyle="brand" size={18} color="#333" />
118
```
119

120
### AntDesign
121

122
Ant Design icon set with comprehensive business and interface icons.
123

124
```typescript { .api }
125
const AntDesign: StandardIconComponent;
126
```
127

128
**Package**: `@react-native-vector-icons/ant-design`  
129
**Icons**: 449 icons  
130
**Styles**: single style
131

132
```typescript
133
import AntDesign from '@react-native-vector-icons/ant-design';
134

135
<AntDesign name="heart" size={20} color="red" />
136
<AntDesign name="setting" size={18} color="#666" />
137
```
138

139
### Feather
140

141
Clean, minimalist icon set perfect for modern interfaces.
142

143
```typescript { .api }
144
const Feather: StandardIconComponent;
145
```
146

147
**Package**: `@react-native-vector-icons/feather`  
148
**Icons**: 287 icons  
149
**Styles**: single style
150

151
```typescript
152
import Feather from '@react-native-vector-icons/feather';
153

154
<Feather name="camera" size={22} color="#4A90E2" />
155
<Feather name="bell" size={16} color="#FF6B6B" />
156
```
157

158
### Ionicons
159

160
Comprehensive icon set from the Ionic framework.
161

162
```typescript { .api }
163
const Ionicons: StandardIconComponent;
164
```
165

166
**Package**: `@react-native-vector-icons/ionicons`  
167
**Icons**: 1,357 icons  
168
**Styles**: single style
169

170
```typescript
171
import Ionicons from '@react-native-vector-icons/ionicons';
172

173
<Ionicons name="ios-home" size={24} color="#007AFF" />
174
<Ionicons name="md-star" size={20} color="#FFD700" />
175
```
176

177
### Material Design Icons
178

179
Extensive Material Design icon collection.
180

181
```typescript { .api }
182
const MaterialDesignIcons: StandardIconComponent;
183
```
184

185
**Package**: `@react-native-vector-icons/material-design-icons`  
186
**Icons**: 7,448 icons  
187
**Styles**: single style
188

189
```typescript
190
import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
191

192
<MaterialDesignIcons name="account" size={20} color="#2196F3" />
193
<MaterialDesignIcons name="heart-outline" size={18} color="#E91E63" />
194
```
195

196
### Material Icons (Google)
197

198
Google's original Material Icons set.
199

200
```typescript { .api }
201
const MaterialIcons: StandardIconComponent;
202
```
203

204
**Package**: `@react-native-vector-icons/material-icons`  
205
**Icons**: 2,234 icons  
206
**Styles**: single style
207

208
```typescript
209
import MaterialIcons from '@react-native-vector-icons/material-icons';
210

211
<MaterialIcons name="home" size={22} color="#4CAF50" />
212
<MaterialIcons name="star" size={16} color="#FF9800" />
213
```
214

215
### Octicons
216

217
GitHub's icon set for development-focused interfaces.
218

219
```typescript { .api }
220
const Octicons: StandardIconComponent;
221
```
222

223
**Package**: `@react-native-vector-icons/octicons`  
224
**Icons**: 333 icons  
225
**Styles**: single style
226

227
```typescript
228
import Octicons from '@react-native-vector-icons/octicons';
229

230
<Octicons name="mark-github" size={20} color="#24292E" />
231
<Octicons name="repo" size={18} color="#586069" />
232
```
233

234
### Lucide
235

236
Modern icon set with clean, consistent design.
237

238
```typescript { .api }
239
const Lucide: StandardIconComponent;
240
```
241

242
**Package**: `@react-native-vector-icons/lucide`  
243
**Icons**: 1,548 icons  
244
**Styles**: single style
245

246
```typescript
247
import Lucide from '@react-native-vector-icons/lucide';
248

249
<Lucide name="user" size={20} color="#6366F1" />
250
<Lucide name="search" size={16} color="#6B7280" />
251
```
252

253
### Foundation
254

255
Zurb Foundation's icon set for web and mobile interfaces.
256

257
```typescript { .api }
258
const Foundation: StandardIconComponent;
259
```
260

261
**Package**: `@react-native-vector-icons/foundation`  
262
**Icons**: 283 icons  
263
**Styles**: single style
264

265
```typescript
266
import Foundation from '@react-native-vector-icons/foundation';
267

268
<Foundation name="home" size={22} color="#008CBA" />
269
<Foundation name="mail" size={18} color="#5BC0DE" />
270
```
271

272
## Legacy Icon Families
273

274
These icon sets are no longer actively maintained upstream but remain available:
275

276
### FontAwesome 5
277

278
Previous generation FontAwesome with multi-style support.
279

280
```typescript { .api }
281
const FontAwesome5: React.FC<{
282
  name: string;
283
  iconStyle?: 'regular' | 'solid' | 'brand' | 'light';
284
  size?: number;
285
  color?: string;
286
}>;
287
```
288

289
**Package**: `@react-native-vector-icons/fontawesome5`  
290
**Icons**: 1,611 free icons, 7,869 pro icons
291

292
### FontAwesome (4.x)
293

294
Classic FontAwesome for legacy compatibility.
295

296
```typescript { .api }
297
const FontAwesome: StandardIconComponent;
298
```
299

300
**Package**: `@react-native-vector-icons/fontawesome`  
301
**Icons**: 785 icons
302

303
### Additional Legacy Families
304

305
- **Entypo**: 411 icons - `@react-native-vector-icons/entypo`
306
- **EvilIcons**: 70 icons - `@react-native-vector-icons/evil-icons`
307
- **Fontisto**: 617 icons - `@react-native-vector-icons/fontisto`
308
- **SimpleLineIcons**: 189 icons - `@react-native-vector-icons/simple-line-icons`
309
- **Zocial**: 100 social icons - `@react-native-vector-icons/zocial`
310

311
## Pro/Premium Families
312

313
### FontAwesome 6 Pro
314

315
Extended FontAwesome 6 with additional styles and icons.
316

317
```typescript { .api }
318
const FontAwesome6Pro: React.FC<{
319
  name: string;
320
  iconStyle?: 'thin' | 'light' | 'regular' | 'solid' | 'duotone' | 'sharp';
321
  size?: number;
322
  color?: string;
323
}>;
324
```
325

326
**Package**: `@react-native-vector-icons/fontawesome6-pro`  
327
**Icons**: 52,663 pro icons  
328
**Styles**: thin, light, regular, solid, duotone, sharp
329

330
### FontAwesome 5 Pro
331

332
Extended FontAwesome 5 with additional styles.
333

334
```typescript { .api }
335
const FontAwesome5Pro: React.FC<{
336
  name: string;
337
  iconStyle?: 'thin' | 'light' | 'regular' | 'solid' | 'duotone';
338
  size?: number;
339
  color?: string;
340
}>;
341
```
342

343
**Package**: `@react-native-vector-icons/fontawesome5-pro`  
344
**Icons**: 7,869 pro icons
345

346
## Custom Font Families
347

348
### Fontello
349

350
Support for custom Fontello-generated fonts.
351

352
```typescript { .api }
353
// Configured via font files in project
354
const FontelloIcon: StandardIconComponent;
355
```
356

357
**Package**: `@react-native-vector-icons/fontello`  
358
**Custom setup required**: User-provided font files
359

360
### IcoMoon
361

362
Support for custom IcoMoon-generated fonts.
363

364
```typescript { .api }
365
// Configured via font files in project  
366
const IcoMoonIcon: StandardIconComponent;
367
```
368

369
**Package**: `@react-native-vector-icons/icomoon`  
370
**Custom setup required**: User-provided font files
371

372
## Usage Patterns
373

374
### Consistent Styling
375

376
```typescript
377
// Create reusable icon components with consistent styling
378
const AppIcon = ({ name, ...props }) => (
379
  <FontAwesome6 name={name} size={20} color="#4A90E2" {...props} />
380
);
381

382
<AppIcon name="home" />
383
<AppIcon name="star" iconStyle="solid" color="gold" />
384
```
385

386
### Dynamic Icons
387

388
```typescript
389
// Use different families based on context
390
const getIconComponent = (family: string) => {
391
  switch (family) {
392
    case 'fa6': return FontAwesome6;
393
    case 'ant': return AntDesign;
394
    default: return Feather;
395
  }
396
};
397

398
const DynamicIcon = ({ family, ...props }) => {
399
  const IconComponent = getIconComponent(family);
400
  return <IconComponent {...props} />;
401
};
402
```