JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<span class="si-icon si-icon-hamburger-cross" data-icon-name="hamburgerCross"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" width="64" version="1.1" height="64"><g>
		<path d="M5.0916789,20.818994C5.0916789,20.818994,58.908321,20.818994,58.908321,20.818994" stroke-linejoin="bevel" stroke-width="5" stroke="#fff" fill="none"></path>
		<path transform="matrix(1,0,0,1,0,0)" style="opacity: 1;" d="m 5.1969746,31.909063 53.8166424,0" stroke-linejoin="bevel" stroke-width="5" stroke="#fff" fill="none"></path>
		<path d="M5.0916788,42.95698C5.0916788,42.95698,58.908321,42.95698,58.908321,42.95698" stroke-linejoin="bevel" stroke-width="5" stroke="#fff" fill="none"></path>
	</g></svg></span>

CSS

si-icons span {
    display: inline-block;
    width: 64px;
    height: 64px;
    margin: 40px 30px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center center;
}
svg:not(:root) {
    overflow: hidden;
}
body{
    background-color: red;
}