Skip to content

Use case

Icons for a developer tool

These are the icons a code editor or build dashboard needs.

Icon jobs

The icons this screen needs

Each card is one group of icons to search for in the browser.

Files

Folder, open folder, file types, new file, search in files.

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.

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.