JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="social-icons"> 
    <li class="facebook"> 
        <a title="Facebook" href="http://facebook.com/eclyptix"><img src="http://www.killersites.com/killerSites/resources/dot_clear.gif" width="30px"></a> 
    </li> 
    <li class="twitter"> 
        <a title="Twitter" href="http://twitter.com/eclyptix"><img src="http://www.killersites.com/killerSites/resources/dot_clear.gif" width="30px"></a> 
    </li> 
    <li class="linkedin"> 
        <a title="LinkedIn" href="http://linkedin.com/company/eclyptix"><img src="http://www.killersites.com/killerSites/resources/dot_clear.gif" width="30px"></a> 
    </li>

CSS

.facebook{
    background:url(http://i.stack.imgur.com/LNPd7.png) 0px 0px no-repeat;
    width:30px;
    height:30px;
}
.facebook:hover{
    background:url(http://i.stack.imgur.com/LNPd7.png) 0px  no-repeat;
}

.twitter{
    background:url(http://i.stack.imgur.com/LNPd7.png) -30px 0px no-repeat;
    width:30px;
    height:30px;
}
.twitter:hover{
    background:url(http://i.stack.imgur.com/LNPd7.png) -30px -30px no-repeat;
}

.linkedin{
    background:url(http://i.stack.imgur.com/LNPd7.png) -60px 0px no-repeat;
    width:30px;
    height:30px;
}
.linkedin:hover{
    background:url(http://i.stack.imgur.com/LNPd7.png) -60px -30px no-repeat;
}