Empty State Illustrations
Empty states are the screens every new user sees before they see anything else. An empty inbox, a zero-row table, a search that found nothing: the product is technically working and completely blank. A good illustration turns that dead end into an invitation, which is why generic stock art hurts here more than anywhere — it says "we did not think about this screen."
The trap with empty states is that you need eight of them, not one, and they all have to look like siblings. Generate them as a set: describe your product context once, pick a style, and produce the inbox, the search, the archive, and the filters variants in the same run so the character proportions, palette, and line weight match. Refine any of them in the vector studio, then export SVG so a single file serves both light and dark UI.
Production notes
| Canvas | Square (1:1) or 4:3 — empty states usually sit centered in a card, not full-bleed |
|---|---|
| Render size | Author for a 240–400px display width; anything more detailed disappears at real size |
| Dark mode | Avoid hard white fills for backgrounds; SVG lets you swap a background shape or use currentColor |
| Copy pairing | The illustration carries mood, the text carries instruction — never encode the actual message in the artwork |
Styles that fit
Each of these presets is tuned for full-scene illustration, not icon glyphs. Pick one to open the generator with it already selected — suggested canvas for this job is 1:1.
Example prompts
Describe the whole set in one prompt — generating the scenes together is what keeps them looking like one family.
How the illustration flow works
- 1
Pick the job
Open the Illustrations tab in the generator and choose the use case — empty state illustrations maps to a tuned prompt template rather than a blank box.
- 2
Describe the scene
Give the product context and, optionally, the specific scene. Suggestions appear as you type, and you can attach up to three of your own illustrations as style references.
- 3
Review before you commit
Generation returns a preview first. Keep the ones that work, generate more into the same batch, and only then import — credits are spent on generation, not on browsing.
- 4
Vectorize and refine
Accepted scenes are traced to real SVG paths and land in a project. Open any one in the studio to clean nodes, recolor fills, or simplify paths.
- 5
Expand later, still matching
When you need scene number nine, expand the same project. Your existing illustrations become the style reference, so the new ones match instead of drifting.
Frequently asked questions
How many empty state illustrations does a product need?+
Most products need between six and twelve: first-run, no search results, no notifications, empty cart or inbox, filtered-to-nothing, error, offline, and permission-denied. Generating them in one batch is what keeps them looking like one family instead of a scrapbook.
Should empty state illustrations be SVG or PNG?+
SVG. Empty states scale across breakpoints, often need a color swap for dark mode, and are typically small in file size as vectors. Icora traces generated scenes to real SVG paths you can recolor or edit node by node.
Can I match the illustrations to my existing brand illustrations?+
Yes — upload up to three of your existing illustrations as style references, and generation follows their palette, line weight, and character treatment. Later additions can expand the same project so month-six scenes match month-one.
Related illustration guides
Keep reading
Make your empty state illustrations
Describe the scenes, pick a style, and get a matched set as editable SVG. Free to start, no credit card required.
Open the illustration generator