Preview:
<div class="badge-wrapper">
    <img class="avatar avatar-lg" src="/assets/avatar.jpg" alt="avatar">
    <span class="badge badge-status status-online"></span>
</div>
<div class="badge-wrapper">
    <img class="avatar avatar-md" src="/assets/avatar.jpg" alt="avatar">
    <span class="badge badge-status status-offline"></span>
</div>
<div class="badge-wrapper">
    <img class="avatar avatar-sm" src="/assets/avatar.jpg" alt="avatar">
    <span class="badge badge-status status-online"></span>
</div>
<div class="badge-wrapper">
    <img class="avatar avatar-xs" src="/assets/avatar.jpg" alt="avatar">
    <span class="badge badge-status status-offline"></span>
</div>
<div class="badge-wrapper">
    <button><i class="btn-icon fas fa-shopping-cart"></i></button>
    <span class="badge badge-number">5</span>
</div>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter