Files
Folder, open folder, file types, new file, search in files.
Use case
Icons for a developer tool
These are the icons a code editor or build dashboard needs.
approutes
TerminalPipeline
Build
PassedTests
PassedDeploy
RunningmainSyncedIssues
Icon jobs
The icons this screen needs
Each card is one group of icons to search for in the browser.
Version control
Branch, merge, commit, pull request, conflict.
Run and debug
Run, stop, breakpoint, step over, terminal.
Build and test
Build, test passed, test failed, skipped, coverage.
Data and APIs
Database, table, API, request, webhook.
Packages and deploy
Package, version, deploy, rollback, environment.
The screen
A typical code editor
This is the screen we planned these icons for.
A file tree with folders and file types runs down the left. Run, debug, branch and sync sit along the top. A terminal and a status bar with build, test and deploy states sit at the bottom.
Every icon here is tiny, and you see it hundreds of times a day. A branch and a merge must never be confused. Neither should a passed test and a skipped one.
Why one set
Mixed sets tire the eye
Many tools take icons from three sets at once.
One set for files, one for git, one for the rest. Every row in the sidebar ends up with a slightly different weight, and your eyes work harder all day.
UIX Icons draws developer icons on the same grid as the interface set. Close ideas get their own pictures before anyone draws, so branch, merge and commit stay apart at 16 px. File types are plain shapes. We never use brand logos.
FAQ
Questions
Is there an npm package for a developer tool?
Not yet. An npm package and React, Vue and Svelte components are coming soon. Today you can copy or download any approved icon as SVG from the browser and add it to your project. The docs page marks each channel as coming soon until it ships.
Do the file type icons include language logos?
No. Brand and language logos are not in the library because of trademark rules. File types are plain document shapes with a clear mark, so they stay easy to tell apart in a file tree. Add a text label where the exact language matters.
What icons do I need for a developer tool?
Cover files, folders, git actions, branches, terminals, search, settings, run and debug controls, and CI status. Add database and API icons if your tool shows them. Search the browser for each word, then keep one style and size across the interface.
Which icons suit a code editor sidebar?
A file, a folder, search, source control, run and debug, extensions and settings are the usual set. Use Regular for idle items and Solid for the active one. Draw at 24 px with a label or tooltip, since many sidebar icons look alike.
How do I show build and CI status with icons?
Use a check for passed, a cross for failed, a clock for queued and a spinner or arrow for running. Add text beside each so status never depends on colour alone. Keep the shapes different enough to tell apart at 16 px.
Can I use these icons in an open source developer tool?
Yes, with the free styles. MIT lets you include Regular Rounded, Regular Sharp and Solid in your project and share it. Keep the copyright notice and licence text with the icon files. Leave out Pro styles, since their terms are not out yet.
Next step
Find developer tool icons
See every approved icon for code, git, terminals, APIs and databases.
About this page
A developer tool needs icons for files and folders, file types, git branches and merges, terminals, builds, tests, packages, APIs, databases and deploys. Developers look at them all day at 16 px. So close ideas must look different. UIX Icons draws them on one grid, so the sidebar, toolbar and status bar stay easy to scan.