Icons
Upmo uses one icon set, one stroke width and one mark. The set is Tabler Icons 3, outline style. Mantine’s own components use it, and it has a glyph for every object Upmo names. The mark is the caret. It replaces every “up”, “done”, “send” and “check” glyph in the set. icons.json maps each concept to its icon name. Code imports icons by concept, never by picking a glyph on the spot.
- Stroke 1.75, round caps and joins,
currentColor. Never use the filled variants or two-tone icons. Never draw a custom icon for a concept Tabler covers. - Sizes.
icon-sm16px inside badges, inputs andbody-smrows.icon-md20px in buttons, nav and table actions.icon-lg24px in empty states and tiles. Marketing can go to 32px and 48px. No other sizes. - One concept, one icon. “Tasks” is
list-checkin the sidebar, in the command palette, on a task tile and in a breadcrumb. People learn an icon once and find it everywhere. The map is the source. If a concept needs an icon and is not in the map, add it to the map first. - The caret wins. Wherever Tabler would give
chevron-up,arrow-up,check,circle-check,send,trending-uporarrow-up-right, Upmo draws the caret fromassets/icons/caret.svg. Down chevrons for menus and selects stay Tabler. They are not the mark. - Token direction is not the mark. The 12px glyphs before token counts (in, out) are Tabler
chevron-upandchevron-down. Never flip or rotate the caret to point down. A down caret would be the mark upside down. - Status is the caret family. Queued, Preparing, Planning, Working, Checking, Done and Failed use the five
assets/icons/status-*.svgmarks, each beside its word (see Microcopy). Tabler supplies the other states: clock for needs approval, hourglass for queued, pause for paused. - Labels. A decorative icon next to text is
aria-hidden="true". An icon-only control has anaria-labelfrom the Microcopy labels and a tooltip with the same text. An icon never carries meaning alone where the user has to act on it. The word is there too, or the tooltip is. - Alignment. Icons sit on the visual centre of the text:
vertical-align: -0.125eminline, flexalign-items: centerin controls. In a 40px control, a 20px icon has 10px above and below. Icon and label are 8px apart, or 6px insmcontrols. - Colour. Icons take the text colour of their control:
inkin buttons,ink-mutedin nav at rest,emerald-deepon the active nav item. Status tokens are only for status icons. Never putemeraldon a 16px icon on Bone (3.9:1). Useemerald-deep. - Motion. Icons do not animate. The exceptions are the caret (draw, done fade, lift) and the chevron that rotates 180° on expand (200ms). No spinning refresh, no bouncing bell.
Concept keys come from icons.json. “caret” means the Upmo caret. “status-x” means the status caret asset.
| Area | Concept | Icon |
|---|---|---|
| Navigation | tasks · chats · agents · automations · knowledge · memory · usage · notifications · settings | list-check · message · users · clock-play · books · brain · chart-bar · bell · settings |
| Navigation | search · command palette · sidebar · menu · back · forward · home · external · scroll to top | search · command · layout-sidebar · menu-2 · arrow-left · arrow-right · home · external-link · caret |
| Actions | add · edit · delete · remove / close · copy · copied · download · upload · attach | plus · pencil · trash · x · copy · caret · download · upload · paperclip |
| Actions | send · stop · pause · resume · retry / regenerate · pin · pinned · archive · unarchive | caret · player-stop · player-pause · player-play · refresh · pin · pinned · archive · archive-off |
| Actions | more · more (vertical) · filter · sort · expand · collapse · next · previous · link · share | dots · dots-vertical · filter · arrows-sort · chevron-down · caret · chevron-right · chevron-left · link · share |
| Actions | approve · deny · follow up · dictate · light theme · dark theme · sign in · sign out · reveal · hide · drag | caret · x · corner-down-right · microphone · sun · moon · login · logout · eye · eye-off · grip-vertical |
| Actions | maximize · minimize · table view · chart view · zoom in · zoom out · notifications · muted · keyboard | maximize · minimize · table · chart-bar · zoom-in · zoom-out · bell · bell-off · keyboard |
| Status | idle · preparing · planning · working · checking · done · failed | status-idle · status-plan · status-plan · status-build · status-build · status-done · status-failed |
| Status | needs approval · paused · queued · stopped · loading · success · info · warning · danger · help | clock · player-pause · hourglass · x · caret · caret · info-circle · alert-triangle · alert-circle · help |
| Status | locked · unlocked · verified · online · offline | lock · lock-open · shield-check · wifi · wifi-off |
| Steps | preparing · planning · working · checking · done | search · list-details · hammer · shield-check · flag |
| Objects | task · chat · agent · provider · model · connector · MCP server · repository · GitHub · sandbox | list-check · message · user-hexagon · plug · cpu · plug-connected · server · git-branch · brand-github · box |
| Objects | artifact · code · terminal · database · tokens · budget · cost · schedule · calendar · timezone | file · code · terminal-2 · database · coins · wallet · receipt · calendar-clock · calendar · world |
| Objects | user · team · email · PDF · text file · code file · JSON · image · audio · folder · tag · key | user · users · mail · file-type-pdf · file-text · file-code · braces · photo · file-music · folder · tag · key |
| Objects | skill · memory · source · automation · workflow · delivery · tool call · SQL · web · version | book · brain · file-search · clock-play · git-merge · send · tool · database · world-www · versions |
The IconMap component draws every row from the live Tabler sprite, so you can check the map by eye.
In code
Section titled “In code”Mantine: import { IconListCheck } from '@tabler/icons-react' with size={20} stroke={1.75}. The caret and the status carets ship as SVG files in @upmo-ai/icons, next to the concept map. React components for them will come with @upmo-ai/ui in a later release. Until then, use the SVG files. Every name in icons.json was checked against the 3.31 sprite.
Every concept
Section titled “Every concept”Generated from icons.json with the Tabler Icons 3.31 SVGs and the Upmo marks.
| Concept | Icon | Name |
|---|---|---|
nav.tasks |
list-check |
|
nav.chats |
message |
|
nav.agents |
users |
|
nav.automations |
clock-play |
|
nav.knowledge |
books |
|
nav.memory |
brain |
|
nav.usage |
chart-bar |
|
nav.notifications |
bell |
|
nav.settings |
settings |
|
nav.search |
search |
|
nav.command_palette |
command |
|
nav.sidebar |
layout-sidebar |
|
nav.menu |
menu-2 |
|
nav.back |
arrow-left |
|
nav.forward |
arrow-right |
|
nav.home |
home |
|
nav.external |
external-link |
|
nav.scroll_top |
caret |
|
action.add |
plus |
|
action.edit |
pencil |
|
action.delete |
trash |
|
action.remove |
x |
|
action.close |
x |
|
action.copy |
copy |
|
action.copied |
caret |
|
action.download |
download |
|
action.upload |
upload |
|
action.attach |
paperclip |
|
action.send |
caret |
|
action.stop |
player-stop |
|
action.pause |
player-pause |
|
action.resume |
player-play |
|
action.retry |
refresh |
|
action.regenerate |
refresh |
|
action.pin |
pin |
|
action.pinned |
pinned |
|
action.archive |
archive |
|
action.unarchive |
archive-off |
|
action.more |
dots |
|
action.more_vertical |
dots-vertical |
|
action.filter |
filter |
|
action.sort |
arrows-sort |
|
action.expand |
chevron-down |
|
action.collapse |
caret |
|
action.next |
chevron-right |
|
action.previous |
chevron-left |
|
action.link |
link |
|
action.share |
share |
|
action.approve |
caret |
|
action.deny |
x |
|
action.follow_up |
corner-down-right |
|
action.dictate |
microphone |
|
action.theme_light |
sun |
|
action.theme_dark |
moon |
|
action.sign_in |
login |
|
action.sign_out |
logout |
|
action.reveal |
eye |
|
action.hide |
eye-off |
|
action.drag |
grip-vertical |
|
action.maximize |
maximize |
|
action.minimize |
minimize |
|
action.table_view |
table |
|
action.chart_view |
chart-bar |
|
action.zoom_in |
zoom-in |
|
action.zoom_out |
zoom-out |
|
action.notifications |
bell |
|
action.notifications_off |
bell-off |
|
action.keyboard |
keyboard |
|
status.idle |
status-idle |
|
status.preparing |
status-plan |
|
status.planning |
status-plan |
|
status.working |
status-build |
|
status.checking |
status-build |
|
status.done |
status-done |
|
status.failed |
status-failed |
|
status.needs_approval |
clock |
|
status.paused |
player-pause |
|
status.queued |
hourglass |
|
status.stopped |
x |
|
status.loading |
caret |
|
status.success |
caret |
|
status.info |
info-circle |
|
status.warning |
alert-triangle |
|
status.danger |
alert-circle |
|
status.help |
help |
|
status.locked |
lock |
|
status.unlocked |
lock-open |
|
status.verified |
shield-check |
|
status.online |
wifi |
|
status.offline |
wifi-off |
|
phase.preparing |
search |
|
phase.planning |
list-details |
|
phase.working |
hammer |
|
phase.checking |
shield-check |
|
phase.done |
flag |
|
object.task |
list-check |
|
object.chat |
message |
|
object.agent |
user-hexagon |
|
object.provider |
plug |
|
object.model |
cpu |
|
object.connector |
plug-connected |
|
object.mcp |
server |
|
object.repository |
git-branch |
|
object.github |
brand-github |
|
object.sandbox |
box |
|
object.artifact |
file |
|
object.code |
code |
|
object.terminal |
terminal-2 |
|
object.database |
database |
|
object.tokens |
coins |
|
object.budget |
wallet |
|
object.cost |
receipt |
|
object.schedule |
calendar-clock |
|
object.calendar |
calendar |
|
object.timezone |
world |
|
object.user |
user |
|
object.team |
users |
|
object.email |
mail |
|
object.file_pdf |
file-type-pdf |
|
object.file_text |
file-text |
|
object.file_code |
file-code |
|
object.json |
braces |
|
object.image |
photo |
|
object.audio |
file-music |
|
object.folder |
folder |
|
object.tag |
tag |
|
object.key |
key |
|
object.skill |
book |
|
object.memory |
brain |
|
object.source |
file-search |
|
object.automation |
clock-play |
|
object.workflow |
git-merge |
|
object.delivery |
send |
|
object.tool_call |
tool |
|
object.sql |
database |
|
object.web |
world-www |
|
object.version |
versions |