React Icons

Almost all kinds of modern-day applications utilize icons in one way or the other. Iconography is an important area of design. Icons can be used to convey a message in a concise and simplified form.

Speaking of React apps, there are numerous ways of adding icons to them.

We can either create our own icon images and have them included via <img> elements, or we can create an .icon class and reuse an icon sprite image in it via background-image and background-position. Or we can even inline <svg> elements within our JSX code in order to have the icon markup right within the HTML.

However, all these methods require a substantial amount of effort on our end.

Imagine how amazing it would be if a huge inventory of icons is available to us, only one call away. Guess what, this is actually possible in React.

In this chapter, we shall explore the react-icons package that allows us to work with a humongous inventory of icons right from within our React app. This inventory is a result of curating icons from different icon libraries, including the well-known Font Awesome Icons and Bootstrap Icons libraries.

Thanks to react-icons, there is no need to worry about manually creating images, or including background-image styles, or even handling the setup of various icon libraries — it's all handled by the react-icons package.

React Icons is an open-source package available on npm, curating icon sets from different icon libraries for us to work from one single, unified point of access.

We import given icons from the package using ECMAScript module imports (example will be presented later on in the chapter).

Here an screenshot from the official website for React Icons:

Official website of React Icons

Right on the homepage, there is a list of all the icon libraries that React Icons relies upon. We can choose any one library from amongst them, browse through the collection of icons therein, pick up one that we need, and then copy its code to be used in our React app.

As simple as that.

Moreover, as we shall soon find out in this chapter, these icons are denoted as <svg> elements once rendered. This has the benefit of us being able to control their size and color very easily, using font-size and color from CSS.

But before we can get a taste of all this icon goodness, we have to first install the package in our React app. Let's see how to do so.

Getting up and running with React Icons is a walk in the park.

Head over to the terminal and enter the following command to install react-icons package from npm:

Wait a few seconds and then voila! — we have a huge collection of icons at our disposal to choose from, right on our computer.

With the package installed, it's now time to add in a bunch of icons into our React apps.

Let's say we want to create a StarRatingInput component that essentially allows us to enter a star rating from 1 to 5 by selecting from a sequence of star icons.

Following the saying "a picture is worth a thousand words", here's what we mean:

A star rating input

The user can click on any of the given star icons to set the rating to that number. For instance, if the second star is clicked, it means we have a 2-star rating; if the third star is clicked, we have a 3-star rating; and so on.

Before we can implement the logic of this component, we obviously first need the sequence of star icons. And for this, we'll use the React Icons package to our advantage.

We'll first head over to the React Icons website and then search for the term 'star' in the search box because we basically need a star icon.

Immediately, the search ends up with a large collection of potential matches, showcasing star icons from different icon libraries. We seem to like the FaStar icon, as highlighted below,

Result for 'star' on React Icons

and, likewise, click on it.

The pane that slides in illustrates the icon in a large size along with a couple of buttons to try different colorings of the icon:

The FaStar icon on React Icons

Beneath this we have the ES6 import statement for importing the icon into our app.

Once imported, we just ought to create an <FaStar/> element in our React app to render the imported FaStar component and, consequently, the underlying SVG icon.

Let's do this now.

We'll first demonstrate adding one icon and then shift to creating a sequence of five icons using some basic React concepts.

import { FaStar } from 'react-icons/fa';

function App() {
   return (
      <>
         <p>Following we have a star:</p>
         <FaStar/>
      </>
   );
}

Here's the output that this elementary code snippet produces:

The FaStar component rendered

Perfect!

The star icon rendered is actually an <svg> element as is evident after inspecting it in the browser's developer tools:

The FaStar icon is denoted as <svg> element

With this, let's now get to implementing the StarRatingInput component with its sequence of five star icons.

Note that we'll only showcase the presentation of the star icons in the component; the logic of interacting with the component is left as an exercise for you:

import { FaStar } from 'react-icons/fa';

function StarRatingInput() {
   return (
      <div>
         {Array(5).fill(0).map(_ => (
            <FaStar/>
         ))}
      </div>
   );
}

function App() {
   return (
      <StarRatingInput/>
   );
}

Array(5) creates an empty array of 5 elements, fill(0) fills it with dummy values so that we can later on use map(), then finally map() iterates over the array and renders exactly 5 <FaStar>s to give the following result:

The FaStar component rendered

Seems amazing, doesn't it?

But let's take it a step forward and add some spice to our StarRatingInput component and with that also consider a couple more customization options for React Icons.

Currently, we feel that the star icons rendered by StarRatingInput are somewhat small; we'll like to make them slightly bigger in size. Plus, we'll also like to change the color of the icons from black to a tint of grey.

Modifying the size of icons in React Icons is very easy — we can simply set a font-size on the icon element (or obviously even on any of its ancestor) to make is smaller or bigger.

This is demonstrated below:

function StarRatingInput() {
   return (
      <div style={{ fontSize: 30 }}>
         {Array(5).fill(0).map(_ => (
            <FaStar/>
         ))}
      </div>
   );
}

Bigger icons obtained by adjusting the font size

By virtue of the addition of the fontSize property on the containing <div>, each rendered icon displays bigger.

Over to the second task of adjusting the icons' color. This too can be done by setting the color CSS property on the icon element or on any of its ancestors:

function StarRatingInput() {
   return (
      <div style={{ fontSize: 30, color: '#ddd' }}>
         {Array(5).fill(0).map(_ => (
            <FaStar/>
         ))}
      </div>
   );
}

Light grey icons obtained by adjusting their color

Here, we set the color property on the <div> which gets inherited by every icon downstream (thanks to CSS).

As stated earlier, these styles can also be set on the icon elements themselves.

Consider the following rewrite of the code above:

function StarRatingInput() {
   return (
      <div>
         {Array(5).fill(0).map(_ => (
            <FaStar style={{ fontSize: 30, color: '#ddd' }}/>
         ))}
      </div>
   );
}

Light grey icons obtained by adjusting their color

We've taken the style prop from the <div> element directly into the <FaStar> element; and expectedly, the result is the same as before.