free neo-brutalism icons

Free neo-brutalism icons

Short answer

The Brutal style draws all 734 icons in neo-brutalism: thick black outlines, loud flat colour and a hard offset shadow, raw and confident shapes that pop off the page. 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 neo-brutalism 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.

Where they shine

Startups, portfolios and posters

Indie startups, portfolios, newsletters, posters, Gen Z brands and playful product sites. The hard shadow wants a bold layout around it: chunky borders, flat colour and big type.

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 familyBrutal is one of four Product & brand styles (with Bauhaus, Bento, Dock): rich looks whose colours, gradient stops included, are role-named CSS variables, so one palette recolours them all. See every Brutal icon.
ColourPick a palette and the fills and the shadow follow; on a website each one is a CSS variable

FAQ

Questions people ask

What is neo-brutalism?

A web design trend of thick black borders, loud flat colours, hard drop shadows and visible structure: deliberately raw, but tidy underneath.

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