Material Design Icons

Material Design Icons is the official icon library from Google, providing a comprehensive set of icons that follow Material Design guidelines.

Installation

Material Design icons are included with React Icons:

npm install react-icons

Import Path

import { MdHome, MdSettings, MdSearch } from 'react-icons/md';

Library Details

Material Design Icons

Icon Count: 4,341Version: 4.0.0Import: react-icons/mdPrefix: Md, MdOutline

License & Project

License: Apache License 2.0Project: google.github.io/material-design-iconsSource: Google

Usage Examples

Basic Usage

import { MdHome, MdSettings, MdSearch } from 'react-icons/md';

function App() {
  return (
    <div>
      <MdHome />
      <MdSettings />
      <MdSearch />
    </div>
  );
}

Icon Variants

Material Design icons come in two main variants:

Filled (Default)
Outlined

import {
  MdHome,
  MdFavorite,
  MdAccountCircle,
  MdStar
} from 'react-icons/md';

function FilledIcons() {
  return (
    <div>
      <MdHome />           {/* Filled home */}
      <MdFavorite />       {/* Filled heart */}
      <MdAccountCircle />  {/* Filled account */}
      <MdStar />           {/* Filled star */}
    </div>
  );
}

Default Material Design icons use the Md prefix and are filled.

import {
  MdOutlineHome,
  MdOutlineFavoriteBorder,
  MdOutlineAccountCircle,
  MdOutlineStarBorder
} from 'react-icons/md';

function OutlinedIcons() {
  return (
    <div>
      <MdOutlineHome />           {/* Outlined home */}
      <MdOutlineFavoriteBorder /> {/* Outlined heart */}
      <MdOutlineAccountCircle />  {/* Outlined account */}
      <MdOutlineStarBorder />     {/* Outlined star */}
    </div>
  );
}

Outlined icons use the MdOutline prefix.

import {
  MdHome,
  MdExplore,
  MdNotifications,
  MdSettings,
  MdAccountCircle,
  MdMenu,
  MdArrowBack
} from 'react-icons/md';

function Navigation() {
  return (
    <nav>
      <button><MdMenu /> Menu</button>
      <button><MdArrowBack /> Back</button>
      <a href="#"><MdHome /> Home</a>
      <a href="#"><MdExplore /> Explore</a>
      <a href="#"><MdNotifications /> Notifications</a>
      <a href="#"><MdSettings /> Settings</a>
      <a href="#"><MdAccountCircle /> Profile</a>
    </nav>
  );
}

Action Icons

import {
  MdAdd,
  MdEdit,
  MdDelete,
  MdSave,
  MdDownload,
  MdShare,
  MdPrint,
  MdSearch,
  MdFilter,
  MdSort
} from 'react-icons/md';

function Actions() {
  return (
    <div className="actions">
      <button><MdAdd /> Add</button>
      <button><MdEdit /> Edit</button>
      <button><MdDelete /> Delete</button>
      <button><MdSave /> Save</button>
      <button><MdDownload /> Download</button>
      <button><MdShare /> Share</button>
      <button><MdPrint /> Print</button>
      <button><MdSearch /> Search</button>
      <button><MdFilter /> Filter</button>
      <button><MdSort /> Sort</button>
    </div>
  );
}

Common Use Cases

Forms
Status & Alerts
Data Display
Media Controls

import {
  MdEmail,
  MdLock,
  MdVisibility,
  MdVisibilityOff,
  MdCheckCircle,
  MdError
} from 'react-icons/md';

function LoginForm() {
  const [showPassword, setShowPassword] = React.useState(false);
  
  return (
    <form>
      <div className="input-group">
        <MdEmail />
        <input type="email" placeholder="Email" />
        <MdCheckCircle className="text-green-500" />
      </div>
      
      <div className="input-group">
        <MdLock />
        <input 
          type={showPassword ? 'text' : 'password'} 
          placeholder="Password" 
        />
        <button onClick={() => setShowPassword(!showPassword)}>
          {showPassword ? <MdVisibilityOff /> : <MdVisibility />}
        </button>
      </div>
      
      <button type="submit">Login</button>
    </form>
  );
}

import {
  MdCheckCircle,
  MdError,
  MdWarning,
  MdInfo
} from 'react-icons/md';

function Alerts() {
  return (
    <div>
      <div className="alert success">
        <MdCheckCircle />
        <span>Operation completed successfully!</span>
      </div>
      
      <div className="alert error">
        <MdError />
        <span>An error occurred. Please try again.</span>
      </div>
      
      <div className="alert warning">
        <MdWarning />
        <span>This action cannot be undone.</span>
      </div>
      
      <div className="alert info">
        <MdInfo />
        <span>New features are available.</span>
      </div>
    </div>
  );
}

import {
  MdViewList,
  MdViewModule,
  MdViewQuilt,
  MdTableChart,
  MdBarChart,
  MdPieChart
} from 'react-icons/md';

function ViewControls() {
  return (
    <div className="view-controls">
      <button><MdViewList /> List</button>
      <button><MdViewModule /> Grid</button>
      <button><MdViewQuilt /> Masonry</button>
      <button><MdTableChart /> Table</button>
      <button><MdBarChart /> Bar Chart</button>
      <button><MdPieChart /> Pie Chart</button>
    </div>
  );
}

import {
  MdPlayArrow,
  MdPause,
  MdStop,
  MdSkipNext,
  MdSkipPrevious,
  MdVolumeUp,
  MdVolumeOff,
  MdFullscreen
} from 'react-icons/md';

function MediaPlayer() {
  return (
    <div className="media-controls">
      <button><MdSkipPrevious /></button>
      <button><MdPlayArrow /></button>
      <button><MdPause /></button>
      <button><MdStop /></button>
      <button><MdSkipNext /></button>
      <button><MdVolumeUp /></button>
      <button><MdFullscreen /></button>
    </div>
  );
}

Styling Material Design Icons

Size and Color

import { MdFavorite } from 'react-icons/md';
import { IconContext } from 'react-icons';

function StyledIcons() {
  return (
    <div>
      {/* Inline styles */}
      <MdFavorite 
        style={{ 
          color: '#e91e63', 
          fontSize: '32px' 
        }} 
      />
      
      {/* CSS classes (Tailwind) */}
      <MdFavorite className="text-pink-500 text-4xl" />
      
      {/* IconContext for multiple icons */}
      <IconContext.Provider 
        value={{ 
          color: '#2196f3', 
          size: '1.5em',
          className: 'material-icon'
        }}
      >
        <MdFavorite />
        <MdStar />
      </IconContext.Provider>
    </div>
  );
}

Material Design Colors

import { MdInfo, MdCheckCircle, MdWarning, MdError } from 'react-icons/md';

function MaterialColors() {
  return (
    <div>
      <MdInfo style={{ color: '#2196F3' }} />       {/* Blue */}
      <MdCheckCircle style={{ color: '#4CAF50' }} /> {/* Green */}
      <MdWarning style={{ color: '#FF9800' }} />     {/* Orange */}
      <MdError style={{ color: '#F44336' }} />       {/* Red */}
    </div>
  );
}

Icon Naming Convention

Material Design icons follow these patterns:

Filled icons: Md[IconName] (e.g., MdHome, MdStar)
Outlined icons: MdOutline[IconName] (e.g., MdOutlineHome, MdOutlineStar)

All icon names use PascalCase and remove hyphens from the original Material Design names:

account-circle → MdAccountCircle
favorite-border → MdOutlineFavoriteBorder

Popular Material Design Icons

MdHome - Home
MdMenu - Menu/hamburger
MdArrowBack - Back arrow
MdArrowForward - Forward arrow
MdClose - Close/X
MdMoreVert - Vertical menu (⋮)
MdMoreHoriz - Horizontal menu (⋯)

Actions

MdAdd - Add/plus
MdEdit - Edit/pencil
MdDelete - Delete/trash
MdSave - Save
MdSearch - Search
MdRefresh - Refresh
MdShare - Share

Content

MdContentCopy - Copy
MdContentCut - Cut
MdContentPaste - Paste
MdSend - Send
MdDrafts - Drafts
MdArchive - Archive

Communication

MdEmail - Email
MdChat - Chat
MdCall - Phone call
MdVideocam - Video camera
MdMessage - Message

Integration with Material-UI

Material Design icons work seamlessly with Material-UI (MUI):

import { Button, IconButton } from '@mui/material';
import { MdDelete, MdEdit, MdAdd } from 'react-icons/md';

function MUIIntegration() {
  return (
    <div>
      <Button startIcon={<MdAdd />}>
        Add Item
      </Button>
      
      <IconButton>
        <MdEdit />
      </IconButton>
      
      <IconButton color="error">
        <MdDelete />
      </IconButton>
    </div>
  );
}

Resources

Material Design Icons

Browse the official Material Design icon gallery

Material Design Guidelines

Learn about Material Design icon principles

Search All Icons

Search Material Design icons in React Icons preview

All Libraries

Explore other icon libraries

Get Started

Core Concepts

Guides

Icon Libraries

Material Design Icons

Installation

Import Path

Library Details

Material Design Icons

License & Project

Usage Examples

Basic Usage

Icon Variants

Navigation Icons

Action Icons

Common Use Cases

Styling Material Design Icons

Size and Color

Material Design Colors

Icon Naming Convention

Popular Material Design Icons

Navigation

Actions

Content

Communication

Integration with Material-UI

Resources

Material Design Icons

Material Design Guidelines

Search All Icons

All Libraries

Build docs developers (and LLMs) love

Get Started

Core Concepts

Guides

Icon Libraries

​Installation

​Import Path

​Library Details

Material Design Icons

License & Project

​Usage Examples

​Basic Usage

​Icon Variants

​Navigation Icons

​Action Icons

​Common Use Cases

​Styling Material Design Icons

​Size and Color

​Material Design Colors

​Icon Naming Convention

​Popular Material Design Icons

​Navigation

​Actions

​Content

​Communication

​Integration with Material-UI

​Resources

Material Design Icons

Material Design Guidelines

Search All Icons

All Libraries

Build docs developers (and LLMs) love

Installation

Import Path

Library Details

Usage Examples

Basic Usage

Icon Variants

Navigation Icons

Action Icons

Common Use Cases

Styling Material Design Icons

Size and Color

Material Design Colors

Icon Naming Convention

Popular Material Design Icons

Navigation

Actions

Content

Communication

Integration with Material-UI

Resources