Material SymbolsIcons
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.
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
search - 2
home-rounded - 3
home-outline-rounded - 4
check-rounded - 5
lock - 6
search-rounded - 7
person - 8
upload - 9
mail - 10
settings - 11
problem - 12
home-outline - 13
menu-rounded - 14
pentagon - 15
cloud-outline - 16
star-rounded - 17
star - 18
close-rounded - 19
mail-outline - 20
download
Recently added in Material Symbols
75 icons added on 27 September 2026. See every pack's latest additions
chat-display
closed-caption-display
display-group
import-spark
markdown-spark
apps-plus
document-share
edit-line
filter-cancel
filter-plus
function-search
group-eye
markdown-convert
markdown-document
sheets-column-swap
Showing 15 of 75 new icons. Search the browser above to find the rest.
Copy & download Material Symbols icons
Click any icon above to open the detail panel. Four export formats are available instantly, no sign-up required.
Raw vector markup. Paste directly into HTML or React components. Scales to any size without quality loss.
React-ready component. Drop into any React or Next.js project. Works with shadcn/ui, Radix, and Tailwind CSS.
Raster export at 1×, 2× and 3× for email templates, Figma imports, app assets, and Open Graph images.
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, installand 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.
How to use Material Symbols icons
License SPDX
Apache-2.0
Grid Size
24px
Sample Icons
downloading, privacy-tip, filter-drama-outline
React
// 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
<!-- 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
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
Frequently Asked Questions
What is the difference between Material Symbols and the old Material Icons?
How do I add Material Symbols to a web page?
<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?
.material-symbols-outlined { font-variation-settings: "FILL" 1, "wght" 400; }. FILL 0/1 toggles outline/filled, wght 100–700 sets weight.