JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<span class="image-checkbox">
<input type='checkbox' name='thing' value='valuable' id="thing"/>
<label for="thing">ghhg</label> 
</span>

SCSS

.image-checkbox {
   display: inline-block;
   vertical-align: middle;
  
  input[type=checkbox] {
    display: none;
  }

  input[type=checkbox] + label {
    display: inline-block;
    background: transparent url(https://10.1.176.144/webhmi.common/img/icons/Alarm_30x30_Red.png) no-repeat center left;
    height: 30px;
    width: 30px;
    padding-left: 30px;
    vertical-align: center;
  }

  input[type=checkbox]:checked + label {
    background-image: url(https://10.1.176.144/webhmi.common/img/icons/Alarm_30x30_MediumDark.png);
  }
}