JSFiddle - React, Tailwind, and code Playground

HTML

<!--Иконки-->
<div class="wrap">
    <span class="icon i1"></span>
    <span class="icon i2"></span>
    <span class="icon i3"></span>
    <span class="icon i4"></span>
    <br/>
    <span class="iconized i2">blablablablabla</span>
    <ul>
        <li class="iconized i4">Undo</li>
        <li class="iconized i5">Redo</li>
    </ul>
    <p class="iconized i1">wrqwerkjh kwjehr kjfh ksj hdfksj hfkjeh fkejfh kasjdf haksjdf hkasjd hfksj dfhasdf</p>
</div>

CSS

.wrap{
    background-color: #bbb;
    padding: 10px;
}
.i1, .i1:before{background-position: 0px 0px;}
.i2, .i2:before{background-position: -16px 0px;}
.i3, .i3:before{background-position: -32px 0px;}
.i4, .i4:before{background-position: -64px -64px;}
.i5, .i5:before{background-position: -128px -64px;}
.icon{
    width: 16px;
    height: 16px;
    display: inline-block;
    background-color: #fff;
    background-image: url("http://code.jquery.com/ui/1.11.0/themes/smoothness/images/ui-icons_222222_256x240.png");
}

.iconized{
    --padding-left: 18px;
}
.iconized:before{
    content:"";
    width:16px;
    height:16px;
    display:inline-block;
    background-color: #fff;
    background-image:url("http://code.jquery.com/ui/1.11.0/themes/smoothness/images/ui-icons_222222_256x240.png");
}
.iconized.i4:before{
    
}