0
# React Icons
1

2
React Icons provides a comprehensive collection of popular icon libraries as React SVG components, enabling developers to easily include icons from Font Awesome, Material Design, Ionicons, Feather, and many other icon sets in their React applications. It offers tree-shaking support through ES6 imports, allowing developers to import only the specific icons they need, significantly reducing bundle size.
3

4
## Package Information
5

6
- **Package Name**: react-icons
7
- **Package Type**: npm
8
- **Language**: TypeScript/JavaScript
9
- **Installation**: `npm install react-icons`
10
- **Version**: 5.5.0
11
- **React Compatibility**: Requires React 16.3+ (for Context API support)
12

13
## Core Imports
14

15
```typescript
16
import { IconContext } from "react-icons";
17
import { FaBeer } from "react-icons/fa";
18
import { MdAccessibility } from "react-icons/md";
19
import { AiFillFolder } from "react-icons/ai";
20
```
21

22
For CommonJS:
23

24
```javascript
25
const { IconContext } = require("react-icons");
26
const { FaBeer } = require("react-icons/fa");
27
```
28

29
## Basic Usage
30

31
```typescript
32
import React from "react";
33
import { IconContext } from "react-icons";
34
import { FaBeer } from "react-icons/fa";
35
import { MdAccessibility } from "react-icons/md";
36

37
function MyComponent() {
38
  return (
39
    <div>
40
      {/* Basic icon usage */}
41
      <FaBeer color="red" size="24px" title="Beer icon" />
42
      
43
      {/* Using context for global configuration */}
44
      <IconContext.Provider value={{ color: "blue", size: "1.5em" }}>
45
        <MdAccessibility />
46
        <FaBeer />
47
      </IconContext.Provider>
48
    </div>
49
  );
50
}
51
```
52

53
## Architecture
54

55
React Icons is built around several key components:
56

57
- **Core Components**: `IconBase`, `IconContext`, and utility functions for rendering SVG icons
58
- **Icon Libraries**: 30+ individual icon libraries (fa, md, ai, etc.) with thousands of components each
59
- **Tree-shaking Support**: ES6 imports allow bundlers to include only used icons
60
- **Type System**: Full TypeScript integration with proper type definitions
61
- **Context System**: React Context API for global icon configuration
62

63
## Capabilities
64

65
### Core Components
66

67
Core infrastructure components for rendering and configuring SVG icons. These components provide the foundation for all icon rendering.
68

69
```typescript { .api }
70
interface IconContext {
71
  color?: string;
72
  size?: string;
73
  className?: string;
74
  style?: React.CSSProperties;
75
  attr?: React.SVGAttributes<SVGElement>;
76
}
77

78
const IconContext: React.Context<IconContext>;
79

80
interface IconBaseProps extends React.SVGAttributes<SVGElement> {
81
  children?: React.ReactNode;
82
  size?: string | number;
83
  color?: string;
84
  title?: string;
85
}
86

87
function IconBase(props: IconBaseProps & { attr?: Record<string, string> }): JSX.Element;
88
```
89

90
[Core Components](./core-components.md)
91

92
### Icon Libraries
93

94
Access to 40,000+ icons from 30+ different icon libraries including Font Awesome, Material Design, Bootstrap, Feather, and many more. Each library provides hundreds to thousands of individual icon components.
95

96
```typescript { .api }
97
type IconType = (props: IconBaseProps) => React.ReactNode;
98

99
// Example icon imports from various libraries
100
import { FaBeer, FaFolder, FaRegClipboard } from "react-icons/fa";
101
import { MdAccessibility, MdHome, MdOutlineHome } from "react-icons/md";
102
import { AiFillFolder, AiOutlineFolder } from "react-icons/ai";
103
import { BsFolder, BsFillFolder } from "react-icons/bs";
104
```
105

106
[Icon Libraries](./icon-libraries.md)
107

108
### Context Configuration
109

110
Global configuration system using React Context API for setting default icon properties across your application.
111

112
```typescript { .api }
113
const DefaultContext: IconContext;
114

115
interface IconContext {
116
  color?: string;
117
  size?: string;
118
  className?: string;
119
  style?: React.CSSProperties;
120
  attr?: React.SVGAttributes<SVGElement>;
121
}
122
```
123

124
[Context Configuration](./context-configuration.md)
125

126
### Icons Manifest
127

128
Metadata about all available icon libraries, providing information about each library including name, project URL, and license details.
129

130
```typescript { .api }
131
interface IconManifestType {
132
  id: string;
133
  name: string;
134
  projectUrl: string;
135
  license: string;
136
  licenseUrl: string;
137
}
138

139
const IconsManifest: IconManifestType[];
140
```
141

142
**Usage Examples:**
143

144
```typescript
145
import { IconsManifest } from "react-icons";
146
// Alternative import path:
147
// import { IconsManifest } from "react-icons/lib";
148

149
// Get information about all available libraries
150
console.log(IconsManifest);
151
// Output: Array of library metadata including fa, md, ai, bs, etc.
152

153
// Find specific library information
154
const faLibrary = IconsManifest.find(lib => lib.id === 'fa');
155
console.log(faLibrary.name); // "Font Awesome 5"
156
console.log(faLibrary.license); // "CC BY 4.0 License"
157
```
158

159
## Types
160

161
```typescript { .api }
162
interface IconTree {
163
  tag: string;
164
  attr: { [key: string]: string };
165
  child: IconTree[];
166
}
167
```