A React Icons Guide + React Sidebar

Oct. 5, 2021, 3:04 p.m.
React · 13 min read
A React Icons Guide + React Sidebar

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

React Beginners Guide

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

React burger menu homepage

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

React Icons Homepage

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.

React burger menu without icons

 

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

React Icons Ant Design

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.

React Ant Design Icons in Burger Nav

 

Bootstrap Icons

React Icons 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. 

React burger sidebar Bootstrap Icons

 

BoxIcons

React Icons 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.

React Sidebar with BoxIcons

 

Devicons

React Icons 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.

React Sidebar with Devicons

 

Feather

React Icons 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.

React Sidebar with Feather

 

Flat Color Icons

React 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.

React Sidebar flat color icons

 

Font Awesome

React Icons 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.

 

React Sidebar Font Awesome

 

Game Icons

React 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.

React Sidebar game icons

 

Github Octicons Icons

React Icons 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. 

React Sidebar with Github Octicons

 

Grommet-Icons

React 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.

React Sidebar with Grommet-Icons

 

Heroicons

React 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.

React Sidebar with Heroicons

 

 

IconMoon Free

React Icons IcoMoon

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.

React Sidebar IcoMoon

 

 

Ionicons 4

React Icons Ionicons4

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.

React Sidebar with Ionicons 4

 

Ionicons 5

React Icons 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.

 

React Ionicons 5 in React Sidebar 

 

 

Remix Icon

React Icons 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.

React Sidebar with Remix Icons

 

 

Simple Icons

React 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.

React Sidebar with Simple Icons

 

Typicons

React Icons 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.

React Sidebar with Typicons

 

 

Weather Icons

React Icons 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.

React Sidebar with Weather Icons

 

 

css.gg

React Icons 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 Sidebar with css.gg icons






Post a Comment
Join the community

0 Comments
0
Jaysha
Written By
Jaysha
Hello! I enjoy learning about new CSS frameworks, animation libraries, and SEO.