More Icons We can Add 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.

Game Icons

We can add icons from the Game Icons library with the react-icons/gi module.

For instance, we write:

import React from "react";
import { Gi3DGlasses } from "react-icons/gi";

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

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

Github Octicons icons

We can add Github Octicons icons into our React app with the react-icons/go module.

For example, we write:

import React from "react";
import { GoAlert } from "react-icons/go";

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

We can find a list of Github Octicons icons at https://react-icons.github.io/react-icons/icons?name=go

Grommet-Icons

React Icons comes with a collection of Grommet-Icons.

We can add them with the react-icons/gr module.

For instance, we can write:

import React from "react";
import { GrAccessibility } from "react-icons/gr";

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

to add an icon from the module.

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

Heroicons

React Icons comes with the Heroicons icon collection. We can import them from the react-icons/hi module.

For instance, we can write:

import React from "react";
import { HiAdjustments } from "react-icons/hi";

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

to add the icon.

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

IcoMoon Free

React Icons comes with the IcoMoon Free icon collection.

We can import them from the react-icons/im module.

For instance, we can write:

import React from "react";
import { ImHome } from "react-icons/im";

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

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

Ionicons 4

React Icons comes with the Ionicons 4 icon collection.

For example, we can add it by writing:

import React from "react";
import { IoIosAddCircleOutline } from "react-icons/io";

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

to add an icon.

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

Ionicons 5

We can add icons from the Ionicons 5 collection from the react-icons/io5 module.

For example, we can write:

import React from "react";
import { IoAccessibilityOutline } from "react-icons/io5";

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

to add an icon from the collection.

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

Conclusion

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