Custom Avatars

Customizing your app’s user avatar

By default we provide an avatar for users in case their ENS image is not set, but you can customize this by providing your own avatar component. You can import the AvatarComponent type if using TypeScript:

import {
  RainbowKitProvider,
  AvatarComponent,
} from '@rainbow-me/rainbowkit';
import { generateColorFromAddress } from './utils';

const CustomAvatar: AvatarComponent = ({ address, ensImage, size }) => {
  const color = generateColorFromAddress(address);
  return ensImage ? (
    <img
      src={ensImage}
      width={size}
      height={size}
      style={{ borderRadius: 999 }}
    />
  ) : (
    <div
      style={{
        backgroundColor: color,
        borderRadius: 999,
        height: size,
        width: size,
      }}
    >
      :^)
    </div>
  );
};

const App = () => {
  return (
    <RainbowKitProvider avatar={CustomAvatar} {...etc}>
      {/* ... */}
    </RainbowKitProvider>
  );
};

The AvatarComponent passed to the avatar prop has prop types as follows: <{ address: string; ensImage?: string | null; size: number;}>

Overview

Getting Started

Advanced

Custom Avatars

Customizing your app’s user avatar