Learn about a React library called React Icons that provides thousands of free, Open Source icons that you can use in your next project.

If you’re working on a React app that needs icons, check out react-icons! It includes 9 popular Open Source icon libraries, including Font Awesome and Material Design.

To get started, install the module using npm:

$ npm install --save react-icons

React Icons exports icons as React components so it’s really intuitive:

import React, { Component } from 'react';
import { FaHeart } from "react-icons/fa";  // Font Awesome

class App extends Component {
  render() {
    return (
      <div>
        Hello World
        <FaHeart />
      </div>
    )
  }
}

All You Can Export!

Since react-icons includes 9 icon libraries, you’ll always find several variations of an icon. If you’re always on the never-ending quest to find the icon that’s “just right” this is for you! 👌

import { FaCheck } from "react-icons/fa";       // Font Awesome
import { IoMdCheckmark } from "react-icons/io"; // Ionicons
import { MdCheck } from "react-icons/md";       // Material Design
import { GoCheck } from "react-icons/go";       // Github Octicon

Customizing Styles

Icons will generally inherit CSS styles, but if you’d like more customization power you can pass props to your icons.

In the example below, color and size are unique to react-icon, but you can also pass the standard style prop:

<FaBeer
  color="#008f68"
  size="50px"
  style={{ margin: '0 5px' }}
/>
<IoIosPaperPlane
  color="#6DB65B"
  size="50px"
  style={{ margin: '0 5px' }}
/>
<MdCloud
  color="#4AAE9B"
  size="50px"
  style={{ margin: '0 5px' }}
/>

Lightweight & Bundler-friendly

Despite React Icons containing hundreds of icons, it’s doesn’t leave a big footprint in your bundle.

Webpack/Parcel optimizations

react-icons has a configuration in its package.json file to instruct bundlers to perform tree-shaking when building your app. This means only icons you explicitly import gets bundled!

SVG format

All of the icons in react-icons are SVG (scalable vector graphics). This means significantly smaller file sizes per icon than if they were raster image formats (like *.jpeg or *.png). SVG files are generally orders of magnitude smaller than other image formats, especially for things like icons!

Open Source Friendly

You can use react-icons in any non-commercial/commercial projects because of the permissive licenses of each of the libraries:

• Font Awesome  CC BY 4.0 License
• Ionicons  MIT
• Material Design icons  Apache License Version 2.0
• Typicons  CC BY-SA 3.0
• Github Octicons icons  MIT
• Feather  MIT

react-icons itself is released under the MIT license.