404 & Error Page Illustrations
Error pages are the only screens users reach while already annoyed. The illustration has one job: lower the temperature enough that the user reads the recovery link instead of closing the tab. Which is why the astronaut-floating-in-space stock image is on ten thousand sites — it works, and it also tells your visitor they are on a template.
Treat errors as a family: 404, 500, 403, maintenance, and offline are five scenes that should share one visual metaphor. Generate them together with a consistent theme — the same character lost in five different situations reads far better than five unrelated stock scenes. Because these pages are often served from static hosting or an edge worker, inline the final SVG directly into the HTML so the error page has no external dependencies to fail.
Reliability notes
| Inline the SVG | An error page that fetches an image can fail the same way the page did — inline the markup instead |
|---|---|
| Aspect | Square or 4:3, centered above the message and the recovery action |
| Tone | Light, not comedic — a joke lands badly when the user just lost work |
| Set coverage | 404, 500, 403, maintenance, offline — generate all five at once |
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 — 404 & error page 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
What makes a good 404 illustration?+
Recognizable in one glance, low on detail, and emotionally neutral-to-warm. The user is looking for the way out, not studying artwork — the illustration should be scenery around the recovery link, not a competitor for attention.
Can I use one illustration for all error types?+
You can, but the distinct scenes cost you nothing once you generate them as a batch, and they help users tell "the page does not exist" apart from "our server broke" — which changes whether they retry or navigate away.
Related illustration guides
Keep reading
Make your 404 & error page 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