How to change **tick** color in a bootstrap checkbox?

I have the following html code styled with bootstrap:

<div class="col-lg-4 col-12 text-center">
  <div style="width: 80%; margin: auto">
    <ul class="list-group">
      
    </ul>
  </div>
</div>

And I'm trying to change the checkbox ticks button. I also defined some style for my checkboxes:

@keyframes shadowAnimation {
  0% {
    box-shadow: 0 0 0 0.25rem rgba(255, 152, 0, 0.9);
  }
  100% {
    box-shadow: 0 0 0 0.25rem rgba(255, 152, 0, 0.1);
  }
}

.animate-checkbox {
  animation: shadowAnimation 1s ease-in-out;
}

input[type="checkbox"].form-check-input:focus-visible,
input[type="checkbox"].form-check-input:focus {
  border-color: #212529;
  border: var(--bs-border-width) solid #ff9800 !important;
}

And animation is controlled by javascript. I don't want these option are overwritten, but i can achieve to have the tick colored.
Any suggestion? Thanks in advance.