In TailwindCSS, you can very easily add icon hover effects using the
Fill is actually a native CSS property that applies coloring into an SVG element'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).