Icon resolution

NetworkLogo and TokenLogo check explicit image props before the crypto-icons adapter. If no image or icon is available, they show fallback content.

Network icons

NetworkLogo uses chainId to identify the network and checks these sources in order:

1. src
2. Crypto icons adapter result for the chainId, with built-in logos for supported chains
3. fallback
4. symbol
5. name
6. chainId
7. ?

<NetworkLogo chainId={8453} />

Supported chains use built-in logos. For other chains, pass src for an image or name, symbol, or fallback for text. The component shows a chain ID only if it fits in full, with a limit of 3 characters at xs and sm, or 4 at larger sizes.

<NetworkLogo
  chainId={7777777}
  name="Zora"
  symbol="ZORA"
  src="/chains/zora.svg"
/>

Token icons

Use chainId and the contract address to identify a token. Symbols such as USDC can refer to different contracts, even on the same chain.

TokenLogo resolves in this order:

1. src
2. Crypto icons adapter result for chainId + address
3. fallback
4. symbol
5. name
6. address
7. ?

Pass src from your token metadata to choose the image:

<TokenLogo
  chainId={8453}
  address="0x833589fcd6edb6e08f4c7c32d4f71b54bda02913"
  symbol="USDC"
  name="USD Coin"
  src={token.logoURI}
/>

Change the provider

Edit the crypto-icons adapter to return image URLs or React elements from your chosen provider. Components continue to accept the same props:

<NetworkLogo chainId={8453} />
<TokenLogo symbol="USDC" src={token.logoURI} />

Use src to override the adapter for an individual token or network.

Metadata types

type NetworkMetadata = {
  chainId: number
  name: string
  symbol?: string
  logoURI?: string
}

type TokenMetadata = {
  chainId: number
  address?: `0x${string}`
  symbol: string
  name?: string
  logoURI?: string
}

chainId identifies the network. For tokens, pair it with address for icon lookups and pass logoURI as the component's src.