Replace default bullets in a list to an img with optional vertical center alignment

list-item.html

<ul class="my-list">
  <li class="my-list__list-item">First item</li>
  <li class="my-list__list-item">Second item</li>
  <li class="my-list__list-item my-list__list-item--center">Third item</li>
</ul>

list-item.scss

.my-list {
  list-style-type: none;
  &__list-item {
    margin-bottom: 10px;
    padding-left: 60px;
    &::before {
      content: url('tick.png');
      margin: 0 -40px;
      position: absolute;
      width: 20px;
    }
    &--center {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
}