The BEST React Icons Library

Daniel Mateos — Fri, 27 Nov 2020 23:18:31 +0000

In this post, I will try not to enter in comparing icon sets because the one you choose will depend on the project itself and your personal preferences.

I am going to talk about a library that includes some popular icon sets, more than 20, and the possibility of working with all of them at the same time with some interesting features.

This library it's called react-icons and it has got more than five thousand stars.

react-icons / react-icons

svg react icons of popular icon packs

You can look for any icon here

Basic Usage

To use this library you have only got to add the node package and import the component you want.

yarn add react-icons
# or
npm i react-icons

import { FaBeer } from 'react-icons/fa'

const Question = () => (
  <h3> Lets go for a <FaBeer />? </h3>
)

Reducing Bundle Size

You can reduce the bundle size by adding a different package that includes all the icons in separated files.

yarn add @react-icons/all-files
# or
npm i @react-icons/all-files

import { FaBeer } from "@react-icons/all-files/fa/FaBeer"

const Question = () => (
  <h3> Lets go for a <FaBeer />? </h3>
)

Extended Features

This powerful package does also come with an option to configure all icons props: configuration

It is basically a react context where you can set some properties of all the icons you render below.

import { IconContext } from "react-icons"

const IconContextProvider = ({children}) => (
  <IconContext.Provider value={{ color: "blue", className: "global-class-name" }}>
    {children}
  </IconContext.Provider>
)

Extra

You can check here it's documentation where everything is clearly explained.

I encourage you to share in the comments below if you knew this library, if you have worked with it, or even if you have anything to add to my explanation.