Icon checkmark in circle

Icon checkmark in circle

by pj_js15

HTML

<span class="checkmark">
    <div class="checkmark_circle"></div>
    <div class="checkmark_stem"></div>
    <div class="checkmark_kick"></div>
</span>

CSS

.checkmark {
    display:inline-block;
    width: 22px;
    height:22px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

.checkmark_circle {
    position: absolute;
    width:20px;
    height:20px;
    background-color: #00A889;
    border-radius:11px;
    left:0;
    top:0;
}

.checkmark_stem {
    position: absolute;
    width: 3px;
    height: 10px;
    background-color: #fff;
    left: 10px;
    top: 4px;
}

.checkmark_kick {
    position: absolute;
    width: 3px;
    height: 3px;
    background-color: #fff;
    left: 7px;
    top: 11px;
}