Icons
15,969Icons
Apache 2.0License
LightStyle
24×24Grid

Material Symbols Light

15,969 Apache 2.0-licensed light (300 weight) icons on a 24×24 grid. Light-weight icons work particularly well on large type, in spacious layouts, and in products with an editorial or premium feel.

About Material Symbols Light

What Symbols Light is

Material Symbols Light is the 300-weight cut of Google's Material Symbols, containing 15,969 icons. It takes the variable-font icon system and fixes the weight at its light end, producing a set tuned for interfaces where a standard-weight icon would look heavy.

Light-weight icons work particularly well on large type, in spacious layouts, and in products with an editorial or premium feel. They are less suited to dense toolbars and small text, where thin strokes lose contrast against the background.

IconStash indexes the complete Material Symbols Light collection. You can search it alongside 27 other libraries, preview any icon at any size and colour, and export SVG, PNG, React JSX, Vue, CSS, or an SVG sprite without installing a package or creating an account.

Install and use Symbols Light

React

npm install @material-symbols/svg-300

The official package ships each icon as a tree-shakeable component, so bundlers only include the icons you actually import. Open any Symbols Light icon on IconStash and the Code tab shows that icon's exact import statement and JSX.

Plain SVG and other frameworks

You do not have to install anything. Every Symbols Light page lets you copy the raw SVG markup and paste it inline, which avoids a dependency entirely and gives you full control over colour, size, and stroke width.

IconStash also exports PNG at six sizes, Vue and CSS snippets, and SVG sprites — all generated in the browser from the original vector.

When to choose Symbols Light

Good fit

Marketing sites, editorial layouts, premium SaaS products, and any interface with generous spacing and larger type where a lighter icon weight looks more refined.

Consider alternatives

If you want the full weight range rather than a single light cut, use Material Symbols and set the Weight axis yourself. For dense interfaces, the standard Material Icons weight holds up better.

Licensing

Apache 2.0 with an express patent grant. Free for commercial use; the icons should not be used to imply Google endorsement.

Symbols Light compared to other libraries

Popular Symbols Light icons

Browse Symbols Light by category

Frequently asked questions

What is Material Symbols Light?

Material Symbols Light is the 300-weight cut of Google's Material Symbols, containing 15,969 icons. It takes the variable-font icon system and fixes the weight at its light end, producing a set tuned for interfaces where a standard-weight icon would look heavy.

Is Material Symbols Light free for commercial use?

Yes. Material Symbols Light is released under Apache 2.0, which permits commercial use, modification, and distribution and includes an express patent grant from the licensor. Attribution is not required for ordinary use, but you should not use the icons in a way that implies the licensor endorses your product.

How do I use Symbols Light icons in React?

Install the package with npm install @material-symbols/svg-300, then import icons as components. Every Symbols Light page on IconStash shows the exact import statement and usage snippet for that specific icon in the Code tab, so you can copy working code without checking the docs. Tree-shakeable packages mean your bundler only includes the icons you actually import.

Can I download Symbols Light icons as PNG?

Yes. Open any Symbols Light icon on IconStash and use the Download PNG button to export at 16, 32, 64, 128, 256, or 512 pixels. The PNG is generated client-side from the original vector, so it stays crisp at every size. You can also copy the raw SVG markup, export a React component, or build an SVG sprite without installing anything.

When should I use light-weight icons?

When your interface has generous spacing, larger type, and a calm visual tone — light icons look refined there and heavy icons look clumsy. Avoid them in dense toolbars, small tables, or anywhere icons sit beside 12–13px text, because thin strokes lose contrast and become hard to scan.

How is Symbols Light different from Material Symbols?

Symbols Light is the 300-weight rendering of the Material Symbols set, fixed at one weight and containing 15,969 icons. Full Material Symbols gives you the same icons as a variable font with a Weight axis you can set anywhere from 100 to 700 — use that if you need flexibility rather than one specific weight.

Explore other icon libraries