(previously named token-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 and network
• variant refers to mono and branded (not every icon comes with both variants, but vast majority does.)

Find the data table of all supported icons here

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

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

• @web3icons/core: npm package that serves optimized svgs as svg files
• @web3icons/react: React components for web3 icons
• @web3icons/utils: Private utility and build scripts for the monorepo
• apps/website: Next.js app for https://tokenicons.io
• apps/figma-plugin: Figma plugin for web3 icons

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

@web3icons/react is designed to be tree-shaken, meaning that it only includes the Icon Components that are actually used in your project. This can help reduce the size of your bundle and improve performance.

All of the dynamic components (<TokenIcon />, <NetworkIcon />, <WalletIcon />) also only imports the icons that are used.

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
   1. <TokenIcon />
   2. <NetworkIcon />
   3. <WalletIcon />

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

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

• variant?: Determines the style of the icon. It can be either 'mono' (monochromatic) or 'branded' (brand-specific). 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.
• fallback?: Renders the fallback when the component can't find a match. (can be passed a string (url) or a ReactNode)

List of all the available tokens

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

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

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

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

const App = () => {
  return (
    <>
      <div>
        {/* 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" />
      </div>
      <div>
        {/* 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"
        />
      </div>
      <div>
        {/* 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" />
      </div>
    </>
  )
}

export default App

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

• variant?: Determines the style of the icon ('mono' or 'branded'). 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.

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.

import { TokenIcon } from '@web3icons/react'

// 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 /> tries to find a match comparing the passed network value with the id or name or shortName from the networks.json

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

import { NetworkIcon } from '@web3icons/react'

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

<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 /> tries to find a match comparing the passed name value with the id or name from the wallets.json

import { WalletIcon } from '@web3icons/react'

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

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

For projects that don’t use React, icons are also available as *.svg files in the dist/svgs folder. Which contains folders for types (tokens, networks, wallets) and variants (branded and mono) svg icons.

• Token names are always ticker in uppercase. ETH, BTC, GRT
• Network names are always kebab-case. ethereum, binance-smart-chain, bitcoin
• Wallet names are always kebab-case. metamask, coinbase-wallet, rabby

• svgs/tokens/branded/BTC.svg
• svgs/networks/mono/ethereum.svg
• svgs/wallets/branded/metamask.svg

If you need to directly import the SVGs, here is the naming convention that you can use: {type} {variant} {symbol}

• Tokens: prefixed with token followed by variant and the uppercase ticker. tokenBrandedBTC, tokenMonoGRT
• Networks: prefixed with network followed by variant and the PascalCase network name. networkMonoMetis, networkBrandedBinanceSmartChain
• Wallets: prefixed with wallet followed by variant and the PascalCase wallet name. walletBrandedRainbow, walletBrandedImtoken, walletBrandedWalletConnect

The @web3icons/core package also provides comprehensive metadata for each cryptocurrency token in a convenient JSON format, which you can import directly into your project.

If you need the json file, you can import it directly:

import { tokens, networks, wallets } from '@web3icons/core/metadata'

svgs object contains objects for each type

import { svgs } from '@web3icons/core'

const IconDisplay = () => {
  return (
    <div>
      <img src={svgs.tokens.brandedETH} alt="Ethereum Branded Token Icon" />
      <img
        src={svgs.networks.brandedEthereum}
        alt="Ethereum Branded Network Icon"
      />
    </div>
  )
}

const type = 'tokens'
const variant = 'branded'
const iconName = 'BTC'

const svgModule = await import(
  `@web3icons/core/svgs/${type}/${variant}/${iconName}.svg`
)
const response = await fetch(svgModule.default.src)
const svgContent = await response.text()

console.log(svgContent)

MIT

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.