Change SVG icon color with TailwindCSS

Snippet added on Aug 05, 2023 by Mike

Question:

How to change SVG icon color with TailwindCSS?

Answer:

<svg class="fill-current text-red-600" viewBox="0 0 512 512">
    <path d="M0 512V48C0 21.49 21.49 0 48 0h288c26.51 0 48 21.49 48 48v464L192 400 0 512z" />
</svg>

Description:

Changing the color of an SVG icon seems easy, just use the fill-{color} utility class. Unfortunately, the situation is not always that simple.

SVG Icon types

First of all, you should know that SVG icons use either fill and/or stroke.

An SVG with fill looks like this:

SVG with fill

<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 20 20">
    <path fill-rule="evenodd" d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A2 2 0 0011.172 3H8.828a2 2 0 00-1.414.586L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path>
</svg>

And an SVG with stroke:

SVG with stroke

<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
    <path stroke-linecap="round" stroke-linejoin="round" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>

Hence one of the common problems. If an SVG icon uses stroke lines, then fill-{color} will not give the correct result. In such cases, the stroke-{color} class should be used.

To make a proper SVG icon styled with Tailwind remove the stroke , fill and stroke-width attributes and use proper TailwindCSS utility classes instead:

<svg class="stroke-green-600 fill-none stroke-2" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
    <path stroke-linecap="round" stroke-linejoin="round" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>

And the result is:

SVG colors with Tailwind

SVG colors

To solve another common problem, you need to know that you can define the colors used for the icon at path and svg level. So, for example, for the following SVG, tailwind fill-red-600 is ineffective because there is a hard-coded color at the path level.

<svg class="fill-red-600" viewBox="0 0 20 20">
    <path
        fill="#c079d1"
        fill-rule="evenodd"
        d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A2 2 0 0011.172 3H8.828a2 2 0 00-1.414.586L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z"
        clip-rule="evenodd"
    ></path>
</svg>

The output of this code is:

Hard coded SVG path color

To solve this, you just need to remove the fill and stroke color values from both the path and svg levels to display the icon in the color corresponding to the tailwind classes specified in the class parameter:

<svg class="fill-red-600" viewBox="0 0 20 20">
    <path
        fill-rule="evenodd"
        d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A2 2 0 0011.172 3H8.828a2 2 0 00-1.414.586L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z"
        clip-rule="evenodd"
    ></path>
</svg>

After you remove the hard-coded fill color, the Tailwind fill-red-600 utility class will be applied and will have a visible effect.

SVG with fill

Reference:

SVG fill color reference

Share "How to change SVG icon color with TailwindCSS?"

Related snippets:

Change SVG icon color with TailwindCSS

Tags:

change, modify, svg, color, fill, stroke, tailwindcss

Technical term:

Change SVG icon color with TailwindCSS