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

1npm install react-icons --save

Usage

1import { FaBeer } from 'react-icons/fa';
2
3class Question extends React.Component {
4    render() {
5        return <h3> Lets go for a <FaBeer />? </h3>
6    }
7}

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.

1import { IconContext } from "react-icons";
2
3<IconContext.Provider value={{ color: "blue", className: "global-class-name" }}>
4  <div>
5    <FaFolder />
6  </div>
7</IconContext.Provider>

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

Change import style

Import path has changed. You need to rewrite from the old style.

1// OLD IMPORT STYLE
2import FaBeer from 'react-icons/lib/fa/beer';
3
4class Question extends React.Component {
5    render() {
6        return <h3> Lets go for a <FaBeer />? </h3>
7    }
8}

1// NEW IMPORT STYLE
2import { FaBeer } from 'react-icons/fa';
3
4class Question extends React.Component {
5    render() {
6        return <h3> Lets go for a <FaBeer />? </h3>
7    }
8}

Ending up with a large JS bundle? Check out this issue.

Adjustment CSS

From version 3, vertical-align: middle is not automatically given. Please use IconContext to specify className or style.

example for global styling

1<IconContext.Provider value={{ style: { verticalAlign: 'middle' } }}>

example for give global className

1// app.tsx
2<IconContext.Provider value={{ className: 'react-icons' }}>
3
4// app.css
5.react-icons {
6  vertical-align: middle;
7}

TypeScript native support

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

1npm remove @types/react-icons

Contribute

development

1yarn
2yarn submodule  # fetch icon sources
3cd packages/react-icons
4yarn build

scripts for run demo

1cd packages/react-icons
2yarn build
3cd ../demo
4yarn start

run preview site

1cd packages/react-icons
2yarn build
3cd ../preview
4yarn start

Tips

SVG

Svg is supported by all major browsers.

Why ES6 import and not fonts

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

• react-svg-morph

Licence

MIT

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