JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Line height + vertical align</h3>
<div class="b">
    <img src="http://dummyimage.com/50">
</div>
<div class="b">
    <img src="http://dummyimage.com/25x50">
</div>
<div class="b">
    <img src="http://dummyimage.com/50x25">
</div>

<h3>Line height + vertical align + font 0px</h3>
<div class="b smallfont">
    <img src="http://dummyimage.com/50">
</div>
<div class="b smallfont">
    <img src="http://dummyimage.com/25x50">
</div>
<div class="b smallfont">
    <img src="http://dummyimage.com/50x25">
</div>

<h3>Line height + vertical align + adjustment</h3>
<div class="b adjust">
    <img src="http://dummyimage.com/50">
</div>
<div class="b adjust">
    <img src="http://dummyimage.com/25x50">
</div>
<div class="b adjust">
    <img src="http://dummyimage.com/50x25">
</div>

CSS

.b {
    margin: 5px;
    padding: 0;
    background: red;
    width: 52px;
    height: 52px;
    
    line-height: 52px;
    text-align: center
}

.b img {
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.b.smallfont {
    font-size: 0;
}

.b.adjust {
    line-height: 48px;
}