JSFiddle - React, Tailwind, and code Playground

HTML

<svg class="myIcon" version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="155" height="111" viewBox="0 0 155 111"
 preserveAspectRatio="xMidYMid meet">
<g class="x" transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M837 1019 c-66 -15 -88 -33 -268 -216 -154 -156 -177 -184 -189 -226
-38 -139 48 -279 190 -309 46 -9 64 -8 115 6 56 17 69 28 227 184 189 187 218
229 218 322 0 152 -148 273 -293 239z m-44 -571 c-43 -43 -92 -85 -109 -93
-98 -46 -219 22 -232 130 -7 70 5 94 96 187 l86 89 118 -118 118 -118 -77 -77z"/>
</g>
</svg>

CSS

.myIcon:hover {
  background-color: green;
}
.myIcon:hover g {
  fill: red;
}