Как правильно сверстать этот элемент?

.mail {
  color: #000;
  font-size: 20px;
  text-decoration: none;
  padding-left: 2em;
  background-image: url('https://p1.hiclipart.com/preview/416/697/141/email-symbol-voicemail-letter-k9-mail-line-png-clipart-thumbnail.jpg');
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
}

<a class="mail" href="malito:[email protected]">
  [email protected]
</a>

.mail {
  color: #000;
  font-size: 20px;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.mail__img {
  margin-right: 10px;
  width: 1.5em;
}

<a class="mail" href="malito:[email protected]">
  <img class="mail__img" src="https://p1.hiclipart.com/preview/416/697/141/email-symbol-voicemail-letter-k9-mail-line-png-clipart-thumbnail.jpg" alt=""> [email protected]
</a>