design basics, explained
3D icons vs flat icons: which should you use?
Flat icons are clear and light. 3D icons are rich and eye-catching. Here is when each one wins, with real icons side by side and a simple table for every common job.
- Flat icons (line, solid, duotone) are simple shapes with no fake light or depth. They are the right choice for buttons, menus, tabs, forms and dashboards, at any size.
- 3D or dimensional icons (gloss, glass, luxe, skeuo) add highlights, shadows and materials. They shine on landing pages, slides, app-store graphics and posters, at 32px or larger.
- Most good products in 2026 use both: flat icons where people click, and one dimensional style where people look.
- Flat SVG icons are tiny (our line style is about 0.4 KB per icon). Dimensional SVGs are richer but still only a few kilobytes each, so use them for a handful of big moments, not long lists.
- Design swung from realistic (skeuomorphic) to flat around 2012 to 2013, then back towards gentle depth. Today’s best practice is flat for function, depth for delight.
On this page 10 sections
Use flat icons for anything people tap or click, like buttons, menus, tabs and dashboards, because they stay clear at small sizes. Use 3D icons for big moments people look at, like hero sections, feature grids, slides and app-store graphics, at 32px or larger. In 2026 the best answer is usually both: a flat interface with one dimensional style for decoration.
That is the short version. Below we show the same icons drawn both ways, explain where each look came from, and give you a table for the jobs people ask about most: app screens, dashboards, landing pages, slides, kids’ apps and print. Every icon here comes from with icons, where each of the 500 icons is drawn once and rendered in 20 styles, so you are comparing the very same drawing in different looks.
What is a flat icon?
A flat icon is drawn with simple shapes and no pretend light. There are no shadows, no shine and no textures, just outlines or filled shapes in one or two colours. Think of the icons in your phone’s settings menu or the toolbar of a writing app.
Flat icons come in three common flavours. Line style icons are outlines (ours use a 1.75px line). Solid style icons are filled shapes with the details cut out. Duo style icons are outlines over a soft tint, which feels a little warmer.
Because flat icons are so simple, they have three big strengths. They stay sharp at tiny sizes, they take on your text colour automatically, and a whole set looks consistent with very little effort.
What is a 3D icon?
A 3D icon (sometimes called a dimensional icon) looks like an object you could pick up. It uses highlights, shadows, gradients or materials to suggest light falling on a solid shape. Most 3D icons are not real 3D models: they are flat pictures drawn to look deep, the same way a painting can look deep.
with icons has four dimensional styles, all drawn from the same skeleton as the flat ones:
- Gloss: inflated and pillowy, like a soft vinyl toy, with carved shiny highlights. It uses one flat colour, so it recolours as easily as a line icon.
- Glass: layered frosted glass. A vivid colour glows through a see-through pane with a crisp rim and a soft sheen.
- Luxe: premium, jewellery-box 3D: enamel, polished gold and ruby set in thick slabs, with soft shadows and crisp highlights.
- Skeuo: skeuomorphic, meaning “looks like the real thing”. Every icon becomes an object made of paper, leather, metal, brass, wood or glass, lit from above.
Is there something between flat and 3D?
Yes, and it is where a lot of friendly brands live. Some styles are mostly flat but borrow one or two tricks from 3D, like a drop shadow or a puffy outline. They feel richer than plain line icons without the full weight of glass or luxe.
Sticker style icons look like die-cut vinyl stickers with a white border and a soft shadow. Retro style icons use chunky outlines and a hard offset shadow, like a 70s patch. Kawaii style icons are chubby pastel shapes with tiny faces. If flat feels too plain and full 3D feels too much, start here. Our post on cute and playful icon styles covers this family in detail.
How did icons go from realistic to flat and back again?
Icon fashion has swung like a pendulum, and knowing the story helps you choose today.
The realistic years
Early smartphone apps leaned on skeuomorphism: notes apps looked like paper notepads, and buttons looked raised and shiny. The idea, as the Nielsen Norman Group explains, was to make new digital tools feel familiar by borrowing the look of real objects. It worked, but the stitched leather and wood textures often became decoration for its own sake.
The flat turn
Around 2012 and 2013 the industry went flat. Microsoft’s Metro design language, which reached a huge audience with Windows 8 in 2012, promoted an “authentically digital” look with no fake materials. In June 2013 Apple unveiled iOS 7, with typography refined for a “cleaner, simpler look”, according to its own announcement. Flat icons became the default almost overnight.
Depth comes back, gently
Pure flat design had a cost: without shadows or raised edges, people could not always tell what was clickable. The Nielsen Norman Group called the fix “flat 2.0”: mostly flat, with subtle shadows and layers. Google’s Material Design, announced at Google I/O on June 25, 2014, is the best-known example. Then in June 2025 Apple introduced Liquid Glass, a design with see-through, reflective surfaces across its operating systems. Our post on icon design trends for 2026 follows that thread.
So in 2026 the pendulum rests in the middle. Interfaces are still mostly flat, because flat is clear. Decoration has more depth, because depth is delightful. That is exactly the split we recommend below.
Which should you use: flat or 3D icons?
Here is a cheat sheet for the jobs people ask about most. “Small” means everyday interface sizes like 16 to 24px. “Big” means 32px and up.
| Where the icon goes | Pick | Why | Suggested styles |
|---|---|---|---|
| App UI: buttons, menus, tabs, forms | Flat | Small sizes, used all day, must be instantly clear | Line, with solid for the active state |
| Dashboards and data tools | Flat | Dense screens with many icons; depth adds noise | Line or duo |
| Landing pages: hero and feature grid | 3D for the hero, flat in the nav | Big sizes, the icon is the star, one section at a time | Glass, gloss or luxe |
| Slides and presentations | Either | Seen from far away; bold styles help, keep one style per deck | Solid or duo for business, glass for title slides |
| Kids’ apps and classrooms | Playful or 3D, at 32px+ | Friendly and touchable; small kids benefit from big targets | Kawaii, sticker or gloss |
| Print: flyers, posters, packaging | Either, export large | Fine detail prints well; thin lines can vanish on rough paper | Solid for small print, skeuo or luxe for posters |
| App-store and social graphics | 3D | Needs to stand out in a busy feed | Luxe, skeuo or glass |
If you only remember one thing: flat where people click, 3D where people look. For slides specifically, our guide to icons in presentations and the PowerPoint guide walk through the steps.
Do 3D icons make a website slower?
A little heavier, yes. Slower, rarely, as long as you use SVGs and keep 3D icons to a few big moments. We measured all 500 with icons in each style (October 2026, before compression):
- ~0.4 KB
- a typical line icon
- ~1.4 KB
- a typical gloss icon
- ~3 KB
- a typical glass icon
- ~6 KB
- a typical luxe icon
The richest style is roughly 15 times the size of a line icon, because highlights, shadows and materials are extra shapes. That still sounds tiny, and for six icons in a feature grid it is. It adds up when you put detailed icons in a list of 200 rows, or when you download “3D icons” as large PNG images instead of SVGs. SVG is also text, so web servers can compress it further. Our post on SVG vs PNG icons explains why SVG is usually the better file for icons.
Do 3D icons work at small sizes?
Not well. The details that make 3D icons beautiful, like rims, reflections and soft shadows, need room. Squeeze them into 16 pixels and they turn into a smudge. Flat icons were built for that size.
This matters for accessibility too. The web’s accessibility standard (WCAG 2.1, success criterion 1.4.11) asks for a contrast of at least 3:1 between meaningful icons and the colours next to them. A flat solid icon in your text colour usually passes easily. A soft, glowing 3D icon may have light edges that blend into a light page. Check the contrast of any icon that carries meaning, and always pair important icons with a text label. Our guide to accessible icons has the details, and the icon sizes guide covers which size to use where.
How do you keep flat and 3D icons consistent?
Mixing looks is fine. Mixing them randomly is not. The trick is one style per area: the navigation is all line, the hero is all glass, the footer is line again. Each area is consistent on its own, so the page feels planned.
Use the same icon drawing in both looks. A line rocket in the menu and a glass rocket in the hero feel like the same brand, because they share one skeleton.
Mix a flat bell, a glossy envelope and a leather calendar in one toolbar. Three looks in one row reads as three different products.
This is why it helps when one library offers both. In with icons, every dimensional style is generated from the same drawing as line and solid, so the shapes, proportions and meaning match exactly. Each icon also has 20 to 30 hand-picked colour palettes for the multi-colour styles, which makes it easy to tie a glass or luxe icon to your brand colours. For more, read how to keep your icons consistent.
How do you choose in three steps?
- 1
- 2Find your big moments
List the places where an icon is the star: the hero, a feature grid, a title slide, an onboarding screen, an app-store image.
- 3
Frequently asked questions
Are 3D icons better than flat icons?
Neither is better everywhere. Flat icons are clearer at small sizes and in dense screens, so they suit buttons, menus and dashboards. 3D icons are more eye-catching and feel premium, so they suit hero sections, feature grids, slides and marketing at 32px or larger. Most products use flat icons for the interface and one 3D style for big moments.
Is flat design dead in 2026?
No. Flat icons are still the default for app and website interfaces because they are clear, light and easy to keep consistent. What changed is that depth is back for decoration: Apple introduced its glassy Liquid Glass design in June 2025, and many brands now pair a flat interface with shinier icons in marketing.
Do 3D icons slow down a website?
Not much, if they are SVGs and you use them sparingly. In with icons, a line icon is about 0.4 KB and the most detailed dimensional style (luxe) is about 6 KB before compression. Many 3D icon packs are large PNG renders instead, which weigh more and cannot be recoloured, so check the file format before you download.
Can I use 3D icons in my app’s navigation?
It is usually a bad idea. Navigation icons are small (16 to 24px), and the highlights, shadows and textures of 3D styles turn into blur at that size. Use flat line or solid icons for navigation and keep 3D icons for onboarding, empty states, feature pages and marketing.
What is the difference between 3D icons and skeuomorphic icons?
Skeuomorphic icons imitate real objects and materials, like a leather notebook or a brass dial. 3D icons is a wider term for any icon with depth, light and shadow, including glossy, glassy or toy-like looks that do not copy a real material. Skeuomorphism is one kind of 3D.
Are the with icons 3D styles free for commercial use?
Yes. All 500 icons in all 20 styles (10,000 SVGs) are MIT licensed, which means free for personal and commercial use with no attribution required.
Sources and notes
- Nielsen Norman Group: Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users (2015)
- Nielsen Norman Group: Skeuomorphism (2024)
- Apple Newsroom: Apple Unveils iOS 7 (June 10, 2013)
- Wikipedia: Material Design (announced at Google I/O, June 25, 2014)
- Apple Newsroom: Apple introduces a delightful and elegant new software design (June 9, 2025)
- W3C: Understanding WCAG 2.1 Success Criterion 1.4.11, Non-text Contrast
Facts about other icon sets were checked against their official sites in October 2026. Libraries change, so check the links above for the latest numbers.