Icons

Browse 223 recommended icons: 136 UI icons for common controls, 76 C2 icons for defense operations, and 11 industrial icons for equipment and maintenance identity. Search the packages together or filter by package and category. Previews show 16 / 24 / 32px; downloads include the selected 16px or 24px optical size.

Catalog

Choose the package

The packages remain separate. Each catalog entry shows its import package; downloaded filenames include ui-, c2-, or industrial- and the selected size so similarly named assets remain distinct.

Names that collide

Both UI and C2 export Grid: alias the UI layout grid as LayoutGrid and the C2 coordinate grid as CoordinateGrid. Calendar, Link, and C2’s Radio share a name with @operator-ds/react components, and Map, File, Image, History, and C2's Range shadow platform globals. The exports keep their names, so alias them where you import them:

import { Calendar as CalendarIcon, Map as MapIcon } from "@operator-ds/icons";
import { Radio as RadioIcon } from "@operator-ds/icons-c2";
import { Calendar, Radio } from "@operator-ds/react";

C2 icons belong in tables, panels, filters, legends, and feeds. They do not render tactical map symbology, including Platform / Entity glyphs on a COP. Use a MIL-STD-2525 symbology engine for affiliation frames and echelon modifiers; OPERATOR provides affiliation colors.

Doctrinal words — weapons FREE / HOLD / TIGHT and command OPCON / TACON / ADCON — belong in a Badge.

React usage

Install the packages you need:

pnpm add @operator-ds/icons @operator-ds/icons-c2 @operator-ds/icons-industrial

import {
  Search,
  Download,
  Grid as LayoutGrid,
} from "@operator-ds/icons";
import {
  LinkHealth,
  Emcon,
  Grid as CoordinateGrid,
} from "@operator-ds/icons-c2";
import { Pump } from "@operator-ds/icons-industrial";
import { Button } from "@operator-ds/react";
 
// Adjacent text labels the action or state.
<Button className="gap-1u">
  <Download size={16} /> Export
</Button>
<span><LinkHealth size={16} /> Link healthy</span>
<span><Pump size={16} /> Intake pump</span>
 
// Name icon-only controls on the button.
<Button aria-label="Search">
  <Search size={16} />
</Button>
 
// A meaningful image needs its own name.
<Emcon size={24} title="EMCON active" />

All three packages support size, color (default currentColor), title, SVG props, and forwarded refs. weight supports regular only. Icons are hidden from assistive technology unless named with title, aria-label, or aria-labelledby. Each package is tree-shakeable: importing one icon adds only that icon to a bundle.

Industrial icons identify equipment or a maintenance context. They do not encode running state, alarms, freshness, or command outcome. Pair them with visible state text and the appropriate status component. Pump, Valve, Motor, Fan, Tank, Pipe, Gauge, Maintenance, Facility, Toolbox, and SafetyHelmet form the industrial family. Sensor and ISR identity already use the C2 vocabulary (EoIr, Sar, Sigint, Elint, Comint, Masint, and Humint); process-diagram symbols and formal technical schematics have separate contracts.

View the approved second-pass industrial icons and their earlier drawings.

Keep visible labels for ambiguous actions, operational states, and sensor disciplines. MissionCapable and NonMissionCapable share an equipment cabinet with a check or X; MissionReady uses a checked flag. Visible “Capable” / “Ready” and EO/IR / SAR / MASINT labels carry the exact meaning.

Loader is static. Respect reduced motion when animating it; put the loading message on the owning control or status region.

Component and pattern usage

• Selection controls use Check; indeterminate checkboxes use Minus. Import the components from @operator-ds/icons so the artwork and optical stroke stay in sync.
• General severity uses AlertCircle for critical conditions, AlertTriangle for warnings, and Info for advisories. CheckCircle indicates a current or nominal state; Check records acknowledgment. Keep the visible status text.
• Operational freshness uses DataStale; a disconnected source uses Offline. Reserve MissionReady for mission readiness and ThreatIndicator for threats.
• Pass the rendered size through size rather than resizing icons with CSS. width and height are accepted and give the same optical stroke, but size is the one to use. Use the same size for icons serving the same role in a control or pattern.

Chart markers, line samples, status dots, and tooltip arrows are data or layout geometry. They retain their own shapes and do not substitute for interface icons.

One drawing system

All three packages use a 24 × 24 grid, 1px stroke at 24px, flat caps, miter joins, and currentColor. Below 24px, the wrapper strengthens strokes to a full screen pixel. Most silhouettes occupy the central 18 units, with optical balance for narrow and wide forms.

Profiles (User, Users, UserPlus, UserMinus, and C2's Humint) share circular heads and horizontal shoulders with 90° corners. Microphones, bells, menu dots, and the Refresh, Undo, Redo, Reset, and Link contours use straight segments and square corners. Info, HelpCircle, AlertCircle, CheckCircle, and XCircle use square frames; existing export names remain for compatibility.

Clock dials (Clock, History, ZuluTime, MissionElapsedTime, and the age indicator in DataStale) are circular with sharp hands and endpoints. Offline retains a sharp frame. Physical forms such as lenses and wheels, signal arcs, contact returns, and approved lock shackles retain their meaningful curves.

Lucide’s catalog and design principles informed the UI metaphors; Central’s catalog informed expansion coverage. OPERATOR authored the SVG geometry. All three packages share rendering and accessibility behavior.

Distinguish related concepts

• Home uses a roof with an open courtyard entrance and a small center square. HomeBase is the abstract square courtyard variant; pair it with a visible “Home” or “Base” label.
• Shield, ShieldCheck, and ElectronicProtect share an angular contour. AlertTriangle, AlertCircle, and Caveat share square warning punctuation.
• Pair Video / VideoOff, Link / LinkOff, Bell / BellOff, Mic / MicOff, Volume / VolumeOff, and Pin / PinOff consistently. A slash means off; label the next action, such as “Unmute microphone.”
• Reset restores the starting state; Refresh reloads data; Undo reverses an edit; History opens previous activity. Sync uses opposing arrows for transfer.
• PanelLeft, PanelRight, and PanelBottom identify position; label the action, such as “Open left panel.”
• MapPin marks a place, Locate centers the current location, and Layers opens the layer picker. EngagementActive uses a targeting cross within open brackets for engagement status.
• SecureComms and UnsecureComms share a chat bubble and lock body; only the shackle changes. Use Lock and Unlock for general access controls.
• Releasability connects a document to recipients. Use ExternalLink for external navigation.
• Degraded uses an interrupted waveform. Use TrendingDown for a declining value; Route connects endpoints with symmetric right-angle turns.
• NeedToKnow places a person within access brackets for eligibility. Use EyeOff for hidden content.
• DataStale shows a record with an age indicator. Use History for previous activity.
• Radio identifies a handheld radio; Radar opens a radar scan view or function; RadarSystem identifies physical radar equipment with a panel array. Visible text carries equipment state.
• Wifi uses faceted signal bands; connection state and signal strength belong in accompanying text.
• ZuluTime uses a Z dial; pair it with a visible UTC label. Use Clock for generic time.

Contact is a dot; history adds a trail; a live track adds a velocity vector; a lost track ends a broken trail at a hollow last position. Neutralized strikes through a contact ring. Opord points down the command chain; Sitrep points up.

Platform and collection families

Satellite and Satcom share the same diagonal body and wide, divided solar arrays. Satcom adds communication arcs in the lower-right corner. Sigint, Elint, Comint, Masint, and Humint share a collection shelf with the source above it.

FixedWing uses the selected MQ-9 contour without the rear propeller; Jet carries the swept-wing silhouette. GroundVehicle uses tracked armor. RotaryWing uses the unmanned rotorcraft silhouette. UAV is broader than fixed-wing; use the appropriate platform label in the interface.

Datalink uses paired send/receive ports. Autonomous uses a sparse AI controller. EoIr uses the selected sensor turret. Sar preserves its original dish, feed, and ground line, with the mast connected to the lower dish curve and one wave aligned with the feed.

Compatibility exports

Three C2 exports are outside the recommended catalog. Their React imports, ref/props behavior, and existing 16px and 24px SVG paths remain available:

• NewContact is retired for now. No replacement candidate was approved. Use visible new-contact status text; the NewContact drawings and saved shortlists are archived, with no active selection request.
• IffInterrogate is retired. Use a visible Interrogate IFF action and explicit progress or result text. The IFF explorations are archived; no candidate was approved.
• Uav is consolidated into FixedWing. The deprecated forwarding component and existing uav.svg paths render the selected fixed-wing artwork.

Standalone SVGs

The packages include 452 SVGs in total:

C2 assets include the 76 recommended icons and three compatibility exports. Package filenames remain kebab-case, with acronyms split (secure-comms.svg, eo-ir.svg, x-circle.svg). Catalog downloads include package and size (ui-grid-16.svg, c2-grid-24.svg).

Assets and downloads are decorative, like the components: aria-hidden="true" and no <title>. An inlined asset that conveys meaning needs its own name where you inline it. Add role="img" and an aria-label, and remove aria-hidden:

<svg role="img" aria-label="Pump" ...>...</svg>

Use the dedicated asset at 16px; externally resizing the 24px file does not select its optical stroke. Inline SVG inherits text color; <img> does not. Give meaningful images alt text and decorative images empty alt.

Regenerate and verify SVGs

Each package's src/icons.tsx is canonical. Run the package's build script for @operator-ds/icons, @operator-ds/icons-c2, or @operator-ds/icons-industrial to regenerate the assets. The package tests render every component and require the files to match exactly at both sizes, with none missing, stale, or extra; verify:svg runs the same check against the built package.