How to fix checkbox tick offset in chrome?

I'm developing a checkbox for a component library and the designers want me to use a custom SVG for the tick mark. The problem is that on Firefox the checkbox looks correct, but on Chrome the SVG is offset towards the top.

Changing the flex properties on the container doesn't seem to fix the problem.

Firefox

Chrome

My JSX:

<label>
  <input
    type="checkbox"
    className={'checkbox'}
    {...rest}
    ref={ref}
  />
  <span className="checkbox-label">
    {label}
  </span>
</label>

My CSS:

.checkbox {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

/* Label style */
.checkbox + .checkbox-label {
  cursor: pointer;
  display: flex;
  gap: 8px;
}

/* Checkbox un-checked style */
.checkbox + .checkbox-label::before {
  box-sizing: border-box;
  content: "";
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  max-width: 24px;
  width: 24px;
  height: 24px;
}

/* Checked checkbox style */
.checkbox:checked + .checkbox-label::before {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'><polyline points='20 6 9 17 4 12'></polyline></svg>");
  color: white;
  background-color: #bcbcbc;
  border: none;
}

Any idea what I'm missing here?