JSFiddle - React, Tailwind, and code Playground

HTML

<div id="icon-container">
    <img id="sm-image" src="https://pbs.twimg.com/profile_images/506394721812373504/IDmMstyJ.jpeg">
</div>
<div style="width:100%;background-color:red;height:2px;"></div>

CSS

#icon-container {
    width: 36px;
    height: 36px;
    border: 1px dashed red;
    position: relative;
}

#sm-image {
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: width .5s, height .5s;
}

#sm-image:hover {
    width: 36px;
    height: 36px;
}