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) npm install react-icons --save Usage

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

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. Suitable for MeteorJS, Gatsbyjs etc. npm install @react-icons/all-files --save

Usage §

import { FaBeer } from "@react-icons/all-files/fa/FaBeer";
class Question extends React.Component {
  render() {
    return <h3> Lets go for a <FaBeer />? </h3>
  }
}

The icons can be found here

Customizing the icons configuration §

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

// 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 §

<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