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 @rohmanhm/react-icons-all-files
# or
npm install @rohmanhm/react-icons-all-files --save

example usage

import { FaBeer } from "@rohmanhm/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.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.4.2 | 448 | | 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.

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.