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='color-shadow' data-iconmelon='filter:d8b3243222f113cd0dd357f0aaed2ee9' color-interpolation-filters="sRGB">
    <feComponentTransfer in="SourceGraphic">
      <feFuncR type="discrete" tableValues=".5"/>
      <feFuncG type="discrete" tableValues=".5"/>
      <feFuncB type="discrete" tableValues=".5"/>
    </feComponentTransfer>
    <feGaussianBlur stdDeviation=".85"/>
    <feOffset dx="1" dy="1" result="shadow"/>
    <feComposite in="SourceGraphic" in2="shadow" operator="over"/>
  </filter>
         
    </svg>
<!-- SVG SOURCE ends-->

<h4>filter effects:</h4>

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

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

<svg class="icon is-x1_5" viewBox="0 0 32 32">
    <g filter="url(#color-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(#color-shadow)">
    <use xlink:href="#heart-icon"></use>
  </g>
</svg>

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

<svg class="icon is-x2 is-check" viewBox="0 0 32 32">
   <g filter="url(#color-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