free bento grid icons

Free bento grid icons

Short answer

The Bento style sets each of the 734 icons in its own soft tinted tile, like a bento-grid feature card: a ready-made tile that turns every icon into a tidy, colour-coded feature. 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 bento grid icons. Search to find any of all 734.

Search icons

Any colour

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

Feature grids, settings and menus

Bento-grid landing pages, “why us” feature rows, settings screens, app menus, pricing tables and marketing sites. The tile is part of the icon, so a grid of them lines up perfectly with no extra CSS.

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	Bento is one of four Product & brand styles (with Bauhaus, Dock, Brutal): rich looks whose colours, gradient stops included, are role-named CSS variables, so one palette recolours them all. See every Bento icon.
Colour coding	Pick a palette per icon to colour-code a grid, or set the tile colour once in CSS

zap icon shield-check icon globe icon chart-line icon users icon lock icon

FAQ

Questions people ask

What is a bento grid?

A layout of rounded cards in different sizes, like the compartments of a bento box. It became a favourite for landing pages and feature overviews, and each card usually leads with an icon.

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