<div class="badge-container badge-parent">
    <img class="avatar size-M " src="/components/images/p3.jpg" alt="avatar" srcset="">
    <span class="badge-child round green-circle" title="online">
    </span>
</div>
<div class="badge-container badge-parent">
    <img class="avatar size-M " src="/components/images/p3.jpg" alt="avatar" srcset="">
    <i class="badge-child round fas fa-moon fa-flip-horizontal" title="idle"></i>
</div>

<div class="badge-container badge-parent">
    <img class="avatar size-M " src="/components/images/p3.jpg" alt="avatar" srcset="">
    <i class="badge-child fas fa-mobile-alt" title="online"></i>
</div>

<div class="badge-container badge-parent">
    <img class="avatar size-M " src="/components/images/p3.jpg" alt="avatar" srcset="">
    <img class="badge-child dnd-icon" title="do not disturb" src="https://img.icons8.com/color/48/000000/do-not-disturb.png" />
</div>