Spot illustrations.
A spot illustration is a small illustration of one idea that sits beside the text it explains, with no scene or background around it. Books and magazines put them between paragraphs; product sites put them on feature cards, docs pages and empty screens. In the Illos library, spot is the smallest size, about card size, and all 65 spot illustrations are free, animated, and in light and dark.
What makes an illustration a spot
- Small: it sits next to the text, not behind it. About the size of a card or a short paragraph.
- One idea: a queue, a rate limit, a team invite. If it needs a caption to explain itself, it is showing too much.
- No scene around it: no full background or frame, so it sits on the page's own background.
- Part of a set: spots repeat down a page, so they share one line weight, palette and corner radius.
Spot, section and hero illustrations
Illustrations on a site come in three sizes, and each does a different job:
| Size | Where it goes | What it shows |
|---|---|---|
| Spot | Feature cards, docs pages, empty states, list items | One idea |
| Section | Beside a feature section | A feature and the parts it touches |
| Hero (page) | The top of a landing page | The main idea of the product |
A page usually has one hero and many spots. In Illos the spot illustrations are free; section and page illustrations come with Pro.
Where spot illustrations go on a product site
- Feature grids: one spot per card, the same size, each showing what that feature does.
- Docs: a spot at the top of a concept page (queues, webhooks, caching) shows how it works before the reference.
- Empty states: a spot of the filled screen shows what will appear once the user acts.
- How it works: three or four steps, one spot per step.
- Blog posts and changelog entries: a spot of each post's subject.
For the larger places, the website illustrations guide goes section by section, and empty state illustrations covers the screens before the data.
Spot illustration examples
Each of these is one idea, about card size, animated, in light and dark. Open one for the SVG, the React command and the dark version.
Match each spot to a feature you already describe in words:
| Feature on your site | Spot | Theme |
|---|---|---|
| API rate limits | Rate limiting | Shader |
| Semantic search | Vector search | Shader |
| Uptime monitoring | Monitoring | HUD |
| Logs | Log stream | HUD |
| Background jobs | Queue | Isometric |
| Managed database | Database | Isometric |
| Team seats | Team invite | Interface |
| Keyboard shortcuts | Command menu | Interface |
How to make spot illustrations look like a set
- Pick one style for the whole site. A flat spot next to an isometric one reads as two products.
- Give every spot in a row the same box, so the cards line up.
- Keep the colours to your accent and neutrals.
- Animate only what explains the idea, let it play when it scrolls into view, and hold still for people who turn on reduced motion.
- Use SVG, so each spot stays sharp on every screen and switches with dark mode.
The product illustrations guide helps pick the theme that fits what your product does.
Add a free spot to your site
The 65 spot illustrations are free in personal and commercial work and in client work, with no credit and no account. Each one is a single SVG with its animation inside, or a React component:
npx shadcn@latest add https://illos.dev/r/isometric/queue.json
That adds Queue to your project as a React component. Each illustration's page has its own command, and a Copy button for the SVG. Browse the free set, or let your coding agent add them.
Need a spot for an idea the library does not have? Pro comes with skills that teach Claude Code, Cursor or Codex to draw new ones in the same theme, so the spot you add next month matches the ones you have. Pro is $69, one payment, with lifetime updates. See what Pro includes.
Questions
Anything else? Write to hello@illos.dev.
What is a spot illustration?
A small illustration of one idea that sits beside the text it explains, with no scene or background around it. Books, magazines and product sites use them to break up text and show an idea at a glance.
What is the difference between a spot illustration and a hero illustration?
A hero illustration is large and sits at the top of a page, showing the main idea of the product. A spot is small and repeats down the page, one per feature, step or docs topic.
How big is a spot illustration?
Small enough to sit beside text: about the size of a card. In Illos, spot is the smallest of three sizes, below section and page.
Are these spot illustrations free for commercial use?
Yes. The 65 Illos spot illustrations can be used in personal and commercial work and in client work, with no credit and no account.
Do they work in dark mode?
Yes. Each one comes in a light and a dark version.