Icons

Icons communicate actions, status, and provide visual interest.

Import

Import individual icons for optimal tree-shaking:

import { Home, Settings, Search } from '@md3-react/icons';

Basic Usage

Live Editor

<Demo>
  <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
    <Home />
    <Settings />
    <Search />
    <Favorite />
    <Star />
  </div>
</Demo>

Result

Loading...

Sizes

Adjust icon size using the size prop:

Live Editor

<Demo>
  <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
    <Home size={16} />
    <Home size={24} />
    <Home size={32} />
    <Home size={48} />
  </div>
</Demo>

Result

Loading...

Colors

Icons inherit the current text color, or you can customize with CSS:

Live Editor

<Demo>
  <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
    <Favorite style={{ color: '#E91E63' }} />
    <Star style={{ color: '#FFC107' }} />
    <Check style={{ color: '#4CAF50' }} />
    <Error style={{ color: '#F44336' }} />
    <Mail style={{ color: '#2196F3' }} />
  </div>
</Demo>

Result

Loading...

With Accessible Title

Add a title for screen readers:

Live Editor

<Demo>
  <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
    <Settings title="Open settings" />
    <Notifications title="View notifications" />
    <Person title="User profile" />
  </div>
</Demo>

Result

Loading...

Available Icons

Live Editor

<Demo>
  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '80px' }}>
      <Add />
      <span style={{ fontSize: '12px', marginTop: '4px' }}>Add</span>
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '80px' }}>
      <ArrowBack />
      <span style={{ fontSize: '12px', marginTop: '4px' }}>ArrowBack</span>
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '80px' }}>
      <Check />
      <span style={{ fontSize: '12px', marginTop: '4px' }}>Check</span>
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '80px' }}>
      <Close />
      <span style={{ fontSize: '12px', marginTop: '4px' }}>Close</span>
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '80px' }}>
      <DarkMode />
      <span style={{ fontSize: '12px', marginTop: '4px' }}>DarkMode</span>
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '80px' }}>
      <Delete />
      <span style={{ fontSize: '12px', marginTop: '4px' }}>Delete</span>
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '80px' }}>
      <Edit />
      <span style={{ fontSize: '12px', marginTop: '4px' }}>Edit</span>
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '80px' }}>
      <Error />
      <span style={{ fontSize: '12px', marginTop: '4px' }}>Error</span>
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '80px' }}>
      <Favorite />
      <span style={{ fontSize: '12px', marginTop: '4px' }}>Favorite</span>
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '80px' }}>
      <Home />
      <span style={{ fontSize: '12px', marginTop: '4px' }}>Home</span>
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '80px' }}>
      <Mail />
      <span style={{ fontSize: '12px', marginTop: '4px' }}>Mail</span>
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '80px' }}>
      <Menu />
      <span style={{ fontSize: '12px', marginTop: '4px' }}>Menu</span>
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '80px' }}>
      <Notifications />
      <span style={{ fontSize: '12px', marginTop: '4px' }}>Notifications</span>
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '80px' }}>
      <Person />
      <span style={{ fontSize: '12px', marginTop: '4px' }}>Person</span>
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '80px' }}>
      <Search />
      <span style={{ fontSize: '12px', marginTop: '4px' }}>Search</span>
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '80px' }}>
      <Settings />
      <span style={{ fontSize: '12px', marginTop: '4px' }}>Settings</span>
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '80px' }}>
      <Share />
      <span style={{ fontSize: '12px', marginTop: '4px' }}>Share</span>
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '80px' }}>
      <Star />
      <span style={{ fontSize: '12px', marginTop: '4px' }}>Star</span>
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '80px' }}>
      <Visibility />
      <span style={{ fontSize: '12px', marginTop: '4px' }}>Visibility</span>
    </div>
  </div>
</Demo>

Result

Loading...

Props

Prop	Type	Default	Description
size	number | string	24	Icon size in pixels
title	string	-	Accessible title for screen readers

Plus all standard <svg> HTML attributes.

Accessibility

• Icons are aria-hidden by default (decorative)
• When title is provided, icons become accessible with role="img"