Rainbow logo
RainbowKit
0.4.6

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;}>