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

7 Angular.js course that makes you become Full-time Dev at Weekends

Getting Starting with React Testing

Write, Test and Deploy Your First NPM Package Using Travis-CI

Scss Variables in React Typescript Components

Aurelia and Web Components — HTML Templates and Custom Elements

5 Advanced VSCode Snippets for JavaScript + React Autocompletion

How to create a 100% FREE website with GatsbyJS and Gitpod.io

NodeJS — EC2 — NGINX — Codedeploy

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

Beginner’s guide to Linked List in JavaScript

10 Things You Must Know About Data Structures

Introduction to Functional Programming

Become a Successful Full Stack Developer through the OOP Principles and Practices