0
# React Native Vector Icons
1

2
React Native Vector Icons is a comprehensive library providing customizable vector icons for React Native applications. It offers over 20 icon families with more than 20,000 icons, supporting all major platforms (iOS, Android, Web, Windows, macOS) with dynamic loading capabilities.
3

4
## Package Information
5

6
- **Package Name**: react-native-vector-icons
7
- **Package Type**: npm (monorepo with individual packages)
8
- **Language**: TypeScript
9
- **Installation**: Install individual icon family packages: `npm install @react-native-vector-icons/fontawesome6 @react-native-vector-icons/common`
10

11
## Core Imports
12

13
Core functionality from the common package:
14

15
```typescript
16
import { createIconSet, DEFAULT_ICON_SIZE, DEFAULT_ICON_COLOR } from "@react-native-vector-icons/common";
17
```
18

19
Individual icon family packages:
20

21
```typescript
22
import FontAwesome6 from "@react-native-vector-icons/fontawesome6";
23
import AntDesign from "@react-native-vector-icons/ant-design";
24
import Feather from "@react-native-vector-icons/feather";
25
```
26

27
For CommonJS:
28

29
```javascript
30
const { createIconSet } = require("@react-native-vector-icons/common");
31
const FontAwesome6 = require("@react-native-vector-icons/fontawesome6");
32
```
33

34
## Basic Usage
35

36
Using pre-built icon components:
37

38
```typescript
39
import React from 'react';
40
import { View } from 'react-native';
41
import FontAwesome6 from '@react-native-vector-icons/fontawesome6';
42
import AntDesign from '@react-native-vector-icons/ant-design';
43

44
export default function MyComponent() {
45
  return (
46
    <View>
47
      <FontAwesome6 name="home" size={20} color="#4F8EF7" />
48
      <FontAwesome6 name="star" size={24} color="gold" iconStyle="solid" />
49
      <AntDesign name="heart" size={18} color="red" />
50
    </View>
51
  );
52
}
53
```
54

55
Creating custom icon sets:
56

57
```typescript
58
import { createIconSet } from '@react-native-vector-icons/common';
59

60
const customGlyphMap = {
61
  'icon-name': 0x1234,
62
  'another-icon': 0x5678,
63
};
64

65
const CustomIcon = createIconSet(
66
  customGlyphMap,
67
  'CustomFontName',
68
  'CustomFont.ttf'
69
);
70

71
// Usage
72
<CustomIcon name="icon-name" size={20} color="#333" />
73
```
74

75
## Architecture
76

77
React Native Vector Icons is built around several key components:
78

79
- **Common Package**: Core functionality for creating icon components and managing fonts
80
- **Icon Family Packages**: Pre-built components for specific icon sets (FontAwesome, Material, etc.)
81
- **Native Module**: Optional `get-image` package for generating PNG images from font glyphs
82
- **Dynamic Loading**: Support for runtime font loading in Expo environments
83
- **Multi-Style Support**: Some icon families support multiple font weights/styles (regular, solid, brand)
84

85
## Capabilities
86

87
### Core Icon Creation
88

89
The foundational API for creating icon components from font files and glyph mappings.
90

91
```typescript { .api }
92
function createIconSet<GM extends Record<string, number>>(
93
  glyphMap: GM,
94
  postScriptName: string,
95
  fontFileName: string,
96
  fontStyle?: TextStyle
97
): IconComponent<GM>;
98

99
function createIconSet<GM extends Record<string, number>>(
100
  glyphMap: GM,
101
  options: CreateIconSetOptions
102
): IconComponent<GM>;
103
```
104

105
[Core Icon Creation](./core-creation.md)
106

107
### Dynamic Font Loading
108

109
Runtime font loading capabilities for Expo environments with automatic fallback handling.
110

111
```typescript { .api }
112
function isDynamicLoadingEnabled(): boolean;
113
function isDynamicLoadingSupported(): boolean;
114
function setDynamicLoadingEnabled(value: boolean): boolean;
115
function setDynamicLoadingErrorCallback(callback: ErrorCallback): void;
116
```
117

118
[Dynamic Font Loading](./dynamic-loading.md)
119

120
### Pre-built Icon Families
121

122
Ready-to-use icon components for popular icon sets including FontAwesome, Material Design, Ant Design, and more.
123

124
```typescript { .api }
125
interface IconProps {
126
  name: string;
127
  size?: number;
128
  color?: string;
129
  style?: TextStyle;
130
}
131

132
// Standard icon component interface
133
type IconComponent<T> = React.FC<IconProps & { name: T }> & {
134
  getImageSource(name: T, size?: number, color?: string): Promise<ImageSource>;
135
  getImageSourceSync(name: T, size?: number, color?: string): ImageSource;
136
};
137
```
138

139
[Icon Families](./icon-families.md)
140

141
### Image Generation
142

143
Convert font glyphs to PNG images for use in non-React Native contexts.
144

145
```typescript { .api }
146
function getImageForFont(
147
  fontFamilyName: string,
148
  glyph: string,
149
  fontSize: number,
150
  color: number
151
): Promise<string>;
152

153
function getImageForFontSync(
154
  fontFamilyName: string,
155
  glyph: string,
156
  fontSize: number,
157
  color: number
158
): string;
159
```
160

161
[Image Generation](./image-generation.md)
162

163
## Constants and Types
164

165
```typescript { .api }
166
const DEFAULT_ICON_SIZE: number; // 12
167
const DEFAULT_ICON_COLOR: string; // 'black'
168

169
interface CreateIconSetOptions {
170
  postScriptName: string;
171
  fontFileName: string;
172
  fontSource?: FontSource;
173
  fontStyle?: TextStyle;
174
}
175

176
interface IconProps<T> {
177
  name: T;
178
  size?: number;
179
  color?: string;
180
  style?: TextStyle;
181
  innerRef?: React.Ref<Text>;
182
  allowFontScaling?: boolean;
183
}
184

185
type ErrorCallback = (args: {
186
  error: Error;
187
  fontFamily: string;
188
  fontSource: FontSource;
189
}) => void;
190

191
type FontSource = any; // Platform-specific asset source (require() result)
192

193
type ImageSource = {
194
  uri: string;
195
  scale: number;
196
};
197
```