JSFiddle - React, Tailwind, and code Playground

HTML

<input type = "checkbox" id = "togglePen" />
    <label for = "togglePen"></label>

CSS

input[type = "checkbox"] {
        display: none;
    }
    
    label {
        display: inline-block;
        width: 16px;
        height: 16px;
        background: white 
                    url('http://i.imgur.com/JOEqZaH.png')
                    no-repeat;
        cursor:pointer;
    }
    
    input[type = "checkbox"]:checked + label {
        background-image: url('http://i.imgur.com/nJyPSJr.png');
    }