How To Change SVG Icon Colors With Tailwind CSS ?

Forums CSSHow To Change SVG Icon Colors With Tailwind CSS ?
Staff asked 2 years ago

How to change SVG icon colors with Tailwind CSS?

Answers (2)

Add Answer
Umang Ramani Marked As Accepted
Staff answered 2 years ago
  1. Drop the SVG file or paste the SVG markup into the optimizer at SVGOMG.
  2. Copy the markup provided by SVGOMG and paste into your project.
  3. Remove any fill or stroke attributes so Tailwind can modify those with classes (not shown in the video).
  4. Remove any XMLNS attributes or XML tags
  5. Add Tailwind classes.
<link href="https://unpkg.com/tailwindcss@1.8.10/dist/tailwind.min.css" rel="stylesheet" />

<svg class="text-teal-500 fill-current h-16 w-16" viewBox="0 0 60 60">
    <path d="M41.05 18.44a6.6 6.6 0 00-4.84-2.29c-3.66-.06-6.62 3.04-6.62 6.91 0 .55.05 1.09.17 1.6a18.68 18.68 0 01-13.66-7.55 7.33 7.33 0 00-.9 3.55 7.3 7.3 0 002.95 5.92 6.34 6.34 0 01-3-.92v.1c0 3.42 2.28 6.3 5.31 6.97a6.24 6.24 0 01-3 .1 6.74 6.74 0 006.2 4.93 12.8 12.8 0 01-9.81 2.9A17.89 17.89 0 0024 43.85c12.19 0 18.86-10.61 18.86-19.81l-.02-.9c1.3-.97 2.42-2.18 3.3-3.56-1.18.54-2.46.9-3.8 1.04a6.8 6.8 0 002.91-3.8c-1.28.77-2.7 1.33-4.2 1.62z"/>
</svg>

<svg class="bg-red-500 text-red-800 fill-current h-16 w-16 rounded-lg" viewBox="0 0 60 60">
    <path d="M25.46 47.31V30h-3.52v-5.74h3.52v-3.47c0-4.68 1.4-8.06 6.53-8.06h6.1v5.73h-4.3c-2.15 0-2.64 1.43-2.64 2.92v2.88h6.62l-.9 5.74h-5.72V47.3h-5.69z"/>
</svg>

 

Staff answered 2 years ago

Try add color in class and set fill as none

Like the following I did

<svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg">
    <path stroke-linecap="round" stroke-linejoin="round"
    stroke-width="2" d="M20.618 5.984A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618
    3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622
    0-1.042-.133-2.052-.382-3.016zM12 9v2m0 4h.01">
    </path>
</svg>

 

Subscribe

Select Categories