How to line up an icon with a stacked heading and subtext?

I have been wrestling with lining up an image icon (not a font icon) with a heading and text.

I have found some good examples of how this is done but not with a heading and if so it was using a fontawesome icon which I am trying to avoid.

.soccer-icon {
  width: 50px;
}

.icon-header {
  font-size: 18px;
  line-height: 32px;
  display: block !important;
  padding-right: 20px
}

.icon-area {
  display: flex;
  align-items: center;
}

<div class="icon-area">
  <p>
    <img class="soccer-icon" src="https://cdn1.iconfinder.com/data/icons/sports-balls-4/32/balls_filled_outline-01-512.png" />
  </p>
  <h3 class="icon-header">Paper Ballot Inspection</h3>
  <p>A full count of the ballots, including scanning and visual inspection of all ballots.</p>
</div>

from Recent Questions - Stack Overflow https://ift.tt/2WteL5w
https://ift.tt/eA8V8J