svg react icons of popular icon packs
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-icons # or npm install react-icons --save
example usage
import { FaBeer } from 'react-icons/fa';class Question extends React.Component { render() { return
Lets go for a ?
} }
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-iconsyou import from.
For example, to use an icon from Material Design, your import would be:
import { ICON_NAME } from 'react-icons/md';
If your project grows in size, this option is available. This method has the trade-off that it takes a long time to install the package.
yarn add @react-icons/all-files # or npm install @react-icons/all-files --save
example usage
import { FaBeer } from "@react-icons/all-files/fa/FaBeer"; class Question extends React.Component { render() { returnLets go for a ?
} }
Icon Library |
License | Version | Count |
---|---|---|---|
Font Awesome | CC BY 4.0 License | 5.12.1 | |
0d1f27efb836eb2ab994ba37221849ed64a73e5c | 1560 | ||
Ionicons 4 | MIT | 4.6.3 | 696 |
Ionicons 5 | MIT | 5.2.3 | 1300 |
Material Design icons | Apache License Version 2.0 | 3.0.1 | 960 |
Typicons | CC BY-SA 3.0 | 2.0.9 | 336 |
Github Octicons icons | MIT | 8.5.0 | 184 |
Feather | MIT | 4.28.0 | 286 |
Game Icons | CC BY 3.0 | e510027a83a79e44673022a25e93b306a9165a21 | 3786 |
Weather Icons | SIL OFL 1.1 | 2.0.10 | 219 |
Devicons | MIT | 1.8.0 | 192 |
Ant Design Icons | MIT | 4.0.0 | 788 |
Bootstrap Icons | MIT | 1.0.0-alpha3 | 668 |
Remix Icon | Apache License Version 2.0 | 2.5.0 | 2172 |
Flat Color Icons | MIT | 1.0.2 | 329 |
Grommet-Icons | Apache License Version 2.0 | 4.4.0 | 562 |
Heroicons | MIT | 0.4.2 | 448 |
Simple Icons | CC0 1.0 Universal | 2.13.0 | 1316 |
IcoMoon Free | CC BY 4.0 License | d006795ede82361e1bac1ee76f215cf1dc51e4ca | 491 |
BoxIcons | CC BY 4.0 License | 2.0.5 | 738 |
css.gg | MIT | 2.0.0 | 704 |
VS Code Icons | CC BY 4.0 | 0.0.1 | 319 |
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: classname:>
</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
Lets go for a ?
} }
// NEW IMPORT STYLE import { FaBeer } from 'react-icons/fa';class Question extends React.Component { render() { return
Lets go for a ?
} }
Ending up with a large JS bundle? Check out this issue.
From version 3,
vertical-align: middleis not automatically given. Please use IconContext to specify className or specify an inline style.
classNameStyling
Component
CSS
.react-icons { vertical-align: middle; }
Dependencies on
@types/react-iconscan be deleted.
yarn remove @types/react-icons
npm remove @types/react-icons
yarn yarn submodule # fetch icon sources cd packages/react-icons yarn build
react-iconswebsite, built in NextJS.
cd packages/react-icons yarn buildcd ../preview yarn start
The demo is a Create React App boilerplate with
react-iconsadded as a dependency for easy testing.
cd packages/react-icons yarn buildcd ../demo yarn start
SVG 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