loading...

Add React Icons To Your Projects

tadea profile image Tadea Simunovic ・1 min read

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.
Alt Text
Also, you can search icons by name in a search bar. For example...
Alt Text
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.
Alt Text

Posted on by:

tadea profile

Tadea Simunovic

@tadea

From teacher 👩🏻‍🏫 to software engineer 👩🏻‍💻 Full stack Web Developer with passion for software engineering. #rubyOnRails #javaScript #react #html #css

Discussion

markdown guide