How do I vertically center an image with flex when the parent container has align items of baseline?

What I have is the following:

I have an icon on the left that represents a product. Then in H1, I have a product category, and with an h2, I have a product name.

The icon, h1, and h2 are in a parent div with flex and align-items value of baseline. So the text is baseline aligned.

Due to the dynamic nature of how the page title here is retrieved, the icon has to be in this parent div that is baseline aligned.

How can I vertically center the icon within this parent div with flexbox? I know how to accomplish this with vertical alignment and setting line height, but I’d prefer a flexbox approach.

Parent:

.parent {
  display: flex;
  align-items: baseline;
}

HTML skeleton:

<div class="parent">
  <div>Icon</div>
  <div>Product Category</div>
  <div>Product Name</div>
</div>

>Solution :

You can set align-self:center on the icon if you cannot change the parent div’s align-items value to center. Find below an example:

.parent {
  display: flex;
  align-items: baseline;
  gap:1rem; /* added just for readability, you can remove it */
}


.parent div:first-child{
  align-self:center;
}

<div class="parent">
  <div>Icon</div>
  <h1>Product Category</h1>
  <h2>Product Name</h2>
</div>