SVG React icons of popular icon packs using ES6 imports
npm install @react-icons/all-files[![npm][npm-image]][npm-url]
[npm-image]: https://img.shields.io/npm/v/react-icons.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/react-icons
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.
``bash`
yarn add react-iconsor
npm install react-icons --save
example usage
`jsx
import { FaBeer } from 'react-icons/fa';
class Question extends React.Component {
render() {
return
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';Installation (for meteorjs, gatsbyjs, etc)
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.
`bash
yarn add @react-icons/all-files
or
npm install @react-icons/all-files --save
`example usage
`jsx
import { FaBeer } from "@react-icons/all-files/fa/FaBeer";
class Question extends React.Component {
render() {
return Lets go for a ?
}
}
`Icons
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.3.5|352
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.
Configuration
You can configure react-icons props using React Context API.
_Requires React 16.3 or higher._
`jsx
import { IconContext } from "react-icons";
`| 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 |Migrating from version 2 -> 3
$3
Import path has changed. You need to rewrite from the old style.
`jsx
// OLD IMPORT STYLE
import FaBeer from 'react-icons/lib/fa/beer';class Question extends React.Component {
render() {
return
Lets go for a ?
}
}
``jsx
// 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.
$3
From version 3,
vertical-align: middle is not automatically given. Please use IconContext to specify className or specify an inline style.#### Global Inline Styling
`tsx
`#### Global
className StylingComponent
`tsx
`CSS
`css
.react-icons {
vertical-align: middle;
}
`$3
Dependencies on
@types/react-icons can be deleted.#### Yarn
`bash
yarn remove @types/react-icons
`#### NPM
`bash
npm remove @types/react-icons
`Contributing
$3
`bash
yarn
yarn submodule # fetch icon sources
cd packages/react-icons
yarn build
`$3
The preview site is the react-icons website, built in NextJS.`bash
cd packages/react-icons
yarn buildcd ../preview
yarn start
`$3
The demo is a Create React App boilerplate with react-icons added as a dependency for easy testing.`bash
cd packages/react-icons
yarn buildcd ../demo
yarn start
`Why React SVG components instead of fonts?
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
- Icons are taken from the other projects so please check each project licences accordingly.