Toggle menu
Material Symbols LightIcons
Browse 15793 free Material Symbols Light SVG icons. Download SVG, copy as JSX, PNG or Base64. Apache 2.0 licensed. Designed by Google. Styles: Precise Shapes, Has Padding.
Most popular Material Symbols Light icons
What visitors download and copy most from this pack, last 30 days
- 1
home-outline-rounded
- 2
search
- 3
home-outline
- 4
home-rounded
- 5
mail-outline
- 6
search-rounded
- 7
star-outline-rounded
- 8
download
- 9
rectangle-outline
- 10
keyboard-outline
- 11
database-outline
- 12
info-outline
- 13
language
- 14
travel
- 15
cleaning-outline-rounded
- 16
download-rounded
- 17
menu
- 18
shield-outline
- 19
shopping-bag-outline
- 20
circle-outline
Recently added in Material Symbols Light
20 icons added on 19 October 2026. See every pack's latest additions
looks-0
looks-7
looks-8
looks-9
Showing 4 of 20 new icons. Search the browser above to find the rest.
Copy & download Material Symbols Light 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 Light
How to use Material Symbols Light icons
License SPDX
Apache-2.0
Grid Size
24px
Sample Icons
downloading, privacy-tip, filter-drama-outline
Via Iconify · React
import { Icon } from '@iconify/react';
export default function App() {
return <Icon icon="material-symbols-light:icon-name" width={24} />;
}Via Iconify · HTML
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="material-symbols-light:icon-name" width="24"></iconify-icon>Frequently Asked Questions
Is Material Symbols Light free for commercial use?
How do I download Material Symbols Light SVG icons?
How many icons are in Material Symbols Light?
Can I change the color of Material Symbols Light icons?
currentColor. Set a color via CSS (color: #0070f3), a Tailwind class (text-blue-500), or pass a fill / stroke attribute directly on the SVG.What styles does Material Symbols Light offer?
Is Material Symbols Light organized into categories?
Which icon collections include Material Symbols Light?
Can I use Material Symbols Light with React, Next.js or shadcn/ui?
@iconify-json/material-symbols-light and use it via @iconify/react, fully tree-shakeable, compatible with shadcn/ui, Tailwind CSS, Radix UI, and any React-based framework.