0
# Icon Libraries
1

2
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 with consistent API patterns.
3

4
## Capabilities
5

6
### Available Icon Libraries
7

8
React Icons includes the following icon libraries:
9

10
```typescript { .api }
11
// Font Awesome Icons
12
import { FaBeer, FaFolder, FaRegClipboard } from "react-icons/fa";     // 1,612 icons
13
import { Fa500Px, FaAccessibleIcon } from "react-icons/fa6";           // 2,045 icons
14

15
// Material Design Icons  
16
import { MdAccessibility, MdHome, MdOutlineHome } from "react-icons/md"; // 4,341 icons
17

18
// Popular Icon Sets
19
import { AiFillFolder, AiOutlineFolder } from "react-icons/ai";         // 831 icons (Ant Design)
20
import { BsFolder, BsFillFolder } from "react-icons/bs";               // 2,716 icons (Bootstrap)
21
import { BiFolder, BiFolderOpen } from "react-icons/bi";               // 1,634 icons (BoxIcons)
22
import { CgFolder, CgFolderAdd } from "react-icons/cg";                // 704 icons (css.gg)
23
import { CiFolder, CiFolderOpen } from "react-icons/ci";               // 288 icons (Circum Icons)
24
import { DiFolder, DiGit } from "react-icons/di";                      // 192 icons (Devicons)
25
import { FcFolder, FcOpenedFolder } from "react-icons/fc";             // 329 icons (Flat Color Icons)
26
import { FiFolder, FiFolderPlus } from "react-icons/fi";               // 287 icons (Feather)
27
import { GiFolder, GiFolderOpen } from "react-icons/gi";               // 4,040 icons (Game Icons)
28
import { GoFolder, GoFileDirectory } from "react-icons/go";            // 264 icons (GitHub Octicons)
29
import { GrFolder, GrFolderOpen } from "react-icons/gr";               // 635 icons (Grommet Icons)
30
import { HiFolder, HiFolderOpen } from "react-icons/hi";               // 460 icons (Heroicons)
31
import { HiOutlineFolder, HiSolidFolder } from "react-icons/hi2";      // 888 icons (Heroicons 2)
32
import { ImFolder, ImFolderOpen } from "react-icons/im";               // 491 icons (IcoMoon Free)
33
import { IoFolder, IoFolderOpen } from "react-icons/io";               // 696 icons (Ionicons 4)
34
import { IoFolderOutline, IoFolder } from "react-icons/io5";           // 1,332 icons (Ionicons 5)
35
import { LiaFolder, LiaFolderOpenSolid } from "react-icons/lia";       // ~800 icons (Line Awesome)
36
import { LuFolder, LuFolderOpen } from "react-icons/lu";               // 1,215 icons (Lucide)
37
import { PiFolder, PiFolderOpen } from "react-icons/pi";               // 9,072 icons (Phosphor Icons)
38
import { RiFolder2Line, RiFolderOpenLine } from "react-icons/ri";      // 2,860 icons (Remix Icon)
39
import { RxFolder, RxOpenInNewWindow } from "react-icons/rx";          // 318 icons (Radix Icons)
40
import { SiFolder, SiGithub } from "react-icons/si";                   // 3,209 icons (Simple Icons)
41
import { SlFolder, SlFolderAlt } from "react-icons/sl";                // 189 icons (Simple Line Icons)
42
import { TbFolder, TbFolderOpen } from "react-icons/tb";               // 5,237 icons (Tabler Icons)
43
import { TfiFolder, TfiFolderOpen } from "react-icons/tfi";            // 352 icons (Themify Icons)
44
import { TiFolder, TiFolderOpen } from "react-icons/ti";               // 336 icons (Typicons)
45
import { VscFolder, VscFolderOpened } from "react-icons/vsc";          // 461 icons (VS Code Icons)
46
import { WiCloud, WiDaySunny } from "react-icons/wi";                  // 219 icons (Weather Icons)
47
```
48

49
### Icon Component Pattern
50

51
All icon components follow the same pattern and accept identical props:
52

53
```typescript { .api }
54
/**
55
 * Universal icon component interface
56
 * All icon components implement this pattern
57
 */
58
type IconType = (props: IconBaseProps) => React.ReactNode;
59

60
interface IconBaseProps extends React.SVGAttributes<SVGElement> {
61
  /** Child React elements (rarely used with icon components) */
62
  children?: React.ReactNode;
63
  /** Icon size override (e.g., "24px", "1.5em", 24) */
64
  size?: string | number;
65
  /** Icon color override (e.g., "red", "#ff0000", "currentColor") */
66
  color?: string;
67
  /** Accessibility title for screen readers */
68
  title?: string;
69
}
70
```
71

72
**Usage Examples:**
73

74
```typescript
75
import { FaBeer } from "react-icons/fa";
76
import { MdAccessibility } from "react-icons/md";
77
import { AiFillHeart } from "react-icons/ai";
78

79
// Basic usage
80
<FaBeer />
81
<MdAccessibility />
82
<AiFillHeart />
83

84
// With custom properties
85
<FaBeer size="32px" color="orange" title="Beer icon" />
86
<MdAccessibility size={24} color="#0066cc" />
87
<AiFillHeart size="1.5em" style={{ marginRight: 8 }} />
88

89
// With SVG attributes
90
<FaBeer 
91
  size="48px" 
92
  color="gold"
93
  className="beer-icon"
94
  onClick={() => console.log('Beer clicked!')}
95
/>
96
```
97

98
### Library-Specific Import Patterns
99

100
Each icon library can be imported from its dedicated path:
101

102
```typescript { .api }
103
// Font Awesome 5
104
import { FaBeer, FaFolder, FaHome } from "react-icons/fa";
105

106
// Font Awesome 6
107
import { Fa500Px, FaAccessibleIcon, FaAddressBook } from "react-icons/fa6";
108

109
// Material Design
110
import { MdAccessibility, MdHome, MdSettings } from "react-icons/md";
111

112
// Ant Design Icons
113
import { AiFillFolder, AiOutlineFolder, AiTwotoneLock } from "react-icons/ai";
114

115
// Bootstrap Icons
116
import { BsFolder, BsFillFolder, BsHouse } from "react-icons/bs";
117

118
// And so on for all 30+ libraries...
119
```
120

121
### Alternative Import Methods
122

123
For ultra-specific imports (useful for very large applications), React Icons provides a separate package:
124

125
```typescript
126
// Individual file imports using the @react-icons/all-files package
127
// Note: This is a separate npm package that must be installed separately
128
import FaBeer from "@react-icons/all-files/fa/FaBeer";
129
import MdHome from "@react-icons/all-files/md/MdHome";
130

131
// Installation: npm install @react-icons/all-files
132
```
133

134
### Tree Shaking
135

136
React Icons supports automatic tree-shaking with modern bundlers:
137

138
```typescript
139
// Only FaBeer and MdHome will be included in your bundle
140
import { FaBeer } from "react-icons/fa";
141
import { MdHome } from "react-icons/md";
142

143
// This imports the entire fa library (not recommended)
144
import * as fa from "react-icons/fa";
145
```
146

147
## Icon Library Reference
148

149
### Font Awesome Family
150
- **fa**: Font Awesome 5 (1,612 icons) - Classic icons with solid, regular, and brand variants
151
- **fa6**: Font Awesome 6 (2,045 icons) - Latest Font Awesome with new icons and styles
152

153
### Google Material Design
154
- **md**: Material Design Icons (4,341 icons) - Google's comprehensive icon set
155

156
### Popular Design Systems
157
- **ai**: Ant Design Icons (831 icons) - Enterprise-focused icons
158
- **bs**: Bootstrap Icons (2,716 icons) - Simple, consistent icons
159
- **hi**: Heroicons (460 icons) - Beautiful hand-crafted SVG icons
160
- **hi2**: Heroicons 2 (888 icons) - Updated Heroicons collection
161

162
### Developer-Focused Libraries
163
- **di**: Devicons (192 icons) - Programming language and tool icons
164
- **go**: GitHub Octicons (264 icons) - GitHub's icon set
165
- **vsc**: VS Code Icons (461 icons) - Visual Studio Code interface icons
166
- **si**: Simple Icons (3,209 icons) - Brand icons for popular services
167

168
### Specialized Collections  
169
- **gi**: Game Icons (4,040 icons) - RPG and gaming-themed icons
170
- **wi**: Weather Icons (219 icons) - Weather condition icons
171
- **fc**: Flat Color Icons (329 icons) - Colorful flat design icons
172

173
## Advanced Usage
174

175
### Dynamic Icon Selection
176

177
```typescript
178
import * as Icons from "react-icons/fa";
179

180
function DynamicIcon({ iconName, ...props }) {
181
  const Icon = Icons[iconName];
182
  return Icon ? <Icon {...props} /> : null;
183
}
184

185
// Usage
186
<DynamicIcon iconName="FaBeer" size="24px" color="gold" />
187
```
188

189
### Icon Mapping
190

191
```typescript
192
const iconMap = {
193
  home: MdHome,
194
  folder: FaFolder,
195
  settings: BsGear,
196
  user: AiOutlineUser
197
};
198

199
function MappedIcon({ type, ...props }) {
200
  const Icon = iconMap[type];
201
  return Icon ? <Icon {...props} /> : null;
202
}
203
```