Icon Library

Browse and download Alterspective brand icons. All icons follow the outlined style per brand guidelines (ICON-001) and are available in SVG format.

Usage Guidelines

Do

  • Use outlined icons only (brand requirement)
  • Maintain consistent sizing within contexts
  • Use brand colors: Marine, Green, Navy
  • Ensure adequate spacing around icons

Don't

  • Never use filled icon styles
  • Don't stretch or distort icons
  • Avoid using icons without proper contrast
  • Don't add effects (shadows, glows)
Governed by AIRUN-044 ICON-001 / UX-BRAND-03 House Style Default

Hand-Drawn Continuous-Line House Style

Alterspective's UI marks, interactive launcher bubbles, empty states, and feature accents follow the hand-drawn continuous-line house style. First established in the EchoSpective 1.4.7 production launcher, this style combines human warmth with crisp mathematical precision: one loose, confident marker stroke with an intentional "lift-off gap", paired with exactly one Citrus (#ABDD65) focal accent.

1

Single Confident Stroke with Lift-Off Gap

Drawn as one continuous, fluid marker path. Shapes must never close into rigid mechanical clip-art. A deliberate lift-off gap marks the natural entry and exit of the stroke, reflecting an authentic human pen hand.

2

Exactly ONE Citrus Accent

Every mark features exactly one Citrus (#ABDD65) accent stroke carrying the narrative focal point (the spark, the pulse, or the active node). Never use multiple accent colors; restraint creates immediate focus.

3

Theme-Adaptive Contrast Palette

Dark Mode (Preferred & Default): Pale Blue (#E5EEEF) primary stroke on Navy (#17232D) background.
Light Mode: Marine (#075156) primary stroke on Pale Blue (#E5EEEF) or White background.

4

Secondary Strokes with Opacity Taper

When supporting structure or depth is needed, secondary motifs use an opacity taper (e.g. opacity: 0.85 and opacity: 0.5). The primary continuous stroke always remains the dominant visual voice.

5

Strict Outlined Geometry (ICON-001)

Strictly fill="none" with rounded line caps and joints (stroke-linecap="round", stroke-linejoin="round"). Solid fills are strictly forbidden under ICON-001 (UX-BRAND-03).

Live Continuous-Line UI Marks

Interactive inline SVG components rendered at native vector resolution

Feedback & Echo Bubble

AIRUN-044 Reference Mark

Continuous bubble stroke with open tail lift-off gap and Citrus dialogue spark.

Discovery & Insight Spark

Search / Query Mark

Orbital lens contour with handle lift-off gap and centralized Citrus starburst.

Workflow & Process Node

Architecture / Orchestration

Continuous inter-node thread with open junction gap and Citrus activation node.

Deployment & Launch Mark

Release / Action Mark

Fuselage silhouette with open exhaust lift-off gap and Citrus propulsion stroke.

Governance & Shield Guard

Security / Compliance Mark

Unclosed protective boundary with entry gap and single Citrus verification tick.

Telemetry & Horizon Pulse

Metrics / Activity Mark

Continuous telemetry trace with dashed datum and Citrus peak event beacon.

Continuous-Line Compliance Checklist

✓ Compliant (AIRUN-044)

Hand-Drawn Stroke + Lift-Off Gap + 1 Citrus Accent

  • Single confident stroke with intentional lift-off gap
  • Exactly ONE Citrus focal accent carrying the eye
  • Outlined style only (fill="none")
  • Theme-adaptive contrast (Pale Blue on Navy)
✕ Violation: Closed Clip-Art

Mechanically Closed / Rigid Shapes

  • Closed circles, squares, and geometric primitives
  • No hand-drawn human character or warmth
  • Missing marker lift-off gap
  • Reads as generic stock clip-art, not Alterspective
✕ Violation: Multi-Accent Clutter

Multiple Accent Colors & Rainbow Splashes

  • More than one Citrus accent diluting visual hierarchy
  • Off-palette accent colors (reds, yellows, purples)
  • Scattered attention instead of a single narrative focal point
  • Violates AIRUN-044 single-accent rule
✕ Violation: Filled Shapes (ICON-001)

Filled Silhouettes / Shaded Shapes

  • Solid fills violate non-negotiable rule ICON-001
  • Heavy visual weight clashes with typography
  • Fails brand outline geometry requirement

Hand-Authored Inline SVG Architecture

In accordance with AIRUN-044, continuous-line marks should be authored directly as self-contained inline SVG (under 2 KB per mark, zero external requests, no CSS/font dependencies).

React / Astro Inline Component Pattern

{/* FeedbackBubbleMark.tsx — Shipped to production under AIRUN-044 */}
export function FeedbackBubbleMark({ className = "w-6 h-6", isDarkMode = true }) {
  const primaryStroke = isDarkMode ? "var(--as-pale-blue, #E5EEEF)" : "var(--as-marine, #075156)";
  const citrusAccent = "var(--as-citrus, #ABDD65)";

  return (
    <svg viewBox="0 0 64 64" fill="none" className={className} role="img" aria-hidden="true">
      {/* 1. Primary continuous stroke with marker lift-off gap */}
      <path
        d="M22 14 C36 12 52 16 52 28 C52 40 38 44 28 44 C25 44 20 46 16 52 C15 53 14 52 14.5 50.5 C15.8 46.5 16 43 14 38 C10 32 12 18 22 14"
        stroke={primaryStroke}
        strokeWidth="2.2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      {/* 2. Secondary supporting stroke with opacity taper (0.6) */}
      <path
        d="M24 20 C34 18 46 22 46 30 C46 38 36 40 28 40"
        stroke={primaryStroke}
        strokeWidth="1.6"
        strokeLinecap="round"
        strokeLinejoin="round"
        opacity="0.6"
      />
      {/* 3. Exactly ONE Citrus accent carrying the narrative focal point */}
      <path
        d="M27 27 C31 25 35 27 36 32"
        stroke={citrusAccent}
        strokeWidth="2.4"
        strokeLinecap="round"
      />
    </svg>
  );
}

General Icon Catalog

Browse and search official functional UI glyphs

Type to filter
7 icons | Showing all
Build icon

Build

actions
DL
buildconstructcreate

Use for building, constructing, or creating something new. Ideal for development actions, project creation, or assembly tasks.

Deploy icon

Deploy

actions
DL
deploylaunchrelease

Use for deployment, launching, or releasing products and features. Suitable for CI/CD workflows and production releases.

Design icon

Design

actions
DL
designcreateart

Use for design-related actions, creative processes, or visual work. Ideal for UI/UX design, prototyping, and creative tools.

Discover icon

Discover

actions
DL
discoverexploresearch

Use for discovery, exploration, or research activities. Suitable for search features, analytics, and investigative workflows.

Lightbulb icon

Lightbulb

concepts
DL
ideainsightinnovation

Use for ideas, insights, tips, or innovative concepts. Ideal for highlighting suggestions, AI-generated insights, or creative solutions.

Sustain icon

Sustain

concepts
DL
sustainmaintainsupport

Use for sustainability, maintenance, or continuous improvement. Suitable for lifecycle management and long-term support indicators.

Validate icon

Validate

actions
DL
validateverifycheck

Use for validation, verification, or confirmation actions. Ideal for quality assurance, test results, and approval workflows.

Implementation

HTML

<img src="/icons/Alterspective Icon FA (build).svg"
     alt="Build icon"
     width="24"
     height="24" />

CSS Background

.icon-build {
  width: 24px;
  height: 24px;
  background-image: url('/icons/Alterspective Icon FA (build).svg');
  background-size: contain;
  background-repeat: no-repeat;
}

React / Next.js

import Image from 'next/image';

<Image
  src="/icons/Alterspective Icon FA (build).svg"
  alt="Build icon"
  width={24}
  height={24}
/>

AI / MCP Integration

Icons can be searched programmatically via the MCP server:

MCP Tool: search_icons

// Example: Find icons for "deploy" functionality
const result = await mcp.callTool('search_icons', {
  query: 'deploy',
  category: 'actions',
  limit: 5
});

// Returns:
// {
//   icons: [{ id: 'icon-deploy', name: 'Deploy', ... }],
//   total: 1
// }