JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box"></div>

SCSS

$icon-red: "data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><path fill='%23FF0066' d='M52.3,-13.5C60.1,7.1,53.5,35.8,36.5,47.5C19.5,59.2,-7.9,53.9,-29.9,38.5C-51.8,23.2,-68.4,-2.2,-62.5,-20.1C-56.6,-38,-28.3,-48.3,-3,-47.3C22.2,-46.3,44.5,-34,52.3,-13.5Z' transform='translate(100 100)' /></svg>";
$icon-blue: "data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><path fill='%236600ff' d='M52.3,-13.5C60.1,7.1,53.5,35.8,36.5,47.5C19.5,59.2,-7.9,53.9,-29.9,38.5C-51.8,23.2,-68.4,-2.2,-62.5,-20.1C-56.6,-38,-28.3,-48.3,-3,-47.3C22.2,-46.3,44.5,-34,52.3,-13.5Z' transform='translate(100 100)' /></svg>";

html,body {
  height: 100%;
  background-image: url($icon-red);

  &:hover {
    background-image: url($icon-blue);
  }
}