Overview

Several libraries provide cryptocurrency and Web3 icons. They differ in scope, API design, and maintenance status:

• →react-web3-icons prioritises a lean, production-ready bundle with TypeScript-first ergonomics, per-category subpath imports, and utilities like dynamic loaders and chain ID maps.
• →@web3icons/react offers a much larger catalogue (2,500+ icons), a raw SVG package for non-React consumers, and a Figma plugin.
• →cryptocurrency-icons (spothq) is a framework-agnostic SVG/PNG asset pack with ~500 coins, but is no longer actively maintained and provides no React components.
• →@ledgerhq/crypto-icons is a Ledger-ecosystem React component that fetches icons from their CDN at runtime with multi-tier fallback. Downloads are primarily driven by internal Ledger projects.

Bundle Size

Because both libraries ship ES modules, your bundler tree-shakes unused icons automatically. The numbers below reflect gzip-compressed size for a handful of representative import patterns.

Measured with size-limit on the published ESM build. Single-icon size varies by path complexity.

API Comparison

Each library takes a different approach to exposing icons:

react-web3-icons

// Named import — fully tree-shakeable
import { Ethereum, BitcoinCircle } from 'react-web3-icons';
// or from a category subpath (smaller bundle entry):
import { Ethereum } from 'react-web3-icons/chain';

<Ethereum size={32} />
<BitcoinCircle className="text-orange-500" size={48} />

// Dynamic loading by slug — no static import needed
import { ChainIcon } from 'react-web3-icons/dynamic';
<ChainIcon name="ethereum" size={32} />

// Chain ID → component name
import { CHAIN_ID_TO_NAME } from 'react-web3-icons/meta';
const name = CHAIN_ID_TO_NAME[1]; // "Ethereum"

@web3icons/react

// Named import with variant prop
import { IconEthereum } from '@web3icons/react';

<IconEthereum size={32} variant="branded" />
<IconEthereum size={32} variant="mono" />
<IconEthereum size={32} variant="background" />

cryptocurrency-icons

// Asset-only — no React components, just file paths
import ethSvg from 'cryptocurrency-icons/svg/color/eth.svg';
import btcPng from 'cryptocurrency-icons/128/color/btc.png';

<img src={ethSvg} alt="Ethereum" width={32} height={32} />

@ledgerhq/crypto-icons

// Single dynamic component — fetches from Ledger CDN
import { CryptoIcon } from '@ledgerhq/crypto-icons';

<CryptoIcon ledgerId="ethereum" size={32} />
// Falls back to CoinGecko mapping, then letter icon

Key differences: react-web3-icons uses separate exported names for each variant (Ethereum vs EthereumMono), enabling per-variant tree-shaking. @web3icons/react uses a single component with a variant prop. cryptocurrency-icons provides raw files only. @ledgerhq/crypto-icons loads icons at runtime from a CDN.

Feature Matrix

Sources: @web3icons/react, cryptocurrency-icons, @ledgerhq/crypto-icons. See npm trends for live download stats.