// Tutorial //

React Icons Gets You Access to Hundreds of Open Source Icons

Published on July 5, 2019
Default avatar
By William Le
Developer and author at DigitalOcean.
React Icons Gets You Access to Hundreds of Open Source Icons

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

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.

Note: View the collection of icons included in react-icons on their demo website


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!