<svg height="0" viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
 <defs>
  <linearGradient id="color" gradientUnits="userSpaceOnUse">
   <stop stop-color="#256eaa" offset="0"/>
   <stop stop-color="#39a2f9" offset="1"/>
  </linearGradient>
 </defs>
 <symbol id="check" viewBox="0 5 20 10" >
 <path d="m0.10982 9.7722c1.6 1.4 4.9 5.5 5.6 8.9 0.1 0.5 1.1 0.6 1.4-0.1 3.3-7.7 5.1-12.2 9.8-16.8 1.7-1.7 1.1-2.2-0.5-1.4-3.7 2-7.5 7-10 11.7-2.7-2.4-3.5-2.5-5-3.1-1.6-0.6-1.5 0.5-1.3 0.8z"/>
 </symbol>

</svg>

<div class="flex">
check: <svg width="30" height="30" fill="url(#color)"><use href="#check"></use></svg>
</div>

<hr>
<dv class="flex">
check2: <svg fill="blue" width="30" height="30"><use href="#check"></use></svg>
</div>

html, body {padding: 0; margin: 0}
svg{
  display: block;
}
.flex{
  display: flex;
  align-items: center;
}