I have following HTML:

<div className={styles.checkBox}>
  {((props.itemsWithSelection &&
    props.itemsWithSelection?.[key] == 1) ||
    (!props.itemsWithSelection &&
      invoiceItemsIncluded2[key].defaultValue == 1)) && (
    <Check2 className={styles.checked} />
  )}
</div>

and the css:

.checkBox {
  background-color: #12341b;
  top: 30px;
  left: 170px;
  height: 60px;
  width: 60px;
  position: absolute;
  transition: 0.2s;
  z-index: 5;
}

.checked {
  color: white;
  padding: 10px;
}

In Chrome checkmarkicon is centered well, but not in Safari, why?

If I do not use any padding (10px) then it looks good.