A React Icons Guide + React Sidebar

Oct 05, 2021

React ·13 min read

Written By

Jaysha

The react-icons package provides popular icon packs for your React project.

Bootstrap Icons, Font Awesome Icons, and Heroicons are some of the icon packs included in the package installation.

For this tutorial, I'll be adding the icons to the react-burger-menu, an off-canvas sidebar React component.

React: Getting Started

Create React App

To begin, create your React app. If you're new to React, refer to the React beginner's guide.

npx create-react-app reactnav

Install React Burger Menu

Then install react-burger-menu. Please note Version 3.x of react-burger-menu requires React 16.8+ or higher.

npm install react-burger-menu --save

Install React Icons

Please note that react-icons requires React 16.3 or higher.

npm or yarn react-icons installation

npm install react-icons --save

Install react-icons using npm or yarn.

CDN react-icons script

<script src="https://cdn.jsdelivr.net/npm/react-icons@4.2.0/lib" crossorigin="anonymous"></script>

There is also a CDN available if you don't want to install the entire package. Place the script in the <head> element.

Create React Burger Menu

react-burger-menu usage

src > (New Folder) components > (New File) Sidebar.js

import { slide as Menu } from "react-burger-menu";

export default function Sidebar() {
   return(
        <Menu>
            <a id="home" className="menu-item" href="/">Home</a>
            <a id="about" className="menu-item" href="/about">About</a>
            <a id="contact" className="menu-item" href="/contact">Contact</a>
            <a id="settings" className="menu-item" href="/settings">Settings</a>
        </Menu>
   )
}

First, let's create the burger menu. Create a new folder call components in the src directory and a new file called Sidebar.js.

Import the animation as Menu from "react-burger-menu".

Then return the Menu component with nested anchor tags.

react-burger-menu animation options include:

slide
stack
elastic
bubble
push
pushRotate
scaleDown
scaleRotate
fallDown
reveal

Checkout the demo site to see examples of the animations.

Import Sidebar.js in App.js

src > App.js

import Sidebar from "./components/Sidebar.js";
import './App.css';


export default function App() {
    return (
        <Sidebar />
    );   
}

Head to the src > App.js file. Import the Sidebar component from the Sidebar.js file. Then return the component.

src > App.css

#page-wrap {
  text-align: center;

  /* Prevent sidebar from showing a scrollbar on page */
  overflow: auto;
}

/* Individual item */
.bm-item {
  display: inline-block;

  /* Our sidebar item styling */
  text-decoration: none;
  margin-bottom: 10px;
  color: #d1d1d1;
  transition: color 0.2s;
}

/* Change color on hover */
.bm-item:hover {
  color: white;
}

/* The rest copied directly from react-burger-menu docs */

/* Position and sizing of burger button */
.bm-burger-button {
  position: fixed;
  width: 36px;
  height: 30px;
  left: 36px;
  top: 36px;
}

/* Color/shape of burger icon bars */
.bm-burger-bars {
  background: #373a47;
}

/* Position and sizing of clickable cross button */
.bm-cross-button {
  height: 24px;
  width: 24px;
}

/* Color/shape of close button cross */
.bm-cross {
  background: #bdc3c7;
}

/* General sidebar styles */
.bm-menu {
  background: #373a47;
  padding: 2.5em 1.5em 0;
  font-size: 1.15em;
}

/* Morph shape necessary with bubble or elastic */
.bm-morph-shape {
  fill: #373a47;
}

/* Wrapper for item list */
.bm-item-list {
  color: #b8b7ad;
}

/* Styling of overlay */
.bm-overlay {
  background: rgba(0, 0, 0, 0.3);
}

Also add the sidebar styles to the App.css file. The sidebar is plain HTML without the custom CSS declarations.

You should now have a sliding sidebar in your browser window.

18+ React Icons Packs Usage

21 SVG React icon packs are included, each with their own subfolder under the react-icons import.

Import an icon pack by calling the designated abbreviated folder. For example, Bootstrap Icons would have the following import path "react-icons/bs".

Below are usage examples of the 19 icon packs provided by react-icons.

Material Design Icons and VS Code Icons icon packs are excluded from this list. The react-icon pages were not available at the time of this article publication, making it difficult to find the correct icon name for each SVG.

Ant Design Icons

Ant Design Icons Import

import { IconName } from "react-icons/ai";

Ant Design Icons Usage

import { slide as Menu } from "react-burger-menu";
import { AiFillHome, AiFillInfoCircle, AiFillMail, AiFillSetting } from "react-icons/ai";


export default function Sidebar() {
   return(
      <Menu>
        <a id="home" className="menu-item" href="/">
            <AiFillHome /> Home
        </a>
        <a id="about" className="menu-item" href="/about">
            < AiFillInfoCircle /> About
        </a>
        <a id="contact" className="menu-item" href="/contact">
            <AiFillMail /> Contact
        </a>
        <a id="settings" className="menu-item" href="">
            <AiFillSetting /> Settings
        </a>
      </Menu>
   )
}

Import the AiFillHome, AiFillInfoCircle, AiFillMail, and AiFillSetting icons at the top of the file. Then call each icon in their respective anchor tags.

Bootstrap Icons

Bootstrap Icons Import

import { IconName } from "react-icons/bs";

Bootstrap Icons Usage

import { slide as Menu } from "react-burger-menu";
import { BsHouseDoorFill, BsInfoCircleFill, BsFillEnvelopeFill, BsFillGearFill } from "react-icons/bs";


export default function Sidebar() {
   return(
      <Menu>
        <a id="home" className="menu-item" href="/">
            <BsHouseDoorFill /> Home
        </a>
        <a id="about" className="menu-item" href="/about">
            <BsInfoCircleFill /> About
        </a>
        <a id="contact" className="menu-item" href="/contact">
            <BsFillEnvelopeFill /> Contact
        </a>
        <a id="settings" className="menu-item" href="">
            <BsFillGearFill /> Settings
        </a>
      </Menu>
   )
}

Import BsHouseDoorFill, BsInfoCircleFill, BsFillEnvelopeFill, and BsFillGearFill for the sidebar.

BoxIcons

BoxIcons Import

import { IconName } from "react-icons/bi";

BoxIcons Usage

import { slide as Menu } from "react-burger-menu";
import { BiHome, BiInfoCircle, BiEnvelope, BiWrench } from "react-icons/bi";


export default function Sidebar() {
   return(
      <Menu>
        <a id="home" className="menu-item" href="/">
            <BiHome /> Home
        </a>
        <a id="about" className="menu-item" href="/about">
            <BiInfoCircle /> About
        </a>
        <a id="contact" className="menu-item" href="/contact">
            <BiEnvelope /> Contact
        </a>
        <a id="settings" className="menu-item" href="">
            <BiWrench /> Settings
        </a>
      </Menu>
   )
}

Import BiHome, BiInfoCircle, BiEnvelope, and BiWrench from the "react-icons/bi" folder.

Devicons

Devicons Import

import { IconName } from "react-icons/di";

Devicons Usage

import { slide as Menu } from "react-burger-menu";
import { DiSublime, DiVisualstudio, DiPostgresql, DiMongodb } from "react-icons/di";


export default function Sidebar() {
   return(
      <Menu>
        <a id="home" className="menu-item" href="/sublime">
            <DiSublime /> Sublime
        </a>
        <a id="about" className="menu-item" href="/visualstudio">
            <DiVisualstudio /> VisualStudio
        </a>
        <a id="contact" className="menu-item" href="/postgres">
            <DiPostgresql /> Postgres
        </a>
        <a id="settings" className="menu-item" href="/mongodb">
            <DiMongodb /> MongoDB
        </a>
      </Menu>
   )
}

Devicons, as the name implies, only includes icons related to programming languages, databases, design and development tools. It does not contain the traditional home, gear, and alert buttons.

Feather

Feather Import

import { IconName } from "react-icons/fi";

Feather Usage

import { slide as Menu } from "react-burger-menu";
import { FiHome, FiUser, FiMail, FiSettings } from "react-icons/fi";


export default function Sidebar() {
   return(
      <Menu>
        <a id="home" className="menu-item" href="/">
            <FiHome /> Home
        </a>
        <a id="about" className="menu-item" href="/profile">
            <FiUser /> Profile
        </a>
        <a id="contact" className="menu-item" href="/contact">
            <FiMail /> Contact
        </a>
        <a id="settings" className="menu-item" href="">
            <FiSettings /> Settings
        </a>
      </Menu>
   )
}

Feather is a slightly limited icon pack with only outline icons.

Flat Color Icons

Flat Color Icons Import

import { IconName } from "react-icons/fc";

Flat Color Icons Usage

import { slide as Menu } from "react-burger-menu";
import { FcHome, FcInfo, FcFeedback, FcSupport } from "react-icons/fc";


export default function Sidebar() {
   return(
      <Menu>
        <a id="home" className="menu-item" href="/">
            <FcHome /> Home
        </a>
        <a id="about" className="menu-item" href="/about">
            <FcInfo /> About
        </a>
        <a id="contact" className="menu-item" href="/contact">
            <FcFeedback /> Contact
        </a>
        <a id="settings" className="menu-item" href="">
            <FcSupport /> Settings
        </a>
      </Menu>
   )
}

Flat Color Icons is a colored icon pack. It provides all of the basic icon including direction arrows.

Font Awesome

Font Awesome Import

import { IconName } from "react-icons/fa";

Font Awesome Usage

import { slide as Menu } from "react-burger-menu";
import { FaHome, FaInfoCircle, FaRegEnvelope, FaWrench } from "react-icons/fa";


export default function Sidebar() {
   return(
      <Menu>
        <a id="home" className="menu-item" href="/">
            <FaHome /> Home
        </a>
        <a id="about" className="menu-item" href="/about">
            <FaInfoCircle /> About
        </a>
        <a id="contact" className="menu-item" href="/contact">
            <FaRegEnvelope /> Contact
        </a>
        <a id="settings" className="menu-item" href="">
            <FaWrench /> Settings
        </a>
      </Menu>
   )
}

Font Awesome is one of the largest icon packs provided. It includes outline and fill icons.

Game Icons

Game Icons Import

import { IconName } from "react-icons/gi";

Game Icons Usage

import { slide as Menu } from "react-burger-menu";
import { GiHouse, GiInfo, GiEnvelope, GiGears } from "react-icons/gi";


export default function Sidebar() {
   return(
      <Menu>
        <a id="home" className="menu-item" href="/">
            <GiHouse /> Home
        </a>
        <a id="about" className="menu-item" href="/about">
            <GiInfo /> About
        </a>
        <a id="contact" className="menu-item" href="/contact">
            <GiEnvelope /> Contact
        </a>
        <a id="settings" className="menu-item" href="">
            <GiGears /> Settings
        </a>
      </Menu>
   )
}

Playing cards, cauldron, and twister icons are all available for use. As suggested, the icons are designed for games. However the pack does include the more traditional icons such as the home and about SVGs.

Github Octicons Icons

Github Octicons Icons Import

import { IconName } from "react-icons/go";

Github Octicons Icons Usage

import { slide as Menu } from "react-burger-menu";
import { GoHome, GoInfo, GoMail, GoSettings } from "react-icons/go";


export default function Sidebar() {
   return(
      <Menu>
        <a id="home" className="menu-item" href="/">
            <GoHome /> Home
        </a>
        <a id="about" className="menu-item" href="/about">
            <GoInfo /> About
        </a>
        <a id="contact" className="menu-item" href="/contact">
            <GoMail /> Contact
        </a>
        <a id="settings" className="menu-item" href="">
            <GoSettings /> Settings
        </a>
      </Menu>
   )
}

Github Octicons icons is a smaller icon pack with all of the essential icons.

Grommet-Icons

Grommet-Icons Import

import { IconName } from "react-icons/gr";

Grommet-Icons Usage

import { slide as Menu } from "react-burger-menu";
import { GrHome, GrCircleInformation, GrMailOption, GrPerformance } from "react-icons/gr";


export default function Sidebar() {
   return(
      <Menu>
        <a id="home" className="menu-item" href="/">
            <GrHome /> Home
        </a>
        <a id="about" className="menu-item" href="/about">
            <GrCircleInformation /> About
        </a>
        <a id="contact" className="menu-item" href="/contact">
            <GrMailOption /> Contact
        </a>
        <a id="settings" className="menu-item" href="">
            <GrPerformance /> Settings
        </a>
      </Menu>
   )
}

Grommet Icons pack provides 30+ document icons, directional arrows, and social media platform icons.

Heroicons

Heroicons Import

import { IconName } from "react-icons/hi";

Heroicons Usage

import { slide as Menu } from "react-burger-menu";
import { HiHome, HiInformationCircle, HiMail, HiCog } from "react-icons/hi";


export default function Sidebar() {
   return(
      <Menu>
        <a id="home" className="menu-item" href="/">
            <HiHome /> Home
        </a>
        <a id="about" className="menu-item" href="/about">
            <HiInformationCircle /> About
        </a>
        <a id="contact" className="menu-item" href="/contact">
            <HiMail /> Contact
        </a>
        <a id="settings" className="menu-item" href="">
            <HiCog /> Settings
        </a>
      </Menu>
   )
}

Heroicons were created by the makers of TailwindCSS and offer over 230 icons, both solid fill and outline icons.

IconMoon Free

IconMoon Free Import

import { IconName } from "react-icons/im";

IconMoon Free Usage

import { slide as Menu } from "react-burger-menu";
import { ImHome, ImInfo, ImMail3, ImCog } from "react-icons/im";


export default function Sidebar() {
   return(
      <Menu>
        <a id="home" className="menu-item" href="/">
            <ImHome /> Home
        </a>
        <a id="about" className="menu-item" href="/about">
            <ImInfo /> About
        </a>
        <a id="contact" className="menu-item" href="/contact">
            <ImMail3 /> Contact
        </a>
        <a id="settings" className="menu-item" href="">
            <ImCog /> Settings
        </a>
      </Menu>
   )
}

IcoMoon icons include several variations of classic icons such as the home and cog icons in addition to 35+ emotion icons.

Ionicons 4

Ionicons 4 Import

import { IconName } from "react-icons/io";

Ionicons 4 Usage

import { slide as Menu } from "react-burger-menu";
import { IoIosHome, IoIosInformationCircleOutline, IoMdMail, IoIosSettings } from "react-icons/io";


export default function Sidebar() {
   return(
      <Menu>
        <a id="home" className="menu-item" href="/">
            <IoIosHome /> Home
        </a>
        <a id="about" className="menu-item" href="/about">
            <IoIosInformationCircleOutline /> About
        </a>
        <a id="contact" className="menu-item" href="/contact">
            <IoMdMail /> Contact
        </a>
        <a id="settings" className="menu-item" href="">
            <IoIosSettings /> Settings
        </a>
      </Menu>
   )
}

Ionicons 4 is a basic icon pack with all of the basic icons needed to complete a project.

Ionicons 5

Ionicons 5 Import

import { IconName } from "react-icons/io5";

Ionicons 5 Usage

import { slide as Menu } from "react-burger-menu";
import { IoHome, IoInformationCircle, IoMail, IoCog } from "react-icons/io5";


export default function Sidebar() {
   return(
      <Menu>
        <a id="home" className="menu-item" href="/">
            <IoHome /> Home
        </a>
        <a id="about" className="menu-item" href="/about">
            <IoInformationCircle /> About
        </a>
        <a id="contact" className="menu-item" href="/contact">
            <IoMail /> Contact
        </a>
        <a id="settings" className="menu-item" href="">
            <IoCog /> Settings
        </a>
      </Menu>
   )
}

Ionicons 5 provides more icons with rounder appearances in comparison to Ionicons 4.

Remix Icon

Remix Icon Import

import { IconName } from "react-icons/ri";

Remix Icon Usage

import { slide as Menu } from "react-burger-menu";
import { RiHome2Fill, RiInformationFill, RiMailFill, RiListSettingsFill } from "react-icons/ri";


export default function Sidebar() {
   return(
      <Menu>
        <a id="home" className="menu-item" href="/">
            <RiHome2Fill /> Home
        </a>
        <a id="about" className="menu-item" href="/about">
            <RiInformationFill /> About
        </a>
        <a id="contact" className="menu-item" href="/contact">
            <RiMailFill /> Contact
        </a>
        <a id="settings" className="menu-item" href="">
            <RiListSettingsFill /> Settings
        </a>
      </Menu>
   )
}

Remix icons offers outlined and filled versions of icons in addition to multiple variations of the same icons.

Simple Icons

Simple Icons Import

import { IconName } from "react-icons/si";

Simple Icons Usage

import { slide as Menu } from "react-burger-menu";
import { SiAdobeillustrator, SiAdobedreamweaver, SiAdobexd, SiAdobeaftereffects } from "react-icons/si";


export default function Sidebar() {
   return(
      <Menu>
        <a id="home" className="menu-item" href="/illustrator">
            <SiAdobeillustrator /> Adobe Illustrator
        </a>
        <a id="about" className="menu-item" href="/dreamweaver">
            <SiAdobedreamweaver /> Adobe Dreamweaver
        </a>
        <a id="contact" className="menu-item" href="/xd">
            <SiAdobexd /> Adobe XD
        </a>
        <a id="settings" className="menu-item" href="/aftereffects">
            <SiAdobeaftereffects /> Adobe After Effects
        </a>
      </Menu>
   )
}

Simple Icons provide icons for popular brands.

Typicons

Typicons Import

import { IconName } from "react-icons/ti";

Typicons Usage

import { slide as Menu } from "react-burger-menu";
import { TiHomeOutline, TiInfoLargeOutline, TiMail, TiCogOutline } from "react-icons/ti";


export default function Sidebar() {
   return(
      <Menu>
        <a id="home" className="menu-item" href="/">
            <TiHomeOutline /> Home
        </a>
        <a id="about" className="menu-item" href="/about">
            <TiInfoLargeOutline /> About
        </a>
        <a id="contact" className="menu-item" href="/contact">
            <TiMail /> Contact
        </a>
        <a id="settings" className="menu-item" href="/settings">
            <TiCogOutline /> Settings
        </a>
      </Menu>
   )
}

Typicons is a smaller icon back with fluctuating line thicknesses.

Weather Icons

Weather Icons Import

import { IconName } from "react-icons/wi";

Weather Icons Usage

import { slide as Menu } from "react-burger-menu";
import { WiVolcano,WiTrain, WiThermometer, WiFire } from "react-icons/wi";


export default function Sidebar() {
   return(
      <Menu>
        <a id="home" className="menu-item" href="/volcano">
            <WiVolcano /> Volcano
        </a>
        <a id="about" className="menu-item" href="/train">
            <WiTrain /> Train
        </a>
        <a id="contact" className="menu-item" href="/thermometer">
            <WiThermometer /> Thermometer
        </a>
        <a id="settings" className="menu-item" href="/fire">
            <WiFire /> Fire
        </a>
      </Menu>
   )
}

Weather Icons includes moon phases, weather clouds, and natural disaster icons. This pack does not include traditional SVGs such as home and settings.

css.gg

css.gg Import

import { IconName } from "react-icons/cg";

css.gg Usage

import { slide as Menu } from "react-burger-menu";
import { CgHome, CgInfo, CgMail, CgOptions } from "react-icons/cg";


export default function Sidebar() {
   return(
      <Menu>
        <a id="home" className="menu-item" href="/">
            <CgHome /> Home
        </a>
        <a id="about" className="menu-item" href="/about">
            <CgInfo /> About
        </a>
        <a id="contact" className="menu-item" href="/contact">
            <CgMail /> Contact
        </a>
        <a id="settings" className="menu-item" href="/settings">
            <CgOptions /> Settings
        </a>
      </Menu>
   )
}

css.gg offers directional arrows and social media platform logos are all provided.

React