I thought my alignment problems came from the images, but they actually came from the text!

In this example, the SVG will be centered, but since the text doesn't have its own container node that CSS can target (not even an implicit one), it'll stay in the default location:

<div>
  <svg class="align-middle" />
  Some text
</div>

If you put the text into a container, you can center it alongside the icon:

<div>
  <svg class="align-middle" />
  <span class="align-middle">Some text</span>
</div>

No flexbox needed.