Не могу получить fa-icon выровненный вертикально с img

Question

Так что я ломал голову над тем, как привести эти элементы в соответствие, я довольно близко подошел, но форма svg для логотипа единства не хочет сдвинуться с места ... Кто-то видит что-то, чего мне не хватает?

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

<div class="row">
    <fa-icon class="col icon" [icon]="['fab', 'angular']"></fa-icon>
    <fa-icon class="col icon" [icon]="['fab', 'github']"></fa-icon>
    <img class="col" src="./../../../assets/svg/unity-69-logo-svg-vector.svg">
</div>

img {
  display: block;
  background-color: black;
  color: white;
  width: 100px;
  height: 100px;
  margin: auto;
  padding: 25px;
}

.icon {
  display: inline-block;
  font-size: 40px;
  line-height: 100px;
  background-color: black;
  color: white;
  width: 100px;
  height: 100px;
  text-align: center;
  vertical-align: bottom;
}

Answer 1

Flexbox ... Я положил это тссс на все.

Я предполагаю / надеюсь, что это 4-й ряд начальной загрузки? Превратите строку во гибкий блок, установите центр выравнивания элементов, и я бы убрал атрибуты отображения из img и .icon

<div class="row d-flex align-items-center">
    <fa-icon class="col icon" [icon]="['fab', 'angular']"></fa-icon>
    <fa-icon class="col icon" [icon]="['fab', 'github']"></fa-icon>
    <img class="col" src="./../../../assets/svg/unity-69-logo-svg-vector.svg">
</div>