Change the avatar used in ConnectKit to more closely match the look and feel of your app.

By default ConnectKit has an avatar component that generates a random gradient based on the users wallet address in case their ENS image is not set. You can customize this by providing your own avatar component.


First import Types, then create a custom avatar component:

import { Types } from "connectkit";
const MyCustomAvatar = ({ address, ensImage, ensName, size, radius }: Types.CustomAvatarProps) => {
return (
overflow: "hidden",
borderRadius: radius,
height: size,
width: size,
background: generateColorFromAddress(address), // your function here
{ensImage && <img src={ensImage} alt={ensName ?? address} width="100%" height="100%" />}
export default MyCustomAvatar;

Then apply your avatar component to the <ConnectKitProvider> via the customAvatar option:

import MyCustomAvatar from "./MyCustomAvatar";
const App = () => {
return (
<WagmiConfig config={config}>
customAvatar: MyCustomAvatar,
{/* Your App */}

That's it—you will now have replaced all usage of the <Avatar /> component used within ConnectKit.

On this page