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 ENV 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

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 ENV 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