How to use Material UI icons in React Material UI

Last updated on Jun 14, 2021 by Suraj Sharma

In this tutorial, you will learn how you can import and use material-ui icons in React material UI

Getting Started

First, To use the material-ui icons in React we have to import the material icons font in the index.html file

<link rel="stylesheet" href="" />

Then, install the @material-ui/icons via npm or yarn

 npm install --save @material-ui/icons


yarn add @material-ui/icons

Import Icons in React components

Now, we are going to import few material-ui icons in our react component <App /> just like any other react components.

// App.jsx

import React from 'react';

import AddIcon from '@material-ui/icons/Add';
import RemoveIcon from '@material-ui/icons/Remove';

const App = () => {
  return (
      <AddIcon />
      <RemoveIcon />

export default App;

To find the complete list of material-ui icons, you can visit Material UI Icons

Related Solutions

Rate this post

Suraj Sharma is a Full Stack Software Engineer. He holds a B.Tech degree in Computer Science & Engineering from NIT Rourkela.