Browse icons

free liquid glass icons

Free liquid glass icons

Short answer

The Liquid style makes all 734 icons from clear liquid glass that bends the light: rims of light, refracted colour and soft reflections, the newest look in interface design. Click an icon below to copy the SVG, copy a PNG or download one. Free, MIT licensed, no credit needed.

Pick an icon, click to get it

A starter set for liquid glass icons. Search to find any of all 734.

Click an icon to copy it as SVG. Its name opens its page; opens it in the studio.

Want to change it first? Every icon has its own page with all 34 styles and every format, and a studio for its colours, stroke and size.

Browse all 734 icons Open the icon studio

Where they shine

Modern app UIs and hero art

Modern OS-style interfaces, product launches, premium apps, dashboards and hero art. Clear glass shows off what is behind it, so it looks best on colour, photos and dark mode.

Quick facts
PriceFree. No account, no paid tier, no watermark.
LicenceMIT: personal and commercial use, no credit required (licence in plain words).
Icons734 icons × 34 styles, plus live icons (over 25,000 in all), every style on the same 24 × 24 grid.
Style familyLiquid is one of seven 3D & glass styles (with Glass, Luxe, Skeuo, Clay, Chrome, Soft 3D): rich looks whose colours, gradient stops included, are role-named CSS variables, so one palette recolours them all. See every Liquid icon.
Liquid or Glass?Liquid is clear and refractive; Glass is soft and frosted
home iconsearch iconsettings iconuser iconbell iconmail icon

FAQ

Questions people ask

Is this Apple’s Liquid Glass?

No. Liquid glass here names a look, and every icon is drawn from scratch for with icons from plain vector shapes and gradients. Nothing is copied from any operating system or other icon set.

Do the gradients survive copy and paste?

Yes. Each gradient sits inside the SVG with its own id, and the site and the packages make those ids unique for every icon on a page, so two icons never borrow each other’s colours. A downloaded .svg file has its colours baked in, ready for Figma, Illustrator or Canva.

Can I change the colours?

Yes. Pick a palette in the icon editor and every layer and gradient follows. On a website each colour is a CSS variable like --with-liquid-c1 or --with-liquid-accent, and the gradient stops read the same variables. Developer docs.

Can I use them commercially?

Yes, MIT licensed and free, with no credit required. Licence.

Find your icon in seconds

734 free icons, 34 styles, no account. Copy, download or drag them into your work.

Browse all icons