JSFiddle - React, Tailwind, and code Playground

HTML

<div class="social-icons wrapper-social">

     <a href="#" target="_blank on">
          <img id="facebook" src="http://www.supsurfboards.co.uk/images/facebook-icon.png" />
     </a>

     <a href="#" target="_blank"> 
          <img id="google" src="images/Google+.png" />
     </a>

     <a href="#" target="_blank">
       <img id="twitter" src="images/Tweeter.png" />
     </a>

      <a href="#" target="_blank">
          <img id="pinterest" src="images/Pinterest.png" />
      </a>

</div>

JavaScript

$(document).ready(function(){
  $("#facebook").hover(function(){
     $(this).attr("src","http://lorempixel.com/25/25/");
    },function(){
    $(this).attr("src","http://www.supsurfboards.co.uk/images/facebook-icon.png");
  });
});