Crypto renders brand-accurate cryptocurrency icons including Bitcoin, Ethereum, and 13+ other popular cryptocurrencies.
Installation
npm install @soft-ui/react
Usage
import { Crypto } from "@soft-ui/react/crypto"
<Crypto crypto="btc" size={24} />
API Reference
Props
Cryptocurrency to display. Supported values:
btc - Bitcoineth - Ethereumusdt - Tetherbnb - Binance Coinada - Cardanoxrp - XRPusdc - USD Coindot - Polkadotbusd - Binance USDuni - Uniswapltc - Litecoinsol - Solanalink - Chainlinkwbtc - Wrapped Bitcoindai - Dai
Size of the icon in pixels
Examples
Different Cryptocurrencies
<div className="flex gap-4">
<Crypto crypto="btc" />
<Crypto crypto="eth" />
<Crypto crypto="sol" />
<Crypto crypto="usdc" />
</div>
Different Sizes
<div className="flex items-center gap-4">
<Crypto crypto="btc" size={16} />
<Crypto crypto="btc" size={24} />
<Crypto crypto="btc" size={32} />
<Crypto crypto="btc" size={48} />
</div>
In a List
const holdings = [
{ crypto: "btc", name: "Bitcoin", amount: "0.5" },
{ crypto: "eth", name: "Ethereum", amount: "2.3" },
{ crypto: "sol", name: "Solana", amount: "15" },
]
<div className="space-y-2">
{holdings.map(({ crypto, name, amount }) => (
<div key={crypto} className="flex items-center gap-3">
<Crypto crypto={crypto} size={32} />
<div>
<p className="font-medium">{name}</p>
<p className="text-sm text-content-subtle">{amount}</p>
</div>
</div>
))}
</div>
Accessing Colors and Names
import { cryptoColors, cryptoNames } from "@soft-ui/react/crypto"
// Get brand color
const btcColor = cryptoColors.btc // "#F7931A"
// Get display name
const btcName = cryptoNames.btc // "Bitcoin"