Using SVG graphics in combination with the CSS currentColor property to support high contrast theme options in operating systems.
Rendered SVG
SVG Code
<svg aria-hidden=”true” width=”11px” height=”11px” viewBox=”0 0 133 79″ version=”1.1″>
<title>menu open/close icon</title>
<g stroke=”none” stroke-width=”1″ fill=”none” fill-rule=”evenodd”>
<g transform=”translate(-50.000000, -122.000000)” fill=”currentColor”>
<g transform=”translate(45.000000, 64.000000)”>
<path d=”M33.5,21 C40.4035594,21 46,26.5964406 46,33.5 L46,96.5 L109,96.5 C115.903559,96.5 121.5,102.096441 121.5,109 C121.5,115.903559 115.903559,121.5 109,121.5 L34,121.5 C30.4210403,121.5 27.1933842,119.995891 24.9146718,117.585313 C22.5041093,115.306616 21,112.07896 21,108.5 L21,33.5 C21,26.5964406 26.5964406,21 33.5,21 Z” transform=”translate(71.250000, 71.250000) rotate(-45.000000) translate(-71.250000, -71.250000) ” />
</g>
</g>
</g>
</svg>
<title>menu open/close icon</title>
<g stroke=”none” stroke-width=”1″ fill=”none” fill-rule=”evenodd”>
<g transform=”translate(-50.000000, -122.000000)” fill=”currentColor”>
<g transform=”translate(45.000000, 64.000000)”>
<path d=”M33.5,21 C40.4035594,21 46,26.5964406 46,33.5 L46,96.5 L109,96.5 C115.903559,96.5 121.5,102.096441 121.5,109 C121.5,115.903559 115.903559,121.5 109,121.5 L34,121.5 C30.4210403,121.5 27.1933842,119.995891 24.9146718,117.585313 C22.5041093,115.306616 21,112.07896 21,108.5 L21,33.5 C21,26.5964406 26.5964406,21 33.5,21 Z” transform=”translate(71.250000, 71.250000) rotate(-45.000000) translate(-71.250000, -71.250000) ” />
</g>
</g>
</g>
</svg>