Material Icons

MUI Material Icons

@mui/icons-material component names for 1,834 Google Material Icons, in five styles. Each links to the icon's SVG, PNG and code.

Install and import

App.jsx
npm install @mui/icons-material @mui/material @emotion/react @emotion/styled

import HomeIcon from "@mui/icons-material/Home";

export function Example() {
  return <HomeIcon fontSize="large" color="primary" />;
}

The plain name is the Filled style; Outlined, Rounded, Sharp and TwoTone suffixes give the others.

Styles
import HomeIcon from "@mui/icons-material/Home";                 // Filled
import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined"; // Outlined
import HomeRoundedIcon from "@mui/icons-material/HomeRounded";   // Rounded
import HomeSharpIcon from "@mui/icons-material/HomeSharp";       // Sharp
import HomeTwoToneIcon from "@mui/icons-material/HomeTwoTone";   // Two-tone

Import from the icon's own path (@mui/icons-material/Home) rather than the package root, so development builds stay fast. Size and color come from MUI's fontSize and color props or the sx prop.

MUI icons vs. Material Symbols

@mui/icons-material follows the classic Material Icons, which no longer get new icons, and has no weight, grade or fill settings. For those, use Material Symbols with MUI's Icon component:

App.jsx
// In index.html:
// <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

import Icon from "@mui/material/Icon";

<Icon baseClassName="material-symbols-outlined">home</Icon>

Most used MUI Material icons

All MUI Material icon names

A–Z.

Frequently asked questions

How do I find the right MUI icon name?

Search this site by meaning ("trash" finds Delete), open the icon and copy the import from the MUI tab. MUI names are the Material icon name in PascalCase: arrow_back becomes ArrowBack.

Why is an icon missing from @mui/icons-material?

MUI's package follows the classic Material Icons set, which stopped getting new icons. Icons added to Material Symbols since then aren't in it; use the Material Symbols font with MUI's Icon component, or the SVG from the icon's page.

How do I change the size or color of an MUI icon?

Use fontSize="small", "medium", "large" or "inherit", and color="primary", "secondary", "action", "error" and so on. For exact values, use the sx prop, for example sx={{ fontSize: 40, color: "#1e88e5" }}.

Are MUI Material icons free to use?

Yes. The @mui/icons-material package is MIT licensed, and the icon designs are Google's, released under the Apache License 2.0.