How to make a mono version of a colorful logo

A single-color version of a logo is what you need for a dense table, a navigation bar, a dark interface or anywhere the icon should follow the text color. Making one from a multi-color mark is harder than it looks. In the color version, color does the work of separating parts. Take the color away and you have to separate those parts with shape instead.

This guide covers why the quick methods fail, the four techniques that work, how to handle overlapping shapes, how to build the result as a clean SVG, and how to test it.

Why you can't just remove the color

The tempting shortcuts all lose information.

Setting every fill to one color gives you the logo's silhouette. Every internal division that was made by color, such as a white letter on an orange coin or two overlapping shapes in different hues, disappears into one solid blob. Applying a full-color file as a CSS mask has exactly the same result.

Converting to grayscale keeps the divisions only where the colors differ in lightness. Two colors with similar lightness, like a medium blue and a medium red, become nearly the same gray. And grayscale isn't single-color anyway; it's several tones.

Thresholding grayscale into black and white puts every color on one side or the other of an arbitrary line, often splitting a gradient down the middle.

A good mono version is redrawn from the color version's structure, not filtered from its pixels. Before you start, check the brand's guidelines: many define an official one-color logo, and if one exists, it's the version to use.

Decide what's figure and what's ground

Go through the color logo region by region and assign each one to one of two roles: ink, the parts drawn in the single color, or ground, the parts that become empty and show whatever is behind the icon.

For a typical coin logo with a white symbol on a colored disc, the disc is ink and the symbol is ground: it becomes a hole cut out of the disc. For a colorful symbol with no background shape, all the colored parts are ink, and the question is how to keep them distinct from each other.

Write the assignment down or color-code a copy of the artwork. The techniques below depend on it.

Four techniques

Merge

Shapes that are both ink and touch each other can be combined into one shape. If a mark uses three shades of the same color to suggest facets or depth, and the shading isn't essential to recognizing it, merge the facets into a single shape. This is the simplest result and the strongest at small sizes.

Knock out

When a light element sits on a dark one, cut the light element out of the dark one. The coin becomes a disc with a symbol-shaped hole. Knockouts are what make single-color coin icons work: the symbol stays readable whatever color the icon is given, because it's literally the background showing through.

Separate with gaps

When two ink regions sit side by side and the boundary between them matters, as with facets that define a shape, introduce a thin gap between them. On a 24-unit canvas, a gap of about 1 unit holds up at 24 px; for 16 px use 1.5 units or more. The gap does what the color change used to do.

Switch to outlines

Sometimes a filled region turns into its outline instead, keeping the edge but dropping the area. This works for secondary shapes, such as a background ring, that would otherwise swallow everything inside them. Use it sparingly, since outlines are thin, and thin parts are the first to fail at small sizes.

Keeping overlaps readable

Overlaps are where mono versions usually go wrong. Interlocking rings, stacked layers and letters woven through each other all rely on color to show which part is on top.

In one color, show the stacking with a gap. Where the upper shape crosses the lower one, cut a channel into the lower shape along the upper shape's edge, about 1 to 1.5 units wide on a 24-unit canvas. The lower shape now visibly passes behind. For woven shapes that alternate over and under, alternate the cuts the same way the color version does.

Keep the gap width consistent throughout the mark. Mixed gap widths read as a drawing error rather than a design choice.

Some single-color sets use one color at two opacities, for example 100% and 40%, to suggest the original layering. That's a legitimate style, but it isn't strictly mono: the lighter parts depend on what's behind the icon and tend to disappear on mid-tone and busy backgrounds. If you use it, test it harder.

Building it as a clean SVG

Knockouts belong in the geometry, not in a white shape painted on top. A white shape only looks like a hole on a white background; a real hole works on every background. Combine the disc and the symbol into one compound path and let the fill rule cut the hole:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
  <path fill="currentColor" fill-rule="evenodd"
        d="M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18ZM9 9h6v6H9Z"/>
</svg>

The first subpath draws the disc and the second draws a square inside it. With fill-rule="evenodd", the area inside both is left unfilled, so the square becomes a hole. fill-rule: nonzero vs evenodd explains how the two rules decide what's inside.

Using fill="currentColor" means the icon takes the CSS color of its surroundings when inlined; see currentColor in SVG. If the file will be used as a CSS mask, any solid fill works, because a mask only reads the shape. Through an img tag, the page's CSS doesn't reach the file, so write the actual color you want into it rather than currentColor.

Testing on light and dark

A mono icon has to work in whatever color it's given, on whatever is behind it. Test it on at least four surfaces: white, near-black, a mid-gray and a saturated color. Mid-gray is the hardest test for knockouts and two-opacity styles.

A quick test page can use the mono file as a CSS mask, so each swatch recolors it with currentColor:

<div class="swatches">
  <span style="background: #fff; color: #111"></span>
  <span style="background: #111; color: #fff"></span>
  <span style="background: #6b7280; color: #fff"></span>
  <span style="background: #2563eb; color: #fff"></span>
</div>

<style>
  .swatches { display: flex; gap: 8px; }
  .swatches span { display: grid; place-items: center; width: 48px; height: 48px; }
  .swatches span::before {
    content: '';
    width: 24px;
    height: 24px;
    background: currentColor;
    -webkit-mask: url(logo-mono.svg) center / contain no-repeat;
    mask: url(logo-mono.svg) center / contain no-repeat;
  }
</style>

Change the 24 px to 16 px and check again. Look for knockouts that close up, gaps that disappear and parts that merge. Recoloring a single-color SVG with CSS mask covers the mask technique in more detail.

If you're picking icons rather than drawing them, the mono style on Web3 Icons is this kind of single-color version and can be recolored before download. Some logos don't have a mono version yet; for those, the site shows the branded one instead.