How to set a custom checkmark and checkmark box?

I've created a custom checkbox based on my needs, but rather than use the default checkmark, I have my own SVG I want to use. Additionally, I can't seem to attach a border radius to my custom checkbox.

How do I set a custom checkmark and checkbox radius to the present styles?

body {
  font-size: 16px;
}

.checkboxes {
  display: flex;
  flex-direction: column;
}
.checkboxes .checkbox {
  display: flex;
  flex-direction: row;
}
.checkboxes .checkbox + .checkbox {
  margin-top: 1rem;
}
.checkboxes .checkbox input[type=checkbox] {
  width: 1.5rem;
  height: 1.5rem;
}
.checkboxes .checkbox input[type=checkbox]:hover {
  cursor: pointer;
}
.checkboxes .checkbox input[type=checkbox]::before {
  border: 2px solid purple;
}
.checkboxes .checkbox input[type=checkbox] + label {
  margin-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #000A70;
  flex: 1;
}
.checkboxes .checkbox input[type=checkbox] + label:first-line {
  align-items: center;
}
.checkboxes .checkbox input[type=checkbox]:checked {
  accent-color: #005FEC;
}
.checkboxes .checkbox input[type=checkbox]:checked + label::after {
  content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="12" height="6" fill="none" viewBox="0 0 12 6"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.2426 2.24264L11.8284 0.828427L4.75811 7.89874L1.92969 5.07031L0.515474 6.48453L3.3439 9.31295L3.34315 9.31371L4.75736 10.7279L4.75811 10.7272L6.17233 9.31295L13.2426 2.24264Z" fill="white"/></svg>');
}

<div class="checkboxes">
  <div class="checkbox">
    <input type="checkbox" id="check1">
    <label for="check1">Checkbox One</label>
  </div>
  <div class="checkbox">
    <input type="checkbox" id="check2" checked="checked">
    <label for="check2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni eos incidunt, est nesciunt amet eum iure omnis quo. Excepturi ducimus atque numquam quis voluptatem consectetur facilis et tenetur repellat quae.</label>
  </div>  
  <div class="checkbox">
    <input type="checkbox" id="check3" checked="checked">
    <label for="check3">Checkbox One</label>
  </div>  
</div>