JSFiddle - React, Tailwind, and code Playground

HTML

<input type="radio" name="test" id="c1" class="checkbox-toggle"><label class="checkbox-custom" for="c1">1</label>
<input type="radio" name="test" id="c2" class="checkbox-toggle"><label class="checkbox-custom" for="c2">2</label>

CSS

.checkbox-toggle {
    display: none;
}
.checkbox-custom::before {
    display: inline-block;
    vertical-align: middle;
    content: '';
    width: 19px;
    height: 19px;
    background-image: url(http://habrastorage.org/storage2/ef1/568/62c/ef156862cd09694730f75a069ee3d8f3.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    cursor: pointer;
}
.checkbox-toggle:checked + .checkbox-custom::before {
    background-position: -19px 0;
}