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