Icon

Inline SVG icons loaded from resources/svg/icons/. Falls back to a warning triangle when the icon file is not found. Color is inherited via currentColor.

Preview — All 6 Sizes

xs (12px)

sm (16px)

md (20px)

lg (24px)

xl (40px)

2xl (64px)

Navigation

home

back

chevron-down

chevron-right

external-link

Map

target

layers

compass

cluster

Damage / Crisis

warning

building

road

bridge

power

water

flood

earthquake

fire

conflict

Status

check-circle

x-circle

info

cloud-offline

cloud-upload

badge-verified

history

Actions

edit

trash

download

filter

camera

language

shield-exit

Preview — Color Variations

rapida-blue-700

slate-600

amber-500

green-600

rapida-blue-700

Variants

Size	Dimensions	Usage
xs	12 x 12px	Inline with caption text, badge icons
sm	16 x 16px	Inside buttons, form input icons
md	20 x 20px	Default — navigation, list items
lg	24 x 24px	Card headers, empty states
xl	40 x 40px	Hero illustrations, upload zone
2xl	64 x 64px	Full-page empty states, onboarding

States

SVG file found

Fallback (missing)

Accessibility

All icons are decorative by default: aria-hidden="true".
Icons used as the sole content of a button must have an aria-label on the parent button.
Inline SVGs inherit color from the parent via currentColor stroke, controlled with Tailwind text-* classes.
SVGs have no hardcoded width/height — they fill their container span via CSS.

Trauma-Informed Design

Icons always accompany text — they reinforce meaning but never carry it alone.
Fallback SVG ensures the UI never shows a broken image, even offline.
Icon sizes are generous to maintain clarity on cracked or dirty screens.
The icon set avoids graphic depictions of violence or injury.