# @react-md/material-icons

> Material Design Icon components for react-md

Latest version **7.0.8** (published 2026-06-25) · MIT license · 1.6K weekly downloads

## Install

```sh
npm install @react-md/material-icons
pnpm add @react-md/material-icons
yarn add @react-md/material-icons
bun add @react-md/material-icons
```

## Health

**Score 70/100 (B)** — status: active.

Positive: esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: no types.

## Facts

| | |
|---|---|
| Version | 7.0.8 |
| Published | 2026-06-25 |
| First published | 2019-03-17 |
| Weekly downloads | 1.6K |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 2 |
| Unpacked size | 7.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2325 |
| Maintainers | mlaursen |
| Keywords | icon, react, component, react-md, material design |

## Links

- npm: https://www.npmjs.com/package/@react-md/material-icons
- Repository: https://github.com/mlaursen/react-md
- Homepage: https://react-md.dev
- Issues: https://github.com/mlaursen/react-md/issues
- npm.io page: https://npm.io/package/@react-md/material-icons

## Dependencies (2)

- [cnbuilder](https://npm.io/package/cnbuilder.md) ^3.1.0
- [@react-md/core](https://npm.io/package/@react-md/core.md) 7.0.7

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@atlantum/icons](https://npm.io/package/@atlantum/icons.md) — 262 weekly downloads

## Recent versions

- 7.0.8 (latest) — 2026-06-25
- 6.0.0-next.22 (next) — 2025-04-09
- 7.0.7 — 2026-05-15
- 7.0.6 — 2026-05-14
- 7.0.5 — 2026-04-29
- 7.0.4 — 2026-03-21
- 7.0.3 — 2026-02-13
- 7.0.2 — 2026-01-11
- 7.0.1 — 2026-01-11
- 7.0.0 — 2026-01-06
- 6.2.10 — 2026-01-05
- 6.2.9 — 2025-12-20
- 6.2.8 — 2025-12-18
- 6.2.7 — 2025-12-05
- 6.2.6 — 2025-10-05
- … 89 more at https://npm.io/package/@react-md/material-icons/versions

## README

# @react-md/material-icons

This package converts each [material icon] into a `React` component as inline SVG icons.

## Documentation

Check out the [documentation site] to see all the available icons and in-depth usage.

## Installation

```sh
npm install --save @react-md/core @react-md/material-icons
```

```sh
yarn add @react-md/core @react-md/material-icons
```

```sh
pnpm add @react-md/core @react-md/material-icons
```

## Add base styles

If you only want to use the icons in this package without the rest of `react-md`:

```scss
@use "@react-md/core" with (
  $icon-disable-font: true,
  $icon-disable-symbol: true,
  $icon-disable-inline: true,
  $icon-disable-spacing-before: true,
  $icon-disable-spacing-after: true,
  $icon-disable-spacing-above: true,
  $icon-disable-spacing-below: true,
  $icon-disable-primary-color: true,
  $icon-disable-secondary-color: true,
  $icon-disable-warning-color: true,
  $icon-disable-error-color: true,
  $icon-disable-success-color: true,
  $icon-disable-text-primary-color: true,
  $icon-disable-text-secondary-color: true,
  $icon-disable-text-hint-color: true,
  $icon-disable-text-disabled-color: true,
  $icon-disable-dense: true,
  $icon-disable-rotator: true,
  $disable-default-system-theme: true
);

@include core.icon-styles;
```

If you are using `react-md` already and only want to use the SVG icons in this package:

```scss
@use "@react-md/core" with (
  $icon-disable-font: true,
  $icon-disable-symbol: true
);

@include core.styles;
```

## Use the icon components

The [documentation site] will allow you to search and find all the available icons, but here's a quick example.

```tsx
import FavoriteOutlinedIcon from "@react-md/material-icons/FavoriteOutlinedIcon";

function Example() {
  return <FavoriteOutlinedIcon />;
}
```

[material icon]: https://fonts.google.com/icons?icon.set=Material+Icons
[documentation site]: https://react-md.dev/components/material-icons-and-symbols

---
_Source: https://npm.io/package/@react-md/material-icons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._