JSFiddle - React, Tailwind, and code Playground

HTML

<img class="smIcons" src="https://image.flaticon.com/icons/svg/174/174848.svg" width="50" height="50">
<img class="Ico" src="https://image.flaticon.com/icons/svg/174/174876.svg" width="50" height="50">
<img class="Icon" src="https://image.flaticon.com/icons/svg/174/174881.svg" width="50" height="50">

CSS

img {
    margin:0px 10px;
}
.smIcons:hover {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

.Ico:hover {
  -webkit-filter: sepia(1);
  filter: sepia(1);
}

.Icon:hover {
  -webkit-filter: invert(.8);
  filter: invert(.8);
}