Mission & Operations

Icons for deployment, monitoring, command execution, and operational tasks.

UI Controls

Interactive UI component icons for menus, navigation, and user interactions.

Status & State

Icons for system states, health indicators, and operational status.

Status Indicators

Core Icons

Original icon set for common operations and data visualization.

Icon Variants & Styles

Different rendering styles and variants for flexible UI integration.

Outlined Variants

Blueprint Style

Size Variants

Animations & Effects

Built-in animation classes for dynamic UI elements.

Animation Variants

Glow Effects

Code Examples

Common implementation patterns and usage guidelines.

Basic Icon Usage

Icon with Animation

Status Indicator

Icon Badge

Icon Label/Chip

Outlined Icon Variant

Blueprint Style Icon

Best Practices

Semantic Icon Selection

• Mission/Operations icons for workflow status, deployments, and operational tasks
• UI Control icons for actionable buttons and navigation elements
• Status icons with color coding (green=online, red=error, yellow=warning)
• Core icons for data visualization and specialized domains

Color Usage

• Use icon-cyan for primary actions and information
• Use icon-violet for secondary or advanced features
• Use icon-orange for warnings and notable items only
• Status icons should use semantic colors: green (success), red (error), yellow (warning)

Size Guidelines

• XS (16px): Inline with text, compact UI
• SM (24px): Toolbar buttons, list items
• MD (32px): Standard UI elements, cards
• LG (48px): Featured elements, hero sections
• XL (64px): Landing pages, focus areas

Animation Usage

• Use icon--pulse for attention-grabbing status
• Use icon--loading-glow for loading states only
• Use icon--spin for settings/configuration contexts
• Respect prefers-reduced-motion for accessibility

Icon Library Summary