Convert Snippet to Image

Preview:

<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>

Download PNG Download JPEG Download 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