What is a flat illustration?
Irene Lidia Wang
September 25, 2026 · 9 min read
The screenshot is already a busy dashboard. Beside it, the hero art has glossy lighting, a painted face, and a sky that fades from blue to peach. The interface is quiet. The picture isn't. Sound familiar?
I've pulled art like that off a landing page because it fought the UI. A nicer prompt didn't help. The style was wrong.
A flat illustration is a drawing made of simple shapes and solid color, with little shading, almost no gradient, and no pretend depth. It's the picture, not the chrome around it. When that picture has to live next to a real UI, I open the flat illustration generator, set Style to Flat, and describe the subject only.
What a flat illustration looks like
Start with the fills. Each shape is one color. A shirt is navy. A mug is terracotta. The background is a plain white or cream field, so the headline next to it has somewhere to sit.
People come out without faces. A circle for a head and a block for a torso, and you still read "person at a laptop." I want that. A detailed face steals the glance that should land on the screenshot.
Keep the palette short. Two or three colors that already exist in the product, plus a neutral. A random extra hue makes the art feel stuck on. I covered the same rule in illustration styles that actually work on landing pages: the picture supports the product. It doesn't compete with it.
Edges should be obvious. You can point at a shape and name the fill. If light wraps around a cheek, or a gradient does the work of a shadow, you don't have a flat illustration. You have a render, and renders fight clean UI.
Flat illustration is not flat design
These phrases get searched together. They're different jobs.
Flat design is how an interface is built. It spread after Microsoft shipped the Metro language with Windows 8 in 2011. Apple's own homepage followed around 2013.
Nielsen Norman Group's article on flat UI and clickable controls is the warning I still send teammates. If every control is a flat rectangle, people stop knowing what they can press. Later "flat 2.0" work, including elevation in Material Design, puts a small shadow back on buttons and sheets so the screen stays readable.
A flat illustration can live on that screen and stay simpler than the buttons. The button may need a shadow so it looks pressable. The hero picture doesn't. Give the picture those same shadows and you've got two layers shouting.
Flat design builds the screen. A flat illustration is the artwork you place on it.
Flat illustration beside line art, 3D, and storybook art
Illustro ships four styles. Flat is the one I reach for when the file has to sit in a product layout and still export as SVG. The other three aren't a "more polished flat." They're different pictures.
| Style | What you get | Use it when |
|---|---|---|
| Flat | Solid shapes, little shading, editable SVG | UI spots, empty states, landing sections |
| Line art | Clean strokes, Color or B&W | Icons, diagrams, a drawing rather than a filled scene |
| 3D Illustration | Clay figurine, raster only, no SVG | A mascot that should feel like an object |
| Children's book | Soft, gouache-like color, raster only | Picture books and kids' stories |
Line art is still a vector, so Colors works, but the read is ink, not filled shapes. I switch to the line art generator when the layout wants a diagram more than a scene.
3D Illustration is matte, rounded, and lit like a small studio object. It doesn't export SVG, and it isn't a Blender file. If flat art looks too thin next to a playful product, read 3D characters without Blender before you force Flat to do a job it's bad at.
Children's book art is warm on purpose. A kids' story wants that. A settings screen doesn't. Storybook illustrations stay in the story. That style is raster too, so you can't recolor paths the way you can with flat.
Where a flat illustration earns its place
Empty states. Onboarding. A feature row under a headline. A slide that has to match the site. In all of those, the words and the screenshot do the explaining. The picture only has to make the moment recognizable: a person, a laptop, a plant, an empty inbox.
Wide heroes need empty space. Art that fills every corner leaves the headline nowhere to go. Ask for one subject and a plain background, then check the crop on a phone before you commit to the desktop version.
One person across a whole flow is a separate problem. Generating again won't lock who they are. Use an illustration pack.
You write a theme and a character brief, Plan the scenes (planning is free), then Lock character. The sheet costs 3 credits, and you approve it before any scene. Each scene is another 3 credits, because packs run in Illustro MAX. A 4-scene pack is 15 credits.
Expect "more consistent," not a pixel-perfect twin.
When I leave this style alone
Leave it when the joke is the face. Figures in Flat don't get eyes or a mouth. If the expression carries the idea, you're in the wrong style.
Leave it for a picture book. The softness is the point, and you won't get an SVG.
Leave it when the mascot should feel like a toy on a table. That's 3D Illustration, exported as PNG or JPEG.
Leave it for a logo. Small flat shapes can be readable, but Illustro isn't a logo maker. A mark you'll print on a thousand objects still needs a designer.
Leave it when the brand already has a custom illustration system a prompt won't hold. Flat gets you a draft you can ship this week. It doesn't replace art direction on a campaign hero.
How to prompt a flat illustration you can recolor
Here's the prompt I actually paste, then tweak:
"Person at a laptop, side view, simple geometric shapes, navy shirt, terracotta mug, cream background, no facial features, no gradients"
Name the subject, the pose, and two or three fills. Skip "cinematic," "8k," and "dramatic lighting." Those words ask for the depth you're trying to avoid.
A prompt that asks for a lens won't stay flat. "Cinematic woman in a sunlit office, detailed face, soft bokeh" wants a photograph. The flat version names shapes and fills, and it tells the picture to skip a face and a gradient.
If the first result still looks rendered, regenerate on Illustro Light before you spend a MAX credit on a scene you don't want. How to prompt for an SVG you can still recolor is the same idea: prompt a graphic, not a photograph.
Then the controls.
- Set Style to Flat.
- Use Illustro Light (1 credit) while the pose is still a guess. Switch to Illustro MAX (2 credits) once the scene is the one you want to ship. The editor opens on Light, so check the mode before Generate.
- Pick a Size: Square (1024×1024), Portrait (1024×1536), or Landscape (1536×1024). Square for a spot in the UI. The wide size for a hero. There's no custom pixel field.
- If the pose is right and the yellow is wrong, open Colors. Recolor is free. Replace a fill everywhere it appears, or click one shape and change it.
- A new prop, or a smile, is Edit with AI (3 credits). Colors can't draw a new object.
- Download PNG or JPEG free. Export as SVG costs 1 credit on work you generated. Place that file in Figma with the Illustro plugin, or export it and drop it on the canvas yourself.
Got a photo of the pose already? Turn the photo into an illustration. That tool outputs Flat only, at 3 credits, then you recolor like any other flat file.
Frequently asked questions
What does flat mean in art?
Flat means the picture doesn't fake depth. Shapes sit on one plane, color stays solid, and shading is minimal or absent. In a product layout, that look keeps an illustration from competing with buttons, type, and screenshots. If you can feel a light source on a cheek, the drawing has left flat behind.
What is a flat illustration used for?
A flat illustration is used for website sections, app onboarding, empty states, and slides, anywhere a simple scene has to match a UI. Teams use it when the screenshot is the hero and the picture only has to show a person, an object, or an empty inbox. Export SVG when the file has to scale, and keep the palette short so it can borrow colors from the product.
Is a flat illustration the same as flat design?
No. Flat design is an interface style. Metro shipped with Windows 8 in 2011, and product UI followed.
A flat illustration is the artwork you place inside that interface. The button may still use a small shadow so it looks pressable. The picture can stay flatter than the control.
Are flat illustrations vector files?
In Illustro, Flat becomes an SVG you can recolor. Downloading that SVG costs 1 credit. PNG and JPEG are free.
Colors can swap a fill or delete a shape. It can't add new drawing the way a pen tool can. Children's book and 3D Illustration stay raster, so this doesn't apply to those styles.
What is a flat drawing called?
People also say flat vector illustration, flat design illustration, or flat illustration style. I use "flat" for solid shapes with almost no shading. If the picture is mostly outlines, that's line art, not flat. If it looks like a clay toy, that's 3D Illustration.
Can I use a flat illustration commercially?
Yes. You own the illustrations you generate, including on the free signup credits, if you follow the terms. Don't use those files to train or evaluate another AI system.
Illustro pricing lists commercial usage rights on the one-time credit packs. A campaign that needs a custom brand system may still need a human illustrator after the draft.
