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}.png

For example:

/chains/logo/43114.png  // Avalanche C-Chain
/chains/logo/43113.png  // Fuji Testnet

ChainIcon

On this page