Table of Contents

URL: https://www.progressiverobot.com/react-react-icons-open-source-icons/

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 (

 &lt;div&gt;

 Hello World

 &lt;FaHeart /&gt;

 &lt;/div&gt;

 )

 }

}

All You Can Export!

icons illustration for: 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:

				
					
&lt;FaBeer

 color="#008f68"

 size="50px"

 style={{ margin: '0 5px' }}

/&gt;

&lt;IoIosPaperPlane

 color="#6DB65B"

 size="50px"

 style={{ margin: '0 5px' }}

/&gt;

&lt;MdCloud

 color="#4AAE9B"

 size="50px"

 style={{ margin: '0 5px' }}

/&gt;

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