CheckBox

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
  </head>

  <body>
    <div class="checkbox-1">
      <input id="check1" type="checkbox" checked/>
      <label for="check1">Label</label>
    </div>
    <div class="checkbox-2">
      <input id="check2" type="checkbox" checked/>
      <label for="check2">Label</label>
    </div>
  </body>
</html>

/* Add your styles here */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

div {
  padding-left: 15px;
  padding-right: 15px;
  margin-top: 15px;
  margin-bottom: 15px;
}

input[type=checkbox] {
  appearance: none;
  aspect-ratio:  1/1;
  height: 18px;
  position: relative;
  margin: 0;
  box-shadow: 0 0 1px #000;
  overflow: hidden;
}

.checkbox-1 label,
.checkbox-2 label {
  margin-left: 5px;
}

.checkbox-2 input[type=checkbox]::before,
.checkbox-1 input[type=checkbox]::before {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-color: black;
  background-image: url(icon.svg);
  background-position: center center;
  background-size: cover;
  opacity: 0;
}

.checkbox-1 input[type=checkbox]::before {
  transition: opacity .3s ease;
}

.checkbox-2 input[type=checkbox]::before {
  transition: opacity .3s ease, top .1s ease .2s;
  position: absolute;
  top: -100%;
  filter: invert(1);
}


.checkbox-1 input[type=checkbox]:checked::before,
.checkbox-2 input[type=checkbox]:checked::before {
  opacity: 1;
}

.checkbox-2 input[type=checkbox]:checked::before {
  top: 0;
}

// Add your code here

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 496" style="enable-background:new 0 0 496 496" xml:space="preserve"><path d="M445.5 94.1c-9.3-9.3-24.4-9.3-33.7 0L188.5 317.4 84.2 213.2c-9.3-9.3-24.4-9.3-33.7 0l-33.7 33.7c-9.3 9.3-9.3 24.4 0 33.7l154.8 154.8c9.3 9.3 24.4 9.3 33.7 0l273.8-273.8c9.3-9.3 9.3-24.4 0-33.7l-33.6-33.8z" style="fill:#fff"/></svg>