@blockshark/crypto-icons

350+ cryptocurrency SVG icons and React components — 50 coins in 7 style variants.

Fully typed. Tree-shakeable. Zero dependencies.

Features

• 50 cryptocurrencies covering the top coins by market cap
• 7 style variants — color, white, black, branded, inverted, glass, gray
• React components with forwardRef, displayName, and full SVGProps support
• Raw SVG strings for non-React projects (Vue, Svelte, vanilla JS, server-side)
• Raw .svg files available via direct path imports
• Metadata API with names, slugs, symbols, keywords, and brand colors
• TypeScript-first — every export is fully typed
• Tree-shakeable — sideEffects: false, only ships the icons you use
• ESM + CJS — works everywhere

Installation

npm install @blockshark/crypto-icons

yarn add @blockshark/crypto-icons

pnpm add @blockshark/crypto-icons

React is an optional peer dependency. The raw SVG string and metadata exports work without React.

Quick start

React components

import { BitcoinIcon, EthereumIcon } from '@blockshark/crypto-icons/react';

function App() {
  return (
    <div>
      <BitcoinIcon width={32} height={32} />
      <EthereumIcon width={32} height={32} className="eth" />
    </div>
  );
}

Raw SVG strings

import { Bitcoin, Ethereum } from '@blockshark/crypto-icons';

document.getElementById('icon')!.innerHTML = Bitcoin;

React components

Import from @blockshark/crypto-icons/react for the default color variant, or from a variant-specific subpath.

// Color (default)
import { BitcoinIcon } from '@blockshark/crypto-icons/react';

// Other variants
import { BitcoinIcon } from '@blockshark/crypto-icons/react/white';
import { BitcoinIcon } from '@blockshark/crypto-icons/react/black';
import { BitcoinIcon } from '@blockshark/crypto-icons/react/branded';
import { BitcoinIcon } from '@blockshark/crypto-icons/react/inverted';
import { BitcoinIcon } from '@blockshark/crypto-icons/react/glass';
import { BitcoinIcon } from '@blockshark/crypto-icons/react/gray';

Every component is a forwardRef component that accepts all standard SVGProps<SVGSVGElement>:

<BitcoinIcon
  width={24}
  height={24}
  className="coin-icon"
  style={{ opacity: 0.8 }}
  aria-label="Bitcoin"
/>

Refs

import { useRef } from 'react';
import { SolanaIcon } from '@blockshark/crypto-icons/react';

function App() {
  const ref = useRef<SVGSVGElement>(null);
  return <SolanaIcon ref={ref} width={48} />;
}

Naming convention

Components follow the {Name}Icon pattern:

| Coin | Component | | --- | --- | | Bitcoin | BitcoinIcon | | Ethereum | EthereumIcon | | Bitcoin Cash | BitcoinCashIcon | | Shiba Inu | ShibaInuIcon | | Ethereum Classic | EthereumClassicIcon | | The Graph | TheGraphIcon | | THORChain | THORChainIcon |

Raw SVG strings

For non-React projects, or when you need the raw SVG markup. Import from the root for the default color variant, or from a variant-specific subpath.

// Color (default)
import { Bitcoin, Ethereum } from '@blockshark/crypto-icons';

// Other variants
import { Bitcoin } from '@blockshark/crypto-icons/white';
import { Bitcoin } from '@blockshark/crypto-icons/black';
import { Bitcoin } from '@blockshark/crypto-icons/branded';
import { Bitcoin } from '@blockshark/crypto-icons/inverted';
import { Bitcoin } from '@blockshark/crypto-icons/glass';
import { Bitcoin } from '@blockshark/crypto-icons/gray';

// All variants at once (suffixed names)
import { BitcoinColor, BitcoinWhite, BitcoinGlass } from '@blockshark/crypto-icons/all';

Usage with frameworks

Vue:

<template>
  <span v-html="Bitcoin" />
</template>

<script setup>
import { Bitcoin } from '@blockshark/crypto-icons';
</script>

Svelte:

<script>
  import { Bitcoin } from '@blockshark/crypto-icons';
</script>

{@html Bitcoin}

Vanilla JS:

import { Bitcoin } from '@blockshark/crypto-icons';

document.getElementById('icon').innerHTML = Bitcoin;

Raw SVG files

Every icon is also available as an optimized .svg file for use in <img> tags, CSS, or any other context.

@blockshark/crypto-icons/svg/color/bitcoin.svg
@blockshark/crypto-icons/svg/white/bitcoin.svg
@blockshark/crypto-icons/svg/glass/ethereum.svg
...

<img src="node_modules/@blockshark/crypto-icons/svg/color/bitcoin.svg" alt="Bitcoin" width="32" />

With a bundler that supports asset imports:

import bitcoinSvg from '@blockshark/crypto-icons/svg/color/bitcoin.svg';

Metadata

The metadata export provides structured information about every icon — useful for building search, filters, or dynamic icon pickers.

import { icons, iconNames } from '@blockshark/crypto-icons/meta';
import type { IconName, IconSlug, IconVariant } from '@blockshark/crypto-icons/meta';

// icons: IconMeta[]
icons.forEach((icon) => {
  console.log(icon.name);       // 'Bitcoin'
  console.log(icon.slug);       // 'bitcoin'
  console.log(icon.symbol);     // 'BTC'
  console.log(icon.keywords);   // ['bitcoin', 'btc', 'crypto']
  console.log(icon.brandColor); // '#F7931A'
});

// iconNames: readonly string[]
// ['Bitcoin', 'Ethereum', 'Tether', ...]

Dynamic icon lookup

import { icons } from '@blockshark/crypto-icons/meta';
import * as reactIcons from '@blockshark/crypto-icons/react';

function CoinIcon({ symbol, size }: { symbol: string; size: number }) {
  const meta = icons.find((i) => i.symbol === symbol);
  if (!meta) return null;

  const Component = (reactIcons as any)[`${meta.name}Icon`];
  return <Component width={size} height={size} />;
}

// <CoinIcon symbol="BTC" size={24} />
// <CoinIcon symbol="ETH" size={24} />

Style variants

Every coin is available in 7 hand-crafted variants:

| Variant | Description | Best for | | --- | --- | --- | | color | Full-color icons with background circles | General use, dashboards | | white | White monochrome | Dark backgrounds | | black | Black monochrome | Light backgrounds, print | | branded | Logo-only, no background circle | Inline with text, compact layouts | | inverted | White background circle with colored logo | Light-themed cards | | glass | Translucent background with soft opacity | Glassmorphism UI, overlays | | gray | Neutral gray monochrome (#6B7280) | Disabled states, muted UI |

Supported coins

50 cryptocurrencies sorted by approximate market cap:

| # | Coin | Symbol | Export name | Slug | | --- | --- | --- | --- | --- | | 1 | Bitcoin | BTC | Bitcoin / BitcoinIcon | bitcoin | | 2 | Ethereum | ETH | Ethereum / EthereumIcon | ethereum | | 3 | Tether | USDT | Tether / TetherIcon | tether | | 4 | BNB | BNB | BNB / BNBIcon | bnb | | 5 | Solana | SOL | Solana / SolanaIcon | solana | | 6 | XRP | XRP | XRP / XRPIcon | xrp | | 7 | USDC | USDC | USDC / USDCIcon | usdc | | 8 | Cardano | ADA | Cardano / CardanoIcon | cardano | | 9 | Dogecoin | DOGE | Dogecoin / DogecoinIcon | dogecoin | | 10 | TRON | TRX | TRON / TRONIcon | tron | | 11 | Avalanche | AVAX | Avalanche / AvalancheIcon | avalanche | | 12 | Chainlink | LINK | Chainlink / ChainlinkIcon | chainlink | | 13 | Polkadot | DOT | Polkadot / PolkadotIcon | polkadot | | 14 | Polygon | POL | Polygon / PolygonIcon | polygon | | 15 | Toncoin | TON | Toncoin / ToncoinIcon | toncoin | | 16 | Shiba Inu | SHIB | ShibaInu / ShibaInuIcon | shiba-inu | | 17 | Litecoin | LTC | Litecoin / LitecoinIcon | litecoin | | 18 | Uniswap | UNI | Uniswap / UniswapIcon | uniswap | | 19 | Near | NEAR | Near / NearIcon | near | | 20 | Stellar | XLM | Stellar / StellarIcon | stellar | | 21 | Bitcoin Cash | BCH | BitcoinCash / BitcoinCashIcon | bitcoin-cash | | 22 | Dai | DAI | Dai / DaiIcon | dai | | 23 | LEO | LEO | LEO / LEOIcon | leo | | 24 | Cosmos | ATOM | Cosmos / CosmosIcon | cosmos | | 25 | Monero | XMR | Monero / MoneroIcon | monero | | 26 | Ethereum Classic | ETC | EthereumClassic / EthereumClassicIcon | ethereum-classic | | 27 | Hedera | HBAR | Hedera / HederaIcon | hedera | | 28 | Filecoin | FIL | Filecoin / FilecoinIcon | filecoin | | 29 | Aptos | APT | Aptos / AptosIcon | aptos | | 30 | Mantle | MNT | Mantle / MantleIcon | mantle | | 31 | Cronos | CRO | Cronos / CronosIcon | cronos | | 32 | VeChain | VET | VeChain / VeChainIcon | vechain | | 33 | Render | RNDR | Render / RenderIcon | render | | 34 | Kaspa | KAS | Kaspa / KaspaIcon | kaspa | | 35 | Arbitrum | ARB | Arbitrum / ArbitrumIcon | arbitrum | | 36 | Optimism | OP | Optimism / OptimismIcon | optimism | | 37 | Immutable | IMX | Immutable / ImmutableIcon | immutable | | 38 | Sui | SUI | Sui / SuiIcon | sui | | 39 | Injective | INJ | Injective / InjectiveIcon | injective | | 40 | Aave | AAVE | Aave / AaveIcon | aave | | 41 | Algorand | ALGO | Algorand / AlgorandIcon | algorand | | 42 | The Graph | GRT | TheGraph / TheGraphIcon | the-graph | | 43 | Fantom | FTM | Fantom / FantomIcon | fantom | | 44 | Stacks | STX | Stacks / StacksIcon | stacks | | 45 | Celestia | TIA | Celestia / CelestiaIcon | celestia | | 46 | Sei | SEI | Sei / SeiIcon | sei | | 47 | THORChain | RUNE | THORChain / THORChainIcon | thorchain | | 48 | Flow | FLOW | Flow / FlowIcon | flow | | 49 | Axie Infinity | AXS | Axie / AxieIcon | axie | | 50 | Maker | MKR | Maker / MakerIcon | maker |

API reference

Subpath exports

| Import path | Contents | | --- | --- | | @blockshark/crypto-icons | Raw SVG strings (color) | | @blockshark/crypto-icons/white | Raw SVG strings (white) | | @blockshark/crypto-icons/black | Raw SVG strings (black) | | @blockshark/crypto-icons/branded | Raw SVG strings (branded) | | @blockshark/crypto-icons/inverted | Raw SVG strings (inverted) | | @blockshark/crypto-icons/glass | Raw SVG strings (glass) | | @blockshark/crypto-icons/gray | Raw SVG strings (gray) | | @blockshark/crypto-icons/all | Raw SVG strings (all variants, suffixed names) | | @blockshark/crypto-icons/react | React components (color) | | @blockshark/crypto-icons/react/white | React components (white) | | @blockshark/crypto-icons/react/black | React components (black) | | @blockshark/crypto-icons/react/branded | React components (branded) | | @blockshark/crypto-icons/react/inverted | React components (inverted) | | @blockshark/crypto-icons/react/glass | React components (glass) | | @blockshark/crypto-icons/react/gray | React components (gray) | | @blockshark/crypto-icons/meta | Metadata (icons, iconNames, types) | | @blockshark/crypto-icons/svg/* | Raw .svg files |

TypeScript types

import type { IconName, IconSlug, IconVariant } from '@blockshark/crypto-icons/meta';

type IconName = 'Bitcoin' | 'Ethereum' | 'Tether' | /* ... */ 'Maker';
type IconSlug = 'bitcoin' | 'ethereum' | 'tether' | /* ... */ 'maker';
type IconVariant = 'color' | 'white' | 'black' | 'branded' | 'inverted' | 'glass' | 'gray';

React component props

Every React icon component accepts SVGProps<SVGSVGElement> and forwards refs:

interface IconProps extends React.SVGProps<SVGSVGElement> {
  // All standard SVG attributes: width, height, className, style, fill, stroke, etc.
  // Plus all event handlers: onClick, onMouseEnter, etc.
  // Plus ref via forwardRef
}

Tree-shaking

The package is marked sideEffects: false and ships ESM. Your bundler will only include the icons you actually import:

// Only BitcoinIcon and EthereumIcon end up in your bundle
import { BitcoinIcon, EthereumIcon } from '@blockshark/crypto-icons/react';

Requirements

• Raw SVG strings / metadata: No dependencies. Works with any JavaScript runtime.
• React components: React 18+

License

MIT