All 40 scenes
Search by name or by what happened — “delete”, “offline”, “first”. Click any scene for what it is for, the file paths, and the code to drop it in.
In context
An illustration is the least important part of an empty state. Here is one in the place it actually goes — under a sentence that says what happened, above a button that does something about it. Swap the scene and watch how little the drawing carries on its own.
No results
Nothing matched.
Theming
Six variables colour all 40 scenes. Change them here and every drawing on this page follows — this is the same CSS you would paste into your own stylesheet.
Your CSS
Paste this anywhere in your stylesheet. Nothing else changes.
One caveat worth knowing before you buy: CSS variables
only reach an SVG that is inline in the page — a React component, or the sprite. An
<img src="…"> renders in its own document and keeps the built-in colours.
The Integrate tab shows both paths.
Integrate
Three ways in, depending on whether you want your own colours and whether you use React.
1 Copy the files
—
2 Use a scene
—
3 Colour it
—
- No dependencies — the React file needs only React
- Safe to render on a server
- All 40 names as a TypeScript union
- No fonts, no raster images, no scripts inside the SVGs
- 57 KB for the whole set
- The generator, so you can rebuild it in your own style
What is in the download
No unpacking a ZIP to find out.
Documentation
The same guides that come with the download, readable here before you buy.