JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li><a id="hoverable" href="#"><i class="home-icon"></i><span class="text">Link 1</span></a></li>
  <li><a id="hoverable" href="#"><i class="tshirt-icon"></i><span class="text">Link 2</span></a></li>
</ul>

CSS

a {
  color: black;
  text-decoration: none;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.home-icon {
  background: url("http://s1.postimg.org/gk5fbl6vv/home_black.png") no-repeat;
  width: 32px;
  height: 32px;
  display: inline-block;
  margin-right: 20px;
}

a:hover .home-icon {
    background: url("http://s2.postimg.org/43870q29h/home_green.png") no-repeat;
}

.tshirt-icon {
  background: url("http://s30.postimg.org/61bqc12fh/tshirt_black.png") no-repeat;
  width: 32px;
  height: 32px;
  display: inline-block;
  margin-right: 20px;
}

a:hover .tshirt-icon {
  background: url("http://s17.postimg.org/3x9qzn8sb/tshirt_green.png") no-repeat;
}

a#hoverable:hover {
  color: green;
  font-weight: bold;
}