Edit on
<!-- SVG SOURCE -->
    <svg height="0" width="0" style="position:absolute;margin-left: -100%;">
<path id="heart-icon" d="M16,28.261c0,0-14-7.926-14-17.046c0-9.356,13.159-10.399,14-0.454c1.011-9.938,14-8.903,14,0.454
	C30,20.335,16,28.261,16,28.261z"/>   
      
 <filter id='inset-shadow'>
    <!-- Shadow offset -->
    <feOffset
            dx='0'
            dy='0'
          />
    <!-- Shadow blur -->
    <feGaussianBlur
            stdDeviation='1'
            result='offset-blur'
          />
    <!-- Invert drop shadow to make an inset shadow-->
    <feComposite
            operator='out'
            in='SourceGraphic'
            in2='offset-blur'
            result='inverse'
          />
    <!-- Cut colour inside shadow -->
    <feFlood
            flood-color='black'
            flood-opacity='.95'
            result='color'
          />
    <feComposite
            operator='in'
            in='color'
            in2='inverse'
            result='shadow'
          />
    <!-- Placing shadow over element -->
    <feComposite
            operator='over'
            in='shadow'
            in2='SourceGraphic'
          />
         
    </svg>
<!-- SVG SOURCE ends-->

      
      
<h4>filter effects:</h4>
      
<svg class="icon" viewBox="0 0 32 32">
    <g filter="url(#inset-shadow)">
      <use xlink:href="#heart-icon"></use>
    </g>
</svg>

<svg class="icon is-check" viewBox="0 0 32 32">
   <g filter="url(#inset-shadow)">
    <use xlink:href="#heart-icon"></use>
  </g>
</svg>
      
<svg class="icon is-x1_5" viewBox="0 0 32 32">
    <g filter="url(#inset-shadow)">
      <use xlink:href="#heart-icon"></use>
    </g>
</svg>

<svg class="icon is-x1_5 is-check" viewBox="0 0 32 32">
   <g filter="url(#inset-shadow)">
    <use xlink:href="#heart-icon"></use>
  </g>
</svg>

      
<svg class="icon is-x2" viewBox="0 0 32 32">
    <g filter="url(#inset-shadow)">
      <use xlink:href="#heart-icon"></use>
    </g>
</svg>

<svg class="icon is-x2 is-check" viewBox="0 0 32 32">
   <g filter="url(#inset-shadow)">
    <use xlink:href="#heart-icon"></use>
  </g>
</svg>

.icon{
  width: 32px;
  height: 32px;
  fill: #ccc;
}

.icon.is-check{
  fill: #FE4365;
}

.icon.is-x1_5{
  width: 48px;
  height: 48px;
}

.icon.is-x2{
  width: 64px;
  height: 64px;
}



body{
   font-family: monospace;
   color: #0099CC;
}
Rerun