or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

@ant-design/web3-icons

@ant-design/web3-icons provides a comprehensive collection of 676 Web3-related icon components for React applications. These icons cover major cryptocurrencies, blockchain networks, DeFi protocols, and wallet providers, all designed specifically for cryptocurrency wallets, DeFi platforms, NFT marketplaces, and other blockchain-based applications.

Package Information

Package Name: @ant-design/web3-icons
Package Type: npm
Language: TypeScript
Installation: npm install @ant-design/web3-icons

Core Imports

import { BitcoinColorful, EthereumFilled, PhantomCircleColorful } from "@ant-design/web3-icons";

For CommonJS:

const { BitcoinColorful, EthereumFilled, PhantomCircleColorful } = require("@ant-design/web3-icons");

Basic Usage

import { BitcoinColorful, EthereumCircleFilled, SolanaColorful } from "@ant-design/web3-icons";

function WalletBalance() {
  return (
    <div>
      <BitcoinColorful style={{ fontSize: '24px' }} />
      <EthereumCircleFilled className="eth-icon" />
      <SolanaColorful spin />
    </div>
  );
}

Architecture

All icons in @ant-design/web3-icons are built on the Ant Design Icons framework and follow consistent patterns:

React Components: Each icon is a React component using forwardRef for ref support
SVG-based: Vector graphics for perfect scalability at any size
Ant Design Integration: Built-in ConfigProvider support and theming compatibility
TypeScript Support: Full type definitions and IntelliSense support
Naming Convention: {CoinName}{Style} pattern for predictable imports

Capabilities

Icon Component Structure

All icon components share the same interface and capabilities.

/**
 * Base interface for all Web3 icon components
 * Extends React.HTMLProps<HTMLSpanElement> and Ant Design's IconBaseProps
 */
interface IconBaseProps extends React.HTMLProps<HTMLSpanElement> {
  /** Whether icon should spin */
  spin?: boolean;
  /** Rotation angle in degrees */
  rotate?: number;
  /** Two-tone color (primary color or [primary, secondary] tuple) */
  twoToneColor?: string | [string, string];
}

/**
 * Generic icon component type used by all 676 icon components
 */
type IconComponent = React.ForwardRefExoticComponent<
  IconBaseProps & React.RefAttributes<HTMLSpanElement>
>;

Major Cryptocurrency Icons

Icons for the most popular cryptocurrencies, available in multiple style variants.

// Bitcoin icons
export const BitcoinColorful: IconComponent;
export const BitcoinFilled: IconComponent;
export const BitcoinCircleColorful: IconComponent;
export const BitcoinCircleFilled: IconComponent;

// Ethereum icons  
export const EthereumColorful: IconComponent;
export const EthereumFilled: IconComponent;
export const EthereumCircleColorful: IconComponent;
export const EthereumCircleFilled: IconComponent;

// Solana icons
export const SolanaColorful: IconComponent;
export const SolanaFilled: IconComponent;
export const SolanaCircleColorful: IconComponent;
export const SolanaCircleFilled: IconComponent;

// Cardano (ADA) icons
export const AdaColorful: IconComponent;
export const AdaFilled: IconComponent;
export const AdaCircleColorful: IconComponent;
export const AdaCircleFilled: IconComponent;

// Polkadot (DOT) icons
export const DotColorful: IconComponent;
export const DotFilled: IconComponent;
export const DotCircleColorful: IconComponent;
export const DotCircleFilled: IconComponent;

// BNB icons
export const BnbColorful: IconComponent;
export const BnbFilled: IconComponent;
export const BnbCircleColorful: IconComponent;
export const BnbCircleFilled: IconComponent;

// XRP icons
export const XrpColorful: IconComponent;
export const XrpFilled: IconComponent;
export const XrpCircleColorful: IconComponent;
export const XrpCircleFilled: IconComponent;

// Avalanche icons
export const AvaxColorful: IconComponent;
export const AvaxFilled: IconComponent;
export const AvaxCircleColorful: IconComponent;
export const AvaxCircleFilled: IconComponent;
export const AvalancheCircleColorful: IconComponent;

// Polygon (MATIC) icons
export const MaticColorful: IconComponent;
export const MaticFilled: IconComponent;
export const MaticCircleFilled: IconComponent;
export const PolygonColorful: IconComponent;
export const PolygonFilled: IconComponent;
export const PolygonCircleColorful: IconComponent;
export const PolygonCircleFilled: IconComponent;

// Chainlink icons
export const ChainlinkColorful: IconComponent;
export const ChainlinkFilled: IconComponent;
export const ChainlinkCircleColorful: IconComponent;
export const ChainlinkCircleFilled: IconComponent;
export const LinkColorful: IconComponent;

// NEAR Protocol icons
export const NearColorful: IconComponent;
export const NearFilled: IconComponent;
export const NearCircleFilled: IconComponent;

// Sui icons
export const SuiColorful: IconComponent;
export const SuiFilled: IconComponent;
export const SuiCircleColorful: IconComponent;
export const SuiCircleFilled: IconComponent;

// TON icons
export const TonColorful: IconComponent;
export const TonFilled: IconComponent;
export const TonCircleColorful: IconComponent;
export const ToncoinCircleFilled: IconComponent;

Usage Examples:

import { BitcoinColorful, EthereumCircleFilled } from "@ant-design/web3-icons";

// Basic usage
<BitcoinColorful />

// With styling
<EthereumCircleFilled 
  style={{ fontSize: '32px', color: '#627EEA' }} 
  className="crypto-icon"
/>

// With interaction
<BitcoinColorful 
  onClick={() => console.log('Bitcoin clicked')}
  style={{ cursor: 'pointer' }}
/>

Stablecoin Icons

Icons for major stablecoins and pegged assets.

// USDC icons
export const UsdcColorful: IconComponent;
export const UsdcFilled: IconComponent;
export const UsdcCircleColorful: IconComponent;
export const UsdcCircleFilled: IconComponent;

// USDT icons
export const UsdtColorful: IconComponent;
export const UsdtFilled: IconComponent;
export const UsdtCircleColorful: IconComponent;
export const UsdtCircleFilled: IconComponent;

// DAI icons
export const DaiCircleColorful: IconComponent;

// Other stablecoins
export const BusdColorful: IconComponent;
export const UsddCircleColorful: IconComponent;
export const UsdpColorful: IconComponent;
export const GusdCircleColorful: IconComponent;
export const TusdCircleColorful: IconComponent;
export const HusdCircleColorful: IconComponent;

Wallet Provider Icons

Icons for popular cryptocurrency wallets and wallet providers.

// MetaMask
export const MetamaskColorful: IconComponent;

// Phantom Wallet
export const PhantomColorful: IconComponent;
export const PhantomFilled: IconComponent;
export const PhantomCircleColorful: IconComponent;
export const PhantomCircleFilled: IconComponent;

// Trust Wallet
export const TrustWalletColorful: IconComponent;
export const TrustWalletFilled: IconComponent;
export const TrustWalletCircleColorful: IconComponent;
export const TrustWalletCircleFilled: IconComponent;

// Coinbase Wallet
export const CoinbaseWalletCircleColorful: IconComponent;

// WalletConnect
export const WalletConnectColorful: IconComponent;

// Rainbow Wallet
export const RainbowWalletColorful: IconComponent;

// Backpack Wallet
export const BackpackColorful: IconComponent;
export const BackpackFilled: IconComponent;
export const BackpackCircleColorful: IconComponent;
export const BackpackCircleFilled: IconComponent;

// Unisat Wallet
export const UnisatColorful: IconComponent;
export const UnisatFilled: IconComponent;
export const UnisatCircleFilled: IconComponent;

// Suiet Wallet
export const SuietColorful: IconComponent;
export const SuietFilled: IconComponent;
export const SuietCircleColorful: IconComponent;
export const SuietCircleFilled: IconComponent;

// OKX Wallet
export const OkxWalletColorful: IconComponent;

// Bitget Wallet
export const BitgetWalletColorful: IconComponent;

// ByBit Wallet
export const BybitWalletCircleColorful: IconComponent;

// Other wallet providers
export const ImtokenColorful: IconComponent;
export const ImtokenCircleColorful: IconComponent;
export const TokenpocketColorful: IconComponent;
export const SolflareColorful: IconComponent;
export const TronlinkColorful: IconComponent;
export const TonkeeperColorful: IconComponent;
export const TonhubCircleColorful: IconComponent;
export const MytonWalletCircleColorful: IconComponent;
export const XverseColorful: IconComponent;
export const XverseFilled: IconComponent;
export const XverseCircleColorful: IconComponent;
export const XverseCircleFilled: IconComponent;
export const SafeheronColorful: IconComponent;
export const DeWalletCircleColorful: IconComponent;
export const TgWalletCircleColorful: IconComponent;

Blockchain Network Icons

Icons for various blockchain networks and Layer 2 solutions.

// Ethereum and Layer 2s
export const EthereumColorful: IconComponent;
export const EthereumCircleColorful: IconComponent;
export const ArbitrumColorful: IconComponent;
export const ArbitrumCircleColorful: IconComponent;
export const OptimismCircleColorful: IconComponent;
export const BaseCircleColorful: IconComponent;
export const ScrollColorful: IconComponent;
export const ScrollCircleColorful: IconComponent;

// Binance Smart Chain
export const BscCircleColorful: IconComponent;

// Other major networks
export const FantomCircleColorful: IconComponent;
export const AvalancheCircleColorful: IconComponent;
export const ConfluxCircleColorful: IconComponent;
export const FlowCircleColorful: IconComponent;
export const FuelCircleColorful: IconComponent;
export const XlayerColorful: IconComponent;

// Cosmos ecosystem
export const AtomCircleColorful: IconComponent;
export const OsmoColorful: IconComponent;
export const IrisCircleColorful: IconComponent;
export const KavaColorful: IconComponent;

// Other networks
export const HbarCircleColorful: IconComponent; // Hedera
export const IcpColorful: IconComponent; // Internet Computer
export const TronColorful: IconComponent;
export const TronFilled: IconComponent;
export const TronCircleColorful: IconComponent;
export const TronCircleFilled: IconComponent;

DeFi Protocol Icons

Icons for decentralized finance protocols and platforms.

// Uniswap
export const UniColorful: IconComponent;
export const UniFilled: IconComponent;
export const UniCircleColorful: IconComponent;
export const UniCircleFilled: IconComponent;
export const UniswapColorful: IconComponent;

// Other DEXs
export const PancakeswapColorful: IconComponent;
export const SushiswapColorful: IconComponent;
export const OneinchColorful: IconComponent;

// Lending protocols
export const AaveCircleColorful: IconComponent;
export const CompCircleColorful: IconComponent;
export const CreamCircleColorful: IconComponent;

// Other DeFi
export const MkrCircleColorful: IconComponent; // MakerDAO
export const CrvColorful: IconComponent; // Curve
export const BalCircleColorful: IconComponent; // Balancer
export const SushiColorful: IconComponent;
export const CakeColorful: IconComponent; // PancakeSwap token
export const LdoCircleColorful: IconComponent; // Lido
export const FraxCircleColorful: IconComponent; // Frax
export const LqtyColorful: IconComponent; // Liquity

Popular Meme and Community Tokens

Icons for popular meme coins and community-driven tokens.

// Major meme coins
export const DogeCircleColorful: IconComponent; // Dogecoin
export const ShibColorful: IconComponent;
export const ShibFilled: IconComponent;
export const ShibCircleColorful: IconComponent;
export const ShibCircleFilled: IconComponent;

// Other meme/community tokens
export const FlokiColorful: IconComponent;
export const BabydogeColorful: IconComponent;
export const ShibdogeCircleColorful: IconComponent;
export const DoboCircleColorful: IconComponent;
export const SafemoonCircleColorful: IconComponent;
export const YooshiCircleColorful: IconComponent;
export const CatsColorful: IconComponent;
export const PoocoinColorful: IconComponent;

Additional Altcoins and Tokens

The package includes 676 total components covering hundreds of additional cryptocurrencies and tokens.

// Major altcoins (selection of 50+ from 676 total)
export const LtcCircleColorful: IconComponent; // Litecoin
export const BchCircleColorful: IconComponent; // Bitcoin Cash
export const EtcColorful: IconComponent; // Ethereum Classic
export const DashColorful: IconComponent; // Dash
export const XmrCircleColorful: IconComponent; // Monero
export const ZecCircleColorful: IconComponent; // Zcash
export const DcrColorful: IconComponent; // Decred
export const NeoColorful: IconComponent; // NEO
export const EosColorful: IconComponent; // EOS
export const XtzColorful: IconComponent; // Tezos
export const AlgoColorful: IconComponent; // Algorand
export const VetColorful: IconComponent; // VeChain
export const FilCircleColorful: IconComponent; // Filecoin
export const SandCircleColorful: IconComponent; // The Sandbox
export const ManaCircleColorful: IconComponent; // Decentraland
export const AxsCircleColorful: IconComponent; // Axie Infinity
export const EnjCircleColorful: IconComponent; // Enjin
export const BatColorful: IconComponent; // Basic Attention Token
export const ZilColorful: IconComponent; // Zilliqa
export const IcxColorful: IconComponent; // ICON
export const OntColorful: IconComponent; // Ontology
export const QtumCircleColorful: IconComponent; // Qtum
export const LskColorful: IconComponent; // Lisk
export const WavesColorful: IconComponent; // Waves
export const HotColorful: IconComponent; // Holo
export const IostColorful: IconComponent; // IOST
export const RvnColorful: IconComponent; // Ravencoin
export const DgbCircleColorful: IconComponent; // DigiByte
export const StorjColorful: IconComponent; // Storj
export const ApeCircleColorful: IconComponent; // ApeCoin
export const GalaColorful: IconComponent; // Gala
export const ImxColorful: IconComponent; // Immutable X
export const LrcColorful: IconComponent; // Loopring
export const OneColorful: IconComponent; // Harmony
export const CeloColorful: IconComponent; // Celo
export const KsmColorful: IconComponent; // Kusama
export const MinaColorful: IconComponent; // Mina
export const RoseColorful: IconComponent; // Oasis Network
export const InjColorful: IconComponent; // Injective
export const KlayColorful: IconComponent; // Klaytn
export const KasColorful: IconComponent; // Kaspa
export const EverColorful: IconComponent; // Everscale
export const FlrColorful: IconComponent; // Flare
export const StraxColorful: IconComponent; // Stratis
export const ErgColorful: IconComponent; // Ergo
export const CronusColorful: IconComponent; // Cronos
export const MoonbeamColorful: IconComponent; // Moonbeam
export const GlmrColorful: IconComponent; // Moonbeam
export const MetisCircleColorful: IconComponent; // Metis

// And 600+ additional cryptocurrency and token icons...

Exchange and Platform Tokens

Icons for major exchange tokens and platform-specific assets.

// Exchange tokens
export const BnbColorful: IconComponent; // Binance Coin
export const FttColorful: IconComponent; // FTX Token
export const OkbColorful: IconComponent; // OKB
export const KcsCircleColorful: IconComponent; // KuCoin Token
export const HtColorful: IconComponent; // Huobi Token
export const BgbColorful: IconComponent; // Bitget Token
export const LeoColorful: IconComponent; // LEO Token

// Platform and utility tokens
export const BntCircleColorful: IconComponent; // Bancor
export const NexoColorful: IconComponent; // Nexo
export const CelCircleColorful: IconComponent; // Celsius
export const LptColorful: IconComponent; // Livepeer
export const MlnCircleColorful: IconComponent; // Melon
export const RenCircleColorful: IconComponent; // Ren

Developer and Infrastructure Icons

Icons for blockchain development tools and infrastructure services.

// Developer tools
export const HardhatColorful: IconComponent; // Hardhat
export const EtherscanCircleColorful: IconComponent; // Etherscan

// Infrastructure
export const FilCircleColorful: IconComponent; // Filecoin
export const ArCircleColorful: IconComponent; // Arweave

Generic Wallet and Blockchain Icons

Generic icons for wallet and blockchain applications.

// Generic icons
export const WalletColorful: IconComponent;
export const WalletWhiteColorful: IconComponent;
export const NftColorful: IconComponent;
export const ChromeCircleColorful: IconComponent;
export const GeminiColorful: IconComponent;
export const GeminiFilled: IconComponent;
export const GeminiCircleColorful: IconComponent;
export const GeminiCircleFilled: IconComponent;

Utility Functions

Internal utility functions used by the icon components.

/**
 * Utility function to fix SVG component default props handling
 * Used internally by all icon components to resolve default props conflicts
 * @param svgComponent - React functional component for SVG
 * @returns Modified component with proper default props handling
 */
export function eraseDefaultProps(svgComponent: React.FC): React.FC;

Style Variants

All icons follow consistent naming patterns with these style variants:

Colorful: Full-color branded version (e.g., BitcoinColorful)
Filled: Monochrome filled version (e.g., BitcoinFilled)
CircleColorful: Colorful version with circular background (e.g., BitcoinCircleColorful)
CircleFilled: Monochrome filled version with circular background (e.g., BitcoinCircleFilled)