Icon Guidelines

When to use this skill

Use this skill when:

  • Selecting icons for new UI components or features.
  • Reviewing icon usage for consistency across the application.
  • Understanding the semantic meaning of existing icons.
  • Deciding between filled and regular icon variants.

How to use this skill

  1. Identify the semantic category of what you need to represent (action, status, navigation, etc.).
  2. Find the appropriate icon in the inventory below.
  3. Choose the correct variant: filled for emphasis/active states, regular for passive/default states.
  4. Follow the usage guidelines for sizing and context.

Icon System Overview

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

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

Variants

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

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.

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.

Icon Inventory

Actions

Icons representing user-initiated operations.

Copy

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

  • Regular: ic_fluent_copy_20_regular.svg
  • Filled: ic_fluent_copy_20_filled.svg

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)".

Delete

Remove items, clear content, destructive actions.

Usage: Delete buttons, remove from list. Use filled variant sparingly to indicate destructive nature.

Delete Dismiss

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

  • Regular: ic_fluent_delete_dismiss_20_regular.svg
  • Filled: ic_fluent_delete_dismiss_20_filled.svg

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.

Terminal

Interactive command shell, console, REPL.

  • Fluent Regular: ic_fluent_window_console_20_regular.svg
  • Fluent Filled: ic_fluent_window_console_20_filled.svg
  • Solar Linear: programming.svg
  • Solar Bold: programming.svg

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

Publish

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

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

Reload

Refresh data from server, reload content.

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.

Redo

Redo last undone action, restore previous state.

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

Navigation

Icons for directional movement and navigation controls.

Arrow Trending

Trades, financial market movement, trending data.

  • Fluent Regular: ic_fluent_arrow_trending_20_regular.svg
  • Fluent Filled: ic_fluent_arrow_trending_20_filled.svg
  • Solar Linear: transfer-horizontal.svg
  • Solar Bold: transfer-horizontal.svg

Usage: Trades management (ActionTrades toolbar/menu). An upward-trending arrow represents financial market activity and transaction flow. Solar fallback: transfer-horizontal.svg.

Status & Feedback

Icons communicating system state and user feedback.

Error Circle

Error state, failed operation, critical issue.

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

Security & Access

Icons for authentication and authorization concepts.

Password Reset (48px)

Reset credentials, forgot password flow.

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

Key Multiple

Change master password, manage encryption keys.

  • Regular: ic_fluent_key_multiple_20_regular.svg
  • Filled: ic_fluent_key_multiple_20_filled.svg

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

Keyboard

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

  • Regular: ic_fluent_keyboard_20_regular.svg
  • Filled: ic_fluent_keyboard_20_filled.svg

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".

Connection Status

Icons indicating connectivity and network state.

Server Link

Server connection bookmark, saved connection, connection browser.

  • Regular: ic_fluent_server_link_20_regular.svg
  • Filled: ic_fluent_server_link_20_filled.svg

Usage: Connection browser window, saved server connections, bookmark management. Opens the Connection Browser MDI window for managing server connection bookmarks.

Files & Documents

Icons for file system and document operations.

Notepad

Log viewers, text output panes, ORE log content.

  • Fluent Regular: ic_fluent_notepad_20_regular.svg
  • Fluent Filled: ic_fluent_notepad_20_filled.svg
  • Solar Linear: solar_notepad.svg (mapped from document-text.svg)
  • Solar Bold: solar_notepad.svg (mapped from document-text.svg)

Usage: "Logs" toolbar button in the Compute Console Tasks tab and any other action that opens a log or text-output viewer. Distinct from Terminal (interactive shell), DocumentCode (source code), and DocumentTable (tabular data).

Organisation & Entities

Icons representing organisational structure and business entities.

Organization

Internal parties, legal entities within the firm.

  • Fluent Regular: ic_fluent_organization_20_regular.svg
  • Fluent Filled: ic_fluent_organization_20_filled.svg
  • Solar Linear: buildings-2.svg
  • Solar Bold: buildings-2.svg

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

Handshake

External counterparties, trading relationships.

  • Fluent Regular: ic_fluent_handshake_20_regular.svg
  • Fluent Filled: ic_fluent_handshake_20_filled.svg
  • Solar Linear: hand-shake.svg
  • Solar Bold: hand-shake.svg

Usage: Counterparty management. Represents external business relationships.

People Team

Business units, organisational divisions.

  • Fluent Regular: ic_fluent_people_team_20_regular.svg
  • Fluent Filled: ic_fluent_people_team_20_filled.svg
  • Solar Linear: structure.svg
  • Solar Bold: structure.svg

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

Building Bank

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

  • Fluent Regular: ic_fluent_building_bank_20_regular.svg
  • Fluent Filled: ic_fluent_building_bank_20_filled.svg
  • Solar Linear: buildings-3.svg
  • Solar Bold: buildings-3.svg

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

Building Skyscraper

Tenants, enterprise organisations.

  • Fluent Regular: ic_fluent_building_skyscraper_20_regular.svg
  • Fluent Filled: ic_fluent_building_skyscraper_20_filled.svg
  • Solar Linear: buildings.svg
  • Solar Bold: buildings.svg

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

Building

Generic building, general infrastructure.

  • Fluent Regular: ic_fluent_building_20_regular.svg
  • Fluent Filled: ic_fluent_building_20_filled.svg
  • Solar Linear: buildings.svg
  • Solar Bold: buildings.svg

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

Briefcase

Portfolios, investment collections.

  • Fluent Regular: ic_fluent_briefcase_20_regular.svg
  • Fluent Filled: ic_fluent_briefcase_20_filled.svg
  • Solar Linear: case-round.svg
  • Solar Bold: case-round.svg

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

Book Open

Books, trading books, accounting books.

  • Fluent Regular: ic_fluent_book_open_20_regular.svg
  • Fluent Filled: ic_fluent_book_open_20_filled.svg
  • Solar Linear: book-2.svg
  • Solar Bold: book-2.svg

Usage: Book management. An open book representing trading/accounting books. Distinct from the closed Book icon used for methodologies and reference materials.

Data & Finance

Icons for numerical data and financial concepts.

Chart Multiple

Report definitions, report templates with multiple visualisation types.

  • Fluent Regular: ic_fluent_chart_multiple_20_regular.svg
  • Fluent Filled: ic_fluent_chart_multiple_20_filled.svg
  • Solar Linear: presentation-graph.svg
  • Solar Bold: presentation-graph.svg

Usage: Report Definition management (ActionReportDefinitions). Multiple chart types on one icon conveys "a template that can generate various report formats". Distinct from the histogram icon used for data analytics. Solar fallback: presentation-graph.svg.

Code

Coding schemes, classification systems, identifier schemes.

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

Book

Methodologies, documentation, reference materials.

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

Time & History

Icons for temporal concepts.

Calendar Clock

Scheduler, scheduled jobs, cron tasks.

Usage: Scheduler menu entries, job definition list window title, any UI element representing scheduled/recurring work. Solar fallback: `calendar.svg`.

Calendar Add

Schedule a new job, create a scheduled task.

Usage: "Schedule Job" button in job definition list toolbar. Use instead of generic `Add` when the action specifically creates a scheduled task. Solar fallback: `calendar-add.svg`.

Calendar Cancel

Unschedule a job, deactivate a scheduled task.

Usage: "Unschedule" button in job definition list toolbar and detail dialog. Semantically distinct from `Delete` (which implies permanent removal) — unschedule removes from pg_cron while retaining the definition. Solar fallback: `alarm-remove.svg`.

Tasks App

Job definitions list, task management application.

  • Fluent Regular: ic_fluent_tasks_app_20_regular.svg
  • Fluent Filled: ic_fluent_tasks_app_20_filled.svg
  • Solar Linear: clipboard-list.svg
  • Solar Bold: clipboard-list.svg

Usage: Job Definition management (ActionJobDefinitions toolbar/menu). Represents a task management application — a list of scheduled jobs/tasks to execute. Distinct from CalendarClock (used for scheduler-concept menu entries and window titles) — use TasksApp for the job definitions list window and toolbar button. Solar fallback: clipboard-list.svg.

Text & Formatting

Icons for text manipulation and formatting.

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
Cancel/Close dismiss_20 Default Active
Favorite star_20 Off On
Generate wand_20 Default Active
Reload arrow_clockwise_16 Default Active
Redo arrow_clockwise_16 Default Active
Back arrow_left_20 Default Active
Forward arrow_right_20 Default Active
Download arrow_download_20 Default Active
Sync arrow_sync_20 Default Active
Trades arrow_trending_20 Default Active
Undo 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
Locked lock_closed_20 Default Active
Unlocked lock_open_20 Default Active
Change Password key_multiple_20 Default Active
Manual Entry keyboard_20 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
Folder Open folder_open_20 Open Active
Table Document document_table_20 Default Active
Code Document document_code_16 Default Active
Code/Scheme code_20 Default Active
Database/Dataset database_20 Default Active
Book/Methodology book_20 Default Active
Book Open/Books book_open_20 Default Active
Briefcase/Portfolio briefcase_20 Default Active
Building (generic) building_20 Default Active
Building Bank/Centre building_bank_20 Default Active
Building Skyscraper building_skyscraper_20 Default Active
Organization/Party organization_20 Default Active
Handshake/Cpty handshake_20 Default Active
People Team/BU people_team_20 Default Active
Currency currency_dollar_euro_20 Default Active
Time clock_16 Default Active
History history_20 Default Active
Scheduler/Jobs calendar_clock_20 Default Active
Schedule Job calendar_add_20 Default Active
Unschedule Job calendar_cancel_20 Default Active
Job Definitions List tasks_app_20 Default Active
Report Definitions chart_multiple_20 Default Active
Import CSV arrow_download_csv_20 Default Active
Import FPML arrow_download_fpml_20 Default Active
Import ORE arrow_download_ore_20 Default Active
Export CSV arrow_upload_csv_20 Default Active
Export FPML arrow_upload_fpml_20 Default Active
Export ORE arrow_upload_ore_20 Default Active
Publish arrow_upload_20 Default Active
Terminal window_console_20 Default Active
Notepad (Log Viewer) notepad_20 Default Active

Adding New Icons

When adding a new icon to ORE Studio, follow these steps:

Step 1: Locate Icons in Source Repositories

ORE Studio supports two icon sets:

  • Fluent UI System Icons: ~/Development/fluentui-system-icons-main/assets/
  • Solar Icons: ~/Development/solar-icons/packages/core/svgs/

Search for a semantically appropriate icon in both sets. For Fluent UI, look for 20px variants (regular and filled). For Solar, look for Linear and Bold variants.

Example search: 

find ~/Development/fluentui-system-icons-main/assets -name "*upload*20*"
find ~/Development/solar-icons/packages/core/svgs -name "*upload*"

Step 2: Copy Icons to Project

Copy the icons to the correct locations: 

# Fluent UI icons (regular and filled variants)
cp ".../Arrow Upload/SVG/ic_fluent_arrow_upload_20_regular.svg" \
   projects/ores.qt/resources/icons/

cp ".../Arrow Upload/SVG/ic_fluent_arrow_upload_20_filled.svg" \
   projects/ores.qt/resources/icons/

# Solar icons (Linear and Bold variants)
cp ".../arrows-action/Linear/upload-square.svg" \
   projects/ores.qt/resources/icons/solarized/Linear/

cp ".../arrows-action/Bold/upload-square.svg" \
   projects/ores.qt/resources/icons/solarized/Bold/

Step 3: Update Resource File

Add the new icons to projects/ores.qt/resources/resources.qrc: 

<!-- Fluent UI icons -->
<file>icons/ic_fluent_arrow_upload_20_regular.svg</file>
<file>icons/ic_fluent_arrow_upload_20_filled.svg</file>

<!-- Solar icons -->
<file>icons/solarized/Linear/upload-square.svg</file>
<file>icons/solarized/Bold/upload-square.svg</file>

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,
    // ...
};

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

Step 6: Use the Icon

Use the new icon in code: 

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

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

Emacs 29.1 (Org mode 9.6.6)