Free animated SVG illustrations

Free spot illustrations, ready to copy.

All 79 spot illustrations are free, from every theme (Shader, HUD, Isometric, Interface, Cybernetics), each in light and dark. Use them in personal, commercial and client work, with no account and no credit.

79 illustrations

107 more are Pro. Pro also teaches your agent to draw new ones in the same style.

See Pro
Vector search: a query lands among your vectors, and the nearest cluster lights up with its score.Shader · spot
Add your first website: a domain is typed in, Add is clicked, and the site joins the list.Interface · spot
Queue: jobs wait their turn, and the worker takes the next one.Isometric · spot
Monitoring: a sweep checks every service, and the one in trouble raises an alert.HUD · spot
Rate limiting: traffic runs under the limit, and the burst above it is refused.Shader · spot
AI crawler tracking: an AI crawler fetches a page, and the visit lands in the log.Interface · spot
Cron jobs: the clock reaches each mark and stamps a job onto the belt, right on schedule.Isometric · spot
Edge network: requests reach the nearest edge of your network, wherever they start.HUD · spot
Start a free trial: each tick of the clock fills the next day of a seven-day trial.Interface · spot
Autoscaling: as load rises new instances bud off it, and as it falls they fold back in.Shader · spot
No assistants connected: a URL is pasted into an AI tool, and the assistant connects.Interface · spot
Usage billing: usage stacks up in the meter, and at the end of the month it prints the invoice.Isometric · spot
Search index: a query drops through the index and finds its match.HUD · spot
Cache layer: a hit comes straight back from the cache, and a miss goes on to the database.Shader · spot
No API keys: a new API key is added and copied with one click.Interface · spot
Notifications: the bell rings and a card lands on top of the stack on the phone.Isometric · spot
Traffic map: requests flow along the routes of your map, busiest first.HUD · spot
Load balancer: traffic comes in one door, and the balancer spreads it across the servers in turn.Shader · spot
No search results: a search narrows piece by piece until nothing is left.Interface · spot
Email delivery: letters land in their pigeonholes, and one comes back as a bounce.Isometric · spot
Cost meter: spend climbs toward the budget, and a forecast mark shows where the month will end.HUD · spot
Streaming tokens: the answer streams in chunks, and the response writes itself out line by line.Shader · spot
Report unavailable: the linked report is missing, so another one is picked instead.Interface · spot
File uploads: a file splits into chunks that drop down the chute and come back together in storage.Isometric · spot
Log stream: log lines scroll past, and the one error is caught and pinned.HUD · spot
Queue backlog: jobs pour in faster than workers drain them, then the backlog levels off.Shader · spot
Error loading page: the page tries to load again, fails, and points to refresh.Interface · spot
Database migration: rows move from the old table into the new one and pick up the new column on the way.Isometric · spot
Scheduler: a job rides its schedule and fires each run on time.HUD · spot
Webhook fan-out: one event rings out from the source and lands on every subscriber at once.Shader · spot
Page not found: on a 404 page, home leads out, and back returns to the missing page.Interface · spot
Analytics funnel: events drop through the funnel, and the chart rises bar by bar.Isometric · spot
Event broadcast: one event goes out, and every subscriber receives it.HUD · spot
CDN cache: content waits at edges near your users, so each request is answered close by.Shader · spot
Choose a plan: a click picks a plan, and the ring moves to it.Interface · spot
Version control: a branch leaves main, picks up a commit and merges back in.Isometric · spot
Latency heatmap: cells warm where requests are slow, and the hottest route is flagged with its p99.HUD · spot
Data pipeline: raw data flows in messy and leaves clean, combed calmer at every stage.Shader · spot
No live visitors: a visitor arrives, the live dot pulses, and they join the list.Interface · spot
Image processing: a photo goes into the press and comes out in three sizes.Isometric · spot
Incident timeline: an alert fires on the timeline, and the incident runs to resolved fifteen minutes later.HUD · spot
Usage billing: usage fills the basin day by day, and at the month's end it drains into the invoice.Shader · spot
First funnel: a visitor walks the path, and each step's bar fills a little shorter.Interface · spot
Database: a query goes in, the read head climbs to the right tier, and the rows come back out.Isometric · spot
Usage billing: a month of daily usage adds up, and only on day 30 does the invoice print its total.HUD · spot
RAG answer: the closest pages are pulled in, and the answer is written from them with citations.Shader · spot
First goal: a goal switches what it measures, and its stats refresh.Interface · spot
Firewall: the rule plate lets port 443 through the gate and drops port 23 into the box below.Isometric · spot
Alerts: a metric crosses its threshold, the bell rings, and one key press acknowledges it.HUD · spot
DNS lookup: the resolver asks the root, then COM, then the domain, and the address comes back.Shader · spot
Revenue not set up: a refund and a purchase move a page's share of revenue down and back up.Interface · spot
Encryption: a readable card goes in and comes out sealed, and only the key opens it again.Isometric · spot
Threat detection: the scan sweeps the network, finds the packet that does not belong, and cages it.HUD · spot
Failover: the primary region goes dark, and the router sends every request to the standby.Shader · spot
Calendar booking: a visitor picks a time, and the call is booked on the spot.Interface · spot
Two-factor sign-in: a fresh code shows on the token, and the lock opens only once it is keyed in.Isometric · spot
Server health: a job heats the server up, and its fans spin up to bring the temperature down.HUD · spot
DDoS shield: a flood of requests breaks on the shield, and the one real request gets through.Shader · spot
Role permissions: one tick in the grid lets editors delete.Interface · spot
Containers: the crane lowers a new container into the host, and its light comes on as it runs.Isometric · spot
API status: an endpoint's latency crosses the SLO, its light turns red, and the next check clears it.HUD · spot
Data warehouse: raw data from three sources is cleaned into rows, and one query reads across all three.Shader · spot
API key copy: one click copies the secret key, and the button confirms it.Interface · spot
API gateway: each request is checked at the gateway and turned toward the service it belongs to.Isometric · spot
Audit log: every action is printed on the tape with who and when, and wound onto a locked spool.HUD · spot
Tool calls: the agent calls search, code and calendar in turn, ticking off each step of the task.Shader · spot
Settings toggle: two-step sign-in switches on with a single toggle.Interface · spot
CI pipeline: a commit rides through build, test and ship, and each check lights as it passes.Isometric · 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.

How to add one

One command adds an illustration to a React project as a component. Each illustration's page has its own:

npx shadcn@latest add https://illos.dev/r/isometric/queue.json

Or open the illustration and press Copy for the SVG, then paste it into any page.

Free illustrations for commercial use

Use the free spot illustrations in personal and commercial work: your product, your marketing site, client projects. No credit is needed, and you can change them. The one thing not allowed is passing them on as illustrations, in a pack, an illustration site or another library. The licence has the full wording.

File size and performance

Each illustration is one file with its motion inside, so it is the whole download: 2.2 to 12.5 KB compressed across the free set. Nothing else loads to play it. More in how animated SVG works on a product site.

Free Shader illustrations

17 of the 41 in Shader: Vector search, Rate limiting, Streaming tokens, Cache layer, Load balancer, Autoscaling, CDN cache, Data pipeline, Queue backlog, Webhook fan-out, Usage billing, RAG answer, DNS lookup, Failover, DDoS shield, Data warehouse, Tool calls.

Free HUD illustrations

16 of the 31 in HUD: Edge network, Monitoring, Search index, Traffic map, Scheduler, Event broadcast, Cost meter, Latency heatmap, Incident timeline, Log stream, Usage billing, Alerts, Threat detection, Server health, API status, Audit log.

Free Isometric illustrations

17 of the 56 in Isometric: Queue, Usage billing, Cron jobs, Email delivery, File uploads, Notifications, Version control, Database migration, Image processing, Analytics funnel, Database, Firewall, Encryption, Two-factor sign-in, Containers, API gateway, CI pipeline.

Free Interface illustrations

29 of the 44 in Interface: Calendar booking, Role permissions, API key copy, Settings toggle, Invoice reminder, Search filters, Requests chart, Team invite, Command menu, Usage meter, Notification inbox, Comment mention, Task board, Feature flag, Appearance, Start a free trial, Add your first website, AI crawler tracking, No assistants connected, No API keys, No search results, Report unavailable, Error loading page, Page not found, Choose a plan, No live visitors, First funnel, First goal, Revenue not set up.

Questions

Anything else? Write to hello@illos.dev.

What is free, exactly?

Every spot illustration: 79 of the 186, about card size, each showing one idea. Section and page illustrations, the larger ones, come with Pro.

Are they free for commercial use?

Yes. The 79 free animated SVG illustrations are free in personal and commercial work, client work included, with no account and no credit.

Do I need to credit Illos?

No. No credit and no account.

Which theme should I pick?

One for the whole site, so the illustrations match. Shader draws ideas as a field of thin bars, HUD as instrument readouts, Isometric as labelled machines, and Interface as flat product UI. Each theme's page shows its whole set.

Can my coding agent add them?

Yes. The free illos-library skill lets Claude Code, Cursor or Codex find the illustration that fits each section and add it.

Do they work in Next.js?

Yes. One command adds one to a React or Next.js project as a component. You can also paste the SVG into any page, or use it as an image.

Do they respect reduced motion?

Yes. For a visitor who has turned on reduced motion, each one settles on a still frame.

What do I get with Pro?

All 186 illustrations, the larger section illustrations included, the toolkit, and skills that teach your coding agent to draw new ones in the same theme. $69, one payment.