JSFiddle - React, Tailwind, and code Playground

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<symbol id="thumbs-up" viewBox="0 0 100 100">
		<circle cx="50" cy="50" r="50"/>
		<g id="hand">
			<polygon fill="#FFFFFF" points="64.287,37.926 64.287,71.491 80.925,71.491 73.044,37.926 	"/>
			<path fill="#FFFFFF" d="M54.425,41.857c0-2.634-2.811-4.295-5.025-5.155c-2.728-1.059-4.069-4.203-1.565-8.379
				c2.146-3.58-2.084-8.795-6.628-6.058c-5.205,3.134-4.073,11.161-2.468,15.889c0.61,1.798-0.435,1.743-1.756,1.743
				c-1.081,0-5.646,0-5.646,0h-8.469c-0.998,0-3.288,6.399-2.289,6.399h10.729c-0.188,0.5-0.406,1.391-0.619,2.544H19.768
				c-1.152,0-1.919,7.2-0.714,7.2h10.859c-0.035,0.842-0.049,1.695-0.038,2.544H19.372c-1.195,0-0.277,6.256,0.803,6.256h10.413
				c0.245,0.95,0.561,1.813,0.962,2.544H21.331c-1.294,0,1.405,5.811,3.027,5.811h6.978c4.925,0,13.934,0,17.805,0
				c3.872,0,5.378-5.477,11.86-5.477V43.891C61.001,43.891,54.425,44.12,54.425,41.857z"/>
		</g>
        <path id="cross" fill="#FFFFFF" d="M50.042,54.392L39.967,66.389c-0.659,0.854-1.478,1.281-2.454,1.281
			c-0.879,0-1.612-0.306-2.198-0.915c-0.586-0.61-0.879-1.355-0.879-2.234c0-0.781,0.195-1.404,0.586-1.867l11.065-13.199
			L35.864,37.311c-0.464-0.536-0.696-1.147-0.696-1.831c0-0.806,0.286-1.531,0.859-2.179c0.572-0.646,1.31-0.971,2.211-0.971
			c1.023,0,1.852,0.382,2.485,1.145l9.285,11.188l9.547-11.273c0.586-0.706,1.318-1.06,2.198-1.06c0.781,0,1.49,0.275,2.125,0.824
			c0.635,0.55,0.953,1.251,0.953,2.105c0,0.83-0.135,1.404-0.403,1.722L54.021,49.495l10.921,13.158
			c0.415,0.463,0.623,1.041,0.623,1.729c0,0.937-0.312,1.718-0.935,2.345c-0.622,0.629-1.337,0.942-2.142,0.942
			c-0.952,0-1.782-0.427-2.49-1.282L50.042,54.392z"/>
	</symbol>
</svg>

<a><svg><use xlink:href="#thumbs-up" /></svg></a>
<a>
    <svg viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="50"/>
        <g id="hand">
            <polygon fill="#FFFFFF" points="64.287,37.926 64.287,71.491 80.925,71.491 73.044,37.926 	"/>
            <path...

CSS

a		{text-decoration: none; display: inline-block; border: none; cursor: pointer; position: relative; width: 25px; height: 25px; margin: 0 2px 0 5px;}
a, a *	{transition: 0.2s all ease-in-out;}
a svg	{position: absolute; left:0; top:0; width:100%; height:100%;}
a svg circle		{fill: #4291c2;}
a svg path#cross	{opacity: 0;}

a:hover	    {opacity: 1.0; transform: rotate(-5deg) scale(1.5);}
a:hover svg circle	{fill: #91c142;}
a:hover svg path#cross	{opacity: 1;}
a:hover svg g#hand	    {opacity: 0;}