Material Design Iconic Font Icons

Browse 777 free Material Design Iconic Font SVG icons. Download SVG, copy as JSX, PNG or Base64. Open Font License licensed. Designed by MDI Community.

777 icons OFL-1.1 by MDI Community
Search icons...

More SVG Icons

3d-rotation

500px

8tracks

account

account-add

account-box

account-box-mail

account-box-o

account-box-phone

account-calendar

account-circle

account-o

accounts

accounts-add

accounts-alt

accounts-list

accounts-list-alt

accounts-outline

airline-seat-flat

airline-seat-flat-angled

airline-seat-individual-suite

airline-seat-legroom-extra

airline-seat-legroom-normal

airline-seat-legroom-reduced

airline-seat-recline-extra

airline-seat-recline-normal

airplane

airplane-off

airplay

alarm

alarm-check

alarm-off

alarm-plus

alarm-snooze

album

alert-circle

alert-circle-o

alert-octagon

alert-polygon

alert-triangle

amazon

android

android-alt

apple

apps

archive

arrow-left

arrow-left-bottom

arrow-merge

arrow-missed

arrow-right

arrow-right-top

arrow-split

arrows

aspect-ratio

aspect-ratio-alt

assignment

assignment-account

assignment-alert

assignment-check

assignment-o

assignment-return

assignment-returned

attachment

attachment-alt

audio

badge-check

balance

balance-wallet

battery

battery-alert

battery-flash

Copy & download Material Design Iconic Font 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 and use via @iconify/react, fully tree-shakeable, no icon font loading required.

About Material Design Iconic Font

Created By

MDI Community Visit Website

License

Open Font License

Pack Details

Color Support

Monochrome

How to use Material Design Iconic Font icons

License SPDX

OFL-1.1

Sample Icons

alarm-snooze, cloud-off, library

Via Iconify · React

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

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

Via Iconify · HTML

html 
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="zmdi:icon-name" width="24"></iconify-icon>

Frequently Asked Questions

Is Material Design Iconic Font free for commercial use?
Yes. Material Design Iconic Font is licensed under Open Font License, free for personal and commercial projects.
How do I download Material Design Iconic Font SVG icons?
Click any icon in the browser above to open the detail panel. Choose raw SVG code to copy, download as SVG or PNG, export as a React JSX component, or get a Base64 data URI, all formats free, no sign-up required.
How many icons are in Material Design Iconic Font?
Material Design Iconic Font contains 777 SVG icons.
Can I change the color of Material Design Iconic Font icons?
Yes. Material Design Iconic Font icons are monochrome SVGs that inherit CSS currentColor. Set a color via CSS (color: #0070f3), a Tailwind class (text-blue-500), or pass a fill / stroke attribute directly on the SVG.
Can I use Material Design Iconic Font with React, Next.js or shadcn/ui?
Yes. Copy the JSX export from any icon's detail panel and paste it directly into your component. For ongoing use, install @iconify-json/zmdi and use it via @iconify/react, fully tree-shakeable, compatible with shadcn/ui, Tailwind CSS, Radix UI, and any React-based framework.