<label class="radikalwp-check">
  <input type="checkbox">
  <span class="radikalwp-check__box">
    <svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/><//svg>
  <//span>
  <span class="radikalwp-check__label">قوانین را می‌پذیرم<//span>
<//label>

.radikalwp-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.radikalwp-check input { display: none; }
.radikalwp-check__box {
  width: 24px;
  height: 24px;
  border: 2px solid #cbd5e1;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .25s ease;
}
.radikalwp-check__box svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset .3s ease .1s;
}
.radikalwp-check input:checked + .radikalwp-check__box {
  background: #6366f1;
  border-color: #6366f1;
}
.radikalwp-check input:checked + .radikalwp-check__box svg { stroke-dashoffset: 0; }
.radikalwp-check__label { font-size: 14px; color: #475569; }