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

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).