Icon Generation Prompts¶

Prompt templates for service icons, UI elements, and illustrations with parameterized design system integration

Created: February 2026 Tool: Nano Banana Pro Related: Framework Overview | Visual Identity

Design System Configuration¶

# ICON SYSTEM CONFIGURATION
# Inherits from parent design system: ./readme.md
# Change active_variant in readme.md to switch all icon styling

icon_configuration:
  inherits_from: "./readme.md"
  schema_version: "2.0"

  # Active configuration (resolved from parent)
  active_variant: "{{active_configuration.variant}}"

  # Icon-specific defaults
  defaults:
    base_size: 24
    stroke_width: "{{icon_stroke_width}}"
    corner_radius: "{{icon_corner_radius}}"
    color: "{{primary}}"

  # Token placeholders (resolved per variant)
  tokens:
    stroke_width_xs: "1px"
    stroke_width_sm: "1.5px"
    stroke_width_md: "2px"
    stroke_width_lg: "2.5px"
    stroke_width_xl: "3px"

    corner_sharp: "0px"
    corner_slight: "1px"
    corner_rounded: "2px"
    corner_soft: "4px"
    corner_pill: "9999px"

Icon Philosophy¶

SBK icons must: - Communicate instantly without explanation - Work at multiple sizes from 16px to hero illustrations - Maintain consistency across all icon sets - Feel professional not playful or casual - Adapt to active variant while maintaining recognizability

Icon Anti-Patterns¶

Never generate icons that: - Are too detailed for small sizes - Use inconsistent visual weight - Rely on color alone for meaning - Feel clipart-like or amateur - Don't match the brand aesthetic - Ignore variant-specific styling guidelines

Variant-Specific Icon Styling¶

Trusted Advisor Icons¶

variant_trusted_advisor:
  icon_style:
    stroke_width: "{{stroke_width_md}}"      # 2px
    corner_radius: "{{corner_rounded}}"      # 2px
    line_endings: "rounded"
    fill_style: "outlined"
    color_primary: "{{sbk_blue}}"            # #2563eb
    color_secondary: "{{slate_600}}"         # #475569

  aesthetic:
    weight: "balanced"
    mood: "professional, established"
    detail_level: "medium"
    optical_adjustments: true

  prompt_modifier: |
    [ICON STYLE: TRUSTED ADVISOR]
    Stroke: 2px consistent weight, rounded line endings.
    Corners: Gently rounded (2px radius).
    Fill: Outlined only, no solid fills.
    Color: Single color, inherits context (default SBK blue #2563eb).
    Mood: Professional, established, trustworthy.
    Balance: Centered, optically weighted for visual stability.

Modern Partner Icons¶

variant_modern_partner:
  icon_style:
    stroke_width: "{{stroke_width_md}}"      # 2px
    corner_radius: "{{corner_soft}}"         # 4px
    line_endings: "rounded"
    fill_style: "outlined"
    color_primary: "{{teal_600}}"            # #0d9488
    color_secondary: "{{cyan_600}}"          # #0891b2

  aesthetic:
    weight: "light-to-medium"
    mood: "approachable, collaborative"
    detail_level: "simplified"
    organic_curves: true

  prompt_modifier: |
    [ICON STYLE: MODERN PARTNER]
    Stroke: 2px weight, rounded line endings with organic flow.
    Corners: Softly rounded (4px radius).
    Fill: Outlined, occasional subtle fills for emphasis.
    Color: Teal primary (#0d9488), cyan accents.
    Mood: Approachable, collaborative, human-centered.
    Form: Slightly organic curves, not rigidly geometric.

Bold Challenger Icons¶

variant_bold_challenger:
  icon_style:
    stroke_width: "{{stroke_width_lg}}"      # 2.5px
    corner_radius: "{{corner_slight}}"       # 1px
    line_endings: "square"
    fill_style: "outlined-bold"
    color_primary: "{{slate_900}}"           # #0f172a
    color_accent: "{{orange_600}}"           # #ea580c

  aesthetic:
    weight: "bold"
    mood: "confident, distinctive"
    detail_level: "minimal"
    sharp_angles: true

  prompt_modifier: |
    [ICON STYLE: BOLD CHALLENGER]
    Stroke: 2.5px bold weight, square line endings.
    Corners: Sharp or barely rounded (1px max).
    Fill: Outlined with confident weight, no soft edges.
    Color: Deep charcoal (#0f172a), burnt orange accents (#ea580c).
    Mood: Bold, confident, memorable, disruptive.
    Form: Sharp angles, decisive shapes, high contrast.

Cyber Shield Icons¶

Security-focused, angular, threat-protection aesthetic.

variant_cyber_shield:
  icon_style:
    stroke_width: "{{stroke_width_sm}}"      # 1.5px
    corner_radius: "{{corner_sharp}}"        # 0px
    line_endings: "square"
    fill_style: "outlined-technical"
    color_primary: "{{red_600}}"             # #dc2626
    color_secondary: "{{dark_text_primary}}" # #fafafa
    glow_effect: true
    glow_color: "{{red_500}}"
    glow_radius: "4px"

  aesthetic:
    weight: "precise"
    mood: "vigilant, protective, technical"
    detail_level: "high-technical"
    angular: true
    scan_line_texture: true
    corner_brackets: true

  special_elements:
    bracket_corners: true
    data_points: true
    grid_alignment: "strict"
    terminal_aesthetic: true

  prompt_modifier: |
    [ICON STYLE: CYBER SHIELD]
    Stroke: 1.5px precise weight, square line endings.
    Corners: Sharp, angular (0px radius). Corner bracket accents optional.
    Fill: Outlined, technical drafting style.
    Color: Threat red (#dc2626) on dark, white (#fafafa) when inverted.
    Glow: Subtle red glow (4px, 30% opacity) on key elements.
    Mood: Security operations, threat protection, vigilant defense.
    Form: Angular, geometric precision. Hexagonal and shield motifs.
    Technical elements: Grid-aligned, data node indicators, scan line texture.

  icon_elements:
    shield: "Angular, faceted, not rounded heraldic"
    lock: "Technical, cyber-style, not padlock"
    network: "Hexagonal nodes, threat detection points"
    alert: "Bracketed, data-style warning indicators"
    scan: "Radar/sweep motion, detection aesthetic"

Sentinel Guard Icons¶

AI-powered, neural network style, autonomous protection aesthetic.

variant_sentinel_guard:
  icon_style:
    stroke_width: "{{stroke_width_md}}"      # 2px
    corner_radius: "{{corner_rounded}}"      # 2px
    line_endings: "rounded"
    fill_style: "outlined-flowing"
    color_primary: "{{purple_600}}"          # #9333ea
    color_secondary: "{{violet_600}}"        # #7c3aed
    color_accent: "{{fuchsia_500}}"          # #d946ef
    glow_effect: true
    glow_color: "{{purple_400}}"
    glow_radius: "8px"
    gradient_strokes: true

  aesthetic:
    weight: "medium-flowing"
    mood: "intelligent, autonomous, advanced"
    detail_level: "medium-high"
    organic_tech: true
    neural_patterns: true

  special_elements:
    connection_nodes: true
    data_flow_lines: true
    ai_indicators: true
    pulse_effects: true

  prompt_modifier: |
    [ICON STYLE: SENTINEL GUARD]
    Stroke: 2px weight, rounded endings with flowing connections.
    Corners: Gently rounded (2px), organic curves.
    Fill: Outlined with gradient stroke option (purple to violet).
    Color: Deep purple (#9333ea) to violet (#7c3aed) gradients.
    Glow: Purple ambient glow (8px, 25% opacity).
    Mood: AI-powered, intelligent defense, autonomous protection.
    Form: Neural network patterns, connected nodes, flowing data paths.

  icon_elements:
    brain: "Stylized neural network, not anatomical"
    network: "Interconnected nodes with pulse indicators"
    shield: "Rounded, intelligent, protective bubble"
    scan: "Radial detection patterns, AI analysis"
    agent: "Abstract AI entity, autonomous sentinel"
    prediction: "Forward-looking arrows with data streams"

Blueprint Technical Icons¶

Technical drawing, CAD annotation, engineering documentation style.

variant_blueprint_technical:
  icon_style:
    stroke_width: "{{stroke_width_sm}}"      # 1.5px
    corner_radius: "{{corner_sharp}}"        # 0px
    line_endings: "square"
    fill_style: "outlined-technical"
    color_primary: "{{sbk_sky}}"             # #0ea5e9
    color_secondary: "{{white}}"             # #ffffff
    background: "{{sbk_navy}}"               # #0f172a

  aesthetic:
    weight: "precise-light"
    mood: "technical, documented, engineered"
    detail_level: "high"
    drafting_style: true
    dimension_lines: true
    annotation_marks: true

  special_elements:
    dimension_lines: true
    annotation_callouts: true
    section_markers: true
    grid_background: true
    coordinate_marks: true

  prompt_modifier: |
    [ICON STYLE: BLUEPRINT TECHNICAL]
    Stroke: 1.5px precise weight, square line endings.
    Corners: Sharp, precise angles (0px radius).
    Fill: Outlined only, technical drafting style.
    Color: Cyan/sky blue (#0ea5e9) on navy (#0f172a) background.
    Mood: Engineering documentation, technical precision, CAD aesthetic.
    Form: Architectural/technical drawing style with annotation marks.

  icon_elements:
    measurement: "Dimension lines with tick marks"
    annotation: "Callout bubbles with leader lines"
    section: "Cut/section indicators (A-A, B-B style)"
    detail: "Magnified detail callouts"
    reference: "Drawing reference marks and coordinates"

  grid_overlay:
    enabled: true
    color: "{{sbk_sky}}"
    opacity: 0.1
    spacing: "8px"

Clean Developer Icons¶

Stripe-inspired clarity, developer-focused, documentation quality.

variant_clean_developer:
  icon_style:
    stroke_width: "{{stroke_width_md}}"      # 2px
    corner_radius: "{{corner_rounded}}"      # 2px
    line_endings: "rounded"
    fill_style: "outlined-clean"
    color_primary: "{{indigo_600}}"          # #4f46e5
    color_secondary: "{{slate_400}}"         # #94a3b8

  aesthetic:
    weight: "balanced"
    mood: "clean, precise, developer-friendly"
    detail_level: "optimized"
    pixel_perfect: true

  special_elements:
    code_aesthetic: true
    terminal_friendly: true
    monospace_alignment: true

  prompt_modifier: |
    [ICON STYLE: CLEAN DEVELOPER]
    Stroke: 2px consistent weight, rounded line endings.
    Corners: Precisely rounded (2px radius).
    Fill: Outlined only, clean and uncluttered.
    Color: Indigo primary (#4f46e5), muted slate secondary.
    Mood: Developer-focused, documentation quality, technical clarity.
    Form: Pixel-perfect alignment, mathematical precision.

  icon_elements:
    code: "Bracket and angle bracket motifs"
    terminal: "Command line aesthetic"
    api: "Endpoint/connection indicators"
    data: "Structured data representations"
    documentation: "Clean page/doc icons"

Creative Clay Icons¶

Rounded, friendly, distinctive character with warmth.

variant_creative_clay:
  icon_style:
    stroke_width: "{{stroke_width_lg}}"      # 2.5px
    corner_radius: "{{corner_pill}}"         # 9999px (fully rounded)
    line_endings: "rounded"
    fill_style: "outlined-friendly"
    color_primary: "{{slate_900}}"           # #0f172a
    color_accent: "{{orange_500}}"           # #f97316
    color_accent_secondary: "{{amber_500}}"  # #f59e0b

  aesthetic:
    weight: "friendly-bold"
    mood: "distinctive, creative, memorable"
    detail_level: "simplified"
    organic_shapes: true
    blob_influence: true

  special_elements:
    rounded_terminals: true
    organic_curves: true
    playful_asymmetry: true
    blob_backgrounds: optional

  prompt_modifier: |
    [ICON STYLE: CREATIVE CLAY]
    Stroke: 2.5px friendly weight, fully rounded line endings.
    Corners: Maximum rounded (pill shape, 9999px radius).
    Fill: Outlined with organic, blob-influenced forms.
    Color: Deep charcoal (#0f172a), warm orange (#f97316) accents.
    Mood: Distinctive, creative, memorable, boldly professional.
    Form: Organic blob-influenced shapes, friendly curves, no sharp edges.

  icon_elements:
    shapes: "Blob-influenced, organic curves"
    emphasis: "Oversized, bold statement forms"
    accents: "Warm color pops for key elements"
    personality: "Subtle asymmetry for character"

Icon System Specifications¶

Base Specifications¶

icon_system:
  style: "Outlined"
  stroke_width: "{{icon_stroke_width}}"      # Variant-dependent
  corner_radius: "{{icon_corner_radius}}"    # Variant-dependent
  grid: "24x24 base unit"
  padding: "2px internal padding"
  color: "{{primary}}"                       # Inherits from variant

size_variants:
  xs: "16x16px"
  sm: "20x20px"
  md: "24x24px"  # Base size
  lg: "32x32px"
  xl: "48px"
  hero: "64-128px"

# Stroke width scaling by size
stroke_scaling:
  xs_16px: "1px"
  sm_20px: "1.5px"
  md_24px: "{{stroke_width_md}}"
  lg_32px: "{{stroke_width_md}}"
  xl_48px: "{{stroke_width_lg}}"
  hero_64px: "{{stroke_width_xl}}"
  hero_128px: "3-4px"

Visual Consistency Rules¶

consistency_rules:
  stroke_weight: "Consistent within icon set, scales with size"
  corner_treatment: "Matches active variant corner_radius"
  optical_balance: "Visually centered, not mathematically"
  line_endings: "Per variant (rounded or square)"
  gap_ratio: "Minimum 2px between elements at base size"
  simplification: "One concept per icon"
  color_inheritance: "Single color from variant primary unless specified"

Service Pillar Icons¶

Protect Icon¶

[SBK BRAND DNA]
Professional technology consulting aesthetic. Clean geometric precision.

[STYLE: {{active_variant.name}}]
{{active_variant.icon_prompt_modifier}}

[ASSET: ICON - PROTECT]
Service pillar icon for Security & Compliance.

[SPECIFICATIONS]
24x24px base, scalable to 128px.
Stroke width: {{icon_stroke_width}}.
Corner radius: {{icon_corner_radius}}.
Works in single color ({{primary}}).

[SUBJECT]
Shield form—modern, geometric interpretation.
Not literal heraldic shield.
Subtle checkmark or lock element integrated.
Clean lines, balanced proportions.
Suggests protection without fortress.

[STYLE DETAILS]
- Shield outline only (not filled)
- Interior element: checkmark or abstract
- Corners per variant specification
- Open, accessible feel

[VARIANT-SPECIFIC NOTES]
- cyber_shield: Angular, faceted shield with corner brackets
- sentinel_guard: Rounded protective bubble with AI nodes
- blueprint_technical: Shield with dimension annotations
- creative_clay: Organic blob-shield hybrid

[AVOID]
Filled solid shapes. Literal padlock.
Medieval or military aesthetic.
Too complex for small sizes.

Plan Icon¶

[ASSET: ICON - PLAN]
Service pillar icon for Strategic Advisory.

[SPECIFICATIONS]
Stroke width: {{icon_stroke_width}}.
Corner radius: {{icon_corner_radius}}.
Color: {{primary}}.

[SUBJECT]
Compass or roadmap abstraction.
Direction and guidance concept.
Clean geometric representation.
Not literal compass—stylized.

[STYLE DETAILS]
- Circular base for compass
- Or: Connected nodes for roadmap
- Directional element (arrow, line)
- Balanced, centered composition

[VARIANT-SPECIFIC NOTES]
- cyber_shield: Hexagonal waypoints, data path
- sentinel_guard: Neural pathway to goal
- blueprint_technical: Technical drawing compass with annotations
- creative_clay: Organic flowing path

[AVOID]
Literal map imagery. Treasure hunt aesthetic.
Magnifying glass (overused).

Operate Icon¶

[ASSET: ICON - OPERATE]
Service pillar icon for Managed Services.

[SPECIFICATIONS]
Stroke width: {{icon_stroke_width}}.
Corner radius: {{icon_corner_radius}}.
Color: {{primary}}.

[SUBJECT]
Gears, settings, or system element.
Continuous operation implied.
Not mechanical—digital interpretation.
Suggests reliability and efficiency.

[STYLE DETAILS]
- Single gear or interlocking minimal gears
- Or: Dashboard/gauge abstraction
- Circular motion possible
- Technical but approachable

[VARIANT-SPECIFIC NOTES]
- cyber_shield: Operations center dashboard element
- sentinel_guard: Autonomous system indicator
- blueprint_technical: Engineering schematic gear
- creative_clay: Rounded, friendly cog

[AVOID]
Complex machinery. Too many gears.
Industrial/factory aesthetic.

Innovate Icon¶

[ASSET: ICON - INNOVATE]
Service pillar icon for Digital Transformation.

[SPECIFICATIONS]
Stroke width: {{icon_stroke_width}}.
Corner radius: {{icon_corner_radius}}.
Color: {{primary}}.

[SUBJECT]
Lightbulb, rocket, or transformation element.
Progress and change concept.
Modern, forward-looking.
Energy without chaos.

[STYLE DETAILS]
- Lightbulb: Geometric, not cartoon
- Or: Abstract transformation shape
- Upward or forward motion
- Spark or energy element subtle

[VARIANT-SPECIFIC NOTES]
- cyber_shield: Data transformation, upgrade arrow
- sentinel_guard: AI-powered evolution
- blueprint_technical: Innovation schematic with callouts
- creative_clay: Organic spark/bloom shape

[AVOID]
Clichéd lightbulb. Literal rocket ship.
Stars and sparks overload.

Compliance Framework Icons¶

HIPAA Icon¶

[ASSET: ICON - HIPAA]
Healthcare compliance icon.

[SPECIFICATIONS]
Stroke width: {{icon_stroke_width}}.
Corner radius: {{icon_corner_radius}}.
Color: {{primary}}.

[SUBJECT]
Medical cross + shield or document.
Healthcare + security combined.
Clean, not clinical.
Professional, not hospital signage.

[VARIANT-SPECIFIC]
- cyber_shield: Angular medical shield with data protection
- sentinel_guard: AI-monitored healthcare compliance
- blueprint_technical: Annotated compliance document

SOC 2 Icon¶

[ASSET: ICON - SOC2]
Audit compliance icon.

[SPECIFICATIONS]
Stroke width: {{icon_stroke_width}}.
Corner radius: {{icon_corner_radius}}.
Color: {{primary}}.

[SUBJECT]
Document with checkmark or seal.
Certification concept.
Trust and verification.
Official without bureaucratic.

[VARIANT-SPECIFIC]
- cyber_shield: Verified secure document with brackets
- sentinel_guard: AI-verified certification
- blueprint_technical: Technical certification stamp

CMMC Icon¶

[ASSET: ICON - CMMC]
Defense compliance icon.

[SPECIFICATIONS]
Stroke width: {{icon_stroke_width}}.
Corner radius: {{icon_corner_radius}}.
Color: {{primary}}.

[SUBJECT]
Layered protection or levels.
Government/defense appropriate.
Structured, organized.
Not military aggressive.

[VARIANT-SPECIFIC]
- cyber_shield: Layered defense grid
- sentinel_guard: Multi-level AI protection
- blueprint_technical: Tiered compliance diagram

UI Icons¶

[ASSET: ICON SET - NAVIGATION]
Standard UI navigation icons.

[SPECIFICATIONS]
Stroke width: {{icon_stroke_width}}.
Corner radius: {{icon_corner_radius}}.
Color: {{text_primary}} or {{text_secondary}}.

[SUBJECT SET]
- Menu (hamburger)
- Close (X)
- Arrow left/right/up/down
- Chevron left/right/up/down
- Search
- Home
- Settings
- User
- Log out

[STYLE REQUIREMENTS]
- Perfect pixel alignment at base size
- Consistent stroke weight throughout
- Touch-friendly sizing (min 44px touch target)
- Matches active variant aesthetic
- Line endings per variant specification

Action Icons¶

[ASSET: ICON SET - ACTIONS]
Common action icons.

[SPECIFICATIONS]
Stroke width: {{icon_stroke_width}}.
Corner radius: {{icon_corner_radius}}.
Color: {{primary}} for primary actions, {{text_secondary}} for secondary.

[SUBJECT SET]
- Download
- Upload
- Edit
- Delete
- Add
- Remove
- Copy
- Share
- Save
- Refresh

[STYLE REQUIREMENTS]
- Immediately recognizable
- Works at small sizes
- Clear affordance for action
- Variant-consistent styling

Status Icons¶

[ASSET: ICON SET - STATUS]
State and status indicator icons.

[SPECIFICATIONS]
Stroke width: {{icon_stroke_width}}.
Color mapping:
  - Success: {{success}}
  - Error: {{error}}
  - Warning: {{warning}}
  - Info: {{info}}

[SUBJECT SET]
- Success (check)
- Error (X or exclamation)
- Warning (triangle exclamation)
- Info (i circle)
- Loading (spinner)
- Pending (clock)

[STYLE REQUIREMENTS]
- Works with semantic colors
- Clear meaning at small sizes
- Accessible (not color-only)
- Shape differentiates meaning

Illustration Icons (Hero Size)¶

Hero: Security¶

[ASSET: ILLUSTRATION - SECURITY]
Large format security illustration.

[SPECIFICATIONS]
128px+ size.
Stroke width: {{stroke_width_xl}} to 4px.
Can include more detail.
Still outline style, not filled.

[STYLE: {{active_variant.name}}]
{{active_variant.prompt_modifier}}

[SUBJECT]
Expanded security concept.
Shield with integrated elements.
Network or system protection implied.
Can include subtle secondary elements.
Professional, not cartoon.

[VARIANT-SPECIFIC]
- cyber_shield: Threat detection network, angular shield, red glow accents
- sentinel_guard: AI neural defense network, purple gradient glows
- blueprint_technical: Detailed security architecture with annotations
- creative_clay: Organic protective form with character

Hero: Strategy¶

[ASSET: ILLUSTRATION - STRATEGY]
Large format strategy illustration.

[SPECIFICATIONS]
128px+ size.
Stroke width: {{stroke_width_xl}} to 4px.

[SUBJECT]
Expanded planning/roadmap concept.
Connected elements showing journey.
From current state to goal.
Can include data/chart elements.

[VARIANT-SPECIFIC]
- cyber_shield: Strategic threat assessment path
- sentinel_guard: AI-guided strategic planning
- blueprint_technical: Strategic architecture blueprint
- creative_clay: Organic journey visualization

Hero: Cloud¶

[ASSET: ILLUSTRATION - CLOUD]
Large format cloud services illustration.

[SUBJECT]
Cloud infrastructure abstraction.
Not literal cloud shape.
Connected services/systems.
Modern, technical aesthetic.

[VARIANT-SPECIFIC]
- cyber_shield: Secure cloud operations center
- sentinel_guard: AI-managed cloud ecosystem
- blueprint_technical: Cloud architecture diagram
- creative_clay: Friendly cloud service blob

Hero: Data¶

[ASSET: ILLUSTRATION - DATA]
Large format data/analytics illustration.

[SUBJECT]
Data visualization elements.
Charts, graphs abstracted.
Flow of information.
Insights emerging from data.

[VARIANT-SPECIFIC]
- cyber_shield: Threat data analytics dashboard
- sentinel_guard: AI data processing visualization
- blueprint_technical: Data flow schematic
- creative_clay: Organic data story visualization

Technology Icons¶

Platform Icons¶

[ASSET: ICON SET - PLATFORMS]
Technology platform icons (styled, not logos).

[SPECIFICATIONS]
Stroke width: {{icon_stroke_width}}.
Corner radius: {{icon_corner_radius}}.
Color: {{primary}}.

[SUBJECT SET]
- Cloud (AWS/Azure/GCP generic)
- Server
- Database
- API
- Mobile
- Desktop
- Network
- Container

[STYLE REQUIREMENTS]
- Brand-consistent styling per active variant
- Not vendor-specific logos
- Generic representations
- Scalable from 24px to 64px

Security Tool Icons¶

[ASSET: ICON SET - SECURITY TOOLS]
Security and compliance tool icons.

[SPECIFICATIONS]
Stroke width: {{icon_stroke_width}}.
Corner radius: {{icon_corner_radius}}.
Color: {{primary}} or variant-specific security color.

[SUBJECT SET]
- Firewall
- Encryption
- Authentication
- Monitoring
- Backup
- Incident response
- Vulnerability
- Access control

[STYLE REQUIREMENTS]
- Technical audience appropriate
- Not too literal
- Consistent with active variant system
- cyber_shield/sentinel_guard: Can use glow effects

Token Reference Quick Guide¶

# Stroke Width Tokens
stroke_width_xs: "1px"       # Smallest details, dense layouts
stroke_width_sm: "1.5px"     # Technical, precise variants
stroke_width_md: "2px"       # Standard, most variants
stroke_width_lg: "2.5px"     # Bold, creative variants
stroke_width_xl: "3px"       # Hero illustrations

# Corner Radius Tokens
corner_sharp: "0px"          # cyber_shield, blueprint_technical
corner_slight: "1px"         # bold_challenger
corner_rounded: "2px"        # trusted_advisor, clean_developer, sentinel_guard
corner_soft: "4px"           # modern_partner
corner_pill: "9999px"        # creative_clay

# Color Tokens (resolved per variant)
"{{primary}}"                # Main icon color
"{{secondary}}"              # Supporting elements
"{{accent}}"                 # Highlights, emphasis
"{{text_primary}}"           # UI icon default
"{{success}}"                # Positive status
"{{warning}}"                # Caution status
"{{error}}"                  # Negative status
"{{info}}"                   # Informational status

# Glow Tokens (dark variants only)
"{{glow_color}}"             # Glow accent color
"{{glow_radius}}"            # Glow spread (4-8px typical)
"{{glow_opacity}}"           # Glow transparency (0.25-0.4)

Icon Library Organization¶

Naming Convention¶

sbk-icon-{category}-{name}-{variant}-{size}.svg

Examples:
sbk-icon-pillar-protect-cyber_shield-24.svg
sbk-icon-ui-menu-trusted_advisor-24.svg
sbk-icon-compliance-hipaa-blueprint_technical-32.svg
sbk-icon-tech-cloud-creative_clay-48.svg

Export Formats¶

export_formats:
  primary: "SVG (scalable)"
  fallback: "PNG with transparency"
  sizes:
    - 16px
    - 20px
    - 24px
    - 32px
    - 48px
    - 64px (illustrations only)
    - 128px (illustrations only)

  variant_exports:
    - Export each icon in active variant style
    - Generate dark/light mode versions where applicable
    - Include glow variants for cyber_shield/sentinel_guard

Quality Checklist¶

Before using any icon:

Last Updated: February 2026 Version: 2.0