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,611 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

Most popular Material Symbols icons

What visitors download and copy most from this pack, last 30 days

  1. 1 search
  2. 2 search-rounded
  3. 3 settings
  4. 4 history-rounded
  5. 5 home
  6. 6 home-rounded
  7. 7 star
  8. 8 star-rounded
  9. 9 history
  10. 10 home-outline-rounded
  11. 11 download-rounded
  12. 12 lock
  13. 13 mail-outline
  14. 14 share
  15. 15 close-rounded
  16. 16 star-outline
  17. 17 check-rounded
  18. 18 download
  19. 19 trophy-outline
  20. 20 wifi-rounded

Recently added in Material Symbols

20 icons added on 30 August 2026. See every pack's latest additions

  • speech-to-text-2 icon from Material Symbols speech-to-text-2
  • speech-to-text-2-outline icon from Material Symbols speech-to-text-2-outline
  • speech-to-text-2-outline-rounded icon from Material Symbols speech-to-text-2-outline-rounded
  • speech-to-text-2-outline-sharp icon from Material Symbols speech-to-text-2-outline-sharp
  • speech-to-text-2-rounded icon from Material Symbols speech-to-text-2-rounded
  • speech-to-text-2-sharp icon from Material Symbols speech-to-text-2-sharp
  • bullet-chart icon from Material Symbols bullet-chart
  • bullet-chart-outline icon from Material Symbols bullet-chart-outline
  • bullet-chart-outline-rounded icon from Material Symbols bullet-chart-outline-rounded
  • bullet-chart-rounded icon from Material Symbols bullet-chart-rounded
  • domain-disabled-check icon from Material Symbols domain-disabled-check
  • domain-disabled-check-rounded icon from Material Symbols domain-disabled-check-rounded
  • sim-card-lock icon from Material Symbols sim-card-lock
  • sim-card-lock-outline icon from Material Symbols sim-card-lock-outline
  • sim-card-lock-outline-rounded icon from Material Symbols sim-card-lock-outline-rounded
  • sim-card-lock-outline-sharp icon from Material Symbols sim-card-lock-outline-sharp
  • sim-card-lock-rounded icon from Material Symbols sim-card-lock-rounded
  • sim-card-lock-sharp icon from Material Symbols sim-card-lock-sharp
  • list-2 icon from Material Symbols list-2
  • list-2-rounded icon from Material Symbols list-2-rounded

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,611 SVG icons in the Material category, designed on a 24px grid.