Foundation

Iconography

Two icon systems: Nodus Custom Icons — purpose-built SVGs for agentic state and treasury domain — and Lucide React for generic UI chrome. Use Nodus icons when communicating agent or financial semantics; Lucide everywhere else.

01 — Nodus Custom Icons

16 purpose-built SVG icons for concepts that generic libraries cannot express: AI agent states and treasury domain primitives. All icons use currentColor and are stroke-based for legibility at 16px.

import { Icon } from "@/components/ui/Icon";

// Agentic state icons
<Icon name="streaming" size={16} />   // LLM emitting tokens
<Icon name="thinking"  size={16} />   // Agent reasoning
<Icon name="validated" size={16} />   // Human-approved result

// Treasury domain icons
<Icon name="entity"    size={16} />   // Legal entity
<Icon name="fx"        size={16} />   // FX / currency exchange
<Icon name="risk"      size={16} />   // Risk gauge

// Color via parent (never hardcode)
<span style={{ color: "var(--ds-color-temporal)" }}>
  <Icon name="streaming" />
</span>

Agentic State— Use --ds-color-temporal, --ds-color-validation, or outcome tokens

Treasury Domain— Inherit from context — entity type or status

Color Semantics

--ds-color-temporal

Active processing, in-flight

--ds-color-validation

Human review required

--ds-color-agency

Urgent agent-initiated action

--ds-color-outcome-positive

Success, approved, compliant

--ds-color-outcome-caution

Degraded, at-limit

--ds-color-outcome-negative

Failed, breached

02 — Lucide System

Lucide React is the canonical icon library. All icons are SVG-based with consistent 24x24 viewBox and 2px stroke width. Tree-shakeable — only imported icons are bundled.

import { Brain, Shield, Zap } from "lucide-react";

<Brain size={20} />           // Standard UI control
<Shield className="text-current" />  // Inherits parent color

16px

Data-dense UI, inline with text, table cells

20px

Standard UI controls, buttons, inputs

24px

Navigation, emphasis, section headers

32px

Feature icons, empty states, hero elements

03 — Lucide Semantic Map

75 icons organized by AI-interface domain. Each icon has a fixed semantic meaning within Nodus — use the assigned meaning, not the generic Lucide name.

Agent States

Content Provenance

Actions

Navigation

Data

Communication

Layout

Workflow

04 — Usage Guidelines

Always use currentColor

<Shield className="text-current" />
// or
<Shield color="currentColor" />

DON'T

<Shield color="#D42020" />
<Shield color="red" />

Icons should inherit text color from their parent. This ensures they adapt to themes and semantic token changes.

Pair with text labels for accessibility

<button aria-label="Retry operation">
  <RotateCcw size={16} />
  <span>Retry</span>
</button>

DON'T

<button>
  <RotateCcw size={16} />
</button>

Icon-only buttons are invisible to screen readers. Always provide a visible label or aria-label.

Use the standard size scale

<Brain size={16} />  {/* data-dense */}
<Brain size={20} />  {/* standard */}
<Brain size={24} />  {/* navigation */}

DON'T

<Brain size={18} />
<Brain size={22} />
<Brain size={28} />

Off-scale sizes break visual rhythm. Stick to 16, 20, 24, or 32px.

05 — Lucide Icon Grid

75 ICONS