ENS Logo
Connectkit

Avatars

The ENS Protocol aims to make it easy to use Ethereum. It does this to providing a simple way to use human-readable names to subsitute for long machine-redable addresses.

On this page you will find everything it takes to get started with ENS, replace all addresses with ens names in your app, and allow finding users by name!

Getting the users Avatar
Avatar

There is a lot more to a user then just their name, and ENS allows you to get all the information you need to build a great user experience. Simply add the codesnippet below to your app and you will be able to get any users avatar anywhere you'd like!

luc.eth ➡️luc.eth

Request

import { useEnsAvatar } from 'wagmi';

const Avatar = () => {
    const { data: ensAvatar } = useEnsAvatar({
        address: 'luc.eth',
        chainId: 1, // (1 = Ethereum Mainnet, 5 = Goerli)
    });

    return (
        <img
            src={ensAvatar || 'https://v3x.space/ens-docs/pfp.webp'}
            alt="luc.eth"
        />
    );
};

Supported URI schemas
URI

ENS avatars support a number of URI schemas, luckily most libraries resolve them for you, so you don't have to worry about them. The following URI types are supported:

  • ethereum: - The default URI scheme for Ethereum addresses
  • ipfs: - The default URI scheme for IPFS hashes
  • bzz: - The default URI scheme for Swarm hashes
  • http(s): - The default URI scheme for HTTP(S) URLs
  • eip155: - The default URI scheme for EIP-155 identifiers for linking to NFTs on Ethereum based chains.

For EIP-155 NFT Avatars the nft must be owned by the wallet address the ENS name resolves to. This is done by checking the ownerOf method on the NFT contract.

File Information
Metadata

Avatars come in many different shapes and sizes. Not just the above URI schemas, but also in different file formats, sizes, and more. Although standards exist for some of these, files are not required to follow these standards.

Below is some information that might be nice to have about the avatars your app might be loading.

What to expect:Recommendation
File ExtensionMostly png, jpeg, jpg, webp, gif, webm, but could be anything
File SizeWe recommend having sensible timeouts
Aspect RatioWe recommend object-fit: cover or setting a background color
TransparancyWe recommend setting a background color as some images may contain transparancy

Luckily most browsers and network libraries have default timeouts to start with, we highly recommend that if you are doing any manual avatar downloading or fetching you add a sensible timeout.