React Icons

[![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.

Installation (for standard modern project)

``bash
yarn add react-icons


or


npm install react-icons --save
`

example usage

`jsx
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-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 Styling

Component

`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 build

cd ../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 build

cd ../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.

Related Projects

- react-svg-morph

Licence

MIT

- Icons are taken from the other projects so please check each project licences accordingly.