Removing Fill Attributes for CSS-Controlled Coloring

Removing Fill for CSS Styling

One of the most common issues when building SVG sprites is that source SVGs often have hardcoded fill and stroke attributes that prevent CSS color control. Stripping these attributes is essential for creating flexible, themeable icon systems.

The Problem

When an SVG path has a hardcoded fill:

<symbol id="icon-star" viewBox="0 0 24 24">
  <path fill="#FFD700" d="M12 2l3.09 6.26..."/>
</symbol>

CSS cannot override this color:

/* This will NOT work */
svg { color: red; }
.icon { fill: red; }

The hardcoded fill="#FFD700" is a presentation attribute that takes precedence over inherited styles within the shadow DOM created by <use>.

The Solution

Remove fill and stroke attributes so the SVG inherits colors from CSS:

<symbol id="icon-star" viewBox="0 0 24 24">
  <path d="M12 2l3.09 6.26..."/>
</symbol>

Now you can control the color with CSS:

.icon { fill: currentColor; }

<span style="color: red">
  <svg class="icon" width="24" height="24">
    <use href="#icon-star"/>
  </svg>
</span>

What to Keep

Not all fill and stroke attributes should be removed:

• fill="none" — Keeps areas transparent. Removing it makes them black (the default fill color). Always preserve this.
• stroke="none" — Explicitly removes strokes. Safe to preserve.
• fill="currentColor" — Already set up for CSS control. No need to remove.
• Multi-color icons — If an icon intentionally uses multiple colors, you may want to keep some fills and only remove others.

Using currentColor

The currentColor keyword is the bridge between CSS color and SVG fill:

<symbol id="icon-star" viewBox="0 0 24 24">
  <path fill="currentColor" d="M12 2l3.09 6.26..."/>
</symbol>

.nav-icon { color: #666; }
.nav-icon:hover { color: #333; }
.dark .nav-icon { color: #ccc; }

This is the recommended approach for monochrome icons in design systems.

Automation

The SVG Sprite Generator has a "Remove fill/stroke" toggle that handles this automatically. For build pipelines, tools like SVGO can be configured to strip presentation attributes:

{
  "plugins": [
    { "name": "removeAttrs", "params": { "attrs": ["fill", "stroke"] } }
  ]
}