Material Design Icons

Use 4,300+ Material Design icons from Google in your React application

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,341

Version: 4.0.0

Import: react-icons/md

Prefix: Md, MdOutline

License & Project

License: Apache License 2.0

Project: google.github.io/material-design-icons

Source: 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)

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.

Outlined

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.

Navigation Icons

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

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>
  );
}

Status & Alerts

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>
  );
}

Data Display

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>
  );
}

Media Controls

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

Navigation

• 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