`<Avatar />`

The Avatar component is used to display ENS or Basenames avatar associated with Ethereum addresses. When an avatar is not available, it defaults to blue color avatar.

Usage

Address with an ENS avatar:

import { Avatar } from '@coinbase/onchainkit/identity';
<Avatar address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9" />

Address without an ENS or Basenames avatar defaults to a plain avatar:

import { Avatar } from '@coinbase/onchainkit/identity';
<Avatar address="0x1234567890abcdef1234567890abcdef12345678" />

Address with a Basename avatar:

import { Avatar } from '@coinbase/onchainkit/identity';
import { base } from 'viem/chains'; 
 
<Avatar address="0x4bEf0221d6F7Dd0C969fe46a4e9b339a84F52FDF" chain={base} />

Override styles via className prop:

import { Avatar } from '@coinbase/onchainkit/identity';
<Avatar
  className="bg-white rounded-full"
  address="0x1234567890abcdef1234567890abcdef12345678"
/>

Use defaultComponent prop to change the default avatar when ENS avatar is not found. Use loadingComponent prop to change the loading placeholder:

import { Avatar } from '@coinbase/onchainkit/identity';
<Avatar
  address="0x1234567890abcdef1234567890abcdef12345678"
  loadingComponent={( 
    <div className="h-8 w-8">
      <svg width="100%" height="100%" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <polygon points="6,1 14,1 19,6 19,14 14,19 6,19 1,14 1,6" fill="yellow" stroke="yellow" stroke-width="1"/>
      </svg>
    </div> 
  )}
  defaultComponent={( 
    <div className="h-8 w-8">
      <svg width="100%" height="100%" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <polygon points="6,1 14,1 19,6 19,14 14,19 6,19 1,14 1,6" fill="green" stroke="green" stroke-width="1"/>
      </svg>
    </div> 
  )}
/>

Show attestation on ENS avatar with Badge component. Use OnchainKitProvider or Identity component with the schemaId prop.

import { Avatar, Badge, Identity } from '@coinbase/onchainkit/identity'; 
<Identity
  schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
  address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9"
>
  <Avatar >
    <Badge />
  </Avatar>
</Identity>

Props

AvatarReact