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

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

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

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

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

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

Очень интересный код. <br/> Ссылки на нужные разделы потеряны, а зато зачем-то картинки в разметке. <br/> <br/> <pre><code class="html">&lt;ul class="header__nav"&gt;
    &lt;li class="nav__item"&gt;
      &lt;a class="nav__link nav__link--favorites" href=""&gt;
        &lt;span class="visually-hidden"&gt;Избранное&lt;/span&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="nav__item"&gt;
      &lt;a class="nav__link nav__link--profile" href=""&gt;
        &lt;span class="visually-hidden"&gt;Профиль&lt;/span&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="nav__item"&gt;
      &lt;a class="nav__link nav__link--card" href=""&gt;
        &lt;span class="visually-hidden"&gt;Корзина&lt;/span&gt;
      &lt;/a&gt;
    &lt;/li&gt;
&lt;/ul&gt;</code></pre> <br/> <br/> <pre><code class="css">.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);
}</code></pre> <br/> И в модификаторы пишете фоны для модификаторов ссылок. Или для их псевдоэлементов, как удобнее. <br/> <br/> Если с псевдо, то либо делаем их инлайн-блочными и <code>vertical-align: top;</code> и дописываем сcылкам <br/> <pre><code class="css">align-content: center;
text-align: center;</code></pre> <br/> <br/> либо ссылки делаем флексами и стандартно <br/> <pre><code>display: flex;
  align-items: center;
  justify-content: center;</code></pre> <br/> <br/> <a href="https://jsfiddle.net/wav1q8kr/" rel="nofollow">https://jsfiddle.net/wav1q8kr/</a>