# material-symbols

> Latest variable icon fonts and CSS for Material Symbols.

Latest version **0.47.5** (published 2026-09-22) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install material-symbols
pnpm add material-symbols
yarn add material-symbols
bun add material-symbols
```

## Health

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

Positive: has types; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads; no esm support; large bundle; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.47.5 |
| Published | 2026-09-22 |
| First published | 2022-05-01 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 291 |
| Maintainers | marella |
| Keywords | material-symbols, material-icons, material-design-icons, material-design, material, symbols, icons, font |

## Links

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

## 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.47.5 (latest) — 2026-09-22
- 0.47.4 — 2026-09-18
- 0.47.3 — 2026-09-15
- 0.47.2 — 2026-09-09
- 0.47.1 — 2026-09-04
- 0.47.0 — 2026-08-26
- 0.46.0 — 2026-08-14
- 0.45.10 — 2026-07-31
- 0.45.9 — 2026-07-23
- 0.45.8 — 2026-07-14
- 0.45.7 — 2026-07-10
- 0.45.6 — 2026-07-07
- 0.45.5 — 2026-07-01
- 0.45.4 — 2026-06-25
- 0.45.3 — 2026-06-24
- … 140 more at https://npm.io/package/material-symbols/versions

## README

# [material-symbols](https://github.com/marella/material-symbols/tree/main/material-symbols)

Latest variable icon fonts and CSS for Material Symbols.

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

> For fonts with fewer variations, see [`@material-symbols/font-400`](https://www.npmjs.com/package/@material-symbols/font-400)
>
> For SVGs, see [`@material-symbols/svg-400`](https://www.npmjs.com/package/@material-symbols/svg-400)

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

## Installation

Install the [latest version][releases] using:

```sh
npm install material-symbols@latest
```

## Usage

Import in JS (example: `src/index.js` in Create React App, `src/main.js` in Vue CLI):

```js
import 'material-symbols';
```

or import in CSS (example: `src/styles.css` in Angular CLI):

```css
@import 'material-symbols';
```

or import in HTML:

```html
<link href="/path/to/material-symbols/index.css" rel="stylesheet">
```

To display an icon, use one of the following:

```html
<span class="material-symbols-outlined">face</span> <!-- Outlined -->
<span class="material-symbols-rounded">face</span>  <!-- Rounded -->
<span class="material-symbols-sharp">face</span>    <!-- Sharp -->
```

To customize the variable font axes (fill, weight, grade, and optical size), use:

```css
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}
```

### Reducing Build Size

The default `index.css` includes CSS for all fonts. This may cause build tools such as webpack to copy all fonts to the build directory even if you are not using all of them. To reduce the build size, import only the styles you need. For example, if you only need outlined icons, import `outlined.css` instead of the default `index.css`:

```diff
-import 'material-symbols';
+import 'material-symbols/outlined.css';
```

<details>
<summary><strong>Show all</strong></summary><br>

Icons | CSS | Sass
:--- | :--- | :---
Outlined | outlined.css | outlined.scss
Rounded | rounded.css | rounded.scss
Sharp | sharp.css | sharp.scss

</details>

### Using Sass

Import in Sass (example: `src/styles.scss` in Angular CLI):

```scss
@import 'material-symbols';
```

If you are getting errors with webpack or Vue CLI, add this line before importing:

```scss
$material-symbols-font-path: '~material-symbols/';
```

### Using Angular `mat-icon`

To display an icon, use one of the following:

```html
<mat-icon fontSet="material-symbols-outlined">face</mat-icon>
<mat-icon fontSet="material-symbols-rounded">face</mat-icon>
<mat-icon fontSet="material-symbols-sharp">face</mat-icon>
```

## Available Icons

See [demo].

## License

Material Symbols 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-symbols/releases
[license]: https://github.com/marella/material-symbols/blob/main/material-symbols/LICENSE
[demo]: https://marella.github.io/material-symbols/demo/

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