Using React-Icons in Reactjs

I have found that the best way to incorporate icons in your code is by using react icons. They have a variety of different icons, ranging from bootstrap icons, Font Awesome icons, ant design icons and BoxIcons to name a few out of many more.

The installation process is fast and easy.

Install by typing

npm install react-icons --save

in the terminal for your project.

Once react-icons is installed, you will need to import it into the page where you want to use the icons.

For example:

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

Once you have imported you need to declare the icon in the code with a self-closing tag.

For example:

function App() {
  return (
    <div className="App">
     <h2 align="center">Hello world!</h2>
     <div align="center"><FaGithub/></div>
    </div>
  );
}

The result:

One thing to keep in Mind!

Whenever you are importing an icon make sure you are addressing the correct icon, whether it be from Font Awesome(fa) or bootstrap icons(bs). The icons will not work if you use a bootstrap icon and import it as an "fa" icon.

For example:

When importing from 'react-icons/fa' the "fa" at the end is what indicates where the icon is coming from. In this case Font Awesome.

The great thing is that at the top of the documentation it gives you the proper import method for the type of icon you want to use.

Such as follows:

Bootstrap Icons

import { IconName } from "react-icons/bs";

Font Awesome

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

Simply replace the IconName with the icon of your choosing and you should be all set!

All documentation for this can be found here:

React-Icons

This is all information that I found to be helpful as a new developer and took me some time to figure out how it all worked. After several failed attempts, I thought I'd share my experience and hope to help someone else looking for an easy way to add icons to their code!

Best of luck in your journey!

-Wensy