Add React Icons To Your Projects

In this post, you will learn how to use icons from popular icons sets in your React applications. React Icons provides thousands of free, open-source icons. It includes ten popular open-source icon libraries, including Font Awesome, Bootstrap Icons, Devicons, Game Icons, Material Design, ect. It utilizes ES6 imports that allow you to include only the icons that your project is using.

Add icons to your project

#add with npm
npm install react-icons --save

#add with yarn
yarn add react-icons

If you open React Icons documenation, you will see on left-hand side open-source libraries you can use with React Icons.

Also, you can search icons by name in a search bar. For example...

Once you click on the icon you will be able to copy/paste into your project. In your code editor, you will import icons. In this case I will be using Font Awesome Icon.

import { FaBalanceScale } from "react-icons/fa";

Withing div tag in your component you will simply invoke it.

<div>
   <FaBalanceScale />
</div>

How simple is that! Here is how does it look in a browser.