Coin icon
A circular token badge for a currency or asset. Shows a brand glyph when supplied, otherwise the first letters of the symbol on a coloured disc — deterministic from the ticker, so the same asset keeps its colour across every list.
Fallback letters
<CoinIcon symbol="BTC" /><CoinIcon symbol="ETH" /><CoinIcon symbol="SOL" /><CoinIcon symbol="ADA" />Without an explicit color, the background is a deterministic hash of the symbol so the same asset keeps its hue across screens.
Brand colour
<CoinIcon symbol="BTC" color="#f7931a" /><CoinIcon symbol="ETH" color="#627eea" /><CoinIcon symbol="SOL" color="#9945ff" />Sizes
<CoinIcon symbol="BTC" size="sm" /><CoinIcon symbol="BTC" size="md" /><CoinIcon symbol="BTC" size="lg" />Standalone label
BTC
<CoinIcon symbol="BTC" color="#f7931a" label="Bitcoin" />By default the icon sits beside the asset name and is decorative (aria-hidden). Pass label to make it a labelled image when it stands alone.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
symbol | string | — | Ticker; drives the letters, the colour hash and the label. |
icon | ReactNode | — | Brand glyph; replaces the letter fallback. |
color | string | — | Explicit background colour; overrides the hash. |
size | 'sm' | 'md' | 'lg' | 'md' | Diameter: sm 28px, md 36px, lg 44px. |
label | string | — | Accessible name when the icon stands alone; keeps it decorative otherwise. |