HTML / CSS h-tag and icons in one row (display: inline)

Question

Good evening dear community,

I am building one of my first HTML / CSS projects.

I want to arrange a h-tag and three small icon (webp-data) in a row. What am I doing wrong?

I have all four elements framed in a div and have formulated both for the div and for the individual elements in CSS display: inline. The three icons appear side by side but the h-tag still behaves like a block element.

HTML
      <div id="kanon-r">
      <h2 id="kanon-h">KANON</h2>
      <img src="republik.webp" alt="Republik-Logo" class="icon">
      <img src="klonkriege.webp" alt="Klonkriege-Logo" class="icon">
      <img src="imperium.webp" alt="Imperium-Logo" class="icon">
</div>

#kanon-r {
    display: inline;
    text-align: right;
    position: relative;
}

#kanon-h {
    display: inline;
    position: relative;
}

.icon {
    display: inline;
    position: relative;
    align-items: right;

Answer 1

It works for me. https://codepen.io/deleite/pen/JjaPYxL

.icon {
    display: inline;
    position: relative;
    align-items: right;
    height:32px;
    width:32px;
} 

U are probably missing the size of the images? Maybe set the size first?