Let's start by adding an I element to our HTML, by writing I and giving it a class of icon and icon*. Also going to duplicate this, and add a class of icon-small. Since there's no content inside these I elements, we'll need to add a width and height in order for it to take up any space.
Let's do that by targeting the icon class, adding a width and a height. We also need to set display to inline-block, because by default inline elements don't respect setting the height. Now, I'll target icon-small, and set its width and height.
Now, let's target icon. I'll set its background-image property to the URL of an SVG, and right away you can see those icons are displayed. I'll duplicate the icon CSS, this time I'll add the hover pseudo class, and I'll change the background image to point to a hover version of the icon.
The only difference of these SVGs is the fill attributes have different colors. Now, when I hover over there, you'll see that the image is swapped out for the hover version. Since this is just CSS, we can make that background image swap smoother by adding a transition.
Let's do that by saying transition:background-image .2s ease, and now I've got a smooth transition between background images.