Logoskills for everything
Agent Skill
2/7/2026

icon-guidelines

Visual language reference for ORE Studio icons. Use this skill when selecting icons for UI elements, ensuring consistent iconography across the application.

O
orestudio
6GitHub Stars
2Views
npx skills add OreStudio/OreStudio

SKILL.md

Nameicon-guidelines
DescriptionVisual language reference for ORE Studio icons. Use this skill when selecting icons for UI elements, ensuring consistent iconography across the application.

name: icon-guidelines description: Visual language reference for ORE Studio icons. Use this skill when selecting icons for UI elements, ensuring consistent iconography across the application. license: Complete terms in LICENSE.txt

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.

Add

Create new items, add to lists, insert content.

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

Copy

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

  • Regular: img
  • Filled: img

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: img
  • Filled: img

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.

Edit

Modify existing content, enter edit mode.

Usage: Edit buttons, modify actions, pencil metaphor.

Save

Persist changes, commit data.

Usage: Save buttons, apply changes.

Checkmark

Confirm action, indicate completion, accept.

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

Dismiss

Close dialogs, cancel operations, clear notifications.

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

Star

Favorite, bookmark, rate.

Usage: Regular for "not favorited", filled for "favorited" state.

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.

Wand

Generate synthetic data, auto-fill, magic create.

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

Record

Start recording, capture session.

Usage: Recording controls. Filled indicates actively recording.

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 Left

Navigate back, move left.

Usage: Back navigation, left scroll controls.

Arrow Right

Navigate forward, move right.

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

Arrow Previous

Step to previous item in sequence.

Usage: Pagination, stepper controls, previous item.

Arrow Next

Step to next item in sequence.

Usage: Pagination, stepper controls, next item.

Arrow Download

Download content, export data.

Usage: Download buttons, export actions.

Arrow Download CSV

Import CSV data.

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

Arrow Download FPML

Import FPML data.

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

Arrow Download ORE

Import ORE data.

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

Arrow Upload CSV

Export CSV data.

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

Arrow Upload FPML

Export FPML data.

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

Arrow Upload ORE

Export ORE data.

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

Arrow Sync

Synchronize data, refresh with server.

Usage: Sync buttons, bidirectional refresh.

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.

Arrow Clockwise (16px)

Rotate clockwise, redo action.

Usage: Redo buttons, clockwise rotation controls.

Arrow Rotate Counterclockwise

Undo action, rotate counterclockwise.

Usage: Undo buttons, counterclockwise rotation, revert changes.

Status & Feedback

Icons communicating system state and user feedback.

Info

Informational message, help content, details.

Usage: Info tooltips, help buttons, informational banners.

Warning

Caution, potential issue, requires attention.

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

Error Circle

Error state, failed operation, critical issue.

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

Question

Help, unknown state, requires clarification.

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

Users & Identity

Icons representing people and account management.

Person

Single user, current user, profile.

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

Person Add

Invite user, create account, add team member.

Usage: Invite buttons, add user actions, registration.

Person Accounts

Multiple users, team, user management.

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

Security & Access

Icons for authentication and authorization concepts.

Lock Closed

Secured, protected, authentication required.

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

Lock Open

Unlocked, accessible, public.

Usage: Unlocked state, public content, access granted.

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: img
  • Filled: img

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

Keyboard

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

  • Regular: img
  • Filled: img

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.

Plug Connected

Connected to server, online, link established.

Usage: Connection status indicators showing active connection.

Plug Disconnected

Disconnected, offline, no connection.

Usage: Disconnected state, offline mode, connection lost.

Plug Connected Checkmark

Connection verified, authenticated connection.

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

Server Link

Server connection bookmark, saved connection, connection browser.

  • Regular: img
  • Filled: img

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.

Folder

Directory, container, file group.

Usage: Folder navigation, directory listings.

Folder Open

Open folder, expanded directory, selected container.

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

Document Table

Tabular data, spreadsheet, structured document.

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

Document Code (16px)

Source code, script, technical document.

Usage: Code files, scripts, configuration files.

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.

Database

Data storage, datasets, data dimensions.

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

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.

Clipboard Number 123 (16px)

Numeric data, ID reference, sequence.

Usage: ID fields, numeric references, serial numbers.

Currency Dollar Euro

Financial data, multi-currency, monetary values.

Usage: Currency fields, financial data, monetary transactions.

Time & History

Icons for temporal concepts.

Clock (16px)

Time, schedule, duration.

Usage: Time fields, timestamps, schedule indicators.

History

Activity history, past actions, audit trail.

Usage: History views, recent items, activity logs.

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.

Text ABC Underline Double (32px)

Text validation, spell check, language processing.

Usage: Spell check, text validation, language tools.

Quick Reference Table

ConceptIcon NameRegularFilled
Add/Createadd_20DefaultActive
Copycopy_20DefaultActive
Delete/Removedelete_20DefaultDanger
Purge/Clear Alldelete_dismiss_20DefaultDanger
Edit/Modifyedit_20DefaultActive
Savesave_20DefaultActive
Confirm/Checkcheckmark_20DefaultDone
Cancel/Closedismiss_20DefaultActive
Favoritestar_20OffOn
Generatewand_20DefaultActive
Reloadarrow_clockwise_16DefaultActive
Redoarrow_clockwise_16DefaultActive
Backarrow_left_20DefaultActive
Forwardarrow_right_20DefaultActive
Downloadarrow_download_20DefaultActive
Syncarrow_sync_20DefaultActive
Tradesarrow_trending_20DefaultActive
Undoarrow_rotate_counterclockwise_20DefaultActive
Infoinfo_20DefaultActive
Warningwarning_20DefaultAlert
Errorerror_circle_20DefaultAlert
Helpquestion_20DefaultActive
Userperson_20DefaultActive
Add Userperson_add_20DefaultActive
Teamperson_accounts_20DefaultActive
Lockedlock_closed_20DefaultActive
Unlockedlock_open_20DefaultActive
Change Passwordkey_multiple_20DefaultActive
Manual Entrykeyboard_20DefaultActive
Connectedplug_connected_20DefaultActive
Disconnectedplug_disconnected_20DefaultAlert
Verified Connectionplug_connected_checkmark_20DefaultActive
Server Linkserver_link_20DefaultActive
Folderfolder_20ClosedActive
Folder Openfolder_open_20OpenActive
Table Documentdocument_table_20DefaultActive
Code Documentdocument_code_16DefaultActive
Code/Schemecode_20DefaultActive
Database/Datasetdatabase_20DefaultActive
Book/Methodologybook_20DefaultActive
Book Open/Booksbook_open_20DefaultActive
Briefcase/Portfoliobriefcase_20DefaultActive
Building (generic)building_20DefaultActive
Building Bank/Centrebuilding_bank_20DefaultActive
Building Skyscraperbuilding_skyscraper_20DefaultActive
Organization/Partyorganization_20DefaultActive
Handshake/Cptyhandshake_20DefaultActive
People Team/BUpeople_team_20DefaultActive
Currencycurrency_dollar_euro_20DefaultActive
Timeclock_16DefaultActive
Historyhistory_20DefaultActive
Scheduler/Jobscalendar_clock_20DefaultActive
Schedule Jobcalendar_add_20DefaultActive
Unschedule Jobcalendar_cancel_20DefaultActive
Job Definitions Listtasks_app_20DefaultActive
Report Definitionschart_multiple_20DefaultActive
Import CSVarrow_download_csv_20DefaultActive
Import FPMLarrow_download_fpml_20DefaultActive
Import OREarrow_download_ore_20DefaultActive
Export CSVarrow_upload_csv_20DefaultActive
Export FPMLarrow_upload_fpml_20DefaultActive
Export OREarrow_upload_ore_20DefaultActive
Publisharrow_upload_20DefaultActive
Terminalwindow_console_20DefaultActive

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
Skills Info
Original Name:icon-guidelinesAuthor:orestudio
Download
View on GitHub