Как можно выровнять иконки так, чтобы они были на одной линии?

Для того чтобы выровнять иконки по центру, необходимо добавить свойство `justify-content:center` к контейнеру flex для выравнивания по горизонтали и `align-items:center` для выравнивания по вертикали. 

Если иконка остается в верхнем левом углу даже после добавления указанных свойств, возможно, что контейнер flex имеет ширину и высоту, которые соответствуют размерам самой иконки. В этом случае, чтобы иконка находилась по центру, необходимо задать контейнеру flex большие размеры или добавить другие элементы в контейнер для создания дополнительного пространства, по которому иконка будет центрироваться. 

Также стоит убедиться, что свойства `justify-content` и `align-items` применяются к нужному контейнеру и не переопределяются другими стилями. 

Если после применения указанных рекомендаций иконка все равно не центрируется, можно также попробовать использовать комбинацию свойств `justify-content:center` и `align-items:center` вместо каждого отдельно.

Может потому что свойства align-items: center; justify-content: center; надо применять к .nav-icons , а не к .header__nav-icons ? 
 
 .header__nav-icons у вас это обёртка (ul) для .nav-icons (li), в которых уже лежат иконки (svg) 
 

Очень интересный код. 
 Ссылки на нужные разделы потеряны, а зато зачем-то картинки в разметке. 
 
 
<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/