What are the same links with different icons in BEM?

Question

css

We have something like

<ul class='social-list'> //блок
  <li class='social-list-item'> //блок
    <a class='social__btn'>facebook</a> //элемент
   </li>
   <li class='social-list-item'>
    <a class='social__btn'>twitter</a>
   </li>
   <li class='social-list-item'>
    <a class='social__btn'>vk</a>
   </li>
</ul>

And you need to add an icon to the background for each button. How is this implemented according to BEM?
Through the Modifier? <a class='social__btn social__btn--facebook'>...? It seems to be wrong, since there is no state change.
Through a separate Element for each button? <a class='social__btn-facebook'>? It’s somehow not elegant for each button to repeat a bunch of the same rules

Answer 1

Modifier.

Answer 2

make a common class for everyone, and each of them also has its own unique one, then the background in the rules of the common class through a sprite, one picture for all , and each button has its own background-position value. And there won't be too many repetitions.