Icons in react, a simple guide.

If you’ve been working with React, then you know all about importing and exporting components. A React app is essentially a collection of components that can be exported from their own file and imported into another file within the project you are working on. Components make it easy to design a feature to use and reuse where ever you want. There are also a variety of external libraries that can be installed and imported for convenient access. One such library is React Icons. Icons are symbols that can be used instead of text to represent different actions that the user of your app can perform.

Some examples of Font Awesome’s vast library of icons

The first step is to install the library. Head to the project directory in your terminal and run:

Once install is complete, head to: https://react-icons.github.io/react-icons and search for the type of icon you are looking for. Clicking directly on the icon you want will save it to your clipboard for easy pasting in your file.

Now we want to import the icon into our component. I chose to import the FaBars icon. The ‘fa’ in the name and at then end of your import file name represents the library of Font Awesome.

Now we can use our bars anywhere we want. Bars are inserted into our html the same way as any other component.

FaBars icon inside of a link tag inside of a div
The result of the code above

Now I know what you are probably thinking right now: Do I have to import an icon every time I want to use a different icon in a component???

The answer is no! You can import all of the icons within a given library with one import:

import all as (variable of your choice) from “…”

The * represents all and you can then name this import anything you choose after the ‘as’. Then simply pass down the variable into your component by name.

Now you can add as many icons as you like. This example is only for the Font Awesome library, and the import process would have to be repeated for a different library. There are too many libraries to choose from, have fun exploring!





Software engineering student, string cheese enthusiast!

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to Know If a Property Exists in An Object

What is the difference between window, screen, and document in JavaScript?

10 Essential GitHub Repos For Software Developers

Designing an opinionated functional API (Typescript) 🔺 🔻

My Javascript Experience

A vision for future Web Technologies — WASM & PWAs

Angular Material Pagination Datasource

JaWT Scratchpad (picoCTF)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Yevgeniy Valdman

Yevgeniy Valdman

Software engineering student, string cheese enthusiast!

More from Medium

4 Tips Using Typescript with React as a Javascript Developer

TDD or BDD… What’s your flavor?

React countdown timers simplified.

Why React is (Still) Good