Empty State & Error Illustrations — 40 Themeable SVG Scenes

Every product has the same dozen screens that nobody gets round to designing. No results. No data yet. You are offline. That page does not exist. Your card was declined. All done. They are the moments a user is most likely to be confused or annoyed, and they usually get a blank rectangle.

This is 40 of them, drawn as one set.

What makes it a set rather than a folder: one canvas, one palette of six colours, one family of stroke weights and corner radii, and no people. That last rule matters more than it sounds — a set with figures in it needs every new drawing to match a face, a body and a skin tone, which is exactly where hand-assembled collections fall apart. Objects stay consistent.

Six colours, and every one is a CSS variable. Declare them once — accent, accent-soft, line, surface, ground, mute — and all 40 scenes take your brand at the same time. There is no per-file editing, no rebuild, no second version to maintain. Dark mode is the same files with the values swapped, which is why the set is 40 drawings rather than 80.

One caveat, stated up front because it decides how you use them: CSS variables only reach an SVG that is inline in the page. The React components and the sprite both put the markup in your page, so they take your colours. An <img> tag renders the file in its own document and keeps the built-in violet — which is fine if you like it, and covered three ways in the documentation if you do not.

Nothing here was drawn by hand in a vector editor. Every shape comes from the code in the download — a small drawing kit of primitives, a library of objects, and 40 scene definitions. That means no stock imagery, no traced references, no icon fonts and nothing to clear with a client. It also means the set is yours to change: adjust the stroke weights and all 40 get bolder; swap the note of the palette and all 40 follow; add a scene of your own and it joins the SVGs, the sprite, the React components and the TypeScript union automatically.

The build measures itself. A quality pass checks that every drawing sits inside its canvas, near enough to centre that a grid of them lines up, uses only the palette, only the set's stroke weights and corner radii, carries a title, and contains no text, images or fonts. It is how 40 drawings stay even — and it runs on your changes too.

The documentation spends most of its words on the part that is actually hard: an empty state is a sentence, a button and then an illustration, in that order. There is a guide on choosing the scene that matches what really happened, one on theming, one on accessibility — the drawing must never carry meaning on its own — and one on regenerating the set.

The demo is the set: all 40 playable against a live palette you can change, a mock screen showing one in the place it actually goes, working code for four integration paths, and the documentation.