TokenIcon
A component for displaying token logos.
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}.pngpath 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}.pngFor example:
/tokens/logo/43114/0x1234567890123456789012345678901234567890.pngLast updated on 3/10/2025