# MaxIconSet

> Max's own SVG icons, exported as `DC.MaxIcons`: integration and channel logos, message delivery states, and the appearance-picker tiles.

## Facts

- **Product**: Max
- **Family**: Data display
- **Kind**: Showcase page (tokens and patterns)
- **Source**: `max-agent: src/components/icons/`
- **Live preview**: /design/components/max-icon-set/preview.html
- **Page**: /design/components/max-icon-set

## Guidelines

Everything else comes from Lucide.

**Use it for** the things Lucide has no icon for: connected accounts and CRMs (Google, Outlook, LinkedIn, WhatsApp, HubSpot, Salesforce, Slack, Zoho, Notion), data providers (Apollo, Explorium, GetLeads), message status ticks in the Unibox, and the option tiles in Settings › Appearance.

**What you provide**:
- Logo icons take `{ className, size }`, with `size` defaulting to 16px. They keep their brand colours. `MailIcon` is the exception: it strokes in `currentColor`.
- Message states take `{ className, size }`, with `size` defaulting to 14px, and are `shrink-0`.
  - `IconMessageSent`: a single check.
  - `IconMessageDelivered`: a double check whose first tick is `text-muted-foreground`.
  - `IconMessageRead`: a double check in `text-green-500 dark:text-green-400`.
  - `IconMessageFailed`.
- The tiles (`IconThemeSystem`, `IconThemeLight`, `IconThemeDark`, `IconSplashCursor`, `IconSplashCursorDisabled`) are 79.86 × 51.14 illustrations. They take SVG props and no `size`, so set their width with a class. `IconThemeSystem` fills with `primary`, falling back to `muted-foreground` inside an unchecked `group`. The splash tiles have `dark:` fills.

**Anatomy**: the page shows every export at 24px (the tiles at 24px tall), with the export name beside it.

**Don't** recolour brand logos. Don't use the tiles as inline icons: they are option previews.

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  // Brand and message-state icons take size (px); the theme and splash tiles are
  // 79.86 × 51.14 illustrations sized by className, shown here 24px tall.
  var TILES = ["IconThemeSystem", "IconThemeLight", "IconThemeDark", "IconSplashCursor", "IconSplashCursorDisabled"];
  var GROUPS = [
    ["Integrations and channels", Object.keys(DC.MaxIcons).filter(function (n) { return /Icon$/.test(n); })],
    ["Message delivery states", Object.keys(DC.MaxIcons).filter(function (n) { return /^IconMessage/.test(n); })],
    ["Appearance tiles", Object.keys(DC.MaxIcons).filter(function (n) { return TILES.indexOf(n) >= 0; })]
  ];
  function Item(props) {
    var Icon = DC.MaxIcons[props.name], tile = TILES.indexOf(props.name) >= 0;
    return h("div", { className: "flex items-center gap-3 rounded-lg border bg-card px-3 py-2.5" },
      h("div", { className: "flex h-6 min-w-6 items-center justify-center" },
        tile ? h(Icon, { className: "h-6 w-auto", style: { height: 24, width: "auto" } }) : h(Icon, { size: 24 })),
      h("code", { className: "min-w-0 break-all font-mono text-xs leading-tight" }, props.name));
  }
  function App() {
    return h("div", { className: "space-y-5" },
      GROUPS.map(function (g) {
        return h("section", { key: g[0], className: "space-y-2" },
          h("p", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground" }, g[0] + " · " + g[1].length),
          h("div", { className: "grid grid-cols-4 gap-2" }, g[1].map(function (n) { return h(Item, { key: n, name: n }); })));
      }));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Data display

- [AgentFace](/design/components/agent-face.md): A Digital Worker's face: its approved portrait, or its initials on its accent tile.
- [AnimateDigits](/design/components/animate-digits.md): A number whose digits spring in and out as it changes (motion), direction following the change.
- [Avatar](/design/components/avatar.md): A round image with an initials fallback (Radix Avatar), 32px by default.
- [CampaignStatusBadge](/design/components/campaign-status-badge.md): The campaign lifecycle pill: Draft, Active, Paused, Stopped, Completed, Archived.
- [ChannelBadge](/design/components/channel-badge.md): Marks which channel a conversation or step runs on: email (amber), LinkedIn (sky), WhatsApp (emerald).
- [EmailVerificationBadge](/design/components/email-verification-badge.md): The deliverability verdict for an email address, with an icon and an optional score.
- [HeroMetric](/design/components/hero-metric.md): One big number with its previous-period comparison, a trend pill and a pacing bar.
- [KpiCard](/design/components/kpi-card.md): A KPI tile — label, value, trend — and `KpiSection`, the glass panel that groups them.
- [MetricTile](/design/components/metric-tile.md): A compact glass tile for a scored metric: label, value toned by score band, hint.
- [ProspectAvatar](/design/components/prospect-avatar.md): A prospect's photo, or a gradient disc hashed from their name, with an optional unread halo.
- [Snippet](/design/components/snippet.md): A monospace command block with a copy button whose icon turns into a check after copying.
- [TimeLens](/design/components/time-lens.md): Max's agenda: hour marks, ticks and tasks in one scrolling column, read through a fixed lens that shows the time under it.
- [WorldGlobe](/design/components/world-globe.md): An interactive d3-geo globe on canvas with avatar markers that merge into heat-coloured count bubbles.