Iconography

Origin utilizes Lucide icons for their clarity, modern geometric aesthetic, and exceptional performance. All icons must follow these core design rules to maintain brand consistency:

• Stroke Weight: 2px (constant).
• Corner Radius: 2px for elements 8px or larger; 1px for smaller elements.
• Joins & Caps: Round joins and round caps for a softer, tech-forward feel.
• Base Grid: 24px x 24px with 1px internal padding.
• Scaling: Standard sizes are 16px (dense UI), 24px (standard), and 32px (headers).

Core UI Icon Set

These specific Lucide icons are identified as primary elements within the Origin dashboard:

Icon	Purpose	Icon Name	Sample Use Case
	Activity	activity	Real-time agent data streams.
	Endpoints	monitor	Individual workstation or server views.
	Network	network	Visualizing agent-to-system connections.
	System Settings	settings	Global configuration and permissions.
	Navigation	chevron-right	Drill-down into specific agent logs.
	Alerts	alert-circle	Highlighting "Atypical" behavior.

Icon Library Preview

activity

monitor

network

settings

chevron-right

alert-circle

shield

lock

search

eye

users

bell

download

filter

terminal

database

globe

zap

bar-chart-2

check-circle

x-circle

clock

cpu

refresh-cw

Technical Integration (React)

Origin uses the lucide-react package to ensure icons are tree-shakable and fully typed.

1. Installation

Add the library to your repository using your preferred package manager:

# npm
npm install lucide-react

# yarn
yarn add lucide-react

# pnpm
pnpm add lucide-react

2. Usage in Components

Icons should be imported individually to keep the final bundle lightweight. Use Origin Bone (#EBE7DE) or Deep Carbon (#1A1A1A) for stroke colors.

import { Monitor, Activity, Settings } from "lucide-react";

const DashboardSidebar = () => {
  return (
    <nav>
      {/* Default Usage */}
      <Monitor size={24} color="#1A1A1A" strokeWidth={2} />

      {/* Active State with Brand Spectrum Accent */}
      <Activity size={24} color="#8B5CF6" strokeWidth={2.5} />

      <Settings size={24} color="#707070" />
    </nav>
  );
};

3. Global Configuration (Optional)

For consistent styling across the entire app, you can wrap your root with a provider or create a wrapper component.

Resources

• Official Documentation: lucide.dev/guide
• Icon Search: lucide.dev/icons
• Figma Plugin: Lucide for Figma