@blockshark/crypto-icons

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

Fully typed. Tree-shakeable. Zero dependencies.

npm install @blockshark/crypto-icons

npm · GitHub

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

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
assets		assets
scripts		scripts
tests		tests
.gitignore		.gitignore
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
svgo.config.js		svgo.config.js
tsconfig.json		tsconfig.json
tsup.config.ts		tsup.config.ts

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

@blockshark/crypto-icons

Features

Installation

Quick start

React components

Raw SVG strings

React components

Refs

Naming convention

Raw SVG strings

Usage with frameworks

Raw SVG files

Metadata

Dynamic icon lookup

Style variants

Supported coins

API reference

Subpath exports

TypeScript types

React component props

Tree-shaking

Requirements

License

About

Uh oh!

Releases

Packages

Uh oh!

Contributors

Uh oh!

Languages

Folders and files

Latest commit

History

Repository files navigation

@blockshark/crypto-icons

Features

Installation

Quick start

React components

Raw SVG strings

React components

Refs

Naming convention

Raw SVG strings

Usage with frameworks

Raw SVG files

Metadata

Dynamic icon lookup

Style variants

Supported coins

API reference

Subpath exports

TypeScript types

React component props

Tree-shaking

Requirements

License

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages