How to style a checkbox in Rails using cross and tick SVGs

Question

I'm trying to make a checkbox toggle that will display an 'X' on when it is untoggled and a check mark when it is toggled. I have both the X and check mark as SVGs and I just need help placing them on the toggle. To complicate things a little, I am writing this in Ruby on Rails using haml and Tailwind and using form helpers as well. This is what I have so far:

<div class="inline-block w-full text-sm font-medium text-gray-700 mt-1 toggle">
  <%= form.label :this_thing, "Hide", class: "label flex items-center cursor-pointer relative text-sm mt-3" do %>
    <%= form.check_box :this_thing, { class: "sr-only", include_hidden: false } %>
    <div class="toggle-bg"></div>
  <% end %>
</div>

And my CSS:

.toggle {
  @apply relative block text-center w-full;
}

input[type="checkbox"] {
  @apply absolute top-0 left-0 z-[100] w-full h-6 align-middle cursor-pointer opacity-0;
}

.toggle-bg {
  @apply relative inline-block align-middle cursor-pointer;
}

// Pill-shaped background of toggle
.toggle-bg:before {
  @apply block w-11 h-6 bg-gray-200 rounded-[12px] transition-colors duration-300;
  content: "";
}

// Circle shaped part that moves
.toggle-bg:after {
  @apply absolute top-0.5 left-0.5 block w-5 h-5 visible bg-white rounded-[28px];
  content: "";
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
  transition: left 0.3s ease;
}

input[type="checkbox"]:checked ~ .toggle-bg:before {
  @apply bg-success;
}

input[type="checkbox"]:checked ~ .toggle-bg:after {
  @apply top-0.5 left-[22px];
}

input[type="checkbox"]:focus ~ .toggle-bg:before {
  outline: none;
  box-shadow: 0 0 0 3px #0859A6;
}

And the SVGs I want to use:

Cross:

<svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 3L5 5M1 5L3 3L1 5ZM3 3L5 1L3 3ZM3 3L1 1L3 3Z" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Checkmark:

<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 1L3 5L1 3" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

So essentially, I would like my toggle to show the X on the circle and then when the toggle is clicked the circle will move to the right and there will be a checkmark instead of the X.