Material Design Icons Icons

Browse 7447 free Material Design Icons SVG icons. Download SVG, copy as JSX, PNG or Base64. Apache 2.0 licensed. Designed by Pictogrammers. Styles: Precise Shapes, Has Padding.

7,447 icons Apache-2.0 Material 24px grid by Pictogrammers
Search icons...

Account / User

account

account-alert

account-alert-outline

account-arrow-down

account-arrow-down-outline

account-arrow-left

account-arrow-left-outline

account-arrow-right

account-arrow-right-outline

account-arrow-up

account-arrow-up-outline

account-badge

account-badge-outline

account-box

account-box-edit-outline

account-box-minus-outline

account-box-multiple

account-box-multiple-outline

account-box-outline

account-box-plus-outline

account-cancel

account-cancel-outline

account-card

account-card-outline

account-cash

account-cash-outline

account-check

account-check-outline

account-child

account-child-circle

account-child-outline

account-circle

account-circle-outline

account-clock

account-clock-outline

account-cog

account-cog-outline

account-convert

account-convert-outline

account-cowboy-hat

account-cowboy-hat-outline

account-credit-card

account-credit-card-outline

account-details

account-details-outline

account-edit

account-edit-outline

account-eye

account-eye-outline

account-file

account-file-outline

account-file-text

account-file-text-outline

account-filter

account-filter-outline

account-group

account-group-outline

account-hard-hat

account-hard-hat-outline

account-heart

account-heart-outline

account-injury

account-injury-outline

account-key

account-key-outline

account-lock

account-lock-open

account-lock-open-outline

account-lock-outline

account-minus

account-minus-outline

account-multiple

Most popular Material Design Icons icons

What visitors download and copy most from this pack, last 30 days

  1. 1 gift
  2. 2 local-airport
  3. 3 pencil-box
  4. 4 slot-machine
  5. 5 transit-connection-variant
  6. 6 instagram

Copy & download Material Design Icons icons

Click any icon above to open the detail panel. Four export formats are available instantly, no sign-up required.

SVG

Raw vector markup. Paste directly into HTML or React components. Scales to any size without quality loss.

JSX / TSX

React-ready component. Drop into any React or Next.js project. Works with shadcn/ui, Radix, and Tailwind CSS.

PNG

Raster export at 1×, 2× and 3× for email templates, Figma imports, app assets, and Open Graph images.

Base64

Inline data URI, embed icons in CSS background-image, email HTML, or anywhere an image URL is needed.

Works with shadcn/ui

Copy the JSX format and paste directly into any shadcn/ui component. Alternatively, install @mdi/react and use via @iconify/react, fully tree-shakeable, no icon font loading required.

About Material Design Icons

Material Design Icons (MDI) is an enormous community-maintained SVG icon library with 7,400+ icons following Google's Material Design grid, curated and extended by the Pictogrammers community. MDI goes far beyond the official Google Material Symbols set, adding hundreds of unique icons for workflow, brand logos, specialized UI, and niche domains not covered by Google's catalog. MIT licensed and free for commercial use. Icons are optimised for 24px display with 1px clear-space. The React integration (@mdi/react + @mdi/js) ships tree-shakeable individual SVG path data: only imported icons reach the bundle. Search all MDI SVG icons, copy paths or complete SVG, export as JSX, or download as PNG. Compared with Google Material Symbols, MDI provides more icons in static SVG format, preferable when you need broad coverage without variable font setup. Widely used in open-source dashboards, Vue.js admin templates, Laravel projects, and full-stack frameworks.

Created By

Pictogrammers Visit Website

License

Apache 2.0 View License

Features & Tags

Precise Shapes Has Padding

Pack Details

Color Support

Monochrome

Category

Material

In 15 collections

Material Design Social Media E-Commerce & Shopping Arrow – Chevrons, Pointers & Direction File Type & Document Communication & Messaging Map & Location Transport & Vehicle Food & Drink Education & Learning Hand Gesture Accessibility SVG for Astro SVG for Vue.js SVG for Next.js

How to use Material Design Icons icons

Package

@mdi/react, @mdi/js

License SPDX

Apache-2.0

Grid Size

24px

Sample Icons

account-check, bell-alert-outline, calendar-edit

Install

bash 
npm install @mdi/react @mdi/js

React

tsx 
import Icon from '@mdi/react';
import { mdiMagnify, mdiHome, mdiCog } from '@mdi/js';

export default function App() {
  return <Icon path={mdiMagnify} size={1} />;
}

HTML / CDN

html 
<!-- CDN (icon font): requires @mdi/font -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font/css/materialdesignicons.min.css" />
<span class="mdi mdi-magnify"></span>

Via Iconify · any framework

tsx 
import { Icon } from '@iconify/react';

export default function App() {
  return <Icon icon="mdi:icon-name" width={24} />;
}

Package stats

Build-time npm metadata cached weekly • Last refresh Aug 13, 2026

@mdi/react

React Dist for Material Design Icons

v1.6.1
Score 44%
Popularity 21%
Quality 84%
Maintenance 35%

License

MIT

Weekly downloads

180.5K

Monthly downloads

712.1K

Total downloads

9.7M

Unpacked size

33 KB

Last published

Jul 22, 2022

Registry updated

Aug 13, 2022

npm Repository Homepage

@mdi/js

Dist for Material Design Icons for JS/TypeScript

v7.4.47
Score 59%
Popularity 25%
Quality 51%
Maintenance 100%

License

Apache-2.0

Weekly downloads

556.7K

Monthly downloads

2.2M

Total downloads

26.9M

Unpacked size

6.3 MB

Last published

Dec 27, 2023

Registry updated

Dec 27, 2023

npm Repository Homepage

Material Design Icons version history

Material Design Icons has not published a new npm release in over a year. The latest version, v1.6.1, was released on Jul 22, 2022.

Version Released
v1.6.1 Jul 22, 2022
v1.6.0 Apr 16, 2022
v1.5.0 Mar 30, 2021
v1.4.0 Apr 1, 2020
v1.3.0 Feb 17, 2020
v1.2.1 Jul 7, 2019
v1.2.0 Jul 3, 2019
v1.1.1 May 11, 2019
v1.1.0 Oct 20, 2018
v1.0.1 Sep 6, 2018
v1.0.0 Aug 30, 2018
v0.8.1 Aug 14, 2018
v0.8.0 Aug 10, 2018

Source: npm registry data for @mdi/react, refreshed weekly.

Compare Material Design Icons with similar icon packs

Material Symbols Fluent UI Icons Lucide

Frequently Asked Questions

What is the difference between MDI and Google Material Symbols?
MDI is a community extension covering 7,400+ icons beyond Google's official set. Material Symbols is the official Google set (~3,000 icons) with variable font support. MDI follows Material Design principles but is independently maintained by Pictogrammers.
How do I use Material Design Icons in React?
Install npm install @mdi/react @mdi/js, then: import Icon from "@mdi/react"; import { mdiSearch } from "@mdi/js"; and render <Icon path={mdiSearch} size={1} />.
Which pack is recommended: MDI or Material Symbols?
For web apps, Material Symbols is preferred for its variable font support and official Google backing. MDI is better if you need icons beyond the official Google set or prefer SVG components.
How many icons are in Material Design Icons?
Material Design Icons contains 7,447 SVG icons in the Material category, designed on a 24px grid.
How often is Material Design Icons updated?
Material Design Icons has not published a new npm release in over a year. The latest version, v1.6.1, was released on Jul 22, 2022. See the full version history below.