Docs/Icons

Icons

326 geometric icons with consistent design. Search, browse by category, and click to copy.

Browse

326 icons

Usage

tsx

1// Import individual icons (tree-shakeable)
2import { Bell, ArrowRight } from '@storm-ds/icons'
3
4// Use in JSX
5<Bell className="h-5 w-5" />
6
7// Dual-tone icons inherit currentColor
8<Bell className="h-5 w-5 text-storm-primary" />

Dual-Tone Design

Storm Icons use a distinctive dual-tone style. Closed shapes get a subtle 15% opacity accent fill behind the stroke, creating depth without clutter. Linear icons (arrows, chevrons) remain stroke-only.

Dual-tone (accent fill)

tsx

1<!-- Accent fill at 15% -->
2<path fill="currentColor"
3      fill-opacity="0.15"
4      stroke="none" />
5<!-- Stroke path -->
6<path stroke="currentColor" />

Stroke-only (linear)

tsx

1<!-- No accent fill -->
2<line stroke="currentColor"
3      x1="5" y1="12"
4      x2="19" y2="12" />
5<polyline points="12 5 19 12 12 19" />

Radial Chart

AI Patterns