Material Design Icons

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.

How to use Material Design Icons icons

npm install @mdi/react @mdi/js

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

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

<!-- 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>

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

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

Compare Material Design Icons with similar icon packs