<div class="scl-badge-wrapper"> <img src="#" alt="avatar" class="scl-avatar scl-avatar-lg"> <div class="scl-badge scl-badge-online"></div> </div> <div class="scl-badge-wrapper"> <img src="#" alt="avatar" class="scl-avatar scl-avatar-lg"> <div class="scl-badge scl-badge-offline"></div> </div> <div class="scl-badge-wrapper"> <img src="#" alt="avatar" class="scl-avatar scl-avatar-md"> <div class="scl-badge scl-badge-away"></div> <div class="scl-badge-wrapper"> <img src="#" alt="avatar" class="scl-avatar scl-avatar-sm"> <div class="scl-badge scl-badge-busy"></div> </div>
Preview:
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