html { padding: 50px; } button { width: 32px; height: 32px; border: 0; margin: 4px; cursor: pointer; } button.icon-plus { background: url(http://dahlström.net/tmp/sharp-icons/svg-icon-target.svg#plus) no-repeat; } button.icon-chart { background: url(http://dahlström.net/tmp/sharp-icons/svg-icon-target.svg#chart) no-repeat; } img { width: 32px; height: 32px; border: 0; margin: 4px; }
<p>As background image</p> <button class="icon-plus"></button> <button class="icon-chart"></button> <p> With img element</p> <img src="http://dahlström.net/tmp/sharp-icons/svg-icon-target.svg#plus"> <img src="http://dahlström.net/tmp/sharp-icons/svg-icon-target.svg#chart">
// SVG Stacks Demo // Current browser-support: Firefox // SVG modification + technique by @erikdahlstrom