Как сверстать чекбокс?

* { 
  padding: 0; 
  margin: 0; 
} 
 
.check { 
  border: 2px solid #ccc; 
  display: inline-block; 
  padding: 6px; 
  border-radius: 4px; 
  outline: none; 
  transition: 0.34s; 
  cursor: pointer; 
  transform: scale(0.7); 
} 
 
.check .fas { 
  font-size: 28px; 
  color: #ccc; 
  transform: scale(0.8); 
  transition: 0.24s 0.34s cubic-bezier(0, 0.99, 0.54, 0.33); 
  opacity: 0; 
} 
 
.checked { 
  border: 2px solid #fff; 
  animation: blind 0.34s linear; 
  transform: scale(0.9); 
} 
 
@keyframes blind { 
  0% { 
    transform: scale(0.2); 
  } 
  100% { 
    transform: scale(0.9); 
  } 
} 
 
.fas.active { 
  color: #fff; 
  opacity: 1; 
  transform: scale(0.8); 
} 
 
.items { 
  display: flex; 
  padding: 50px 80px; 
  background-color: #00B6BA; 
  color: #fff; 
  width: 480px; 
  margin: 30px auto; 
} 
 
.items a { 
  color: #ffc00f; 
} 
 
.item:nth-of-type(1) { 
  width: 90px; 
} 
 
#checkbox { 
  display: none; 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" /> 
 
<div class="items"> 
  <div class="item"> 
    <form action=""> 
      <label for="checkbox"> 
      <div id="check" class="check" > 
        <i id="fas" class="fas fa-check"></i> 
      </div> 
        <input type="checkbox" id="checkbox"> 
      <label> 
    </form> 
    </div> 
   <div class="item"> 
     <p> 
       Регистрируясь в системе, я принимаю<br> 
       <a href="#">Условия соглашения</a>,<a href="#">Политики конфиденциальности</a><br> 
       и даю согласие на <a href="#">обработку персональных данных.</a> 
     </p> 
  </div> 
</div> 
 
<script> 
var check = document.getElementById("check"); 
var fas = document.getElementById("fas"); 
   
  check.onclick = function (){ 
    this.classList.toggle("checked"); 
    fas.classList.toggle("active"); 
  } 
</script>

body { 
  font-family: 'Open Sans', Arial, sans-serif; 
  font-size: 14px; 
  line-height: 20px; 
} 
 
/* checkboxes */ 
 
label { 
		  cursor: pointer; 
	    display: inline-block; 
	    position: relative; 
	    padding-left: 25px; /* 10 px padding right + 15px input type*/ 
	    margin-right: 10px; /* margin between inputs types */ 
	} 
	 
label:before {   
	    content: ""; 
	    width: 15px; 
	    height: 15px; 
	    position: absolute;   
	    left: 0; 
	} 
	 
input[type=checkbox] {   
    	display: none;   
	} 
	 
.checkbox label:before { 
		background: url('http://i36.photobucket.com/albums/e22/lilsq3/checkbox_small.png') left center no-repeat; 
    margin-top: 2px; 
	} 
	 
input[type=checkbox]:checked + label:before {   
	    background: url('http://i36.photobucket.com/albums/e22/lilsq3/checkbox_selected_small.png') left center no-repeat;   
	} 

<div class="checkbox">   
    <input id="check1" type="checkbox" name="check" value="check1">   
    <label for="check1">Checkbox One</label> 
    <br> 
    <input id="check2" type="checkbox" name="check" value="check2">   
    <label for="check2">Checkbox Two</label>   
</div>