Tip #3: Add hover effects to SVG icons with fill

  • — TailwindCSS

  • 1 min. read

  • — 2/13/2023

In TailwindCSS, you can very easily add icon hover effects using the fill utility.

Fill is actually a native CSS property that applies coloring into an SVG element's path tag(s).

Let's grab an icon from HeroIcons and add it into an HTML document. Make sure to copy the icon as an SVG!

Now that we have a button, let's make it so that when the user hovers over it, the button background changes to blue and the text and icon change to white.

To do this, we'll use the following utilities:

hover:bg-blue-500 hover:fill-white hover:text-white transition duration-300 ease-in-out

Notice that we have hover:fill-white, this is what will change our icon to be white (though you can use any of TailwindCSS's built-in colors to change the icon to whatever color).

Shaun Chander

hey (again), I'm shaun

I'm posting 3 tips on creative web development daily. Subscribe below to to get tips delivered straight into your inbox!