How crypto brands use color, and what it means for icons

Every crypto logo's colors were chosen for that brand alone, usually for a website, a coin render or a social avatar. None of them were chosen to sit in a list next to forty other logos on your particular background. Put them together and predictable problems appear: rows of near-identical blue circles, black marks that vanish in dark mode, gradients that turn muddy, logos that look like price indicators.

This guide sorts crypto logo colors into a few common patterns, walks through the problems each one causes in an interface, and covers the ways icon sets and product teams deal with them. It doesn't list official brand colors; projects publish those in their own brand guidelines and press kits.

Four patterns you'll keep seeing

One brand color on a coin. A very common token pattern: a solid colored disc with a white or light symbol on it. Bitcoin's orange coin, Tether's green coin and USDC's blue coin with its dollar sign all follow it. It's simple and strong at small sizes, and the color does a lot of the identification.

Gradients. Some marks are defined by a gradient rather than a flat color. Solana's purple-to-green bars are the best-known example. Gradients make a mark distinctive at large sizes and harder to handle at small ones.

Black or white marks. Many wallets, protocols and infrastructure projects use a black or white mark with no brand hue at all. Ledger's mark is one example.

Multi-color marks. A few logos use several distinct hues, like the arcs in Rainbow's wallet logo. These are memorable and are the hardest to turn into a single-color version.

Browse the token category of any large icon library, such as the Web3 Icons token list, and you'll also notice how often blue comes up. That matters more than any single logo's choice.

Problem: neighbors that look alike

When people scan a list, color is often the first thing they match on. That works until several neighbors share a color and a shape. A portfolio holding three stablecoins and a couple of blue-branded network tokens can easily show five blue circles in a row, with white symbols too small to tell apart at a glance.

Wrapped and bridged versions make it worse. They often reuse the original token's logo, sometimes with a small change, so a token and its wrapped or bridged version, such as USDC and the bridged USDC.e found on some networks, can look almost identical in a list.

The fix isn't in the logo; you can't change a brand's color. It's in the row around it:

• Always show the ticker next to the icon, and the full name where space allows. Ticker or name covers which one to lead with.
• Add a network badge when the same asset exists on several chains.
• Never make color the only difference between two states or two assets. Don't rely on color alone explains the accessibility side of this.

Problem: dark marks on dark themes

A black logo on a near-black surface has almost no contrast. The same happens to white and pale logos on white. You can measure it with the WCAG contrast formula, using the logo's main color and your background:

function luminance(hex) {
  const [r, g, b] = hex.match(/\w\w/g).map((h) => {
    const c = parseInt(h, 16) / 255
    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
  })
  return 0.2126 * r + 0.7152 * g + 0.0722 * b
}

function contrast(a, b) {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x)
  return (hi + 0.05) / (lo + 0.05)
}

contrast('#1a1a1a', '#0e0e10') // about 1.1, the mark disappears
contrast('#1a1a1a', '#f4f4f5') // about 15.8 on a light tile

WCAG 2.x doesn't require logos to meet a contrast ratio; under 1.4.11 Non-text Contrast, logos and decorative graphics are exempt. But the criterion's 3:1 threshold for graphical objects is a useful yardstick for whether people will see the mark at all. Below about 3:1, plan a fix. On Web3 Icons, each icon page lists the colors used in the logo, as on /tokens/USDC, so you can run this check before you ship.

The common fixes, in rough order of how much they change the look:

1. A light tile behind only the logos that need it, keeping their branded artwork. Web3 Icons does this for logos that are too dark for its dark interface, such as Ledger's. When a dark logo needs a light tile covers the decision.
2. A thin ring or subtle backdrop behind every icon, enough to separate dark marks from the surface without a full tile.
3. The tile style for the whole view, so every mark sits on its own colored surface.
4. A single-color version in a light color, for views where brand color isn't needed.

Problem: gradients at small sizes

At 16 to 20 px, a gradient covers too few pixels to read as a gradient. It tends to average out to a middle color, often duller than either end. That's acceptable when the gradient's middle is still distinctive, and a problem when it lands on a generic gray-blue or brown.

Gradients also bring a technical issue. In SVG they're defined with an id and referenced with url(#id). If you inline the same icon twice, or two icons happen to use the same id, the references can resolve to the wrong gradient or to one that's hidden, and the logo renders flat or invisible. SVG ID collisions explains the causes and the fixes. Loading icons through img avoids it, because each file keeps its own ID namespace.

Problem: brand colors that look like status

Crypto interfaces use red and green heavily for price changes, gains and losses, and transaction status. Logos use red and green too. A red logo directly beside a price change, or a green logo beside a failed transaction, can be misread for a moment, and for people with red-green color vision deficiencies the colors carry less meaning anyway.

Keep status off the logo. Put the price change in its own column or after the label, add a sign and an arrow, not just a color, and don't tint, outline or badge a logo in a status color. The logo's color belongs to the brand; the interface's colors belong to the data.

How icon sets handle it

Well-made icon sets tend to handle color with a few consistent moves, and they're worth copying in your own product:

• Keep official colors in the full-color style. A set shouldn't adjust a brand's colors to fit its palette or to improve contrast. Those fixes belong to the container, the tile or a separate style.
• Offer more than one style. Full color for identification, a single-color version for dense or themed views, and a tile version for avatar-like uses.
• Flag problem logos. Marking which logos are too dark or too light for a given background lets the interface add a tile automatically instead of relying on someone to notice.
• Publish the palette. Listing the colors in each logo makes contrast checks and theming decisions quick, without guessing from a screenshot.

None of this makes every logo work everywhere. It makes the exceptions predictable, which is what lets an interface handle thousands of brands it never designed for.