JSFiddle - React, Tailwind, and code Playground

by Michael Dibbets

HTML

<div class="uiicon icon1 uiicon-filter-darkgreen-dropshadow">

CSS

.uiicon {
	width:64px;
	height:64px;
	display:inline-block;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;    
    
}
.uiicon-filter-darkgreen-dropshadow {
	
	filter:invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(4px 4px 7px rgba(0,0,0,0.2));
	-webkit-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(4px 4px 7px rgba(0,0,0,0.2));
	-moz-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(4px 4px 7px rgba(0,0,0,0.2));
	-o-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(4px 4px 7px rgba(0,0,0,0.2));
	-ms-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(4px 4px 7px rgba(0,0,0,0.2));
}
.uiicon-filter-darkgreen-dropshadow:hover {
	filter:invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(0px 0px 7px rgba(0,0,0,0.5));
	-webkit-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(0px 0px 7px rgba(0,0,0,0.5));
	-moz-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(0px 0px 7px rgba(0,0,0,0.5));
	-o-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(0px 0px 7px rgba(0,0,0,0.5));
	-ms-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(0px 0px 7px rgba(0,0,0,0.5));
	cursor:pointer;
	cursor:hand;
}

.icon1 {
 	background-image: url('https://cdn4.iconfinder.com/data/icons/defaulticon/icons/png/256x256/arrow-alt-right.png');
 }