38

I'm using TailwindCSS and want to change the color of an svg. Without Tailwind this question has been asked before here, for 2020 this should be a good answer but Tailwind does not support those filters. There is a guide in the docs on how to work with svg icons but this tutorial works without files, just the plain text paths.

I downloaded the svg files and assign the path to the svg to the image's src tag. The following example shows my problem, I want the icon's background to be red and the icon's color to be blue. Unfortunately it's not possible for me to change the icon color.

<link href="https://unpkg.com/tailwindcss@1.8.10/dist/tailwind.min.css" rel="stylesheet" />

<!-- taken from here https://www.iconfinder.com/icons/765208/media_twitter_social_icon -->
<img class="fill-current bg-red-500 text-blue-500" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI2MHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA2MCA2MCIgd2lkdGg9IjYwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iYmxhY2siIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIj48ZyBpZD0ic2xpY2UiLz48ZyBmaWxsPSIjMDAwMDAwIiBpZD0idHdpdHRlciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTMuMDAwMDAwLCAxNi4wMDAwMDApIj48cGF0aCBkPSJNMjguMDUyMTM4NSwyLjQzNjY5NDI3IEMyNi44NDMxODQ2LDEuMDYyMjAxNSAyNS4xMjA1Mzg1LDAuMTg2NDY0MTA1IDIzLjIxNDA2MTUsMC4xNTQ3MzEwMjggQzE5LjU1MzYsMC4wOTM4MDMwOTA1IDE2LjU4NTY1MzgsMy4xODY5MjMzOSAxNi41ODU2NTM4LDcuMDYzMTE2MDQgQzE2LjU4NTY1MzgsNy42MTMyNDExOCAxNi42NDQyOTIzLDguMTQ5NjkzMzcgMTYuNzU3MzY5Miw4LjY2NDY3MzE2IEMxMS4yNDg1ODQ2LDguMzA3MzUyNTcgNi4zNjQ0NjkyMyw1LjQzODc3MDU5IDMuMDk1NDE1MzgsMS4xMTQ3MjE4IEMyLjUyNDg2MTU0LDIuMTUwODYxNyAyLjE5NzkwNzY5LDMuMzYxODgyNzEgMi4xOTc5MDc2OSw0LjY1OTE1MDM3IEMyLjE5NzkwNzY5LDcuMTE0OTg4NDQgMy4zNjgwOTIzMSw5LjI5NDUyNzI0IDUuMTQ2NjMwNzcsMTAuNTgxNDE3NCBDNC4wNjAxMjMwOCwxMC41MzM0NDk5IDMuMDM4MDY5MjMsMTAuMjA0NTM3OCAyLjE0NDQzODQ2LDkuNjY0OTUyMDMgQzIuMTQzNzkyMzEsOS42OTQ0NDQ5NyAyLjE0Mzc5MjMxLDkuNzIzOTQ0OTQgMi4xNDM3OTIzMSw5Ljc1Mzk2MjQ1IEMyLjE0Mzc5MjMxLDEzLjE4MzU0OTcgNC40Mjg1OTIzMSwxNi4wNjA3MDc2IDcuNDYwODMwNzcsMTYuNzMwOTM4MyBDNi45MDQ2NTM4NSwxNi44ODg1MzggNi4zMTkwNzY5MiwxNi45NzEwMTYzIDUuNzE0NiwxNi45NjcwMDggQzUuMjg3NDkyMzEsMTYuOTY0MTc1OCA0Ljg3MjE3NjkyLDE2LjkxNjgxMTggNC40Njc1MjMwOCwxNi44MzE3NjggQzUuMzEwOTE1MzgsMTkuNjQ0Mzc3NyA3Ljc1ODcwNzY5LDIxLjY5Njc2NjMgMTAuNjU5MjkyMywyMS43NjQ2MjggQzguMzkwODA3NjksMjMuNjQ3Njk2MyA1LjUzMjg2OTIzLDI0Ljc2OTE5MzMgMi40MjcyOTIzMSwyNC43NjI3ODcgQzEuODkyMjc2OTIsMjQuNzYxNjgzMyAxLjM2NDY5MjMxLDI0LjcyNzExMiAwLjg0NjE1Mzg0NiwyNC42NjA1OTk2IEMzLjc3OTUzMDc3LDI2LjY3MzMxMzkgNy4yNjM1OTIzMSwyNy44NDUxNzExIDExLjAwNjc2MTUsMjcuODQ2MTUzMSBDMjMuMTk4NTUzOCwyNy44NDkzNTE4IDI5Ljg2NTczMDgsMTcuMjM5NTEwOSAyOS44NjU3MzA4LDguMDM2NzY4NjggQzI5Ljg2NTczMDgsNy43MzQ4MzYzMiAyOS44NTkxMDc3LDcuNDM0NTE5MTIgMjkuODQ2NTA3Nyw3LjEzNTY1MTk1IEMzMS4xNDE1NjE1LDYuMTcwNjY2NDUgMzIuMjY1MjIzMSw0Ljk2MDc4OTE1IDMzLjE1Mzg0NjIsMy41NzkyMTkwMSBDMzEuOTY1MjQ2Miw0LjExNTAxNjE1IDMwLjY4NzYzODUsNC40NzA4Njg2MyAyOS4zNDcwMzA4LDQuNjIwMTM3ODkgQzMwLjcxNTQyMzEsMy43Nzc5NjUxOCAzMS43NjY1NTM4LDIuNDMwMDk2MDcgMzIuMjYxMzQ2MiwwLjgxMzc1ODQwNCBDMzAuOTgwNTA3NywxLjU5MDQ5MjI5IDI5LjU2MjAzODUsMi4xNDc1MTI4NiAyOC4wNTIxMzg1LDIuNDM2Njk0MjcgWiIvPjwvZz48L2c+PC9zdmc+">

What is the correct workflow when downloading svg icons and use them directly by linking the assets path? All I want to achieve is something like this

<a href="https://twitter.com" target="_blank">
  <img src="pathToSvgInAssetsFolder" />
</a>

and set the icon color to a custom Tailwind color e.g. red-500. So whenever I want to change the icon color I can simply modify the color class.

Does someone know how to do it?

Question3r
  • 2,166
  • 19
  • 100
  • 200

3 Answers3

69

The workflow for adding SVG to your Tailwind project should be done using inline SVG.

Adam Watham the creator of Tailwind CSS made a video about working with inline SVG in Tailwind. In the video he shows a workflow you would use to prep an unoptimized SVG for a Tailwind project. Here's the steps with one extra step he didn't mention:

  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, these are not needed for inline SVG.
  5. Add Tailwind classes.

If you're using a component based framework it's recommended that you also extract the icons into components that can be reused throughout your application.

The benefits of this approach:

  • Full control over the size and color of your SVG icons
  • Faster load speed since the icons are part of the HTML

Here's an example based on the Fiddle you shared in the comments. I ran the SVGs through SVGOMG and removed the fill attributes so Tailwind can control that.

<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>
JHeth
  • 7,067
  • 2
  • 23
  • 34
  • Step 5 says Add Tailwind classes. Do we do anything other than [Fill](https://tailwindcss.com/docs/fill), [Stroke](https://tailwindcss.com/docs/stroke) and [Stroke Width](https://tailwindcss.com/docs/stroke-width)? I was wondering if the answer should be more specific? – notapatch Jan 27 '22 at 12:11
  • 2
    For me, the missing part was the **fill-current** class – Pjotr Aug 26 '22 at 11:03
  • I tried this and the svg is not picking up the color. Are these instructions still accurate? – Mel Jan 07 '23 at 03:35
  • @Mel it still works on Tailwind Play https://play.tailwindcss.com/vsSEXCEuTq which runs the most current version of Tailwind. Is your Tailwind CLI build process running? – JHeth Jan 07 '23 at 05:26
  • @Pjotr Same for me. SVGs' color would not update unless I added a `fill-current` class. – Sean O Mar 31 '23 at 15:33
8

In simple terms use text-<color> and fill-current

<svg class="h-16 w-16 rounded-full bg-cyan-400 fill-current text-white" 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>

Output:

enter image description here

krishnaacharyaa
  • 14,953
  • 4
  • 49
  • 88
  • 1
    Why doesn't it work with just `fill-color-100`? Why do I need to use `text-color` instead of this? – Flamingo May 23 '23 at 11:38
  • @Flamingo because icons (and decorations in general) are often used alongside text and expected to use the same color as the surrounding text, so it just makes things easier to have stroke or fill default to text color. "current" is also bigger than Tailwind, as it's part of CSS itself - https://css-tricks.com/currentcolor/ – Chris Hayes Jul 20 '23 at 18:12
0

If you are using Heroicons try stroke-cyan-500 and fill-cyan-300 tags.

See:

https://tailwindcss.com/docs/fill

https://tailwindcss.com/docs/stroke

Dejan S
  • 1,445
  • 1
  • 8
  • 14