Week 1
When you confirm your email
Incident pager
Pull request
Containers
Database
API endpoint
Code review
Release
Edge network
Week 2
One week later
Build artifact
Cluster orchestration
Logs
Terminal
CI pipeline
Load balancer
Test coverage
Debugger
Week 3
Two weeks later
Package registry
Serverless
Rate limiter
Git branch
Deploy
Server rack
Monitoring
Code editor
About this set
About the Developer tools icons
Developer products are explained in diagrams, and most diagrams just sit there. These icons move. A pager buzzes and the siren light spins. One card slides onto another and a check pops up. Log lines scroll up and the new error line is flagged. The set covers code review, pipelines, containers, databases, monitoring and releases, so docs and landing pages can show a workflow rather than describe it.
Where they fit
Put CI pipeline on your automation page, where the stages light up one after another. Use Load balancer in your infrastructure docs, where requests split evenly from the hub to three servers. Show Monitoring on an alerts page, where the graph crosses its threshold and an alert pops. Each one suits a technical reader who skims.
One look across the set
All 24 icons share a 400 by 320 canvas, one line weight and a single accent colour. You can put a terminal, a database and a deploy step in a single row and they read as one set.
From the email to your page
- Open the email and download the ZIP. The svg folder holds the animated icons, and preview.html shows them all moving.
- For a looping icon, use the file as an image: an img tag with width 240 and height 192 keeps the 5:4 frame.
- For hover play, accent colour and dark mode, paste the SVG markup into your page instead of linking the file.
- Add data-play="hover" to the svg to play it only on hover, or data-cm-play="hover" on the card around it.
- Set --cm-accent to your brand colour, and add data-theme="dark" on dark backgrounds.
License
Free to use, with three limits
- Use them in websites, apps, products and client projects, free
- Credit is appreciated, not required
- Not allowed: selling or sharing them as icons, claiming them as yours, or using them in a logo
More industries
Building for Developer tools?
We build Developer tools products, not just their icons
DeveloperLook designs and builds the websites and software these icons are drawn for. See how we work in your market.
FAQ
Questions about the Developer tools icons
Saimul IslamFounder & CEO, DeveloperLookStill have questions?
Send a message or book a call with the team.
Yes, free for commercial work. That covers websites, apps, products and client projects. We appreciate attribution but don't require it. The limits: no selling or sharing the developer icons as icons, no claiming them as your own and no using them in a logo. The license page has the details.
There are 24 icons in the set, and they arrive over 3 weeks, 8 a week, with the first batch sent when your email is confirmed. They cover pull requests, containers and server racks. Every batch is ready to use on your site as soon as it arrives.
Subscribe with your email on this page and confirm it. The first icons land in your inbox straight away, and further batches follow each week until the set is finished. One address can follow one industry, since icons are sent per industry. Unsubscribe whenever you want.
Yes. Any vector editor, including Figma and Illustrator, opens the SVG for edits to shapes, sizes and colours. The movement is CSS inside the file, so the editor shows the still pose only; keep the original for the moving version on your site. Each batch also has GIF and PNG files.
No. Each icon is a small SVG with its motion in plain CSS, with no JavaScript and no fonts to load. Visitors who have reduced motion turned on see the still pose instead. Developers notice page weight, so icons with no scripts or fonts suit an audience that checks.
Saimul IslamFounder & CEO, DeveloperLookStill have questions?
Send a message or book a call with the team.
Free 30-min callGoogle Meet
Book a call
Book a free 30-minute call
In 30 minutes on Google Meet we walk you through how we would build it, how long it takes and what it costs. Then you get a written estimate.
Calendar not showing? Book on cal.com or send a brief.