Очень интересный код.
Ссылки на нужные разделы потеряны, а зато зачем-то картинки в разметке.
<ul class="header__nav">
<li class="nav__item">
<a class="nav__link nav__link--favorites" href="">
<span class="visually-hidden">Избранное</span>
</a>
</li>
<li class="nav__item">
<a class="nav__link nav__link--profile" href="">
<span class="visually-hidden">Профиль</span>
</a>
</li>
<li class="nav__item">
<a class="nav__link nav__link--card" href="">
<span class="visually-hidden">Корзина</span>
</a>
</li>
</ul>
.header__nav {
display: flex;
gap: 42px;
}
.nav__link {
display: block;
width: 44px;
height: 44px;
border-radius: 8px;
background-color: rgb(246, 246, 246);
}
/* доступно скрываем текст */
.visually-hidden {
position: fixed;
transform: scale(0);
}
И в модификаторы пишете фоны для модификаторов ссылок. Или для их псевдоэлементов, как удобнее.
Если с псевдо, то либо делаем их инлайн-блочными и
vertical-align: top;
и дописываем сcылкам
align-content: center;
text-align: center;
либо ссылки делаем флексами и стандартно
display: flex;
align-items: center;
justify-content: center;
https://jsfiddle.net/wav1q8kr/