How To Include Icons In Your React Application

If you want to make your applications look more like the ones you use on a regular basis, using icons is a step in the right direction. I like to think of icons sort of as coding emojis. They relay a message to the user without using words and when used appropriately, give your application a neater, more modern look.

One might have to put on their reading glasses when using an application containing one of the above buttons. With the other set of buttons, upon seeing it, the user knows what is most likely going to happen when they click without ever having to process any words. In todays digital environment, regardless of how small the difference is, less is more.

First things first, you must install the following gem:

Next, copy and paste the following code in the file you want the icon in.

import { } from “react-icons/io5”;

Then, go to the following website: https://react-icons.github.io/react-icons/icons?name=io5. Here you’ll see over a hundred different icons. Select whichever icon you want and click on it, that icon’s name should be copied to your clipboard. Go ahead and paste into the curly brackets of the import you just made.

With the above code, you should be able to see the following icon on your page:

You can even add styling to your icon in order to change its color, increase its size, or adjust its positioning