Material Symbols Icons

Get any Google Material Symbol as a standalone SVG, no variable font setup. Search 3,000+ icons, copy SVG or JSX, download PNG. Apache 2.0 licensed.

15,597 icons Apache-2.0 Material 24px grid by Google
Search icons...

Actions

3d-rotation

3d-rotation-outline-rounded

3d-rotation-rounded

3d-rotation-sharp

accessibility

accessibility-new

accessibility-new-rounded

accessibility-rounded

accessible

accessible-forward

accessible-forward-rounded

accessible-forward-sharp

accessible-rounded

accessible-sharp

account-box

account-box-outline

account-box-outline-sharp

account-box-sharp

account-child

account-child-invert

account-child-invert-rounded

account-child-outline

account-child-outline-rounded

account-child-rounded

account-circle

account-circle-off

account-circle-off-outline

account-circle-off-outline-rounded

account-circle-off-rounded

account-circle-outline

ad

ad-group

ad-group-off

ad-group-off-outline

ad-group-off-outline-rounded

ad-group-off-outline-sharp

ad-group-off-rounded

ad-group-off-sharp

ad-group-outline

ad-group-outline-rounded

ad-group-outline-sharp

ad-group-rounded

ad-group-sharp

ad-off

ad-off-rounded

ad-off-sharp

ad-sharp

add-ad

add-ad-outline

add-ad-outline-rounded

add-ad-outline-sharp

add-ad-rounded

add-ad-sharp

add-alert

add-alert-outline

add-alert-outline-rounded

add-alert-outline-sharp

add-alert-rounded

add-alert-sharp

ads-click

ads-click-rounded

alarm

alarm-add

alarm-add-outline

alarm-add-outline-rounded

alarm-add-rounded

alarm-off

alarm-off-outline

alarm-off-outline-rounded

alarm-off-rounded

alarm-on

alarm-on-outline

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

What is the difference between Material Symbols and the old Material Icons?
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.
How do I add Material Symbols to a web page?
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.
How do I control weight and fill in Material Symbols?
Use CSS: .material-symbols-outlined { font-variation-settings: "FILL" 1, "wght" 400; }. FILL 0/1 toggles outline/filled, wght 100–700 sets weight.
How many icons are in Material Symbols?
Material Symbols contains 15,597 SVG icons in the Material category, designed on a 24px grid.