<!-- Menu Black -->
<svg width="48px" height="48px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
    <title>Menu</title>
    <style type="text/css">
        .menu--black {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #000000;
        }
    </style>
    <g>
        <g>
            <path class="menu--black" d="M4,18h16v-2H4V18z M4,13h16v-2H4V13z M4,6v2h16V6H4z" />
        </g>
    </g>
</svg>

<div style="background: #2774AE; display: inline-block;">
    <!-- Menu White -->
    <svg width="48px" height="48px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
        <title>Menu</title>
        <style type="text/css">
            .menu--white {
                fill-rule: evenodd;
                clip-rule: evenodd;
                fill: #FFFFFF;
            }
        </style>
        <g>
            <g>
                <path class="menu--white" d="M4,18h16v-2H4V18z M4,13h16v-2H4V13z M4,6v2h16V6H4z" />
            </g>
        </g>
    </svg>
</div>

<!-- Menu Blue -->
<svg width="48px" height="48px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
    <title>Menu</title>
    <style type="text/css">
        .menu--blue {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #2774AE;
        }
    </style>
    <g>
        <g>
            <path class="menu--blue" d="M4,18h16v-2H4V18z M4,13h16v-2H4V13z M4,6v2h16V6H4z" />
        </g>
    </g>
</svg>
  • Handle: @denotive-svg--menu
  • Preview:
  • Filesystem Path: src/components/02-utilities/04-icons/01-denotive-icons/denotive-svg--menu.hbs