AI & developer tools

Icons for development tools and technical content

Code-related symbols can help organize documentation, developer dashboards, and service pages. Brackets may indicate source code, a terminal can describe command-line work, and a database symbol can identify stored information. Keep the meaning specific enough that a reader does not need to infer the subject from decoration alone.

In documentation navigation, the icon should reinforce a clear section title. A row of similar technical symbols without labels is difficult to scan, even for experienced developers. Use the same symbol for the same concept across the sidebar, cards, and search results. Reserve color changes for meaningful categories or states rather than giving every item a different accent.

For code examples, separate the artwork from the content users need to copy. A copy button should have an accessible name and visible feedback after the action. A terminal icon should not imply that an example has been executed or tested when it has not. Show prerequisites and expected behavior in text, particularly when a command changes files or configuration.

Technical icons often contain closely spaced lines and small openings. Inspect them at the size of the actual navigation row, not only in a large preview. Increase stroke weight carefully because it can close the gaps that distinguish one symbol from another. For inline use in a component, consider inherited color so the icon follows the surrounding text and theme. Preserve viewBox and use the export format appropriate to your framework or documentation system.

For a developer dashboard, decide which distinction matters most at a glance. A repository, a deployment, and a code snippet are three different objects even though a pair of brackets might be associated with all of them. Try a branch for the repository, an upload or release symbol for the deployment, and brackets for the snippet. Put each next to its object name in a table and check whether switching between rows still leaves their meanings clear.

Prepare a useful export

Choose a sample above to open the editor. Review its size, color, and stroke against the background where it will be used. Keep an editable SVG when your destination supports vectors, or export a PNG at an appropriate resolution. Check the result in the real layout and retain applicable source notices with your project.

Explore the icon guides for examples and troubleshooting, or return to all collections to compare related symbols.