Cant get fa-icon aligned vertically with img

Question

So I have been breaking my head about how to get these elements to align, I have gotten pretty close, but the svg shape for the unity logo is not willing to budge... Does someone see anything that I am missing?

There will be quite a few elements, most of them images when they dont have an fa-icon, so I am going to need this quite a few times.

<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...I put that shhh on everything.

I'm guessing/hoping that's a bootstrap 4 row? Turn the row in to a flex box, set align items center, and I'd strip out the display attributes from img and.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>