Icon reference

Table of Contents

The icon vocabulary for this interface, and the process for adding to it.

An icon set drifts when each screen picks its own. Two screens then use different marks for one idea, and a third invents a fourth. This document exists so that does not happen: the table below is the whole vocabulary, and adding to it is a process with a checklist rather than a decision made at a call site.

The artwork is the 70 SVG files in projects/ores.web/packages/web/src/assets/icons/. Every icon named below has a file there. The Icon Guidelines page carries the same set grouped for design use, and is the source of truth for the artwork itself. The two specifications that once used it are superseded: entity_specification.org describes entity screens that are deleted, and component_specification.org now specifies the browser shell and the transport.

1. The system

One icon set: Microsoft Fluent UI System Icons. The Qt client also carried a Solar set as an alternate theme; this interface does not, because supporting two sets doubles the vocabulary for no gain. Fluent only.

Naming. Icons are ic_fluent_{concept}_{size}_{variant}.svg. Sizes are 16, 20, 32 and 48. The live set uses 16, 20 and 48, and carries the regular variant only.

Sizes.

Size Where
16px Inline with text, dense tables
20px Buttons, navigation, the standard action size
32px Headers, emphasis
48px Feature icons, onboarding, empty states

Variants. Regular is the outline style, for passive states and secondary actions. A filled variant would be solid, for active states, emphasis and primary actions. The live set has no filled file.

Colour. Icons are monochrome and recoloured at use, not shipped in colour.

2. How the Qt client declared them

Historical reference. The Qt client is deleted from the tree, so nothing here runs today.

An Icon enum in IconUtils.hpp listed every concept, alphabetically. A getIconDef() function in IconUtils.cpp mapped each enum member to a definition: 

case Icon::Publish: return {"ic_fluent_arrow_upload_20", "upload-square.svg"};

The first string was the Fluent base name without the variant suffix; the second was the Solar counterpart, which this interface does not use. In the port, one table in the icon module replaced both. Commit e47043269f deleted that module with the generated entity screens, so the set is a flat directory of SVG files today.

3. The inventory

Seventy concepts in twelve categories. Each concept names a file in projects/ores.web/packages/web/src/assets/icons/. The file is the concept with the size and the regular variant appended, for example ic_fluent_add_20_regular.svg.

Concept Fluent icon Used for
Actions    
Add ic_fluent_add New buttons, adding to a list, creating
Copy ic_fluent_copy Copy actions that create a duplicate
Delete ic_fluent_delete Deleting, removing from a list. Use it sparingly
Delete dismiss ic_fluent_delete_dismiss Purging, clearing all data, bulk destruction
Edit ic_fluent_edit Editing, modifying, the pencil metaphor
Save ic_fluent_save Saving, applying changes
Checkmark ic_fluent_checkmark Confirming, success, the selected state in a list
Dismiss ic_fluent_dismiss Closing, cancelling, clearing
Link dismiss ic_fluent_link_dismiss Removing a link between two records; the records stay
Star ic_fluent_star Favourited
Terminal ic_fluent_window_console Shell surfaces, consoles, command lines
Search ic_fluent_search Search fields and search actions
Filter ic_fluent_filter Filter controls
Settings ic_fluent_settings Configuration
Wand ic_fluent_wand Generating, auto-filling, creating synthetic data
Record ic_fluent_record Recording
Publish ic_fluent_arrow_upload Publishing, deploying, uploading to production. Note the concept name and the file name differ
Navigation    
Arrow left ic_fluent_arrow_left Back, scrolling left
Arrow clockwise ic_fluent_arrow_clockwise Refreshing a list from the server
Arrow download ic_fluent_arrow_download Downloading a file
Arrow import ic_fluent_arrow_import Import: bringing an ORE document in
Arrow export ic_fluent_arrow_export Export: writing an ORE document out
Arrow sync ic_fluent_arrow_sync Synchronising
Arrow trending ic_fluent_arrow_trending Trends, movement
Arrow rotate counterclockwise ic_fluent_arrow_rotate_counterclockwise Reverting to an earlier state
Status and feedback    
Info ic_fluent_info Informational messages
Warning ic_fluent_warning Warnings, non-blocking problems
Error circle ic_fluent_error_circle Errors, blocking problems
Question ic_fluent_question Help, uncertain states
Checkmark circle ic_fluent_checkmark_circle Success, a confirmed state
Users and identity    
Person ic_fluent_person A person, a user
Person add ic_fluent_person_add Adding a person
Person accounts ic_fluent_person_accounts Account management
Contact card ic_fluent_contact_card Contact details
Security and access    
Lock closed ic_fluent_lock_closed Locked, restricted
Lock open ic_fluent_lock_open Unlocked, accessible
Password reset ic_fluent_password_reset Forcing a password change
Key multiple ic_fluent_key_multiple Credentials, permissions
Connection status    
Plug connected ic_fluent_plug_connected Connected
Plug disconnected ic_fluent_plug_disconnected Disconnected
Plug connected checkmark ic_fluent_plug_connected_checkmark Connected and healthy
Server link ic_fluent_server_link A server connection
Files and documents    
Folder ic_fluent_folder A folder, a container
Document table ic_fluent_document_table Tabular data, a dataset
Notepad ic_fluent_notepad Notes, free text
Library ic_fluent_library A collection of datasets or documents
Organisation and entities    
Organisation ic_fluent_organization An organisation
Handshake ic_fluent_handshake An agreement, a counterparty
People team ic_fluent_people_team A team
Building bank ic_fluent_building_bank A bank
Building skyscraper ic_fluent_building_skyscraper A large institution
Building ic_fluent_building Premises
Briefcase ic_fluent_briefcase A business unit, a job
Data and finance    
Chart multiple ic_fluent_chart_multiple Charts, analysis
Database ic_fluent_database A data store
Code ic_fluent_code Code, a script
Book ic_fluent_book A book, a portfolio
Currency dollar euro ic_fluent_currency_dollar_euro Money, a currency
Apps ic_fluent_apps Applications, modules
Classification ic_fluent_classification A type or class
Column triple ic_fluent_column_triple Columns, a report template
Flag ic_fluent_flag A country flag
Globe ic_fluent_globe A region, the world
Table ic_fluent_table A grid of rows and columns
Compute and execution    
Flash flow ic_fluent_flash_flow A pipeline, a workflow
Play ic_fluent_play A running workflow
Desktop ic_fluent_desktop A desktop, a compute host
Time and history    
Clock ic_fluent_clock Time, a schedule
History ic_fluent_history Version history
Calendar clock ic_fluent_calendar_clock A scheduled date
Tasks app ic_fluent_tasks_app Tasks, a work queue
Text and formatting    
Tag ic_fluent_tag A tag, a label on a record

Every name in the table is a file in projects/ores.web/packages/web/src/assets/icons/: the concept with _20_regular.svg appended, except clock, which is 16px, and password_reset, which is 48px. Confirm each new name against that directory before you write it, because a wrong name renders as nothing rather than as an error.

4. Adding an icon

In the Qt client (historical):

  1. Find a semantically appropriate icon in both sets, both variants.
  2. Copy it into the Fluent directories, both variants. (In the Qt client, also the Solar directories; this interface uses Fluent only.)
  3. Add it to resources.qrc.
  4. Add an entry to the Icon enum, alphabetically.
  5. Add the mapping in getIconDef().
  6. Use it through createRecoloredIcon.
  7. Document it in the icon guidelines, in the right category.

Here:

  1. Find the icon in the Fluent UI System Icons set, and confirm it is not already in the table under another name.
  2. Copy the regular SVG file into projects/ores.web/packages/web/src/assets/icons/.
  3. Add it to the table in this document, in the right category, with what it is for.

The artwork and the table are updated together. An icon added to the set but not to the table is one the next person will not find, and will re-add under a different concept.

5. Actions a journey screen draws on

The subset the entity screens used. Those screens are deleted, so nothing consumes this table today. It stays as the vocabulary the journey screens draw on when they need the same actions.

Action Icon Size
Refresh arrow_clockwise 20
Add add 20
Edit edit 20
Delete delete 20
Remove a link link_dismiss 20
History history 20
Save save 20
Close or cancel dismiss 20
Revert to a version arrow_rotate_counterclockwise 20
Confirm checkmark 20
Search search 20
Filter filter 20
Settings settings 20
Generate wand 20
Import arrow_import 20
Export arrow_export 20
Purge delete_dismiss 20
Lock lock_closed 20
Read only (the access mark) lock_closed 16
Unlock lock_open 20

Refresh and Remove a link joined the set from the Fluent repository for the Record screen standard, which draws every action in this table through the shared Icon component.

Emacs 29.3 (Org mode 9.6.15)