Icon guidelines

Table of Contents

ORE Studio's icon catalogue lives here as a single visual-language reference. Pick an icon by its semantic category, then match the variant (Regular for default / Filled for active) to the UI state. UI skills drive icon selection from this catalogue; for the broader UI design context see UI design principles. Return to Knowledge.

The live icon assets are 73 SVG files in projects/ores.web/packages/web/src/assets/icons/. Every icon link below resolves in this tree. The file name is ic_fluent_{concept}_{size}_regular.svg; the set carries the Regular variant only. An entry whose file is absent says None in the asset set.

1. Icon System Overview

ORE Studio uses Microsoft Fluent UI System Icons. All icons follow the naming convention: 

ic_fluent_{concept}_{size}_{variant}.svg

1.1. Variants

  • Regular: Outline style, used for default/passive states and secondary actions.
  • Filled: Solid style, used for active states, emphasis, and primary actions.

1.2. Sizes

  • 16px: Compact UI, inline with text, dense tables.
  • 20px: Standard UI elements, buttons, navigation.
  • 32px: Headers, emphasis areas.
  • 48px: Large feature icons, onboarding, empty states.

1.3. Usage Principles

  1. Consistency: Use the same icon for the same concept throughout the app.
  2. Clarity over decoration: If removing an icon loses no meaning, remove it.
  3. Paired variants: Use regular for default, filled for hover/active/selected.
  4. Adequate spacing: Give icons room to breathe, minimum 4px from text.

2. Icon Inventory

2.1. Actions

Icons representing user-initiated operations.

2.1.1. Add

Create new items, add to lists, insert content.

  • Regular: ic_fluent_add_20_regular.svg
  • Filled: None in the asset set

Usage: "New" buttons, add to list, create actions.

2.1.2. Copy

Copy an item, creating a duplicate with the same content.

  • Regular: ic_fluent_copy_20_regular.svg
  • Filled: None in the asset set

Usage: "Copy" toolbar buttons and context menu actions that create a copy of the selected item (e.g. folder, environment, connection). The copy gets the original name suffixed with " (copy)".

2.1.3. Delete

Remove items, clear content, destructive actions.

  • Regular: ic_fluent_delete_20_regular.svg
  • Filled: None in the asset set

Usage: Delete buttons, remove from list. Use it sparingly to indicate a destructive nature.

2.1.4. Delete Dismiss

Purge data, clear all, destructive bulk action with finality.

  • Regular: ic_fluent_delete_dismiss_20_regular.svg
  • Filled: None in the asset set

Usage: Purge database actions, clear all data, bulk delete operations. Combines delete (trash can) with dismiss (X) to indicate permanent removal with no undo. Always require confirmation before use.

2.1.5. Edit

Modify existing content, enter edit mode.

  • Regular: ic_fluent_edit_20_regular.svg
  • Filled: None in the asset set

Usage: Edit buttons, modify actions, pencil metaphor.

2.1.6. Save

Persist changes, commit data.

  • Regular: ic_fluent_save_20_regular.svg
  • Filled: None in the asset set

Usage: Save buttons, apply changes.

2.1.7. Checkmark

Confirm action, indicate completion, accept.

  • Regular: ic_fluent_checkmark_20_regular.svg
  • Filled: None in the asset set

Usage: Confirmation buttons, success indicators, selected state in lists.

2.1.8. Dismiss

Close dialogs, cancel operations, clear notifications.

  • Regular: ic_fluent_dismiss_20_regular.svg
  • Filled: None in the asset set

Usage: Close buttons, cancel actions, clear/dismiss.

2.1.9. Star

Favorite, bookmark, rate.

  • Regular: ic_fluent_star_20_regular.svg
  • Filled: None in the asset set

Usage: The favourite action. The live set carries the Regular variant only.

2.1.10. Terminal

Interactive command shell, console, REPL.

  • Regular: ic_fluent_window_console_20_regular.svg
  • Filled: None in the asset set

Usage: Shell widget, console windows, command-line interfaces.

2.1.11. Wand

Generate synthetic data, auto-fill, magic create.

  • Regular: ic_fluent_wand_20_regular.svg
  • Filled: None in the asset set

Usage: Generate buttons, auto-fill actions, create synthetic/test data.

2.1.12. Record

Start recording, capture session.

  • Regular: ic_fluent_record_20_regular.svg
  • Filled: None in the asset set

Usage: Recording controls.

2.1.13. Publish

Deploy data to production, upload, send to target system.

  • Regular: ic_fluent_arrow_upload_20_regular.svg
  • Filled: None in the asset set

Usage: Publish buttons, deploy actions, upload data to production tables. Represents sending data "upward" to a target system.

2.1.14. Search

Find records by text.

  • Regular: ic_fluent_search_20_regular.svg
  • Filled: None in the asset set

Usage: Search fields and search actions.

2.1.15. Filter

Narrow a list or table to matching records.

  • Regular: ic_fluent_filter_20_regular.svg
  • Filled: None in the asset set

Usage: Filter controls on a list or table.

2.1.16. Settings

Configuration and preferences.

  • Regular: ic_fluent_settings_20_regular.svg
  • Filled: None in the asset set

Usage: Configuration and settings actions.

2.1.17. Reload

Refresh data from server, reload content.

  • Regular: None in the asset set
  • Filled: None in the asset set

Usage: Reload buttons, refresh from server, update data. Use 16px size for toolbar buttons. Distinct from Sync (bidirectional) - Reload implies fetching fresh data from source.

2.1.18. Redo

Redo last undone action, restore previous state.

  • Regular: None in the asset set
  • Filled: None in the asset set

Usage: Redo buttons in edit contexts. Pairs with Undo (arrow_rotate_counterclockwise). Both Reload and Redo use the same icon; context determines meaning.

2.2. Navigation

Icons for directional movement and navigation controls.

2.2.1. Arrow Left

Navigate back, move left.

  • Regular: ic_fluent_arrow_left_20_regular.svg
  • Filled: None in the asset set

Usage: Back navigation, left scroll controls.

2.2.2. Arrow Right

Navigate forward, move right.

  • Regular: None in the asset set
  • Filled: None in the asset set

Usage: Forward navigation, right scroll controls, proceed actions.

2.2.3. Arrow Previous

Step to previous item in sequence.

  • Regular: None in the asset set
  • Filled: None in the asset set

Usage: Pagination, stepper controls, previous item.

2.2.4. Arrow Next

Step to next item in sequence.

  • Regular: None in the asset set
  • Filled: None in the asset set

Usage: Pagination, stepper controls, next item.

2.2.5. Arrow Download

Download content, export data.

  • Regular: ic_fluent_arrow_download_20_regular.svg
  • Filled: None in the asset set

Usage: Download buttons.

2.2.6. Arrow Import

Import: bring an ORE document in. The record screen standard's Import.

  • Regular: ic_fluent_arrow_import_20_regular.svg
  • Filled: None in the asset set

Usage: The Import button of a kind with an ORE document.

2.2.7. Arrow Export

Export: write an ORE document out. The record screen standard's Export.

  • Regular: ic_fluent_arrow_export_20_regular.svg
  • Filled: None in the asset set

Usage: The Export button of a kind with an ORE document.

2.2.8. Arrow Download CSV

Import CSV data.

  • Regular: None in the asset set
  • Filled: None in the asset set

Usage: Import CSV actions, clearly labeled with text overlay.

2.2.9. Arrow Download FPML

Import FPML data.

  • Regular: None in the asset set
  • Filled: None in the asset set

Usage: Import FPML actions, clearly labeled with text overlay.

2.2.10. Arrow Download ORE

Import ORE data.

  • Regular: None in the asset set
  • Filled: None in the asset set

Usage: Import ORE actions, clearly labeled with text overlay.

2.2.11. Arrow Upload CSV

Export CSV data.

  • Regular: None in the asset set
  • Filled: None in the asset set

Usage: Export CSV actions, clearly labeled with text overlay.

2.2.12. Arrow Upload FPML

Export FPML data.

  • Regular: None in the asset set
  • Filled: None in the asset set

Usage: Export FPML actions, clearly labeled with text overlay.

2.2.13. Arrow Upload ORE

Export ORE data.

  • Regular: None in the asset set
  • Filled: None in the asset set

Usage: Export ORE actions, clearly labeled with text overlay.

2.2.14. Arrow Sync

Synchronize data, refresh with server.

  • Regular: ic_fluent_arrow_sync_20_regular.svg
  • Filled: None in the asset set

Usage: Sync buttons, bidirectional refresh.

2.2.15. Arrow Trending

Trades, financial market movement, trending data.

  • Regular: ic_fluent_arrow_trending_20_regular.svg
  • Filled: None in the asset set

Usage: Trades management. An upward-trending arrow represents financial market activity and transaction flow.

2.2.16. Arrow Clockwise (16px)

Rotate clockwise, redo action.

  • Regular: None in the asset set
  • Filled: None in the asset set

Usage: Redo buttons, clockwise rotation controls.

2.2.17. Arrow Rotate Counterclockwise

Undo action, rotate counterclockwise.

  • Regular: ic_fluent_arrow_rotate_counterclockwise_20_regular.svg
  • Filled: None in the asset set

Usage: Undo buttons, counterclockwise rotation, revert changes.

2.3. Status & Feedback

Icons communicating system state and user feedback.

2.3.1. Info

Informational message, help content, details.

  • Regular: ic_fluent_info_20_regular.svg
  • Filled: None in the asset set

Usage: Info tooltips, help buttons, informational banners.

2.3.2. Warning

Caution, potential issue, requires attention.

  • Regular: ic_fluent_warning_20_regular.svg
  • Filled: None in the asset set

Usage: Warning messages, caution indicators. Pair with amber/yellow color.

2.3.3. Error Circle

Error state, failed operation, critical issue.

  • Regular: ic_fluent_error_circle_20_regular.svg
  • Filled: None in the asset set

Usage: Error messages, validation failures, blocked states. Pair with red color.

2.3.4. Question

Help, unknown state, requires clarification.

  • Regular: ic_fluent_question_20_regular.svg
  • Filled: None in the asset set

Usage: Help buttons, FAQ links, contextual help triggers.

2.3.5. Checkmark Circle

A confirmed or completed state.

  • Regular: ic_fluent_checkmark_circle_20_regular.svg
  • Filled: None in the asset set

Usage: Success indicators and confirmed states, such as data quality.

2.4. Users & Identity

Icons representing people and account management.

2.4.1. Person

Single user, current user, profile.

  • Regular: ic_fluent_person_20_regular.svg
  • Filled: None in the asset set

Usage: User profile, account menu, single user reference.

2.4.2. Person Add

Invite user, create account, add team member.

  • Regular: ic_fluent_person_add_20_regular.svg
  • Filled: None in the asset set

Usage: Invite buttons, add user actions, registration.

2.4.3. Person Accounts

Multiple users, team, user management.

  • Regular: ic_fluent_person_accounts_20_regular.svg
  • Filled: None in the asset set

Usage: Team views, user management, multi-user contexts.

2.4.4. Contact Card

A person's contact details.

  • Regular: ic_fluent_contact_card_20_regular.svg
  • Filled: None in the asset set

Usage: Contact details for a person or a party.

2.4.5. Anchor

Fixed reference point a value is measured from.

  • Regular: None in the asset set
  • Filled: None in the asset set

Usage: Tenor Anchor reference data (SPOT, TODAY, TOMORROW, NEAR_LEG, IMM_ROLL). The set has no pin or anchor file, so add one before use.

2.5. Security & Access

Icons for authentication and authorization concepts.

2.5.1. Lock Closed

Secured, protected, authentication required.

  • Regular: ic_fluent_lock_closed_20_regular.svg
  • Filled: None in the asset set

Usage: Locked content, secure areas, login required indicators.

2.5.2. Lock Open

Unlocked, accessible, public.

  • Regular: ic_fluent_lock_open_20_regular.svg
  • Filled: None in the asset set

Usage: Unlocked state, public content, access granted.

2.5.3. Password Reset (48px)

Reset credentials, forgot password flow.

  • Regular: ic_fluent_password_reset_48_regular.svg
  • Filled: None in the asset set

Usage: Password reset screens, credential recovery flows. Large size for feature prominence.

2.5.4. Key Multiple

Change master password, manage encryption keys.

  • Regular: ic_fluent_key_multiple_20_regular.svg
  • Filled: None in the asset set

Usage: Change master password actions, encryption key management, password vault operations.

2.5.5. Keyboard

Manual data entry, type input, user-typed values.

  • Regular: None in the asset set
  • Filled: None in the asset set

Usage: Manual entry options in combo boxes or dialogs where the user will type all values themselves (as opposed to selecting from a saved connection or environment). Conveys "I will type this myself".

2.6. Connection Status

Icons indicating connectivity and network state.

2.6.1. Plug Connected

Connected to server, online, link established.

  • Regular: ic_fluent_plug_connected_20_regular.svg
  • Filled: None in the asset set

Usage: Connection status indicators showing active connection.

2.6.2. Plug Disconnected

Disconnected, offline, no connection.

  • Regular: ic_fluent_plug_disconnected_20_regular.svg
  • Filled: None in the asset set

Usage: Disconnected state, offline mode, connection lost.

2.6.3. Plug Connected Checkmark

Connection verified, authenticated connection.

  • Regular: ic_fluent_plug_connected_checkmark_20_regular.svg
  • Filled: None in the asset set

Usage: Verified connection, authenticated session, secure link confirmed.

2.6.4. Server Link

Server connection bookmark, saved connection.

  • Regular: ic_fluent_server_link_20_regular.svg
  • Filled: None in the asset set

Usage: Saved server connections and bookmark management.

2.7. Files & Documents

Icons for file system and document operations.

2.7.1. Folder

Directory, container, file group.

  • Regular: ic_fluent_folder_20_regular.svg
  • Filled: None in the asset set

Usage: Folder navigation, directory listings.

2.7.2. Folder Open

Open folder, expanded directory, selected container.

  • Regular: None in the asset set
  • Filled: None in the asset set

Usage: Expanded folder state in tree views, selected folder.

2.7.3. Document Table

Tabular data, spreadsheet, structured document.

  • Regular: ic_fluent_document_table_20_regular.svg
  • Filled: None in the asset set

Usage: Table views, data documents, spreadsheet-like content.

2.7.4. Document Code (16px)

Source code, script, technical document.

  • Regular: None in the asset set
  • Filled: None in the asset set

Usage: Code files, scripts, configuration files.

2.7.5. Notepad

Log viewers, text output panes, ORE log content.

  • Regular: ic_fluent_notepad_20_regular.svg
  • Filled: None in the asset set

Usage: Any action that opens a log or text-output viewer. Distinct from Terminal (interactive shell), Document Code (source code), and Document Table (tabular data).

2.7.6. Library

A collection of datasets or documents.

  • Regular: ic_fluent_library_20_regular.svg
  • Filled: None in the asset set

Usage: Dataset bundles and catalogue views.

2.8. Organisation & Entities

Icons representing organisational structure and business entities.

2.8.1. Organization

Internal parties, legal entities within the firm.

  • Regular: ic_fluent_organization_20_regular.svg
  • Filled: None in the asset set

Usage: Party management (internal legal entities). Shows an org-chart/hierarchy symbol representing corporate structure.

2.8.2. Handshake

External counterparties, trading relationships.

  • Regular: ic_fluent_handshake_20_regular.svg
  • Filled: None in the asset set

Usage: Counterparty management. Represents external business relationships.

2.8.3. People Team

Business units, organisational divisions.

  • Regular: ic_fluent_people_team_20_regular.svg
  • Filled: None in the asset set

Usage: Business unit management. Shows a team/group of people, distinct from the building icons used for centres and tenants.

2.8.4. Building Bank

Financial centres, business centres (London, New York, Tokyo).

  • Regular: ic_fluent_building_bank_20_regular.svg
  • Filled: None in the asset set

Usage: Business centre reference data. A bank/institutional building representing financial centres where business operations occur.

2.8.5. Building Skyscraper

Tenants, enterprise organisations.

  • Regular: ic_fluent_building_skyscraper_20_regular.svg
  • Filled: None in the asset set

Usage: Tenant management (admin). A tall building/skyscraper representing an enterprise-level organisation.

2.8.6. Building

Generic building, general infrastructure.

  • Regular: ic_fluent_building_20_regular.svg
  • Filled: None in the asset set

Usage: Reserved for generic building contexts. Avoid using for specific entity types; prefer the specialised variants above.

2.8.7. Briefcase

Portfolios, investment collections.

  • Regular: ic_fluent_briefcase_20_regular.svg
  • Filled: None in the asset set

Usage: Portfolio management. A briefcase representing a collection of investments or financial instruments.

2.8.8. Book Open

Books, trading books, accounting books.

  • Regular: None in the asset set
  • Filled: None in the asset set

Usage: Book management. An open book representing trading/accounting books. Distinct from the closed Book icon used for methodologies and reference materials. The set has no open-book file, so use the closed Book icon until it arrives.

2.9. Data & Finance

Icons for numerical data and financial concepts.

2.9.1. Chart Multiple

Report definitions, report templates with multiple visualisation types.

  • Regular: ic_fluent_chart_multiple_20_regular.svg
  • Filled: None in the asset set

Usage: Report definition management. Multiple chart types on one icon conveys "a template that can generate various report formats". Distinct from the histogram icon used for data analytics.

2.9.2. Database

Data storage, datasets, data dimensions.

  • Regular: ic_fluent_database_20_regular.svg
  • Filled: None in the asset set

Usage: Dataset views, data dimensions (Origin, Nature, Treatment), data assets.

2.9.3. Code

Coding schemes, classification systems, identifier schemes.

  • Regular: ic_fluent_code_20_regular.svg
  • Filled: None in the asset set

Usage: Coding scheme management (LEI, ISIN, etc.), classification systems.

2.9.4. Book

Methodologies, documentation, reference materials.

  • Regular: ic_fluent_book_20_regular.svg
  • Filled: None in the asset set

Usage: Methodology views, data processing documentation, reference guides.

2.9.5. Clipboard Number 123 (16px)

Numeric data, ID reference, sequence.

  • Regular: None in the asset set
  • Filled: None in the asset set

Usage: ID fields, numeric references, serial numbers.

2.9.6. Currency Dollar Euro

Financial data, multi-currency, monetary values.

  • Regular: ic_fluent_currency_dollar_euro_20_regular.svg
  • Filled: None in the asset set

Usage: Currency fields, financial data, monetary transactions.

2.9.7. Classification

A type or class that a record belongs to.

  • Regular: ic_fluent_classification_20_regular.svg
  • Filled: None in the asset set

Usage: Type and class fields, such as a tenant type, a trade type or a code domain.

2.9.8. Column Triple

Three columns, a layout or a table structure.

  • Regular: ic_fluent_column_triple_20_regular.svg
  • Filled: None in the asset set

Usage: Report templates and batch views.

2.9.9. Flag

A country flag.

  • Regular: ic_fluent_flag_20_regular.svg
  • Filled: None in the asset set

Usage: Country fields.

2.9.10. Globe

A region, a country or the world.

  • Regular: ic_fluent_globe_20_regular.svg
  • Filled: None in the asset set

Usage: Geography views.

2.9.11. Table

A grid of rows and columns.

  • Regular: ic_fluent_table_20_regular.svg
  • Filled: None in the asset set

Usage: Tabular views, such as a queue monitor.

2.9.12. Tag

A tag or a label on a record.

  • Regular: ic_fluent_tag_20_regular.svg
  • Filled: None in the asset set

Usage: Badge definitions and version labels.

2.10. Compute & Execution

Icons representing compute infrastructure entities and executable work.

2.10.1. Apps

Application modules, compute applications.

  • Regular: ic_fluent_apps_20_regular.svg
  • Filled: None in the asset set

Usage: Compute application management (ores.compute app entity, e.g. an application such as ores.analytics.quant). A grid of squares representing a set of application modules.

2.10.2. Text Bullet List Square

Batches, collections of work units.

  • Regular: None in the asset set
  • Filled: None in the asset set

Usage: Compute batch management (ores.compute batch entity). The set has no file for this concept; the column_triple icon carries the batch concept today.

2.10.3. Desktop

Host machines, compute hosts.

  • Regular: ic_fluent_desktop_20_regular.svg
  • Filled: None in the asset set

Usage: Compute host management (ores.compute host entity). A desktop monitor representing a machine that runs work.

2.10.4. Flash Flow

Work units, executable units of work.

  • Regular: ic_fluent_flash_flow_20_regular.svg
  • Filled: None in the asset set

Usage: Compute work unit management (ores.compute workunit entity). A lightning bolt with a flow arrow representing a unit of executable work.

2.10.5. Play

Run a workflow or start a process.

  • Regular: ic_fluent_play_20_regular.svg
  • Filled: None in the asset set

Usage: A running workflow.

2.11. Time & History

Icons for temporal concepts.

2.11.1. Clock (16px)

Time, schedule, duration.

  • Regular: ic_fluent_clock_16_regular.svg
  • Filled: None in the asset set

Usage: Time fields, timestamps, schedule indicators.

2.11.2. History

Activity history, past actions, audit trail.

  • Regular: ic_fluent_history_20_regular.svg
  • Filled: None in the asset set

Usage: History views, recent items, activity logs.

2.11.3. Calendar Clock

Scheduler, scheduled jobs, cron tasks.

  • Regular: ic_fluent_calendar_clock_20_regular.svg
  • Filled: None in the asset set

Usage: Scheduler menu entries, job definition screen titles, and any element that represents scheduled or recurring work.

2.11.4. Calendar Add

Schedule a new job, create a scheduled task.

  • Regular: None in the asset set
  • Filled: None in the asset set

Usage: "Schedule Job" button in a job definition toolbar. Use it instead of generic Add when the action specifically creates a scheduled task.

2.11.5. Calendar Cancel

Unschedule a job, deactivate a scheduled task.

  • Regular: None in the asset set
  • Filled: None in the asset set

Usage: "Unschedule" button in a job definition toolbar or step. Semantically distinct from Delete (which implies permanent removal) — unschedule removes from the schedule while retaining the definition.

2.11.6. Tasks App

Job definitions list, task management application.

  • Regular: ic_fluent_tasks_app_20_regular.svg
  • Filled: None in the asset set

Usage: Job definition management. Represents a task management application — a list of scheduled jobs/tasks to execute. Distinct from Calendar Clock, which carries the scheduler concept.

2.12. Text & Formatting

Icons for text manipulation and formatting.

2.12.1. Text ABC Underline Double (32px)

Text validation, spell check, language processing.

  • Regular: None in the asset set
  • Filled: None in the asset set

Usage: Spell check, text validation, language tools.

3. Quick Reference Table

Concept Icon Name Regular Filled
Add/Create add_20 Default Active
Copy copy_20 Default Active
Delete/Remove delete_20 Default Danger
Purge/Clear All delete_dismiss_20 Default Danger
Edit/Modify edit_20 Default Active
Save save_20 Default Active
Confirm/Check checkmark_20 Default Done
Confirm/Success checkmark_circle_20 Default Done
Cancel/Close dismiss_20 Default Active
Favorite star_20 Off On
Generate wand_20 Default Active
Record record_20 Default Active
Search search_20 Default Active
Filter filter_20 Default Active
Settings settings_20 Default Active
Publish arrow_upload_20 Default Active
Terminal window_console_20 Default Active
Back arrow_left_20 Default Active
Download arrow_download_20 Default Active
Import arrow_import_20 Default Active
Export arrow_export_20 Default Active
Sync arrow_sync_20 Default Active
Trades arrow_trending_20 Default Active
Undo/Revert arrow_rotate_counterclockwise_20 Default Active
Info info_20 Default Active
Warning warning_20 Default Alert
Error error_circle_20 Default Alert
Help question_20 Default Active
User person_20 Default Active
Add User person_add_20 Default Active
Team person_accounts_20 Default Active
Contact Card contact_card_20 Default Active
Locked lock_closed_20 Default Active
Unlocked lock_open_20 Default Active
Change Password key_multiple_20 Default Active
Password Reset password_reset_48 Default Active
Connected plug_connected_20 Default Active
Disconnected plug_disconnected_20 Default Alert
Verified Connection plug_connected_checkmark_20 Default Active
Server Link server_link_20 Default Active
Folder folder_20 Closed Active
Table Document document_table_20 Default Active
Notepad (Log Viewer) notepad_20 Default Active
Library library_20 Default Active
Organization/Party organization_20 Default Active
Handshake/Cpty handshake_20 Default Active
People Team/BU people_team_20 Default Active
Building Bank/Centre building_bank_20 Default Active
Building Skyscraper building_skyscraper_20 Default Active
Building (generic) building_20 Default Active
Briefcase/Portfolio briefcase_20 Default Active
Chart Multiple chart_multiple_20 Default Active
Database/Dataset database_20 Default Active
Code/Scheme code_20 Default Active
Book/Methodology book_20 Default Active
Currency currency_dollar_euro_20 Default Active
Classification classification_20 Default Active
Column Triple column_triple_20 Default Active
Flag flag_20 Default Active
Globe globe_20 Default Active
Table table_20 Default Active
Tag tag_20 Default Active
Apps/Application apps_20 Default Active
Play play_20 Default Active
Host/Desktop desktop_20 Default Active
Work Unit/Flash Flow flash_flow_20 Default Active
Time clock_16 Default Active
History history_20 Default Active
Scheduler/Jobs calendar_clock_20 Default Active
Job Definitions List tasks_app_20 Default Active
Light palette brightness_high_20 Default Active
Dark palette dark_theme_20 Default Active
Language globe_20 Default Active

4. Adding New Icons

When adding a new icon to ORE Studio, follow these steps. The artwork lives in projects/ores.web/packages/web/src/assets/icons/, and the live set carries the regular variant. Steps 3 to 6 name files and functions of the former Qt client, which is not in the tree.

4.1. Step 1: Locate Icons in Source Repositories

ORE Studio uses one icon set:

  • Fluent UI System Icons: ~/Development/fluentui-system-icons-main/assets/

Search for a semantically appropriate icon. The live set carries the regular variant. Only clock is 16px and only password_reset is 48px; every other file is 20px.

Example search: 

find ~/Development/fluentui-system-icons-main/assets -name "*upload*20*regular*"

4.2. Step 2: Copy Icons to Project

Copy the icon into the live asset directory: 

cp ".../Arrow Upload/SVG/ic_fluent_arrow_upload_20_regular.svg" \
   projects/ores.web/packages/web/src/assets/icons/

4.3. Step 3: Update Resource File

There is no resource file. The Qt resource file that used to list the icons went with the ores.qt tree, and the web set is a flat directory of SVG files. The file itself is the registration.

4.4. Step 4: Add Enum Entry

Add the new icon to the Icon enum in IconUtils.hpp: 

enum class Icon {
    // ... existing entries (alphabetically sorted)
    PlugDisconnected,
    Publish,       // <- New entry
    Question,
    // ...
};

4.5. Step 5: Add Icon Mapping

Add the mapping in IconUtils.cpp in the getIconDef() function: 

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

The mapping format is:

  • First string: Fluent UI icon base name (without _regular.svg / _filled.svg)
  • Second string: Solar icon filename
  • Optional third parameter: true to force filled/bold variant

4.6. Step 6: Use the Icon

Use the new icon in code: 

action->setIcon(IconUtils::createRecoloredIcon(
    Icon::Publish, IconUtils::DefaultIconColor));

4.7. Step 7: Document the Icon

Update this skill document:

  1. Add the icon to the appropriate category in the Icon Inventory section
  2. Add an entry to the Quick Reference Table

5. See also

  • UX — the structure note that orders this cluster, and where to read this page in it.
  • UI design principles — broader design language.
  • UX Language — the umbrella visual-language reference linking icons, colour semantics and journey screen anatomy.

Emacs 29.3 (Org mode 9.6.15)