Crypto icon design: the basics

A logo and an icon are built for different jobs. A project's logo is drawn for a website header, a conference banner or the face of a coin, where it gets 200 pixels and the viewer's full attention. The same artwork inside a product sits at 20 pixels in a list of forty assets, next to a ticker and a balance, and gets a fraction of a second. Shrinking the logo is where most token icons start. It is rarely where they should end.

This guide covers what a good crypto icon has that a shrunken logo doesn't: a strong silhouette, details that survive small sizes, and consistency with the icons around it. It frames all of that around the three jobs an icon does in an interface.

The three jobs: identify, scan, fit

Every token, network, wallet or exchange icon on a screen is doing three things at once.

Identify. The icon tells people which asset, chain or app they're looking at. In a swap form, the icon beside the amount confirms that the 0.5 is ETH and not a token with a similar ticker. Identification has to work at the size the icon actually renders, which in most products is somewhere between 16 and 32 px.

Scan. In a portfolio, a token selector or a markets table, people don't read every row. They run their eyes down the column of icons looking for a shape and color they know. A good icon is distinct enough from its neighbors to be found that way, and quiet enough that it doesn't pull attention away from the rows it isn't in.

Fit. The icon has to sit in the layout: the same apparent size as its neighbors, aligned with the text it labels, readable on your background, comfortable in both light and dark themes. An icon that identifies perfectly but looks twice as heavy as the row above it fails this job.

Most icon decisions are trade-offs between the three. A ring around every coin can help a set fit together and hurt identification. Keeping a fine detail can help identification at 64 px and hurt scanning at 20.

Silhouette comes first

At small sizes people recognize shapes before details. The outline of a mark, the shape you'd see if you filled it with solid black, carries most of the recognition. Ethereum's octahedron holds up even at small sizes because nothing else in a typical token list has that silhouette. A coin that is a letter inside a circle shares its silhouette with hundreds of other coins, so it depends entirely on its letterform and its color.

That doesn't make circular coins bad icons. It means you should know which part of the icon carries the recognition and protect it. For a letter-in-a-circle mark, that's the letter: keep it large, keep its openings clear, and drop anything that competes with it inside the disc.

You can check silhouettes quickly in a browser. Put a row of icons on a page and flatten them with CSS filters:

/* every visible pixel becomes black, so only the silhouette remains */
.silhouette img {
  filter: brightness(0);
}

/* remove color to see what the shapes carry on their own */
.grayscale img {
  filter: grayscale(1);
}

If you can still tell neighbors apart in the grayscale view, they're more likely to hold up for people with color vision deficiencies and in single-color contexts. If the silhouette view turns half your list into identical discs, color and interior detail are doing all the work, and those are the first things to fail at 16 px.

Recognizable at the size you ship

A logo drawn for a 512 px app store image can carry gradients, outlines, small text and soft shadows. At 20 px most of that turns to noise. The usual failures:

• Thin lines narrower than one device pixel become faint gray smudges.
• Small gaps between shapes close up, so two parts merge into one blob.
• Text inside the mark, such as a ticker on the coin's face, becomes unreadable long before the rest of the mark does.
• Gradients and shadows average out into a muddy single color.
• Thin rims around coins read as a blurry outline rather than a deliberate edge.

The fix is to decide which details matter and drop or strengthen the rest, without turning the mark into something its owner wouldn't recognize. The process is covered step by step in simplifying a complex crypto logo, and the hard limits of tiny sizes in designing token icons that survive at 16px.

Consistent with the set

An icon is never alone. In a token list it sits beside dozens of others drawn by different teams, at different times, with different ideas about how much space a mark should fill. Treat the set as the unit of design, not the single file.

The Web3 Icons artwork, for example, is drawn on a 24 by 24 canvas, and nearly every mark fits inside the central 18 units, which leaves a 3-unit margin on each side. A fixed canvas and margin give every logo the same starting box. Getting round coins and square marks to look the same size inside that box is a separate step, and keylines are the usual tool for it.

Fitting into the layout

Fit is about the interface around the icon, which is why it's easy to miss when you design icons alone on a white artboard.

• Alignment with text. Next to a 14 px label, an icon usually looks right at 16 to 20 px. Center it on the label's capital letters by eye; centering on the line box can leave it looking slightly low, depending on the font.
• Backgrounds. A black wallet mark disappears on a dark theme, and a white or pale yellow mark disappears on white. Plan a light tile, a tile-style version or a single-color version for those logos.
• States. Hover highlights, selected rows and disabled states change what sits behind the icon. Check the icon on each of them.
• Density. In a dense table, full color in every row gets loud. Single-color icons in the table and full color in the detail view is a common split.

A quick review before you ship

Before adding a new icon to a product, put it in a real row with its real neighbors and ask:

1. At the smallest size you render, can someone who knows the asset name it without reading the label?
2. In grayscale, is it still distinct from the icons it usually appears next to?
3. Does it look the same size and weight as its neighbors?
4. Does it hold up on every background it will sit on, including hover and selected states?
5. Is it still clearly the brand's own mark, with its proportions and colors unchanged?

If all five pass, the icon is doing its three jobs. If the first one fails, polishing the other four won't save it.