/react-material-symbols

A minimalist package for adding Material Symbols to any React project.

Primary LanguageTypeScript

React Material Symbols NodeJS CI Publish Release

A simple package for adding Material Symbols to any React project.

foo

Authors

Installation

Install with npm

  npm i react-material-symbols

Props

type MaterialSymbolProps

Prop Type Description
icon '10k' | '10mp' | ... 2368 more ... | 'zoom_out_map' Required. The name of the icon to render.
fill boolean | undefined Default false. Fill gives you the ability to modify the default icon style. A single icon can render both unfilled and filled states.
weight 100 | 200 | ... 6 more ... | 900 | undefined Default inherit. Weight defines the symbol’s stroke weight, with a range of weights between thin (100) and heavy (900). Weight can also affect the overall size of the symbol.
grade number | undefined Default inherit. Weight and grade affect a symbol’s thickness. Adjustments to grade are more granular than adjustments to weight and have a small impact on the size of the symbol.
size number | undefined Default inherit. Size defines the icon width and height in pixels. For the image to look the same at different sizes, the stroke weight (thickness) changes as the icon size scales.
color string | undefined Default inherit. Color accepts key values ('red', 'blue', 'indigo', etc.), <hex-color>, <rgb()>, <hsl()> and <hwb()> values.
as React.ElementType | undefined Default 'span'. Set the HTML Element for the icon.

Examples

import { MaterialSymbol } from 'react-material-symbols';
import 'react-material-symbols/rounded'; // Place in your root app file. There are also `sharp` and `outlined` variants.

export default function App() {
  return (
    <MaterialSymbol icon="folder" size={24} fill grade={-25} color='red' />
  )
}

Demo

https://react-material-symbols.vercel.app/

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.