react-material-symbol-icons

React component library for Google Material Symbols with full TypeScript support.

Features

• Fully typed -- autocomplete for 3,000+ icon names via the IconKey type
• Three themes -- Outlined, Rounded, and Sharp
• Variable font axes -- control weight, fill, grade, and optical size
• Lightweight -- uses CSS variable fonts, no SVG bundles
• Ref forwarding -- supports React.forwardRef
• Tree-shakeable -- dual ESM + CJS format
• RSC compatible -- includes "use client" directive

Live Demo

Browse all icons and props in the interactive Storybook.

Installation

# npm
npm install react-material-symbol-icons

# yarn
yarn add react-material-symbol-icons

# pnpm
pnpm add react-material-symbol-icons

Usage

import { MaterialSymbol } from 'react-material-symbol-icons';

function App() {
  return <MaterialSymbol icon="check_circle" />;
}

With all props:

<MaterialSymbol
  icon="settings"
  theme="rounded"
  size={24}
  weight="400"
  filled
  color="#1976d2"
  grade="200"
/>

Props

The MaterialSymbol component extends React.HTMLAttributes<HTMLSpanElement>, so it accepts all standard <span> attributes (className, style, onClick, aria-label, etc.) in addition to:

Prop	Type	Default	Description
icon	IconKey	(required)	Material Symbol icon name
filled	boolean	false	Whether the icon is filled
theme	'outlined' | 'rounded' | 'sharp'	'outlined'	Icon theme variant
weight	'100' | '200' | '300' | '400' | '500' | '600' | '700'	'500'	Font weight
size	'20' | '24' | '40' | '48' | number	'48'	Icon size in pixels
color	CSSProperties['color']	'currentColor'	Icon color
grade	'-25' | '0' | '200'	'0'	Icon grade (emphasis level)

TypeScript

The IconKey type is exported for type-safe icon name usage:

import type { IconKey } from 'react-material-symbol-icons';

const icon: IconKey = 'check_circle';

Contributing

Feel like contributing? That's awesome! We have a contributing guide to help guide you.

License

MIT