Tutorial

React Icons Gets You Access to Hundreds of Open Source Icons

Published on July 5, 2019
Default avatar

By William Le

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

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
William Le

author

Still looking for an answer?

Ask a questionSearch for more help

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!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel