Add Icons into Our React App with React Icons

React Icons is a library with lots of icons we can add to our React app.

In this article, we’ll look at how to add icons to our React app with React Icons.

Installation

We can install the package by running:

npm install react-icons --save

Add Icons

Once we installed the package, we can add an icon by importing the icon component:

import React from "react";
import { FaBeer } from "react-icons/fa";

export default function App() {
  return (
    <h3>
      Lets go for a <FaBeer />?
    </h3>
  );
}

Ant Design Icons

We can add Ant Design icons with the react-icons/ai module:

import React from "react";
import { AiFillAccountBook } from "react-icons/ai";

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

The full list of icons is at https://react-icons.github.io/react-icons/icons?name=ai

Bootstrap Icons

We can add Bootstrap icons with the react-icon/bs module:

import React from "react";
import { BsFillAlarmFill } from "react-icons/bs";

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

The full list of icons is at https://react-icons.github.io/react-icons/icons?name=bs

BoxIcons

We can add BoxIcons from the react-icon/bi module:

import React from "react";
import { BiAbacus } from "react-icons/bi";

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

The full list of icons is at https://react-icons.github.io/react-icons/icons?name=bi

Devicons

We can add Devicons from the react-icons/di module.

For instance, we write:

import React from "react";
import { DiAndroid } from "react-icons/di";

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

to add the Android icon.

The full list of Devicons is at https://react-icons.github.io/react-icons/icons?name=di

Feather Icons

We can add Feather Icons from the react-icons/fi module.

For example, we write:

import React from "react";
import { FiActivity } from "react-icons/fi";

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

to add the activity icon.

The full list of icons is at https://react-icons.github.io/react-icons/icons?name=fi

Flat Color Icons

We can add Flat Color Icons from the react-icons/fc module.

For instance, we write:

import React from "react";
import { FcAbout } from "react-icons/fc";

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

to add the about icon.

The full list of Flat Color icons is at https://react-icons.github.io/react-icons/icons?name=fc

Font Awesome

Font Awesome icons can be added with the react-icons/fa module.

To add one, we write:

import React from "react";
import { Fa500Px } from "react-icons/fa";

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

to add the Font Awesome icon.

The full list of icons can be found at https://react-icons.github.io/react-icons/icons?name=fa

Conclusion

We can add icons from various icon libraries into our React app with React Icons.