Web3 Icons

Web3 Icons is the most comprehensive and up-to-date source for tokens, coins, networks and wallet logos as icon format. More than 2,500 icons are ready as optimized SVGs as well as React components.

• All of the icons are carefully curated by hand.
• type refers to wallet, token, network and exchange
• variant refers to mono, branded, and background (not every icon comes with all variants, but the vast majority have at least mono or branded and all icons have background variants)

Find the data table of all supported icons here

Website

The Web3 Icons website (https://web3icons.io) provides a searchable collection of all available icons. You can browse, search, and download icons directly from the website.

Contributing

We welcome contributions to web3icons! If you'd like to contribute, please refer to our Contributing Guide.

Monorepo structure

• @web3icons/core: npm package that serves optimized svgs as svg files
• @web3icons/react: React components for web3 icons
• @web3icons/common: Shared metadata and types
• scripts/: Build scripts, CLI tools, and maintenance utilities
• apps/website: Next.js app for https://web3icons.io
• apps/figma-plugin: Figma plugin for web3 icons

Installation

To use Web3 Icons in your project, you can install the necessary packages from npm:

npm i @web3icons/core @web3icons/react

yarn add @web3icons/core @web3icons/react

bun i @web3icons/core @web3icons/react

[!NOTE] You can install either of the packages based on your project's needs.

@web3icons/react

Tree-shaking

Individual icon components from @web3icons/react are tree-shakable, meaning that only the icons you explicitly import will be included in your bundle. This helps reduce bundle size and improve performance.

Note: Dynamic components (<TokenIcon />, <NetworkIcon />, <WalletIcon />, <ExchangeIcon />) are NOT tree-shakable. They load icons on-demand at runtime using dynamic imports. For optimal bundle size, use individual icon components instead.

Usage

There are two main ways to use any icon your project needs in a React environment. You can individually import the components or you can import the dynamic component for each type of the icons.

1. Using Individual React Components
2. Using Dynamic Components
3. <TokenIcon />
4. <NetworkIcon />
5. <WalletIcon />
6. <ExchangeIcon />

Using Individual Components

All the icons from the React library are prefixed with Token, Network, Wallet, or Exchange

Props Overview

All of the components extend the SVGSVGElement and accepts a size prop as number or string.

• variant?: Determines the style of the icon. Options: 'mono', 'branded', or 'background'. Default is 'mono'.
• size?: Specifies the size of the icon. It can be a string or a number.
• color?: Specifies the color of the icon. Accepts any valid CSS color value.
• className?: Adds a custom CSS class to the icon for additional styling.

Tokens

List of all the available tokens

Cryptocurrency coins and tokens, the react components are prefixed with Token, followed by uppercase symbol. TokenETH, TokenBTC, TokenGRT

Networks

List of all the available networks

Networks and chains, react components are prefixed with Network followed by the PascalCase name of the network. NetworkBinanceSmartChain, NetworkEthereum, NetworkAvalanche

Wallets

List of all the available wallets

Crypto wallets, react components are prefixed with Wallet followed by the PascalCase name of the wallet. WalletRainbow, WalletMetamask, WalletCoinbase

Exchanges

List of all the available exchanges

Crypto exchanges, react components are prefixed with Exchange followed by the PascalCase name of the exchange. ExchangeBybit, ExchangePancakeSwap, ExchangeBalancer

import {
  TokenBTC,
  TokenETH,
  TokenGRT,
  NetworkBinanceSmartChain,
  NetworkEthereum,
  NetworkAvalanche,
  WalletLedger,
  WalletMetamask,
  WalletSafe,
  ExchangeBybit,
  ExchangePancakeSwap,
  ExchangeBalancer,
} from '@web3icons/react'

const App = () => {
  return (
    <>



        {/* Token Icons */}
        <TokenBTC size={64} variant="branded" className="my-custom-class" />
        <TokenETH size={64} variant="branded" className="my-custom-class" />
        <TokenGRT size={64} variant="branded" className="my-custom-class" />






        {/* Network Icons */}
        <NetworkEthereum
          size={64}
          variant="branded"
          className="my-custom-class"
        />
        <NetworkAvalanche
          size={64}
          variant="branded"
          className="my-custom-class"
        />
        <NetworkBinanceSmartChain
          size={64}
          variant="branded"
          className="my-custom-class"
        />






        {/* Wallet Icons */}
        <WalletLedger size={64} variant="branded" className="my-custom-class" />
        <WalletMetamask
          size={64}
          variant="branded"
          className="my-custom-class"
        />
        <WalletSafe size={64} variant="branded" className="my-custom-class" />






        {/* Exchange Icons */}
        <ExchangeBybit
          size={64}
          variant="branded"
          className="my-custom-class"
        />
        <ExchangeBalancer
          size={64}
          variant="branded"
          className="my-custom-class"
        />
        <ExchangePancakeSwap
          size={64}
          variant="branded"
          className="my-custom-class"
        />



    </>
  )
}

export default App

Using Dynamic Components

All of the Dynamic Components are designed to provide ease of use, they accept various custom props which allow the component to correctly import the desired icon.

[!IMPORTANT] Dynamic components are available from the /dynamic entry point and are client-side only and are not tree-shakable. They use React hooks and dynamic imports to load icons at runtime. For better bundle optimization and server component compatibility, use individual icon components instead.

```jsx // ✅ Dynamic components (client-side only) import { TokenIcon, NetworkIcon } from '@web3icons/react/dynamic'

// ✅ Static components (server-safe, tree-shakable) import { TokenBTC, NetworkEthereum } from '@web3icons/react' ```

Shared Props Overview

• variant?: Determines the style of the icon. Options: 'mono', 'branded', or 'background'. Defaults to 'mono'.
• size?: Specifies the size of the icon. It can be a string or a number.
• color?: Specifies the color of the icon. Accepts any valid CSS color value.
• className?: Adds a custom CSS class to the icon for additional styling.
• fallback?: Fallback content to display if the icon cannot be found. Can be a string (URL) or a ReactNode.

<TokenIcon />

Props

These properties are used specifically for token icons. You must provide either the symbol prop or both address and network props together.

• symbol: The ticker symbol of the token (e.g., 'ETH', 'BTC'). If symbol is provided, address and network should not be provided.
• address: The contract address of the token. Must be used with the network prop.
• network: The blockchain network where the token is deployed (e.g., 'ethereum', 'bsc'). Must be used with the address prop.

Example Usage

import { TokenIcon } from '@web3icons/react/dynamic'

// Renders Ethereum icon in mono variant
<TokenIcon symbol="eth" size={32} color="#000" />

// Renders GRT icon in branded variant
<TokenIcon address="0xc944e90c64b2c07662a292be6244bdf05cda44a7" network="ethereum" size="2rem" />

<NetworkIcon />

<NetworkIcon /> tries to find a match comparing the passed network value with the id or name or shortName from the networks.json

Props

• network: The blockchain network (e.g., 'ethereum', 'bsc').

Example Usage

import { NetworkIcon } from '@web3icons/react/dynamic'

// from networks.json:
// {
// "id": "binance-smart-chain",
// "name": "BNB Smart Chain",
// "shortname": "BSC",
// "nativeCoinId": "binancecoin",
// "variants": ["branded", "mono", "background"]
// }

<NetworkIcon network="bsc" size={32} variant="branded" /> // matches the shortname
<NetworkIcon network="binance-smart-chain" size={32} variant="branded" /> // matches the id
<NetworkIcon network="bnb smart chain" size={32} variant="branded" /> // matches the name

<WalletIcon />

<WalletIcon /> tries to find a match comparing the passed name value with the id or name from the wallets.json

import { WalletIcon } from '@web3icons/react/dynamic'

// from wallets.json:
// {
// "id": "wallet-connect",
// "name": "Wallet Connect",
// "variants": ["branded", "mono", "background"]
// }

<WalletIcon name="wallet-connect" size={32} variant="branded" /> // matches the id
<WalletIcon name="wallet connect" size={32} variant="branded" /> // matches the name

<ExchangeIcon />

<ExchangeIcon /> tries to find a match comparing the passed name value with the id or name from the exchanges.json

import { ExchangeIcon } from '@web3icons/react/dynamic'

// from exchanges.json:
// {
//   "id": "coinbase",
//   "name": "Coinbase",
//   "variants": ["branded", "mono", "background"],
//   "type": "cex"
// }

<ExchangeIcon name="coinbase" size={32} variant="branded" /> // matches the name
<ExchangeIcon name="coinbase" size={32} variant="mono" /> // matches the name

@web3icons/core

For projects that don't use React, icons are available as optimized *.svg files.

View full @web3icons/core documentation →

License

MIT

Give a Star ⭐️

If you like this project, please give it a star ⭐️ on GitHub. This helps me to maintain the project and make it better for everyone.