Easiest Way To Add Icons To Your React Apps 😎

A great UI begins with some great icons.

Icons are important as they add familiarity to your website. Such as a hamburger menu. Everyone knows to click a hamburger icon to get more information, or how a down arrow at the bottom of the page, indicates the user should scroll.

If you're working with React, it's extremely easy to implement icons into your projects, with thousands of choices from various libraries.

Let's begin.

---

Resources

• react-icons: https://react-icons.github.io/react-icons
• Demo: https://react-icons-blog-example.netlify.app/

  chansen17 / react-icons-blog

  Example on how to use react-icons in a react-project.

---

1. We're going to be using the react-icons package 📦

Download react-icons either with yarn or npm. Like so:

yarn add react-icons 
or 
npm install react-icons --save 

---

2. Import Icons ↩️

On the react-icons homepage, you'll see a ton of libraries to choose from. From Bootstrap, Font-awesome, Material-UI and many more. Choose your favorite.

Once you find the icon you like, click to add the code to your clipboard.

Now, in App.js all we need to do is import the Icon and the library like so:

// fa is the reference to the font-awesome library
import { FaReact, FaSass, FaLinux} from 'react-icons/fa';

// md is the reference to the material-ui library
import { MdFavoriteBorder, MdChat } from 'react-icons/md';

---

3. Let's use our icons 👍

Lastly, in your App() component, all you need to do is use the Icon like any other component. So back in step 2, if you imported the React, Sass, Linux, Favorites and Chat Icons, just use them like so:

function App() {
  return (
    <ul>
      <li><FaReact/></li>
      <li><FaSass/></li>
      <li><FaLinux/></li>

      <li><MdFavoriteBorder/></li>
      <li><MdChat/></li>
    </ul>
 );
}

---

Conclusion 😎

Congrats! That's it! That's all it takes to bring Icons into your React projects. You have the choice of thousands of Icons from 21 different libraries! And the best part is you only import the Icons you need from each individual library, which helps with performance!

So bring some flare to your UI, & get creative!

---

Are you on the Web Dev learning journey!?

Check out my other posts on productivity and React.

How to stay focused 🔍 as a self taught Frontend Web Developer 💻

Chris Hansen ・ Jul 29 '21

#beginners #webdev #productivity #devjournal

How to build a Responsive 📱 React Navigation Menu with Styled-Components 💻

Chris Hansen ・ Aug 3 '21

#webdev #tutorial #javascript #react

---

#codenewbies Follow

#tutorials Follow

Comments

[Mike Talbot ⭐]

The only issue I have with react-icons is that depending on which way the wind is blowing it can suddenly import the whole of Fa into your bundle. I've given up and use their all-files version - which is very good. I love being able to choose from all of those different icon sets :)

[Chris Hansen]

Wow, really!? I don't think I have noticed that before. IDK if it's even possible, but could you have forgot to import a single Icon? For example: import 'react-icons';

But you definitely made me curious! Lol.
I just checked this projects and a few others build folders, and the bundled jsfiles and are all importing the Icons only, fortunately. This projects js files are indeed only importing 5 Icons. 😅

[Chris Hansen]

UPDATE

Wish I had checked the Github first. I looked into it, and there was an issue about the entire library being included in there bundles.

The issue was closed, as of November 2020!

github.com/react-icons/react-icons...

[Mike Talbot ⭐]

Yes, but still happening here in 2021 for me, it really really depends!

[Chris Hansen]

Damn lol. I'ma keep an eye out 👀

[Chris Hansen]

You're absolutely right. But I can never remember the syntax of even my favorite Icons. Especially different types of the same Icon.
I have not used the fontawesome package in a while, but I feel like I remember the syntax being a little difficult too. And I prefer not to repeat class or className numerous times, use i tags, and I can never remember if an Icon is 'fas' , 'far', 'fab'..

And if you're using the website directly, I dislike having to refactor all the class into className.

I like the consistency with react-icons. And my usual Icons, are always so easy to remember. No classes, No Tags. Just FaHeart, FaAngleDown, FaBars. And you can even pass them into styled-components like an [arg] which is a big plus for me if you style your react apps with CS in JS.

[duccanhole]

thanks for your post, but i prefer font-awesome

[Chris Hansen]

I do too! Lol. It's my preferred icons library hands down. 💯

But, do you go to fontawesome.com, login to access your kit, get the styles link and or use a CDN? Then go into your public/index.html to add your styles?

In my example, Its literally 3 steps:

1. yarn add react-icons
2. import { FaHeart} from react-icons/fa
3. <button><FaHeart/></button>

It's legit quicker for me to do that than typing for the Icon in the search box at fontawesome.com lol. Give it a shot.