fonts awesome! v. 4.4

font-awesome (updated to Version 4.4)

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<span>
<button class="saveHome hoverPulse pan typeReversed">
    <span class="stackIcons">
        <i class="iconHeartActive iconOnly hide"></i>
        <i class="iconHeartEmpty typeReversed iconOnly"></i> 
    </span>
</button>
</span>

CSS

button{
  width: 100px;
  height: 50px;
  position: relative;
}

 .iconHeartEmpty::before{
   content: "\f001";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 35%;
    left: 5%;
 }
 .iconHeartActive::after{
      content: "\f001";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: red;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 35%;
    left: 5%;
 }
 .hide{
   display: none;
 }

JavaScript

$( ".saveHome" ).click(function() {
   $(".stackIcons i" ).toggleClass( "hide" );
 });