ChainIcon
A component for displaying chain logos based on chain ID.
ChainIcon
The ChainIcon component displays chain logos for Avalanche networks using a standardized path structure.
Usage
import { ChainIcon } from '@avalabs/builderkit';
// Basic usage
<ChainIcon chain_id={43114} />
// With custom styling
<ChainIcon
chain_id={43114}
className="w-8 h-8 rounded-full"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
chain_id | number | - | Chain ID to display logo for |
className | string | - | Additional CSS classes |
Features
- Displays chain logos from a standardized path structure
- Uses common Icon component for consistent display
- Supports custom styling through className
- Simple and lightweight implementation
Examples
Basic Chain Icon
<ChainIcon chain_id={43114} />Custom Size
<ChainIcon
chain_id={43114}
className="w-12 h-12"
/>In a List
<div className="flex gap-2">
<ChainIcon chain_id={43114} />
<ChainIcon chain_id={43113} />
</div>With Border
<ChainIcon
chain_id={43114}
className="border-2 border-gray-200 rounded-full"
/>Asset Requirements
The component expects chain logo images to be available at:
/chains/logo/{chain_id}.pngFor example:
/chains/logo/43114.png // Avalanche C-Chain
/chains/logo/43113.png // Fuji TestnetLast updated on 3/10/2025