JSFiddle - React, Tailwind, and code Playground

HTML

<p>Some example for my Habrahabr article. <span class="icon icon-profile-black"></span></p>
<p><h1><span class="icon icon-ok-black"></span> Header 1 — it works</h1></p>
<p>It works<span class="icon icon-ok-black"></span> even with <sub><span class="icon icon-ok-black"></span>sub</sub>and<sup>sup<span class="icon icon-ok-black"></span></sup> elements.</p>
<p><span class="icon icon-ok-black"></span>
    <small>
        <span class="icon icon-ok-black"></span>
        <small>
            <span class="icon icon-ok-black"></span>
            <small>
                <span class="icon icon-ok-black"></span>
            </small>
        </small>
    </small>
</p>

CSS

.icon {
    background-image: url(http://i.imgur.com/DV0Bl7B.png);
    background-size: 10em 2em;
    width: 1em;
    height: 1em;
    display: inline-block;
}

.icon-ok-black {
    background-position: -7em -1em;
}

.icon-profile-black {
    background-position: -9em 0;
}