Animated Interface illustrations

Interface illustrations.

Flat, front-on illustrations of product UI, the cards a features page is made of: a key copied, a plan upgraded, a teammate invited, each played out by a cursor, for feature tiles, guided tours and empty states. Light and dark.

29 illustrations in Interface

15 more are Pro. Pro also teaches your agent to draw new ones in this style.

See Pro
Start a free trial: each tick of the clock fills the next day of a seven-day trial.Interface · spot
Add your first website: a domain is typed in, Add is clicked, and the site joins the list.Interface · spot
AI crawler tracking: an AI crawler fetches a page, and the visit lands in the log.Interface · spot
No assistants connected: a URL is pasted into an AI tool, and the assistant connects.Interface · spot
No API keys: a new API key is added and copied with one click.Interface · spot
No search results: a search narrows piece by piece until nothing is left.Interface · spot
Report unavailable: the linked report is missing, so another one is picked instead.Interface · spot
Error loading page: the page tries to load again, fails, and points to refresh.Interface · spot
Page not found: on a 404 page, home leads out, and back returns to the missing page.Interface · spot
Choose a plan: a click picks a plan, and the ring moves to it.Interface · spot
No live visitors: a visitor arrives, the live dot pulses, and they join the list.Interface · spot
First funnel: a visitor walks the path, and each step's bar fills a little shorter.Interface · spot
First goal: a goal switches what it measures, and its stats refresh.Interface · spot
Revenue not set up: a refund and a purchase move a page's share of revenue down and back up.Interface · spot
Calendar booking: a visitor picks a time, and the call is booked on the spot.Interface · spot
Role permissions: one tick in the grid lets editors delete.Interface · spot
API key copy: one click copies the secret key, and the button confirms it.Interface · spot
Settings toggle: two-step sign-in switches on with a single toggle.Interface · spot
Invoice reminder: an overdue invoice gets a reminder in one click.Interface · spot
Search filters: one filter narrows the results to the docs you need.Interface · spot
Requests chart: pick a day on the chart to see its request count.Interface · spot
Team invite: type an address, press Invite, and the invite joins the team list.Interface · spot
Command menu: type three letters and the right command is ready for Enter.Interface · spot
Usage meter: the meter shows how much of the month's API calls are used.Interface · spot
Notification inbox: two unread updates clear with a single click.Interface · spot
Comment mention: a teammate is mentioned, and the comment lands in the thread.Interface · spot
Task board: a task moves to Done, and both columns count it.Interface · spot
Feature flag: a new feature goes out to half the users, saved with one click.Interface · spot
Appearance: a click switches the theme, and the preview follows.Interface · spot

Can't find it? Tell us what to draw next.

Questions

Anything else? Write to hello@illos.dev.

What are Interface illustrations?

Interface illustrations are flat, front-on pictures of product UI, the kind an app or a features page uses: a key copied, a plan upgraded, a teammate invited, each played out by a cursor.

How many Interface illustrations are there, and how many are free?

44 animated SVG illustrations, 29 of them free. The free ones are the spot illustrations, about card size. The larger section and page illustrations come with Pro.

Are the free Interface illustrations free for commercial use?

Yes. Use them in personal, commercial and client work, with no account and no credit.

Do they come in light and dark?

Yes. Every Interface illustration has a light and a dark version.

How do I add one to a React or Next.js site?

One command adds an illustration as a component, for example: npx shadcn@latest add https://illos.dev/r/interface/calendar-booking.json. You can also open an illustration, press Copy for the SVG and paste it into any page.

Can my coding agent draw new Interface illustrations?

Yes, with Pro. The Illos skills teach Claude Code, Cursor or Codex the Interface rules and check each illustration they draw, so new ones match the set. $69, one payment.