Branded, mono and background: three icon styles and when to use each

Many icon sets offer the same logo in more than one style. Web3 Icons has three: branded, the logo in its full official colors; mono, a single-color version you can recolor; and background, the mark placed on its own colored tile. They aren't interchangeable decorations. Each one solves a different layout problem.

This guide covers what each style is good at, where it causes trouble, how dark interfaces change the choice, and how to combine styles without the screen looking inconsistent.

The three styles at a glance

Branded: when color is information

Color is often the fastest way to find something in a list. Someone scanning a portfolio for Bitcoin can spot the orange coin before reading a single ticker. Branded icons keep that cue, which makes them the default for places where identifying the asset is the main task:

• Rows in a portfolio or watchlist
• The token picker in a swap form
• The header of an asset detail page
• Marketing and listing pages where brand presence matters

The costs show up in two places. In a dense table, forty full-color logos compete with the numbers that are the actual content. And on a dark theme, logos that are black or very dark nearly vanish, while on a light theme the same happens to white and pale marks.

Mono: when the icon is part of the interface

A mono icon takes on the color you give it, usually the current text color, so it reads as part of the interface rather than as a sticker on top of it. That suits:

• Dense markets tables where the numbers should lead
• Navigation, tabs, filter chips and breadcrumbs
• Inline mentions in text, such as "Bridged from [icon] Ethereum"
• Selected or pressed states where the icon should match the label's color
• Dark interfaces where a uniform light gray icon set looks calmer than full color

Because every mono icon shares one color, look-alike marks lose the color cue that told them apart. Two round coins with similar letterforms are easier to confuse in mono. Keep the ticker or name next to the icon wherever mono is used.

Not every logo has a mono version. On Web3 Icons some don't yet, and the site shows the branded one in their place. If you build a mono-only view, decide up front what those rows show: the branded icon, a neutral placeholder or the name alone. How to make a mono version of a colorful logo explains how good single-color versions are drawn.

Background: when the icon needs its own surface

The background style puts the mark on a solid square tile, often in the brand's main color or in black, with the mark drawn to stand out against it. The tile guarantees contrast for the mark no matter what sits behind the icon, which is why it suits places where icons behave like avatars:

• Activity and notification feeds
• Wallet connection lists and account switchers
• Grids of apps, protocols or exchanges
• Social cards and share images

Two practical details. First, the mark sits inside the tile with its own margin, so it's smaller than a branded mark in the same slot. In the Web3 Icons files the tile fills the full 24 by 24 canvas and the mark takes up roughly the central 16 units, about two-thirds. A 24 px background icon shows a mark about 16 px across, so size the slot up if the mark needs to stay legible.

Second, because the tile fills the whole square, you can round it in CSS with border-radius. A radius of 50% gives you a circle, a smaller radius a rounded square. With the mark in the central two-thirds, the crop usually leaves it untouched, though it's worth checking the logos you use.

Dark interfaces

Dark themes are where the choice matters most. A branded icon set on a near-black surface works for most logos, but some marks are black or very dark and drop close to 1:1 contrast with the background. You have three options:

1. Put just those logos on a light tile while keeping the branded artwork. Web3 Icons does this for logos too dark to read on its dark interface; when a dark logo needs a light tile covers how to decide which ones need it.
2. Use the background style for the whole view, so every logo sits on its own tile.
3. Use mono for the whole view, in a light color.

Which one fits depends on the view. A portfolio can keep branded icons and fix the few dark ones with tiles, while a dense trading table may read better in mono. Designing logos that work on dark backgrounds goes deeper into the problem.

Mixing styles in one product

Larger products often end up using all three styles somewhere. The trick is to make the switch follow the structure of the interface, so it reads as deliberate.

One style per component. A list, a table or a grid uses one style for every row. A list where most rows have free-standing marks and a few have tiles looks broken, because the tiles change the rhythm of the column. The usual exception is a neutral light tile behind the few logos that would otherwise disappear. That's a contrast fix rather than a style change, and it works best when the tile is subtle and the same size as the other icons.

Mono for chrome, branded for content. Navigation, filters and inline mentions use mono; the rows that represent assets use branded. People learn that color means "this is the thing itself."

Background for avatar slots. Anywhere an icon stands for an account, a counterparty or a venue in a feed, the tile style gives it a consistent footprint.

Keep the style stable across states. Switching from mono to branded on hover is common on partner logo walls, where it adds a bit of life. In functional lists it makes rows flicker as the pointer moves. Use the background highlight for hover instead.

A small React component can keep this consistent, with each style pointing at its own file:

type IconStyle = 'branded' | 'mono' | 'background'

type Props = { src: string; variant: IconStyle; size?: number }

export function AssetIcon({ src, variant, size = 24 }: Props) {
  if (variant === 'mono') {
    const mask = `url(${src}) center / contain no-repeat`
    return (
      <span
        aria-hidden="true"
        style={{
          display: 'inline-block',
          width: size,
          height: size,
          backgroundColor: 'currentColor',
          WebkitMask: mask,
          mask,
        }}
      />
    )
  }

  return (
    <img
      src={src}
      width={size}
      height={size}
      alt=""
      style={variant === 'background' ? { borderRadius: '50%' } : undefined}
    />
  )
}

The mono branch draws the single-color file as a mask filled with currentColor, so it follows the text color of the row; recoloring with CSS mask explains how. Both branches treat the icon as decorative, which is right when the asset's name sits next to it. If the icon appears alone, give it an accessible name instead.