Material Symbols Icons

Browse 15009 free Material Symbols SVG icons. Download SVG, copy as JSX, PNG or Base64. Apache 2.0 licensed. Designed by Google. Styles: Has Padding.

15,009 icons Apache-2.0 Material 24px grid by Google
⌘+F

Copy & download Material Symbols 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 Symbols

Google Material Symbols is the official successor to Material Icons, introducing a variable font system where a single icon file is configured across Fill (solid/outline), Weight (100–700), Grade (visual emphasis), and Optical Size (display vs. compact UI) axes via CSS font-variation-settings. One icon system can cover your entire design token set — from dense 20px inline labels to 48px hero illustrations. The library contains 3,000+ icons across five themes and is hosted on Google Fonts for zero-install CDN delivery. Individual SVGs are available here for copy-paste, JSX export, and PNG download. Apache 2.0 licensed — free for commercial use. Compared with the older Material Icons (MDI), Material Symbols is the active development line — all new Google UI icons ship here first. The variable font approach reduces icon font payload significantly. Ideal for Android app interfaces, Google Workspace-style products, Flutter web apps, and enterprise dashboards where icon expression adapts to multiple visual states.

Created By

Google Visit Website

License

Apache 2.0 View License

Features & Tags

Has Padding

Pack Details

Color Support

Monochrome

Category

Material

In 2 collections

Material Design SVG for Figma

How to use Material Symbols icons

License SPDX

Apache-2.0

Grid Size

24px

Sample Icons

downloading, privacy-tip, filter-drama-outline

React

tsx 
// Copy individual SVGs from AllSVGIcons, or use Iconify:
import { Icon } from '@iconify/react';

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

HTML / CDN

html 
<!-- Google Fonts CDN (Outlined style) -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />

<!-- Control weight, fill, grade, size via CSS -->
<style>
  .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  }
</style>

<span class="material-symbols-outlined">search</span>

Via Iconify · any framework

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

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

Compare Material Symbols with similar icon packs

Material Design Icons (MDI) Fluent UI Icons

Frequently Asked Questions

Material Symbols (2021) are the successor. They use variable font technology supporting fill, weight, grade, and optical size via CSS. Material Icons is the original static set — still valid but no longer receiving new icons.

Add: <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined">, then use: <span class="material-symbols-outlined">search</span>. Or copy individual SVGs here.

Use CSS: .material-symbols-outlined { font-variation-settings: "FILL" 1, "wght" 400; }. FILL 0/1 toggles outline/filled, wght 100–700 sets weight.