DEV Community

Cover image for Easiest Way To Add Icons To Your React Apps 😎
Chris Hansen
Chris Hansen

Posted on • Updated on

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


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 
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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>
 );
}
Enter fullscreen mode Exit fullscreen mode

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.


#codenewbies


#tutorials

Top comments (9)

Collapse
 
miketalbot profile image
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 :)

Collapse
 
hyggedev profile image
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. 😅

Collapse
 
hyggedev profile image
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...

Thread Thread
 
miketalbot profile image
Mike Talbot ⭐

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

Thread Thread
 
hyggedev profile image
Chris Hansen

Damn lol. I'ma keep an eye out 👀

 
hyggedev profile image
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.

Collapse
 
coderduck profile image
duccanhole

thanks for your post, but i prefer font-awesome

Collapse
 
hyggedev profile image
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.