@material-symbols/path-100

Latest SVG path string exports with weight 100 for Material Symbols.

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

For variable icon fonts, see @material-symbols/font-100

• Installation
• Usage
• Available Icons

Installation

Install the latest version using:

npm install @material-symbols/path-100@latest

The package @material-symbols/path-100 includes only path strings with weight 100. To use a different weight, replace 100 in the package name with the desired weight.

| Package | Weight | |:-----------------------------------------------------------------------------------------| :----- | | @material-symbols/path-100 | 100 | | @material-symbols/path-200 | 200 | | @material-symbols/path-300 | 300 | | @material-symbols/path-400 | 400 | | @material-symbols/path-500 | 500 | | @material-symbols/path-600 | 600 | | @material-symbols/path-700 | 700 |

Usage

Material Symbols are available in three styles—outlined, rounded, and sharp. Path strings are available for both unfilled (FILL 0) and filled (FILL 1) states with grade (GRAD) 0 and size (opsz) 48px. Other variations of grade and size are not included to keep the package size small. Exports are prefixed ms followed by a camelCase version of the corresponding SVG file name. If the icon is filled, "Filled" is appended to the export. Path strings for each icon are located in the corresponding style directory.

For example:

| Icon | Style | Fill | Export Name | Import Path | |------------|------------|------|--------------------|-----------------------------------------------| | home | outlined | 0 | msSearch | @material-symbols/path-100/outlined/ | | search | rounded | 0 | msHome | @material-symbols/path-100/rounded/ | | favorite | sharp | 1 | msFavoriteFilled | @material-symbols/path-100/sharp/ |

The above translates to the following import statements:

import { msHome } from '@material-symbols/path-100/outlined';
import { msSearch } from '@material-symbols/path-100/rounded';
import { msFavoriteFilled } from '@material-symbols/path-100/sharp';

Example

The following example uses React, but the concept applies anywhere ES modules are supported.

import { msHome } from '@material-symbols/path-100/outlined';

// msHome = "M220-180h150v-250h220v250h150v-3..."

function App() {
  return (
    <div className="App">
        <svg width="48" height="48" viewBox="0 -960 960 960">
            <path d={msHome} />
        </svg>
    </div>
  );
}

Available Icons

See demo.

License

Material Symbols are created by Google.

We have made these icons available for you to incorporate into your products under the Apache License Version 2.0. 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.