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)

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 <h3> Lets go for a <FaBeer />? </h3>
    }
}

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.

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() {
    return <h3> Lets go for a <FaBeer />? </h3>
  }
}

Icons

Icon Library|License|Version|Count ---|---|---|--- Font Awesome|CC BY 4.0 License|5.15.4 7d3d774145ac38663f6d1effc6def0334b68ab7e|1612 Ionicons 4|MIT|4.6.3|696 Ionicons 5|MIT|5.5.0|1332 Material Design icons|Apache License Version 2.0|4.0.0-12-g63c5cb3060 63c5cb306073a9ecdfd3579f0f696746ab6305f6|3650 Typicons|CC BY-SA 3.0|2.1.2|336 Github Octicons icons|MIT|8.5.0|184 Feather|MIT|4.28.0|286 Game Icons|CC BY 3.0|12920d6565588f0512542a3cb0cdfd36a497f910|4040 Weather Icons|SIL OFL 1.1|2.0.12|219 Devicons|MIT|1.8.0|192 Ant Design Icons|MIT|4.2.1|789 Bootstrap Icons|MIT|1.5.0|1846 Remix Icon|Apache License Version 2.0|2.5.0|2271 Flat Color Icons|MIT|1.0.2|329 Grommet-Icons|Apache License Version 2.0|4.6.2|615 Heroicons|MIT|1.0.4|460 Simple Icons|CC0 1.0 Universal|5.16.0|2024 IcoMoon Free|CC BY 4.0 License|d006795ede82361e1bac1ee76f215cf1dc51e4ca|491 BoxIcons|CC BY 4.0 License|2.0.9|757 css.gg|MIT|2.0.0|704 VS Code Icons|CC BY 4.0|0.0.23|383 Tabler Icons|MIT|1.68.0|1978

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.

import { IconContext } from "react-icons";

<IconContext.Provider value={{ color: "blue", className: "global-class-name" }}>
  <div>
    <FaFolder />
  </div>
</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 |

Migrating from version 2 -> 3

Change import style

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 <h3> Lets go for a <FaBeer />? </h3>
    }
}

// NEW IMPORT STYLE
import { FaBeer } from 'react-icons/fa';

class Question extends React.Component {
    render() {
        return <h3> Lets go for a <FaBeer />? </h3>
    }
}

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 specify an inline style.

Global Inline Styling

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

Global className Styling

Component

<IconContext.Provider value={{ className: 'react-icons' }}>

CSS

.react-icons {
  vertical-align: middle;
}

TypeScript native support

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

Yarn

yarn remove @types/react-icons

NPM

npm remove @types/react-icons

Contributing

Development

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

Preview

The preview site is the react-icons website, built in NextJS.

cd packages/react-icons
yarn build

cd ../preview
yarn start

Demo

The demo is a Create React App boilerplate with react-icons added as a dependency for easy testing.

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.