Solutions to align the icons with the text:

• the lh unit in translateY
• icon as pseudo-elements

The author solution:

.list-item {
  display: flex;
  gap: 0.5rem;
}

.list-item::before {
  content: "";
  --size: var(--icon-size);
  --offset: calc((1lh - var(--size)) / 2);
  flex-shrink: 0;
  aspect-ratio: 1;
  width: var(--size);
  height: auto;
  background-image: url("data:image/svg+xml,%3Csvg ....");
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateY(var(--offset));
}