# @material-design-icons/svg

> Latest optimized SVGs for material design icons.

Latest version **0.14.15** (published 2025-02-12) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @material-design-icons/svg
pnpm add @material-design-icons/svg
yarn add @material-design-icons/svg
bun add @material-design-icons/svg
```

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.14.15 |
| Published | 2025-02-12 |
| First published | 2021-06-13 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 239 |
| Maintainers | marella |
| Keywords | material-design-icons, material-icons, material-design, material, icons, svg |

## Links

- npm: https://www.npmjs.com/package/@material-design-icons/svg
- Repository: https://github.com/marella/material-design-icons
- Homepage: https://marella.github.io/material-design-icons/demo/svg/
- Issues: https://github.com/marella/material-design-icons/issues
- npm.io page: https://npm.io/package/@material-design-icons/svg

## 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
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 0.14.15 (latest) — 2025-02-12
- 0.14.14 — 2025-01-24
- 0.14.13 — 2023-09-28
- 0.14.12 — 2023-09-07
- 0.14.11 — 2023-08-18
- 0.14.10 — 2023-07-21
- 0.14.9 — 2023-06-07
- 0.14.8 — 2023-05-24
- 0.14.7 — 2023-04-28
- 0.14.6 — 2023-04-19
- 0.14.5 — 2023-03-31
- 0.14.4 — 2023-03-22
- 0.14.3 — 2023-03-02
- 0.14.2 — 2022-11-19
- 0.14.1 — 2022-11-13
- … 52 more at https://npm.io/package/@material-design-icons/svg/versions

## README

# [@material-design-icons/svg](https://github.com/marella/material-design-icons/tree/main/svg)

Latest optimized SVGs for material design icons.

> This package is automatically updated, so it will always have the latest icons from Google.

> For Material Symbols, see [`material-symbols`](https://www.npmjs.com/package/material-symbols)
>
> For icon fonts, see [`@material-design-icons/font`](https://www.npmjs.com/package/@material-design-icons/font)

- [Installation](#installation)
- [Usage](#usage)
- [Available Icons](#available-icons)

## Installation

Install the [latest version][releases] using:

```sh
npm install @material-design-icons/svg@latest
```

## Usage

Material icons are available in five styles—`filled`, `outlined`, `round`, `sharp` and `two-tone`. SVGs for each icon are located in the corresponding style directory:

```js
@material-design-icons/svg/{style}/{icon}.svg
```

For example, SVGs for `face` icon are located at:

```js
@material-design-icons/svg/filled/face.svg
@material-design-icons/svg/outlined/face.svg
@material-design-icons/svg/round/face.svg
@material-design-icons/svg/sharp/face.svg
@material-design-icons/svg/two-tone/face.svg
```

### React

You can use [`@svgr/webpack`](https://www.npmjs.com/package/@svgr/webpack) to import SVGs as React components:

```js
import Face from '@material-design-icons/svg/filled/face.svg';

// Face is a React component that renders the SVG

function App() {
  return (
    <div className="App">
      <Face />
    </div>
  );
}
```

If you are using `@svgr/webpack` with `file-loader` (example: [Create React App](https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs)), use:

```js
import { ReactComponent as Face } from '@material-design-icons/svg/filled/face.svg';
```

### Vue

You can use [`@svgv/webpack`](https://www.npmjs.com/package/@svgv/webpack) to import SVGs as Vue components:

```html
<template>
  <div class="App">
    <Face />
  </div>
</template>

<script>
import Face from '@material-design-icons/svg/filled/face.svg';

// Face is a Vue component that renders the SVG

export default {
  components: {
    Face,
  },
};
</script>
```

### Styling

SVGs can be styled using CSS. Setting `width` and `height` to `1em` allows changing size via `font-size`. Setting `fill` to `currentColor` allows changing color via `color`.

```css
.App svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}
```

## Available Icons

See [demo].

## License

Material design icons are created by [Google](https://github.com/google/material-design-icons#license).

> We have made these icons available for you to incorporate into your products under the [Apache License Version 2.0][license]. Feel free to remix and re-share these icons and documentation in your products.
We'd love attribution in your app's *about* screen, but it's not required.

[releases]: https://github.com/marella/material-design-icons/releases
[license]: https://github.com/marella/material-design-icons/blob/main/svg/LICENSE
[demo]: https://marella.github.io/material-design-icons/demo/svg/

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