tool.io Icon Set | SVG Interface Icon Gallery

Bookmark this: tool.io/tool.io/icons

tool.io icons

Browse and filter the first-party functional SVG icons used across tool.io interfaces.

tool.io UI icons

First-party functional interface icons and colored skill marks created by the tool.io UX team.

View the tool.io icons repository ↗

97 of 97 icons

Add new page add-new-page
AI ai
Apps apps
Arrow back arrow-back
Arrow right arrow-right
Attach file attach-file
Blank page blank
Brush brush
Calendar month calendar-month
Calendar today calendar-today
Chain chain
Checkered paper checkered
Clock clock
Close close
Compare compare
Copy content copy-content
Copy copy
Create new folder create-new-folder
Dark mode dark-mode
Diagonal paper diagonal
Dictionary dictionary
Dotted paper dotted
Edit edit
Emoji emoji
Eraser eraser
Explore explore
Favorite filled favorite-filled
Favorite favorite
Felt pen felt-pen
Geometry geometry
Graph paper graph-paper
Help help
History history
Home home
Image trace image-trace
Image image
Jobs jobs
Launch launch
Learn learn
Like filled like-filled
Like like
Line line
Location distance location-distance
Location location
Log in login
Log out logout
Map map
Marker marker
Menu menu
Microphone mic
More horizontal more-horizontal
More vertical more-vertical
Note taking note-taking
OK ok
Open in full open-in-full
PDF pdf
Pen pen
Person person
Plus plus
Print print
Redo redo
Ruler ruler
Save save
Search search
Select select
Settings settings
Share share
Sheet music sheet-music
Source code source
Statistics stats
Statistics detail stats2
Text text
Trading trading
Tutorial tutorial
Undo undo
Visibility off visibility-off
Visibility visibility
Wiki wiki
Android skill mark (color) skill-android-color
C++ skill mark (color) skill-cpp-color
CSS skill mark (color) skill-css-color
Data skill mark (color) skill-data-color
Erlang skill mark (color) skill-erlang-color
Flutter skill mark (color) skill-flutter-color
Haskell skill mark (color) skill-haskell-color
HTML skill mark (color) skill-html-color
iOS skill mark (color) skill-ios-color
Java skill mark (color) skill-java-color
JavaScript skill mark (color) skill-javascript-color
PHP skill mark (color) skill-php-color
Python skill mark (color) skill-python-color
PyTorch skill mark (color) skill-pytorch-color
R skill mark (color) skill-r-color
React skill mark (color) skill-react-color
Svelte skill mark (color) skill-svelte-color
TensorFlow skill mark (color) skill-tensorflow-color
UX/UI skill mark (color) skill-uxui-color

Description

Browse the tool.io SVG icon set and learn how to choose, label, and implement functional interface icons without creating accessibility ambiguity.

This gallery lists the current first-party functional icons used in tool.io interfaces. Filter by an icon name, identifier, or related term to find actions such as copy, search, share, visibility, and navigation. Each stable identifier uses lowercase kebab-case so it can remain consistent across web, mobile, desktop, and generated framework packages.

The gallery deliberately excludes the tool.io logo, which belongs in the separate brand repository, and programming-language or platform marks that still require a brand-similarity and provenance review. That boundary prevents a functional icon package from implying ownership of third-party trademarks.

Choose icons by meaning, not resemblance

Select the icon whose documented action matches the control. Similar-looking symbols can represent materially different behavior: launch opens another context, open-in-full enlarges the current view, and arrow-right moves through navigation. Filled favorite and like variants are state indicators rather than decorative alternatives; use them only when the corresponding state is active.

Use close to dismiss a surface, not as a general delete action.
Use visibility-off when the user can reveal hidden content; do not substitute it for permanent removal.
Keep state pairs such as favorite and favorite-filled the same size and position so activation does not shift the interface.
Test detailed drawings at the actual rendered size; a recognizable 48-pixel preview can become unclear at 16 pixels.

Label icon controls accessibly

An icon does not provide a reliable accessible name by itself. Give every icon-only button or link a concise name that describes the action, such as “Copy code” or “Open settings,” and hide the decorative SVG from assistive technology. When an icon appears beside visible text that already names the action, the SVG should also remain decorative so the label is not announced twice.

Do not use an internal identifier such as stats2 as the user-facing label. Accessible names should describe the result of activating the control, while identifiers exist for developers and package stability. Unfamiliar actions should retain visible text or a persistent label rather than relying only on a tooltip.

Source files, variants, and current status

SVG is the canonical source format. Most interface artwork uses currentColor so the consuming interface controls its color, while dimensions and viewBox values preserve the drawing coordinate system. Temporary numbered identifiers such as stats2 still require a final semantic naming decision; avoid treating those identifiers as a permanent public package API until the icon repository publishes its first stable exports.

Use the linked GitHub repository to inspect the canonical SVG source, licensing information, and future package exports. The gallery consumes the same source files rather than maintaining another copy inside the web page.^[1]

References

tool.io icons source repository — tool.io

Support Tool.io