What every icon means
Most controls in the app are a drawing with no words. This is the whole set, what each one looks like, where it appears and what it does.
Why you would use it
You are holding a phone, the screen is mostly marks, and you want to know what the wheel beside send does before tapping it.
How to use it
Find the mark in the table. Every control that shows only an icon also carries
its name in aria-label, and public/icon-titles.js copies it into title,
so hovering it on a desktop shows a tooltip and a screen reader reads it out. A
phone has no hover, so there the name is for the screen reader only. No icon control in either band prints
its label on screen.
What you see
Agent marks
| Id | Drawing | Where | What it means |
|---|---|---|---|
brand-claude |
The Claude starburst | Tab strip, usage meters, reply cards, agent picker, resume rows | This tab, meter or reply is claude |
brand-codex |
The Codex knot | Same places | codex |
brand-opencode |
The opencode square | Same places | opencode |
Agent mode's chip in the mode strip wears the mark of the agent the tab is running, not a generic one.
Top bar and mobile icon rail
| Id | Drawing | Control | What it does |
|---|---|---|---|
i-plus |
Plus | #new-tab, #endpage-plus, #drawer-new |
Start a new thread |
i-update |
Circular arrow with a head | #update-ready |
A new build is installed and waiting; tap to reload. Shown only then |
i-folder |
Solid folder | #files-open |
Open the file explorer on Files; on a wide screen, hide or show its column |
i-changes |
Grey page with a plus and a minus | #changes-open |
Open the explorer on Changes; on a wide screen, hide or show its column |
i-tabs |
A filled card in front of an outlined one | #tabs-open |
Open the tab bar; from 1080 px of the frame's width it hides and shows the tab column instead |
i-cog |
Gear | #settings-open |
Open Settings |
On a phone, the plus sits on the tab row right after the last tab. The strip shrinks to its tabs and scrolls on its own, so the plus stays in view however many tabs there are. The folder and the Changes page after it sit in the mode strip after Notify, and the cog closes the strip at its right edge. The Tabs button follows the folder and opens the drawer. On a wide screen the folder and the Changes page stay next to Notify; Tabs and the plus are hidden and each pane header carries its own. See the pane header table below.
Mode strip
| Id | Drawing | Control | What it does |
|---|---|---|---|
i-shell |
>_ prompt |
The Shell chip in #send-modes; the terminal button in a pane header |
Swap the transcript for the tab's shell and type into it; on a wide screen, switch the pane to it the same way |
i-bell |
Bell | #notify |
Turn on a push notification when a tab finishes |
i-install |
Arrow into a tray | #install |
Install the app to the home screen. Shown only while the browser offers it |
On a wide screen the Agent and Shell chips are not shown here; the bell and the install arrow are, on the one row at the top. Each pane header has the terminal button instead, and no Agent button. On a touch screen the shell keypad stays in the bottom band while the focused pane's terminal is open.
Pane header
Only on a wide screen, where every tab group has a header of
its own. The buttons are .pane-btn and are found by data-act or data-mode.
| Id | Drawing | Control | What it does |
|---|---|---|---|
i-plus |
Plus | data-act="new-tab" |
Start a new thread in this pane |
| The agent's mark | The pane thread's brand mark | data-mode="agent" |
Send what you type to the agent. See agent-or-shell-mode |
i-shell |
>_ prompt |
data-mode="shell" |
Send it to this pane's shell instead |
i-split-right |
A box divided down the middle | data-act="split-right" |
Put a second pane beside this one (Ctrl+D) |
i-split-down |
A box divided across | data-act="split-down" |
Put a second pane under this one (Ctrl+Shift+D) |
i-zoom |
Four corners | data-act="zoom" |
Fill the pane area with this pane (Alt+Enter, or Ctrl+B z). Not shown while there is one pane |
i-close |
Cross | data-act="close" |
Close this pane (the tab stays open). Not shown while there is one pane |
Composer
| Id | Drawing | Control | What it does |
|---|---|---|---|
i-mic |
Microphone | #mic |
Start dictating into the message |
i-stop |
Rounded square | #mic while recording |
Stop the recording |
i-upload |
Arrow up over a line | #mic while busy |
The clip is being sent to VCode to be transcribed |
i-wave |
Five bars | #mic while busy |
The VCode machine is transcribing the clip |
i-retry |
Circular arrow, counter-clockwise | #mic |
The last transcription failed; tap to retry it |
i-steer |
Steering wheel | #steer |
Push this message into the turn already running |
i-send |
Solid paper arrow | #send |
Send. The one filled mark in the set, because it is the primary action |
In the conversation
| Id | Drawing | Where | What it does |
|---|---|---|---|
i-copy |
Two rectangles | Reply cards, code block headers, beside every link in shell output | Copy that text or that URL |
i-check |
Tick | A copy button just after a successful copy, an accepted file, the toast | Done, or accepted |
i-edit |
Pencil on a page | Your own messages, queued messages, tab rows | Put that text back in the composer, or rename the tab |
i-diff |
Page with a plus and a minus | The header of a diff card, #viewer-diff |
Open the full review of that change; in the file viewer, show the changes since the last commit |
i-file |
Page | The reply footer, the status bar's changes segment | Files this turn changed; tap to list them |
i-close |
Cross | Sheet and popup close buttons, attachment chips, queued messages, tab rows, the toast on failure | Close, remove, drop, and on the toast, that something failed |
Tabs and sessions
| Id | Drawing | Where | What it does |
|---|---|---|---|
i-down |
Chevron down | The folder box in the new-thread form | Show the folder list |
i-folder |
Solid folder | Threads sheet rows | Move this tab to another folder |
i-lens |
Magnifying glass | The search box of the resume screen and the slash menu's search bar | Marks the field you type the search in |
File explorer
| Id | Drawing | Where | What it means |
|---|---|---|---|
i-twistie |
Thin chevron right | Folder rows in the explorer | The folder is closed; the row turns it down as the folder opens. File rows carry the Seti theme's glyphs instead, from public/seti.woff |
i-collapse |
Two chevrons meeting | #explorer-collapse |
Collapse every open folder |
Status marks
On the tabs, the thread rows and the subagent strip. The shape says the state and
the colour confirms it. Drawn by statusDot() in public/app.js in a 14px box.
The three amber states share one ring; on a tab everything is drawn smaller.
| State | Drawing | What it means |
|---|---|---|
idle |
Grey ring | Nothing running |
working |
Amber dot breathing inside a faint amber ring | A turn is running; also the offline banner and the subagent strip's label |
orbit |
Amber arc spinning on the same faint ring | The turn is over, but background agents still run |
background |
Blue arc spinning on a faint blue ring around a > |
The turn is over, but a shell command Claude sent to the background still runs |
working ring |
The spinning arc with the breathing dot inside | A turn is running and background agents too |
waiting |
Red disc with !, pulsing |
The agent waits on you: a question, an approval or a go-ahead |
done |
Green disc with a check | The turn finished and the tab has not been opened since |
failed, exited |
Red disc with a cross | Failed, or the process ended |
Under prefers-reduced-motion the arc stops spinning and the dot stops breathing;
the shapes stay.
Limits and known gaps
- The set is fixed. There is no icon theme and no way to add one.
- Labels never show.
.chip .clisdisplay: nonein every layout, so the Keys, Notify, Install, Agent and Shell chips are marks alone even when selected; a selected chip brightens and grows a bar under it instead. - Every mark is drawn on the same 24x24 grid with the same 2/24 stroke, round
caps and joins, and about 2 units of padding, so they read as one size. Only
i-sendandi-folderare filled; everything else is an outline incurrentColor.i-twistieis stroked at 1.5/24, VS Code's thin chevron. - Colour comes from the surrounding text, not from the icon, so the same mark is dim when inactive and bright when selected.
Related
- floating-chrome: which row each control sits in
- wide-layout: the pane header the second table describes
- wide-layout: where the same marks sit on a desktop
- the-three-agents: the three brand marks
- file-explorer: the rows the folder and file marks label
- dictate-a-message: the faces the mic cycles through