Icon Inventory
All icons used in the Prometheus UI, sourced from the Tabler Icons library.
Overview
Prometheus uses Tabler Icons exclusively via the @tabler/icons-react package. All icons use a consistent 18px display size with 2px stroke width, matching Mantine's default icon conventions.
| Property | Value |
|---|---|
| Icon Library | Tabler Icons (@tabler/icons-react) |
| Default Size | 18px (1.125rem) |
| Stroke Width | 2px |
| Color | currentColor (inherits from parent) |
| Action Icon Container | 32px × 32px |
Navigation Icons
Icons used in the header, navbar, and navigation elements.
| Icon | Tabler Name | Import | Usage |
|---|---|---|---|
menu-2 | IconMenu2 | Burger menu (mobile nav toggle) | |
arrow-right | IconArrowRight | Breadcrumb separator, link indicators | |
chevron-down | IconChevronDown | Accordion chevron, dropdown indicators | |
arrows-minimize | IconArrowsMinimize | Collapse all / Expand all toggle |
Status & Health Icons
Icons communicating system state and health information.
| Icon | Tabler Name | Import | Usage |
|---|---|---|---|
circle-check | IconCircleCheck | Success / healthy status | |
circle-x | IconCircleX | Error / unhealthy status | |
alert-triangle | IconAlertTriangle | Warning alerts, ErrorAlert warning severity | |
info-circle | IconInfoCircle | Info alerts, informational messages | |
circle-minus | IconCircleMinus | Unknown / inactive status |
Data & Content Icons
Icons used in info cards, tables, and data display contexts.
| Icon | Tabler Name | Import | Usage |
|---|---|---|---|
file-description | IconFileDescription | InfoCard header (general info) | |
server | IconServer | Runtime information card, server status | |
settings | IconSettings | SettingsPanel trigger, configuration | |
activity | IconActivity | Health page, metrics activity | |
table | IconTable | TSDB status, data tables | |
cpu | IconCpu | Runtime / agent info | |
file-check | IconFileCheck | Rules page, valid config | |
flag | IconFlag | Feature flags, command-line flags page |
Action Icons
Icons for interactive controls and user actions.
| Icon | Tabler Name | Import | Usage |
|---|---|---|---|
search | IconSearch | Search input prefix icon | |
clipboard | IconClipboard | Copy to clipboard action | |
sun | IconSun | ThemeToggle — switch to light mode | |
moon | IconMoon | ThemeToggle — switch to dark mode | |
send | IconSend | Submit / Execute PromQL query | |
bell | IconBell | Alerts page navigation icon |
Usage Guidelines
✓ Do
- Use Tabler Icons exclusively — never mix icon libraries
- Use 18px size and 2px stroke for consistency
- Set
color="currentColor"to inherit text color - Pair icons with text labels for accessibility
- Use
aria-labelon icon-only buttons
✗ Don't
- Don't use emoji as icon substitutes in production
- Don't mix Tabler with Heroicons, Lucide, or FontAwesome
- Don't change stroke width per-icon
- Don't hardcode icon colors — always use currentColor
- Don't use icons without accessible text alternative
Figma Implementation
For the Figma library, import the Tabler Icons Figma plugin to insert icons. Alternatively, download the subset listed above as SVGs and create Figma components named Icons/{icon-name}.