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 easly with ``react-icons`, which utilizes ES6 imports that allows you to include only the icons that your project is using.

Installation

`bash
npm install react-icons --save
`

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';

Icons

- Font Awesome
License: CC BY 4.0 License
- Ionicons
License: MIT
- Material Design icons
License: Apache License Version 2.0
- Typicons
License: CC BY-SA 3.0
- Github Octicons icons
License: MIT
- Feather
License: MIT
- Game Icons
License: CC BY 3.0
- Weather Icons
License: SIL OFL 1.1

You can add more icons by submitting pull requests or creating issues.

Configuration

You can configure react-icons props using React context API.

requirement React 16.3 or higher.

`jsx
import { IconContext } from "react-icons";






`

key|default|memo
---|---|---
color|undefined(inherit)|
size|1em|
className|undefined|
style|undefined|can overwrite size and color
attr|undefined|overwritten by other attributes

Migrate 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 style.

example for global styling

`tsx

`

example for give global className

`tsx
// app.tsx


// app.css
.react-icons {
vertical-align: middle;
}
`

$3

Dependencies on @types/react-icons can be deleted.

`bash
npm remove @types/react-icons
`

Contribute

development

`bash
yarn
yarn submodule # fetch icon sources
cd packages/react-icons
yarn build
`

scripts for run demo

`bash
cd packages/react-icons
yarn build
cd ../demo
yarn start
`

run preview site

`bash
cd packages/react-icons
yarn build
cd ../preview
yarn start
`

Tips

$3

Svg is supported by all major browsers.

$3

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.

$3

- react-svg-morph

Licence

MIT

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