JSFiddle - React, Tailwind, and code Playground

HTML

<ul class = "regular">
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class = "regular small">
        <li></li>
        <li></li>
        <li></li>
    </ul>

CSS

* {
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: none;
    display: table;
}

body {
    padding: 10px;
}

    .regular > li {
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right: 5px;
        background: url(http://i59.tinypic.com/v4crk2.png)
                    no-repeat
                    -340px -280px/680px;
    }
    
    .regular:not(.small) > li:nth-of-type(2) {
        background-position: -30px -321px;
    }
    
    .regular:not(.small) > li:nth-of-type(3) {
        background-position: -30px -485px;
    }

    .regular.small > li {
        display: inline-block;
        width: 12px;
        height: 12px;
        margin-right: 3px;
        background-position: -255px -210px;
        background-size: 510px;
    }
    
    .regular.small > li:nth-of-type(2) {
        background-position: -23px -241px;
    }
    
    .regular.small > li:nth-of-type(3) {
        background-position: -23px -363px;
    }