Design System

Iconography

Two icon systems that never mix.

Two icon systems run in parallel. They share the canvas but never mix within a single glyph.

UI · FA SHARP REGULAR · 24px · 1.5px stroke SAMPLE SET search settings refresh document upload user play alert STATE COLORS DEFAULT HOVER ACTIVE DISABLED SEMANTIC hostile / neutral / caution TACTICAL · APP-6D · shape carries affiliation FRIENDLY rounded rect · blue HOSTILE diamond · red NEUTRAL square · green UNKNOWN quatrefoil · amber PENDING dashed quatrefoil SELECTED fill + stroke + check SIDC-10 COMPOSED affiliation + echelon + role ✗ NEVER MIX A hostile diamond with a search magnifier baked in. Mixes two icon systems into one glyph - the tactical symbology now carries a UI control, and the UI icon now claims affiliation. Both meanings get confused. Keep them as separate elements in the DOM, positioned side by side, never overlaid or merged.

UI icons - Font Awesome Sharp Regular

The UI icon pack is Font Awesome Sharp Regular (FA Pro). Sharp corners align with the geometric precision of the rest of the system; Regular weight lands at ~1.5px stroke at 24px display, which matches the system’s stroke standard without adjustment.

Specifics

  • Pack: Font Awesome Sharp · Regular weight (not Classic, not Solid, not Light, not Thin)
  • License: Font Awesome Pro. Sharp is a Pro-only style - one organizational seat covers the whole design system.
  • Source: fontawesome.com/search?ic=sharp-regular
  • Integration: Configured as the default icon family on wa-icon via wa-icon { --family: 'sharp'; --variant: 'regular'; } at the theme level. Individual overrides are possible but discouraged.
  • Hosting: Self-hosted via the Font Awesome Kit with subsetting. No CDN dependency - defense-tech endpoints cannot assume external font/icon resolution.
  • Grid: 24×24px display (16×16 for dense contexts only - tab bars, table cells). Stroke weight ~1.5px at 24px, scales proportionally.
  • Terminals: Square (inherent to Sharp), no rounding. If an icon appears to have rounded terminals, it’s Classic by mistake - swap to the Sharp variant.

Color and state

  • Default: fog-200 stroke on dark surfaces, steel-300 on translucent panels.
  • Hover: fog-100 stroke, no fill.
  • Active / selected: electric-500 stroke at 100%, electric-500 at 20% fill, plus --fdt-glow-xs.
  • Disabled: steel-400 stroke, no fill, no glow.
  • Semantic icons (in an alert, toast, validation): take the matching semantic color (hostile-400, neutral, caution) - using the AA-body-safe variant where text labels accompany the icon.

Sharp Regular fallback rules

Not every icon in the Font Awesome library has a Sharp Regular variant. When a needed icon is Classic-only:

  1. Prefer a conceptually adjacent Sharp Regular icon that conveys the same meaning.
  2. If no Sharp substitute exists, use the Classic Regular variant and accept the mild visual inconsistency - never downgrade to Sharp Solid (filled) or Sharp Light (too thin) just to stay within the Sharp family. Weight consistency beats style consistency.
  3. If the icon will appear repeatedly and a Classic fallback would be noticed, commission an FDT-custom Sharp Regular variant rather than polluting the grid.

Never use

  • Font Awesome Duotone - the two-tone aesthetic contradicts the system’s restraint. No duotone anywhere.
  • Font Awesome Solid - filled icons break the stroke-based hierarchy. Exception: when a Solid variant is the only way to render a logical state difference (e.g., bookmark vs bookmark-solid for saved state), then the Solid is permitted at exactly the spot where the state differs, nowhere else.
  • Font Awesome Brands - third-party brand marks (GitHub octocat, Twitter bird, etc.) don’t belong in FDT surfaces. Exception: authenticated-integration flows where a brand mark is the correct affordance (“Sign in with Google”) - in which case the brand mark follows that brand’s own guidelines, not FDT’s.
  • Emoji - never as icons, never as status indicators, never as list bullets.

FDT-custom icons

Font Awesome Sharp Regular covers ~80% of the needed surface. The remaining ~20% are operator-specific glyphs FA doesn’t ship - things like “bearing indicator,” “fire support coordination line,” “PACE plan,” “COA comparison matrix,” “ISR handoff.” These are drawn as FDT-custom Sharp Regular icons following the same grid, stroke, and terminal rules, and registered alongside the FA set so wa-icon name="fdt-bearing" resolves identically to wa-icon name="crosshairs".

The custom set is versioned alongside the design tokens and shipped as part of the design system package. Engineers requesting a new custom icon open a request rather than inventing one locally.

Tactical symbology - APP-6D

MIL-STD-2525D / APP-6D rendered faithfully via a dedicated fdt-symbol web component. Geometric, not stylized. These are not icons - they’re a structured symbology system with formal rules.

  • Friendly force = blue rounded rectangle
  • Hostile = red diamond
  • Neutral = green square
  • Unknown = yellow quatrefoil
  • Pending = yellow quatrefoil with dashed outline

fdt-symbol accepts an APP-6D 10-character SIDC (symbol identification code) as input and renders the symbol with correct affiliation, echelon modifier, role indicator, and status per the standard. The component is strict about the spec - no “stylized” APP-6D, no flattening, no recoloring outside affiliation rules.

Never mix the two aesthetics within a single glyph. A “refresh” control is an FA Sharp Regular icon. An infantry battalion is an fdt-symbol. A composite that tries to be both is wrong.