JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test"></div>

SCSS

.test{
    width: 50px;
    height: 50px;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" xml:space="preserve"><path d="M11.432 9.512a.636.636 0 0 1 0 .918L2.12 19.742a.636.636 0 0 1-.458.201.637.637 0 0 1-.46-.201l-1-.998C.068 18.609 0 18.459 0 18.285s.068-.329.199-.461l7.854-7.852L.199 2.118A.638.638 0 0 1 0 1.66c0-.174.068-.327.199-.46l1-.998A.634.634 0 0 1 1.66 0c.172 0 .325.068.458.201l9.314 9.311z"/></svg>');
    mask-size: auto 50px;
    mask-repeat: no-repeat;
    transition: background-color 500ms;
    background-color: #ff0000;

    &:hover{
      background-color: #0000aa;
    }
}