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

Material Design Icons

We can add Material Design icons from the react-icons/md collection.

For instance, we can write:

import React from "react";
import { Md3DRotation } from "react-icons/md";

export default function App() {
  return (
    <h3>
      <Md3DRotation />
    </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=md

Remix Icon

React Icons comes with the Remix Icon collection.

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

For instance, we can write:

import React from "react";
import { RiAncientGateLine } from "react-icons/ri";

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

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

Simple Icons

The Simple Icons collection is included with the React Icon’s react-icons/si module.

For instance, we can write:

import React from "react";
import { Si1001Tracklists } from "react-icons/si";

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

to add the icon.

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

Typicons

The Typicons collection is included with the React Icons’s react-icons/ti module.

For instance, we can write:

import React from "react";
import { TiAdjustBrightness } from "react-icons/ti";

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

to add the icon.

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

VS Code Icons

React Icons comes with the icons used by the Visual Studio Code code editor.

The icons are included in the react-icons/vsc collection.

For example, we can write:

import React from "react";
import { VscAccount } from "react-icons/vsc";

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

to add an icon from the collection.

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

Weather Icons

We can add weather icons from the Weather Icons collection.

They’re included in the react-icons/wi collection.

To add one, we write:

import React from "react";
import { WiAlien } from "react-icons/wi";

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

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

css.gg

React Icons comes with the css.gg icon collection.

They’re included in the react-icons/gg module.

To add one, we write:

import React from "react";
import { CgAbstract } from "react-icons/cg";

export default function App() {
  return (
    <h3>
      <CgAbstract />
    </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=cg

Conclusion

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