TokenIcon

The TokenIcon component displays token logos based on the token's chain ID and contract address.

Usage

import { TokenIcon } from '@avalabs/builderkit';
 
// Basic usage
<TokenIcon 
  chain_id={43114}
  address="0x1234567890123456789012345678901234567890"
/>
 
// With custom styling
<TokenIcon 
  chain_id={43114}
  address="0x1234567890123456789012345678901234567890"
  className="w-8 h-8 rounded-full"
/>

Props

Prop	Type	Default	Description
`chain_id`	`number`	-	Chain ID of the token
`address`	`string`	-	Token contract address
`className`	`string`	-	Additional CSS classes

Features

Displays token logos from a standardized path structure
Supports custom styling through className
Uses common Icon component for consistent display
Follows /tokens/logo/{chain_id}/{address}.png path convention

Examples

Basic Token Icon

<TokenIcon 
  chain_id={43114}
  address="0x1234567890123456789012345678901234567890"
/>

Custom Size

<TokenIcon 
  chain_id={43114}
  address="0x1234567890123456789012345678901234567890"
  className="w-12 h-12"
/>

In a List

<div className="flex gap-2">
  <TokenIcon 
    chain_id={43114}
    address="0x1234567890123456789012345678901234567890"
  />
  <TokenIcon 
    chain_id={43113}
    address="0x5678901234567890123456789012345678901234"
  />
</div>

With Border

<TokenIcon 
  chain_id={43114}
  address="0x1234567890123456789012345678901234567890"
  className="border-2 border-gray-200 rounded-full"
/>

Asset Requirements

The component expects token logo images to be available at:

/tokens/logo/{chain_id}/{address}.png

For example:

/tokens/logo/43114/0x1234567890123456789012345678901234567890.png

Edit on GitHub Report Issue

TokenIcon

On this page