Icons
Icons
1173 icons across 19 categories. All icons accept size and className props and use currentColor for all strokes.
Sizes
Pass a numeric or string size prop. Defaults to 24 (md).
sm20 ×20
md24 ×24
lg40 ×40
xl48 ×48
| Size | Prop | Dimensions | Use when |
|---|---|---|---|
| sm | size={20} | 20 × 20 | Dense rows, labels, inline metadata. |
| md | size={24} | 24 × 24 | Default — most buttons, inputs, and UI elements. |
| lg | size={40} | 40 × 40 | Feature callouts, empty states, section icons. |
| xl | size={48} | 48 × 48 | Hero illustrations, large-format marketing moments. |
Usage
// Catalog shows kebab-case slugs (matches Figma file names).
// Import the PascalCase equivalent: kebab-to-PascalCase, e.g.
// arrow-down → ArrowDown
// bank-note-01 → BankNote01
import { InfoCircle, ArrowDown, BankNote01 } from '@spring/ds-react/icons'
// Default size (24 × 24), inherits text color
<InfoCircle />
// Explicit size
<ArrowDown size={20} />
// Colored via Tailwind
<BankNote01 size={24} className="text-brand" />