Menu Icon
Free SVG icon from the Carbon Icons collection. Download or copy for use in any project.
The Menu icon is commonly used in navigation bars, sidebars and mobile headers. Available as a free SVG - copy the code or download directly.
img tag
<img src="https://proicons.com/icon/321032.svg" alt="Menu icon" width="24" height="24">
React JSX
<img src="https://proicons.com/icon/321032.svg" alt="Menu icon" width={24} height={24} />
Vue template
<img src="https://proicons.com/icon/321032.svg" alt="Menu icon" :width="24" :height="24" />
CSS background
.icon-menu {
background-image: url('https://proicons.com/icon/321032.svg');
background-size: contain;
background-repeat: no-repeat;
width: 24px;
height: 24px;
display: inline-block;
}
SVG markup
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>menus</title>
<defs>
<path d="M108,128 L1,128 L1,19 L88,19 L88,0 L108,0 L108,128 Z" id="path-1"></path>
<filter x="-7.5%" y="-5.5%" width="115.0%" height="112.5%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<rect id="path-3" x="0" y="0" width="7.5" height="7.5" rx="2"></rect>
<polygon id="path-5" points="1.5625 3.28125 0 1.73125 0.496875 1.240625 1.5625 2.296875 3.878125 0 4.375 0.49375"></polygon>
</defs>
<g id="menus" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="filter-panel" transform="translate(105.000000, 26.000000)">
<g id="Combined-Shape" fill-rule="nonzero">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#F4F4F4" xlink:href="#path-1"></use>
</g>
<rect id="Rectangle-2-Copy-30" fill="#DCDCDC" opacity="0.6" x="0" y="38" width="109" height="18"></rect>
<rect id="Rectangle-Copy-37" fill="#8D8D8D" fill-rule="nonzero" x="25.2727273" y="43.9607843" width="42.772727" height="5"></rect>
<rect id="Rectangle-Copy-37-Copy" fill="#A8A8A8" fill-rule="nonzero" opacity="0.75" x="25.2727273" y="79.9607843" width="42.772727" height="5"></rect>
<rect id="Rectangle-Copy-40" fill="#A8A8A8" fill-rule="nonzero" opacity="0.75" x="25.2727273" y="26.1176471" width="53.9318182" height="5"></rect>
<rect id="Rectangle-Copy-40-Copy" fill="#A8A8A8" fill-rule="nonzero" opacity="0.75" x="25.2727273" y="62.1176471" width="53.9318182" height="5"></rect>
<line x1="0.947826087" y1="73.5882353" x2="108.052174" y2="73.5882353" id="Path-4-Copy-6-Copy" stroke="#A8A8A8" stroke-width="0.64"></line>
<line x1="0.947826087" y1="91.4313725" x2="108.052174" y2="91.4313725" id="Path-4-Copy-7-Copy" stroke="#A8A8A8" stroke-width="0.64"></line>
<rect id="Rectangle-Copy-37-Copy-2" fill="#A8A8A8" fill-rule="nonzero" opacity="0.75" x="25.2727273" y="115.960784" width="42.772727" height="5"></rect>
<rect id="Rectangle-Copy-40-Copy-2" fill="#A8A8A8" fill-rule="nonzero" opacity="0.75" x="25.2727273" y="98.1176471" width="53.9318182" height="5"></rect>
<line x1="0.947826087" y1="109.588235" x2="108.052174" y2="109.588235" id="Path-4-Copy-6-Copy-2" stroke="#A8A8A8" stroke-width="0.64"></line>
</g>
<g id="icon/navigation/overflow-menu/16-copy-9" transform="translate(198.000000, 31.000000)" fill="#000000">
<path d="M9.375,2.1875 L7.78125,2.1875 C7.63337735,1.45927376 6.993088,0.935933574 6.25,0.935933574 C5.506912,0.935933574 4.86662265,1.45927376 4.71875,2.1875 L0.625,2.1875 L0.625,2.8125 L4.71875,2.8125 C4.86662265,3.54072624 5.506912,4.06406643 6.25,4.06406643 C6.993088,4.06406643 7.63337735,3.54072624 7.78125,2.8125 L9.375,2.8125 L9.375,2.1875 Z M6.25,3.4375 C5.73223305,3.4375 5.3125,3.01776695 5.3125,2.5 C5.3125,1.98223305 5.73223305,1.5625 6.25,1.5625 C6.76776695,1.5625 7.1875,1.98223305 7.1875,2.5 C7.1875,3.01776695 6.76776695,3.4375 6.25,3.4375 L6.25,3.4375 Z M0.625,7.8125 L2.21875,7.8125 C2.36662265,8.54072624 3.006912,9.06406643 3.75,9.06406643 C4.493088,9.06406643 5.13337735,8.54072624 5.28125,7.8125 L9.375,7.8125 L9.375,7.1875 L5.28125,7.1875 C5.13337735,6.45927376 4.493088,5.93593357 3.75,5.93593357 C3.006912,5.93593357 2.36662265,6.45927376 2.21875,7.1875 L0.625,7.1875 L0.625,7.8125 Z M2.8125,7.5 C2.8125,6.98223305 3.23223305,6.5625 3.75,6.5625 C4.26776695,6.5625 4.6875,6.98223305 4.6875,7.5 C4.6875,8.01776695 4.26776695,8.4375 3.75,8.4375 C3.23223305,8.4375 2.8125,8.01776695 2.8125,7.5 Z" id="Fill"></path>
</g>
<g id="checkbox" transform="translate(114.000000, 50.000000)" fill="#161616">
<path d="M8.125,1.25 L1.875,1.25 C1.52982203,1.25 1.25,1.52982203 1.25,1.875 L1.25,8.125 C1.25,8.47017797 1.52982203,8.75 1.875,8.75 L8.125,8.75 C8.47017797,8.75 8.75,8.47017797 8.75,8.125 L8.75,1.875 C8.75,1.52982203 8.47017797,1.25 8.125,1.25 Z M1.875,8.125 L1.875,1.875 L8.125,1.875 L8.125,8.125 L1.875,8.125 Z" id="Fill"></path>
</g>
<g id="checkbox" transform="translate(114.000000, 86.000000)" fill="#161616">
<path d="M8.125,1.25 L1.875,1.25 C1.52982203,1.25 1.25,1.52982203 1.25,1.875 L1.25,8.125 C1.25,8.47017797 1.52982203,8.75 1.875,8.75 L8.125,8.75 C8.47017797,8.75 8.75,8.47017797 8.75,8.125 L8.75,1.875 C8.75,1.52982203 8.47017797,1.25 8.125,1.25 Z M1.875,8.125 L1.875,1.875 L8.125,1.875 L8.125,8.125 L1.875,8.125 Z" id="Fill"></path>
</g>
<g id="checkbox" transform="translate(114.000000, 122.000000)" fill="#161616">
<path d="M8.125,1.25 L1.875,1.25 C1.52982203,1.25 1.25,1.52982203 1.25,1.875 L1.25,8.125 C1.25,8.47017797 1.52982203,8.75 1.875,8.75 L8.125,8.75 C8.47017797,8.75 8.75,8.47017797 8.75,8.125 L8.75,1.875 C8.75,1.52982203 8.47017797,1.25 8.125,1.25 Z M1.875,8.125 L1.875,1.875 L8.125,1.875 L8.125,8.125 L1.875,8.125 Z" id="Fill"></path>
</g>
<g id="checkbox" transform="translate(114.000000, 104.000000)" fill="#161616">
<path d="M8.125,1.25 L1.875,1.25 C1.52982203,1.25 1.25,1.52982203 1.25,1.875 L1.25,8.125 C1.25,8.47017797 1.52982203,8.75 1.875,8.75 L8.125,8.75 C8.47017797,8.75 8.75,8.47017797 8.75,8.125 L8.75,1.875 C8.75,1.52982203 8.47017797,1.25 8.125,1.25 Z M1.875,8.125 L1.875,1.875 L8.125,1.875 L8.125,8.125 L1.875,8.125 Z" id="Fill"></path>
</g>
<g id="checkbox" transform="translate(114.000000, 140.000000)" fill="#161616">
<path d="M8.125,1.25 L1.875,1.25 C1.52982203,1.25 1.25,1.52982203 1.25,1.875 L1.25,8.125 C1.25,8.47017797 1.52982203,8.75 1.875,8.75 L8.125,8.75 C8.47017797,8.75 8.75,8.47017797 8.75,8.125 L8.75,1.875 C8.75,1.52982203 8.47017797,1.25 8.125,1.25 Z M1.875,8.125 L1.875,1.875 L8.125,1.875 L8.125,8.125 L1.875,8.125 Z" id="Fill"></path>
</g>
<g id="Group" transform="translate(114.000000, 68.000000)">
<g id="checkbox--checked--filled" transform="translate(1.250000, 1.250000)">
<g id="icon-color-2">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="Mask" fill="#000000" fill-rule="nonzero" xlink:href="#path-3"></use>
<g id="Group" mask="url(#mask-4)">
<g transform="translate(-1.250000, -1.250000)" id="icon-color-2">
<rect id="Rectangle" fill="#000000" x="0" y="0" width="10" height="10"></rect>
</g>
</g>
</g>
<g id="icon-color-1" transform="translate(1.562500, 2.187500)">
<mask id="mask-6" fill="white">
<use xlink:href="#path-5"></use>
</mask>
<use id="Mask" fill="#FFFFFF" fill-rule="nonzero" xlink:href="#path-5"></use>
<g id="Group" mask="url(#mask-6)">
<g transform="translate(-2.812500, -3.437500)" id="icon-color-1">
<rect id="Rectangle" fill="#FFFFFF" x="0" y="0" width="10" height="10"></rect>
</g>
</g>
</g>
</g>
<rect id="transparent-rectangle" x="0" y="0" width="10" height="10"></rect>
</g>
</g>
</svg>
More from Carbon Icons
View all
Menu in other icon packs
Copied!