JSFiddle - React, Tailwind, and code Playground

by TheDiamondDoge

HTML

<span size="95" class="sc-AxhCb iXFoXl wrapSvg">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" class="iconSvg" height="95" width="95">
    <filter id="dropshadow" height="130%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3" /> <!-- stdDeviation is how much to blur -->
      <feOffset dx="2" dy="2" result="offsetblur" /> <!-- how much to offset -->
      <feComponentTransfer>
        <feFuncA type="linear" slope="0.5" /> <!-- slope is the opacity of the shadow -->
      </feComponentTransfer>
      <feMerge>
        <feMergeNode /> <!-- this contains the offset blurred image -->
        <feMergeNode in="SourceGraphic" /> <!-- this contains the element that the filter is applied to -->
      </feMerge>
    </filter>
    <defs>
      <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(318.55)">
        <stop offset="9.26%" style="stop-color:#3372F1;stop-opacity:1" />
        <stop offset="91.41%" style="stop-color:#5C8BFA;stop-opacity:1" />
      </linearGradient>
    </defs>
    <path fill="url(#grad1)" filter="url(#dropshadow)" fill-rule="evenodd" d="M10 20c5.523 0 10-4.477 10-10S15.523 0 10 0 0 4.477 0 10s4.477 10 10 10z" clip-rule="evenodd"></path>
    <path fill="#fff" fill-rule="evenodd" d="M15.707 7.707a1 1 0 00-1.414-1.414L9 11.586 6.707 9.293a1 1 0 10-1.414 1.414l3 3a1 1 0 001.414 0l.001-.001 6-5.999z" clip-rule="evenodd"></path>
  </svg>
</span>