↓Skip to main content
sekureco42
  1. Posts/

Recoloring of SVG icons

·158 words·1 min· loading · loading · ·
English HTML Tipps
rOger Eisenecher
Author ::..
rOger Eisenecher
> 12 years leading and building a SOC for MSSP • > 20 years working in security • > 40 years working with IT • 100% tech nerd.
Table of Contents

Recently I tried to add an additional SVG based icon to an existing web framework - but recoloring it like the other SVG based icons was not possible. After some digging around I found a solution for that issue.

Introduction

If you are working an a web project you often use SVG based icons. Even more they are very comfortable due they can be re-colored like a normal text element. But for a custom SVG icon I downloaded this was not possible.

Here is an example I tried (with svg embedded):

<span class="text-tahiti">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
        <path d="M128 ... 16z"/>
    </svg>
</span>

Solution

The important thing required for working as expected is the fact that the SVG graphics need the attribute fill="currentColor" in the path element. So if you add it to the SVG icon it will respect text colors:

<span class="text-tahiti">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
        <path fill="currentColor" d="M128 ... 16z"/>
    </svg>
</span>