data · Normal DOM + Twenty Remote DOM

IconHalo

Tinted square (or circle) with an icon inside — the visual marker for a row’s source or type.

Replaces the inline SourceMark helper that lived in DocumentHubDemo with hex colors. The tone palette is taken directly from Tag (`--t-tag-background-*` / `--t-tag-text-*`) so a `tone="green"` halo reads visually identical to a green Tag. Tokens only — no hex.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { IconHalo } from '@8maverik8/twenty-design';

Examples

Sources — green for QuickBooks, iris for DocuFly

tsx
<IconHalo icon={<IconReceipt size={18} />} tone="green" />
<IconHalo icon={<IconSignature size={18} />} tone="iris" />
<IconHalo icon={<IconFileText size={18} />} tone="iris" />

Sizes — sm / md / lg

tsx
<IconHalo icon={<IconBuilding size={14} />} tone="blue" size="sm" />
<IconHalo icon={<IconBuilding size={18} />} tone="blue" size="md" />
<IconHalo icon={<IconBuilding size={22} />} tone="blue" size="lg" />

Shapes — square (default) vs circle

tsx
<IconHalo icon={<IconUser size={18} />} tone="orange" shape="square" />
<IconHalo icon={<IconUser size={18} />} tone="orange" shape="circle" />

Tone gallery — a few common pairs

green
blue
iris
orange
turquoise
red
tsx
<IconHalo tone="green"     icon={<IconCoin size={18} />} />
<IconHalo tone="blue"      icon={<IconCalendar size={18} />} />
<IconHalo tone="iris"      icon={<IconFileText size={18} />} />
<IconHalo tone="orange"    icon={<IconBuilding size={18} />} />
<IconHalo tone="turquoise" icon={<IconReceipt size={18} />} />
<IconHalo tone="red"       icon={<IconSignature size={18} />} />

Variants

size
sm28×28 — inline with row text.
mddefault36×36 — default leading slot in a ListRow.
lg44×44 — empty-state hero marker.
shape
squaredefaultRounded square using --t-border-radius-md.
circlePill / circular — for person / entity avatars.
tone
gray | mauve | slate | …All TagColor tones are supported (30 in total).

Guidelines

✓
Match the halo tone to the source identity (QuickBooks → green, DocuFly → iris).Consistent tone-per-source teaches the user to recognize provenance at a glance.
✕
Use IconHalo for primary status (Sent, Paid, Voided).That is Status. IconHalo identifies the source / type, not the lifecycle.