JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pictureContainer">
  
</div>
<div id="textContainer">
    <h1>
        H<span class="i-container">&inodot;<img id="greenDot" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Ski_trail_rating_symbol-green_circle.svg/64px-Ski_trail_rating_symbol-green_circle.svg.png"></span> 
        World
    </h1>
</div>

CSS

#textContainer {
    text-align: center;
}

#greenDot {
    height: 10px;
    width: 10px;
}

.i-container{
    position: relative;
}

.i-container img{
    position: absolute;
    top: 0;
    left: 0;
}