JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hiden-svg">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol viewBox="0 0 103.2 126.8" id="leaf"><path class="ajst0" d="M84.3 91.4c.4 12.7-2.1 22-7.5 27.6-4.4 4.5-10.5 6.8-18.7 6.8-7.4 0-15.1-1.8-22.5-3.7-12.2-3.2-21.5-10.4-27.7-21.3-9-16-10.4-39.5-3.6-62.9C8.6 22.6 8.4 12.1 6.7 1.1c-.1-.5.1-1 .5-1.2.3-.3.8-.3 1.2-.1 22.9 11.8 42.2 27.1 55.8 44.4 12.5 15.7 19.6 32.5 20.1 47.2zM75 117.3c5-5.1 7.3-13.8 6.8-25.8C81 65.9 58.2 28.8 9.4 3c1.4 10.6 1.3 20.9-2.8 35.4C0 61.3 1.3 84.1 10 99.5c5.9 10.3 14.7 17.1 26.2 20.2 7.1 1.9 14.7 3.6 21.8 3.6 7.6 0 13.1-2 17-6z"></path><path class="ajst1" d="M81.9 91.5c.4 12-1.9 20.7-6.8 25.8-3.9 4-9.5 6-17 6-7.1 0-14.7-1.8-21.8-3.6-11.5-3-20.4-9.8-26.2-20.2-8.7-15.4-10-38.2-3.4-61C10.8 24 10.8 13.6 9.4 3 58.2 28.8 81 65.9 81.9 91.5z"></path><path class="ajst0" d="M85.5 25s2.2 8.6 13 32.6c14.2 31.4-5.8 56.6-31.6 68.5 0 0-8.3 2.3-18.2-5.2-14.6-11-16.2-35.9-9-52.5C48 49.6 74.5 39 85.5 25z"></path></symbol>
</svg>
</div>


<div class="benefit-item leaf"><span class="bordered"></span>
  <svg role="img" class="benefit-icon">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#leaf"></use>
  </svg>
  <p>Отборные сорта табака для сбаласированного вкуса</p>
</div>

CSS

.hidden-svg {
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  margin: -1px;
  padding: 0;
  position: absolute;
  width: 1px;
  height: 1px;
}

.benefit-item svg {
  fill: green;
}