Custom logos in Connect Modal


We've released a new way to customize the built-in Connect Modal to seamlessly blend in with the rest of your app. Pass an image, alt tag, along with height and/or width to any in-app wallet's metadata field.

import { inAppWallet } from "thirdweb/wallets";
const wallet = inAppWallet({
metadata: {
image: {
src: "",
width: 350,
height: 100,
alt: "Aperture Laboratories",

The logo will then show in the modal when you pass the wallet to the Connect Button. Logo scaling and resizing is handled for you across all devices.

import { ConnectButton } from "thirdweb/react";
// ...your page code
<ConnectButton client={client} wallets={[wallet]} />;

If you're building a custom authentication UI, you can still access the wallet's metadata through its config.

const config = wallet.getConfig();
const logo = config?.metadata?.image;

We can't wait to see your logo on a Connect Modal soon!