free 3d clay icons

Free clay icons, soft 3D

Short answer

The Clay style turns all 734 icons into soft, rounded objects that look sculpted from matte clay: puffy forms, soft studio light and warm colour. It is all vector shapes and gradients, so it stays sharp at any size. Click an icon below to copy it as a transparent PNG, download it or copy the SVG. Free, MIT licensed, no credit needed.

Pick an icon, click to get it

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

Search icons

Any colour

Click an icon to copy it as a PNG image. 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

AI products, onboarding and empty states

AI assistants, consumer apps, onboarding flows, friendly SaaS landing pages, empty states and feature cards: the warm, tactile look of AI-era product art. The soft depth reads best from 32 px up; at 16 to 24 px use Line or Solid for the same icon.

Quick facts
Price	Free. No account, no paid tier, no watermark.
Licence	MIT: personal and commercial use, no credit required (licence in plain words).
Icons	734 icons × 34 styles, plus live icons (over 25,000 in all), every style on the same 24 × 24 grid.
Style family	Clay is one of seven 3D & glass styles (with Glass, Luxe, Skeuo, Liquid, Chrome, Soft 3D): rich looks whose colours, gradient stops included, are role-named CSS variables, so one palette recolours them all. See every Clay icon.
Not a render	Real vectors with soft gradients: no images or blur filters, so it stays crisp and small

sparkles icon rocket icon heart icon gift icon lightbulb icon bot icon

FAQ

Questions people ask

Are these 3D renders?

No. Each icon is flat vector layers and soft gradients drawn to read as matte clay, so it stays sharp, small and editable in Figma, Illustrator or Canva.

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-clay-c1 or --with-clay-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