Data Source Icons

Data source icons

There is one canonical icon per source kind. The source of truth is SOURCE_KIND_ICONS in packages/app/src/components/sourceSelectUtils.tsx. Never invent a different icon for a source kind (e.g. don't use IconTimeline for a trace) — always match the table below so icons stay consistent across the app.

Canonical mapping

All imported from @tabler/icons-react.

Rules

1. Prefer the shared map. When you need a source-kind icon in a context that already has (or can accept) a SourceKind, use SOURCE_KIND_ICONS[kind] from sourceSelectUtils.tsx rather than hardcoding an icon component.
2. If you must hardcode (e.g. a fixed "View Trace" action that always points at a trace), import the exact icon from the table above — for a trace that is IconConnection, not IconTimeline/IconRoute/etc.
3. Sizing: the shared map uses size={16}. Match the surrounding UI; small inline buttons/badges commonly use 14.
4. Adding a new source kind: update SOURCE_KIND_ICONS first, then update this table so the two never drift.

Examples

Cross-source "View Trace" action (fixed target → hardcode the trace icon):

import { IconConnection } from '@tabler/icons-react';

<Button leftSection={<IconConnection size={14} />}>View Trace</Button>;

Dynamic, kind-driven icon (prefer the shared map):

import { SOURCE_KIND_ICONS } from '@/components/sourceSelectUtils';

<span>{SOURCE_KIND_ICONS[source.kind]}</span>;