NFT images vs token logos

A wallet shows two kinds of pictures that look similar in code, an image URL attached to an on-chain asset, but do opposite jobs. A token logo identifies an asset: thousands of people hold USDC and every one of them sees the same small mark next to it. An NFT image is the asset, or at least its content: each item can look different, and the picture is often the reason someone owns it.

Treating them the same leads to familiar problems: artwork cropped into tiny circles, logos stretched into gallery tiles, and lists where a collectible looks like a token. This guide covers how the two differ and how to handle each one.

Two different jobs

Because a logo identifies, consistency matters most: the same size, padding and shape everywhere. Because NFT media is content, fidelity matters most: the full image, at a good resolution, uncropped when the person is looking at it.

Aspect ratios and cropping

Token logos are drawn to fit a square or circle, and most icon sets give them a square viewBox so they drop into any container. You can safely place them in a circle at a fixed size.

NFT images have no such guarantee. Square is common, but portraits, landscapes, panoramas and pixel art at odd sizes all exist. That leads to two display modes:

/* Grid thumbnails: fill the tile, crop the edges */
.nft-thumb {
  aspect-ratio: 1;
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
  background: var(--surface);
}

/* Detail view: show the whole image */
.nft-detail {
  width: 100%;
  max-height: 80vh;
  object-fit: contain;
  background: var(--surface);
}

/* Pixel art stays sharp when scaled up */
.nft-detail.pixelated {
  image-rendering: pixelated;
}

Cover-cropped square thumbnails make a tidy grid, and that's fine as an overview, but the detail view should always show the uncropped image. Rounded rectangles, not circles, suit NFT thumbnails, both because circles crop more and because the circle is the visual language of tokens.

Keep them apart in lists

The most important layout rule: don't mix NFTs and tokens in the same list. A row with a round image, a name and a number reads as a token, whatever's in the image. If a collectible appears in the token list with a circular crop of its artwork, people may assume it's tradeable like a token or has a price it doesn't have.

Some patterns that keep them clearly separate:

• Separate tabs or sections, such as "Tokens" and "Collectibles", each with its own layout.
• Different shapes: circles for token logos, rounded squares for NFT and collection images.
• Different layouts: rows for tokens, grids for NFTs.
• Different numbers: tokens show amounts and fiat values; NFTs show counts per collection, and a value only when there's a sensible basis for one, such as a collection floor price labeled as such.

When a collection needs to appear in a row context, such as in an activity feed ("Received 1 item from Collection X"), use the collection image in a rounded square at the same size you'd use for a token icon, so the shape signals the difference. Shapes for token containers are covered in circle or square? Container shapes for token icons.

Loading media you don't control

Token logos are small and few, so you can cache them aggressively and often bundle the common ones. Size the container and show a neutral placeholder while they load. How a wallet uses them across its screens is in showing token logos in a wallet interface.

NFT media needs more care:

• Use thumbnails in grids. If your backend or a media service can resize images, request a thumbnail around twice the display size, not the original, which may be several megabytes.
• Lazy load below the fold. A collection grid can hold hundreds of items. loading="lazy" on images and fixed dimensions on tiles prevent both wasted downloads and layout shift; see lazy loading icons for the details, which apply here too.
• Expect slow and failing sources. IPFS gateways and project servers can be slow or offline. Show a placeholder tile with the collection name and token ID, and a retry option, rather than a broken image icon.
• Don't autoplay everything. Animated images and videos in a grid cost battery and data. Show a still frame in the grid and play only in the detail view, respecting prefers-reduced-motion.

Safety with untrusted media

NFT metadata is written by whoever created the token, and spam NFTs are common. Treat every image and URL in metadata as untrusted.

• Display images with an <img> element. SVG images loaded this way don't run scripts, while inline SVG would.
• If you render HTML from an animation_url, put it in a sandboxed iframe on a separate origin, without allow-same-origin.
• Don't render metadata names or descriptions as links or HTML. Show plain text.
• Hide likely spam collections by default, with a count, as you would for spam tokens.

Token logos from your own verified list are lower risk, but the same <img> rule applies to any logo URL that comes from a third-party list.

A quick test

Take a screenshot of your wallet's main screen with a few tokens and a few NFTs, and show it to someone for three seconds. Ask which items are coins and which are collectibles. If they can't tell, the shapes, layouts or sections aren't doing their job yet.