logoredraws.com

Use multiple colors in an SVG icon

How SVG icons hold more than one color, the coloring methods that work inline versus as a favicon, and pitfalls such as currentColor, ID clashes and embedded rasters.

Published

Contents
  1. The short answer
  2. How color is stored in an SVG
  3. Why currentColor gives you only one color
  4. Themeable multi-color icons with CSS custom properties
  5. Comparing the main approaches
  6. Multiple colors in an SVG favicon
  7. Common pitfalls
  8. Check that the colors are actually editable vectors
  9. Recoloring someone else's logo
  10. Gaps in this overview

The short answer

Yes, an SVG icon can use as many colors as you need. Each shape, path or group in an SVG can carry its own fill and stroke, so a two-tone or full-color mark is just several vector elements with different color values. How you control those colors depends on how the icon is delivered. Inline SVG in a page can be recolored from the page's CSS. An SVG favicon cannot, because browsers load it as a separate image and the page's styles never reach it.

How color is stored in an SVG

Color in SVG is a property of individual elements, not of the file as a whole. A circle can be filled blue while a path drawn over it is stroked yellow. Colors can be set in three places. They can be presentation attributes such as fill and stroke on the element. They can be inline style declarations. They can be rules in a style block inside the SVG, targeted by class. Gradients and patterns are defined once inside a defs section and referenced by ID, which lets a single shape show a range of colors.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <circle cx="16" cy="16" r="15" fill="#1d4ed8"/>
  <path d="M10 17l4 4 8-9" fill="none" stroke="#facc15"
        stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

In this example the badge and the check mark are separate vector elements, and each one carries a fixed color. Hard-coded values like these display the same way wherever the file is used, which makes them the most predictable choice for a favicon.

Why currentColor gives you only one color

Many icon systems set fill to currentColor so the icon inherits the surrounding text color. That is convenient, but currentColor is a single value, so every element that uses it renders in the same color. To get a second or third color you need another mechanism. You can hard-code the extra colors, or you can expose them as CSS custom properties.

Themeable multi-color icons with CSS custom properties

For icons placed inline in HTML, or referenced from a sprite with a use element, custom properties are a common way to control several colors at once. Each part of the icon reads its own variable and falls back to a default. Custom properties inherit into the content cloned by use, so this approach also works with sprites. Ordinary selectors from the page cannot reach inside that cloned content.

<svg viewBox="0 0 32 32" class="icon">
  <style>
    .icon .bg   { fill: var(--icon-bg, #1d4ed8); }
    .icon .mark { stroke: var(--icon-accent, #facc15); }
  </style>
  <circle class="bg" cx="16" cy="16" r="15"/>
  <path class="mark" d="M10 17l4 4 8-9" fill="none"
        stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
.toolbar .icon {
  --icon-bg: #0f172a;
  --icon-accent: #38bdf8;
}

Scope the style block's selectors to the icon, as shown here. A style element inside inline SVG applies to the whole document, so unscoped class names can clash with the rest of the page.

Comparing the main approaches

Method | Colors | Recolorable from page CSS | Works in an SVG favicon
Hard-coded fill and stroke values | Unlimited | No | Yes
currentColor | One | Yes, inline only | No useful effect, because no page text color is inherited
CSS custom properties | Unlimited | Yes, inline or via use | Only the fallback values apply
Style block inside the SVG with a prefers-color-scheme query | Unlimited | No | Yes, where the browser honors the media query
Gradients defined in defs | Continuous ranges | Partly, if stop colors use variables | Yes, with fixed stop colors

Multiple colors in an SVG favicon

A favicon is loaded as a standalone image. The page's stylesheets, its custom properties and its scripts cannot change the favicon's colors. Every color must therefore be defined inside the SVG file. The one built-in way to adapt is a prefers-color-scheme media query in the SVG's own style block. It lets the icon switch to a palette that stays legible on dark browser chrome.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg   { fill: #1d4ed8; }
    .mark { stroke: #facc15; }
    @media (prefers-color-scheme: dark) {
      .bg   { fill: #93c5fd; }
      .mark { stroke: #1e293b; }
    }
  </style>
  <circle class="bg" cx="16" cy="16" r="15"/>
  <path class="mark" d="M10 17l4 4 8-9" fill="none"
        stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Browser support for SVG favicons, and for media queries inside them, has differed between browsers and versions. The material supplied for this article contains no support data, so check current compatibility tables before you rely on either feature. Declaring the SVG icon with the image/svg+xml type alongside an ICO or PNG fallback remains a sensible default. Favicons are also shown very small, often around 16 pixels in a tab. A restrained palette with strong contrast between neighboring colors holds up better at that size than fine multi-color detail.

Common pitfalls

  • Duplicate IDs: If several inline SVGs on one page each define a gradient with the same ID, later references can resolve to the wrong definition. Give gradient, clip-path and mask IDs unique names per icon.
  • Colors overridden by global CSS: A page-wide rule such as svg path { fill: ... } will flatten a multi-color inline icon to a single color. Keep icon styling scoped.
  • Presentation attributes lose to CSS: A fill attribute has lower priority than any CSS rule that targets the same element. This often explains why an attribute value seems to be ignored.
  • Opacity versus a separate color: Lowering opacity on one layer is a quick way to get a second tone. The result depends on whatever sits behind the icon, so use an explicit color when the exact shade matters.

Check that the colors are actually editable vectors

A .svg extension does not guarantee that a file contains editable vector shapes. An SVG can wrap an embedded raster image, typically a base64-encoded PNG inside an image element. The colors in that raster are baked into its pixels and cannot be changed by setting fill or stroke. Before you plan a recolor, open the file in a vector editor or a text editor. Confirm that the artwork is built from path, circle, rect, polygon or similar elements, and not from a single embedded bitmap. Treat a rendered preview thumbnail the same way, since it tells you nothing about how the underlying file is built.

Technical ability to change an SVG's colors is separate from permission to do so. Being allowed to download a logo file does not mean you may modify its colors, alter its artwork, reuse any embedded or outlined typefaces, or use the trademark in a new context. Many brands publish guidelines that specify approved color versions. If you are adapting a third-party mark, for example as a favicon on a partner page, check those terms first.

Gaps in this overview

This article relies on general, verifiable behavior of SVG and CSS. It contains no tested measurements, no browser version numbers and no tool-specific instructions, because none were provided in the source material. Confirm current browser support for SVG favicons and embedded media queries, and follow the export settings of your design tool, before you finalize delivery files.