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.
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.
Raw vector markup. Paste directly into HTML or React components. Scales to any size without quality loss.
React-ready component. Drop into any React or Next.js project. Works with shadcn/ui, Radix, and Tailwind CSS.
Raster export at 1×, 2× and 3× for email templates, Figma imports, app assets, and Open Graph images.
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
License
Features & Tags
Pack Details
Color Support
Monochrome
Category
Material
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
npm install @mdi/react @mdi/jsReact
import Icon from '@mdi/react';
import { mdiMagnify, mdiHome, mdiCog } from '@mdi/js';
export default function App() {
return <Icon path={mdiMagnify} size={1} />;
}HTML / CDN
<!-- 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
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 May 12, 2026
@mdi/react
React Dist for Material Design Icons
License
MIT
Weekly downloads
162.4K
Monthly downloads
657.1K
Total downloads
8.5M
Unpacked size
33 KB
Last published
Jul 22, 2022
Registry updated
Aug 13, 2022
@mdi/js
Dist for Material Design Icons for JS/TypeScript
License
Apache-2.0
Weekly downloads
452.8K
Monthly downloads
1.8M
Total downloads
22.8M
Unpacked size
6.3 MB
Last published
Dec 27, 2023
Registry updated
Dec 27, 2023
Compare Material Design Icons with similar icon packs
Frequently Asked Questions
npm install @mdi/react @mdi/js, then: import Icon from "@mdi/react"; import { mdiSearch } from "@mdi/js"; and render <Icon path={mdiSearch} size={1} />.