Skip to content

Icon Reference

This page provides a visual reference for all supported icons in toolkit manifests. Use the icon_name field in Next Steps, Action Buttons, and Shortcuts to specify which icon to display.

Quick Reference

All icons are rendered using FontAwesome Pro. The icon_name value is a kebab-case string (e.g., "lightbulb", "file-signature").

{
  "action_buttons": [
    {
      "spec": {
        "name": "Email Summary",
        "icon_name": "paper-plane"
      }
    }
  ]
}

Fallback Behavior

When an icon_name is missing, empty, or unrecognized, each entity type falls back to a default icon:

Entity Type Fallback Icon Description
Next Steps wand-magic-sparkles Magic wand with sparkles (AI-powered outputs)
Action Buttons circle Simple gray circle (neutral delivery)
Shortcuts waveform-lines Audio waveform (voice-driven context)

Shortcut Fallback Icon

The shortcut fallback uses waveform-lines (an audio waveform icon), which is a FontAwesome Pro icon rendered in the Contio app. The :fontawesome-solid-wave-square: icon shown above is an approximation for documentation purposes.

Best Practice

Always specify an explicit icon_name to provide clear visual affordance for your users.

Files & Documents

Icon icon_name Description
file-lines Generic document
file-pdf PDF document
file-word Word document
file-excel Excel spreadsheet
file-powerpoint PowerPoint presentation
file-signature Signed document
scroll Scroll/document
clipboard Clipboard
clipboard-check Completed checklist
book-open Open book/manual

Communication

Icon icon_name Description
envelope Email
paper-plane Send message
comment Comment
comments Discussion
message Message
phone Phone call
video Video call

Actions & Tasks

Icon icon_name Description
circle-check Verified/approved
list-check Task list
square-check Checkbox
thumbs-up Approval/like
gavel Decision/ruling
rocket Launch/deploy
fire Hot/urgent

People & Organizations

Icon icon_name Description
user Person
users Group/team
user-group Team/group
user-secret Privacy/incognito
user-question Unknown person
graduation-cap Education/training

Business & Analytics

Icon icon_name Description
chart-line Trend/analytics
chart-line-up Growth/increase
chart-bar Bar chart
briefcase Business
briefcase-arrow-right Business transfer
handshake Agreement/deal
money-bill-1-wave Payment/finance
trophy Achievement/winner

Objects & Symbols

Icon icon_name Description
lightbulb Idea/insight
star Favorite/highlight
flag Flag/milestone
bookmark Bookmark/save
medal Award/recognition
link Link/connection
paperclip Attachment
calendar Date/schedule
clock Time
stopwatch Timer/duration
bell Notification
gear Settings
wand-magic-sparkles AI/magic
bolt Quick action
bullseye Target/goal
key Access/security
lock Locked/secure
shield Protection
Icon icon_name Description
arrow-right Next/forward
arrow-left Back/previous
arrow-up Upload/increase
arrow-down Download/decrease
magnifying-glass Search
pen Edit
pencil Write/compose
compass Navigation/direction
map Location/map

Complete Vocabulary

The canonical list of all valid icon_name values is defined in the JSON Schema as the IconVocabulary enum:

All three entity types (action_buttons, next_steps, and shortcuts) reference this shared vocabulary via $ref: "#/$defs/IconVocabulary", ensuring consistent validation across your toolkit manifest.

Icon Colors

The color field in Next Steps and Shortcuts controls the icon's color. Contio supports two color formats:

Use one of the 9 named color slots for consistent branding that matches the Contio design system:

Color Slot Preview Description
grey Neutral, secondary actions
dark-grey Subdued, de-emphasized
purple Default — Contio brand primary
teal Information, guidance
green Success, completion
yellow Warning, attention
orange Important, urgent
pink Creative, playful
red Critical, destructive

Example using a named color:

{
  "next_steps": [
    {
      "spec": {
        "name": "Send Follow-up",
        "icon_name": "paper-plane",
        "color": "green"
      }
    }
  ]
}

Custom Hex Colors

For advanced branding needs, you can use hex color codes:

{
  "shortcuts": [
    {
      "spec": {
        "name": "Brand Action",
        "icon_name": "star",
        "color": "#3B82F6"
      }
    }
  ]
}

Best Practice

Prefer named color slots over hex values. Named slots automatically adapt to Contio's light/dark themes and ensure visual consistency across the platform.

Fallback Behavior

If color is omitted, empty, or unrecognized, the system defaults to purple (Contio brand primary).