<img src="https://rawgit.com/gorangajic/react-icons/master/react-icons.svg" width="120" alt="React Icons">

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

function Question() {
  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.

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

function Question() {
  return (
    <h3>
      {" "}
      Lets go for a <FaBeer />?{" "}
    </h3>
  );
}

Icons

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

<IconContext.Provider value={{ color: "blue", className: "global-class-name" }}>
  <div>
    <FaFolder />
  </div>
</IconContext.Provider>;

Migrating from version 2 -> 3

Change import style

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

jsx
// OLD IMPORT STYLE
import FaBeer from "react-icons/lib/fa/beer";

function Question() {
  return (
    <h3>
      {" "}
      Lets go for a <FaBeer />?{" "}
    </h3>
  );
}

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

function Question() {
  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

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

Global className Styling

Component

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

CSS

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

TypeScript native support

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

Yarn

bash
yarn remove @types/react-icons

NPM

bash
npm remove @types/react-icons

Contributing

Development

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

Preview

The preview site is the [react-icons](https://react-icons.github.io/react-icons) website, built in NextJS.

bash
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.

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.