Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.
yarn add react-iconsnpm install react-icons --saveimport { FaBeer } from 'react-icons/fa';
class Question extends React.Component {
render() {
return <h3> Lets go for a <FaBeer />? </h3>
}
}View the documentation for further usage examples and how to use icons from other packages. NOTE: each Icon package has it's own subfolder under react-icons you import from.
For example, to use an icon from Material Design, your import would be: import { ICON_NAME } from 'react-icons/md';
| Icon Library | License | Version |
|---|---|---|
| Font Awesome | CC BY 4.0 License | 5.12.1 |
| Ionicons | MIT | 4.5.6 |
| Ionicons 5 | MIT | 5.1.2 |
| Material Design icons | Apache License Version 2.0 | 3.0.1 |
| Typicons | CC BY-SA 3.0 | 2.0.9 |
| Github Octicons icons | MIT | 8.5.0 |
| Feather | MIT | 4.21.0 |
| Game Icons | CC BY 3.0 | a53463d41d4f055fa71097ae74da4c508c9bb09d |
| Weather Icons | SIL OFL 1.1 | 2.0.10 |
| Devicons | MIT | 1.8.0 |
| Ant Design Icons | MIT | 4.0.0 |
| Bootstrap Icons | MIT | 1.0.0-alpha3 |
| Remix Icon | Apache License Version 2.0 | 2.3.0 |
| Flat Color Icons | MIT | 1.0.2 |
| Grommet-Icons | Apache License Version 2.0 | 4.4.0 |
| Simple Icons | CC0 1.0 Universal | 2.13.0 |
| IcoMoon Free | CC BY 4.0 License | 1.0.0 |
| BoxIcons | CC BY 4.0 License | 2.0.5 |
| css.gg | MIT | 2.0.0 |
| VS Code Icons | CC BY 4.0 | 0.0.1 |
You can add more icons by submitting pull requests or creating issues.
You can configure react-icons props using React Context API.
Requires React 16.3 or higher.
import { IconContext } from "react-icons";
<IconContext.Provider value={{ color: "blue", className: "global-class-name" }}>
<div>
<FaFolder />
</div>
</IconContext.Provider>| Key | Default | Notes |
|---|---|---|
color |
undefined (inherit) |
|
size |
1em |
|
className |
undefined |
|
style |
undefined |
Can overwrite size and color |
attr |
undefined |
Overwritten by other attributes |
title |
undefined |
Icon description for accessibility |
Import path has changed. You need to rewrite from the old style.
// OLD IMPORT STYLE
import FaBeer from 'react-icons/lib/fa/beer';
class Question extends React.Component {
render() {
return <h3> Lets go for a <FaBeer />? </h3>
}
}// NEW IMPORT STYLE
import { FaBeer } from 'react-icons/fa';
class Question extends React.Component {
render() {
return <h3> Lets go for a <FaBeer />? </h3>
}
}Ending up with a large JS bundle? Check out this issue.
From version 3, vertical-align: middle is not automatically given. Please use IconContext to specify className or specify an inline style.
<IconContext.Provider value={{ style: { verticalAlign: 'middle' } }}>Component
<IconContext.Provider value={{ className: 'react-icons' }}>CSS
.react-icons {
vertical-align: middle;
}Dependencies on @types/react-icons can be deleted.
yarn remove @types/react-iconsnpm remove @types/react-iconsyarn
yarn submodule # fetch icon sources
cd packages/react-icons
yarn buildThe preview site is the react-icons website, built in NextJS.
cd packages/react-icons
yarn build
cd ../preview
yarn startThe demo is a Create React App boilerplate with react-icons added as a dependency for easy testing.
cd packages/react-icons
yarn build
cd ../demo
yarn startSVG is supported by all major browsers. With react-icons, you can serve only the needed icons instead of one big font file to the users, helping you to recognize which icons are used in your project.
MIT
- Icons are taken from the other projects so please check each project licences accordingly.