Manipulate list type image (icon) size

index.html

<h1>Dynamic list image size</h1>

<ul>
    <li>Aliis scythiam undis hominum bracchia ventos tractu nec montibus. Modo tractu vesper prima nec fontes triones.</li>
    <li>Caelo coercuit exemit. Glomeravit siccis principio supplex limitibus. Diffundi effervescere. Diremit cornua ubi flexi siccis</li>
    <li>Modo extendi ita tumescere. Quisque tanto. Circumfuso metusque innabilis. Subsidere nisi speciem.</li>
    <li>Fratrum pressa proximus concordi minantia terrae. Cum modo</li>
</ul>

<h2>Image original size</h2>
<p><img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Kitchen-List-ingredients-icon.png"></p>
    <em>Source: <a href="http://www.iconarchive.com/show/icons8-metro-style-icons-by-visualpharm/Kitchen-List-ingredients-icon.html" target="_blank">http://www.iconarchive.com/show/icons8-metro-style-icons-by-visualpharm/Kitchen-List-ingredients-icon.html</a></em>

list.css

ul > li {
    margin-left: 0em;
    list-style-type: none;
}
ul > li:before {
    position: relative;
    margin-left: -2em;
    content:"";
    display: block;
    float: left;
    height: 1em; 
    width: 1em;
    background: transparent url(http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Kitchen-List-ingredients-icon.png) left bottom no-repeat;
    background-size: 1em;
}