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.

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.

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.

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.

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.

Data & Finance

Icons for numerical data and financial concepts.

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.

Text & Formatting

Icons for text manipulation and formatting.

Quick Reference Table

Concept Icon Name Regular Filled
Add/Create add_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
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
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
Currency currency_dollar_euro_20 Default Active
Time clock_16 Default Active
History history_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

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)