I'm currently in an internship program and I've gotten a lot of questions about how to use icons in React. We've had it sorted out but I felt it will be a good idea to do an article on it. So, buckle up and let's get to it.

Prerequisite

You should be able to set up a React boilerplate and be familiar with the import keyword.

How to get the icons

We are going to look at 3 ways to import icons in React

• Downloading the icon pack
• Using a CDN
• Using a package manager

Downloading the icon-pack

This is straight forward: download the icon pack, move it to your src folder and import any icon you want like so:

import FacebookIcon from './iconpack/Facebook.svg'

Then use it as an image:

const Component = () => {
   return(
      <>
         <img src={FacebookIcon} alt='facebook icon' />
      </>
   )
}

This method will however make your files larger and may reduce loading speed.

Using CDN

What is CDN?

Well, according to Clouflare(https://www.cloudflare.com/en-gb/learning/cdn/what-is-a-cdn/)th

A content delivery network (CDN) refers to a geographically distributed group of servers which work together to provide fast delivery of Internet content. A CDN allows for the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images, and videos.

So, when you add the script file or stylesheet for Bootstrap through jsDelivr, you are using get the files through a CDN.

How do you use the CDN?

You go to the public folder of your project and add the script file to the top of your index.html file like you would if you weren't using React. This is an example using Font Awesome's CDN:

<html lang='en'>
   <head>
      <meta charset'UTF-8'>
      <meta name='viewport' content='width=device-width, initial-scale=1.0' />
      <script src="https://kit.fontawesome.com/a0000a0000.js"crossorigin="anonymous"></script>

Then you just simply add the icons class in your components like so:

const Component = () => {
   return(
      <>
         <i class='fab fa-facebook'></i>
      </>
   )
}

There is a gimmick tho, you can only use icons from the icon base CDN you added to your index.html file.

Using a package manager

You can also use a package manger such as npm or yarn to install icons and use them in your project. This is the best way to use icons because this way you have access to over 20 icon base. You cd into your project folder containing the node modules and run the command in your terminal like so:

//using npm
npm install react-icons

//using yarn
yarn add react-icons

You then need to import the icons into your components using this method: import { IconName } from 'react-icons/{IconBase}'. The icon names are written in Pascal case without spaces or hyphens. Here are examples:

import { FaSearch } from 'react-icons/fa'
import { AiFillAndroid } from 'react-icons/ai'
import { BsFillCartFill } from 'react-icons/bs'
import { FiAirplay } from 'react-icons/fi'
import { IoAlarmOutline } from 'react-icons/io5'
import { MdAddTask } from 'react-icons/md'

The import is pretty straightforward: each icon base has its folder inside react-icons and you need to specify the folder you want the icon from making sure the prefix is mathing with the icon base you're importing from.

Conclusion

I hope this article has help you learn how to use ions in react. Please leave your review, comment, suggestion and question and I'll make sure to reply ASAP.

External Resources

• React Icons (https://react-icons.github.io/react-icons)