DEV Community

loading...
Cover image for The BEST React Icons Library

The BEST React Icons Library

danim47c profile image Daniel Mateos ・2 min read

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.

GitHub stars

GitHub logo 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
Enter fullscreen mode Exit fullscreen mode
import { FaBeer } from 'react-icons/fa'

const Question = () => (
  <h3> Lets go for a <FaBeer />? </h3>
)
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
import { FaBeer } from "@react-icons/all-files/fa/FaBeer"

const Question = () => (
  <h3> Lets go for a <FaBeer />? </h3>
)
Enter fullscreen mode Exit fullscreen mode

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>
)
Enter fullscreen mode Exit fullscreen mode

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.

Discussion

pic
Editor guide