Overflow Menu Icon

Free SVG icon from the Carbon Icons collection. Download or copy for use in any project.

Collection: Carbon Icons
Format: SVG, React, Angular, Vue, Web Component, PNG
License: Apache-2.0 - Free for commercial use
Tags: overflow menu hamburger navigation list sidebar

The Overflow 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/321077.svg" alt="Overflow Menu icon" width="24" height="24">

React JSX

<img src="https://proicons.com/icon/321077.svg" alt="Overflow Menu icon" width={24} height={24} />

Vue template

<img
  src="https://proicons.com/icon/321077.svg"
  alt="Overflow Menu icon"
  :width="24"
  :height="24"
/>

CSS background

.icon-overflow-menu {
  background-image: url('https://proicons.com/icon/321077.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  display: inline-block;
}

SVG markup

<svg width="640" height="360" viewBox="0 0 640 360" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="overflow-menu">
<g id="Group">
<g id="Rectangle 2 Copy 17" filter="url(#filter0_d_718_5561)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M188 112H404.588V64H452V112V260H188V112Z" fill="#F3F3F3"/>
</g>
<g id="icon/navigation/overflow-menu/16 copy 3">
<g id="overflow--menu">
<path id="Mask" fill-rule="evenodd" clip-rule="evenodd" d="M429.5 80.5C429.5 81.3284 428.828 82 428 82C427.172 82 426.5 81.3284 426.5 80.5C426.5 79.6716 427.172 79 428 79C428.828 79 429.5 79.6716 429.5 80.5ZM429.5 88C429.5 88.8284 428.828 89.5 428 89.5C427.172 89.5 426.5 88.8284 426.5 88C426.5 87.1716 427.172 86.5 428 86.5C428.828 86.5 429.5 87.1716 429.5 88ZM428 97C428.828 97 429.5 96.3284 429.5 95.5C429.5 94.6716 428.828 94 428 94C427.172 94 426.5 94.6716 426.5 95.5C426.5 96.3284 427.172 97 428 97Z" fill="black"/>
<mask id="mask0_718_5561" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="426" y="79" width="4" height="18">
<path id="Mask_2" fill-rule="evenodd" clip-rule="evenodd" d="M429.5 80.5C429.5 81.3284 428.828 82 428 82C427.172 82 426.5 81.3284 426.5 80.5C426.5 79.6716 427.172 79 428 79C428.828 79 429.5 79.6716 429.5 80.5ZM429.5 88C429.5 88.8284 428.828 89.5 428 89.5C427.172 89.5 426.5 88.8284 426.5 88C426.5 87.1716 427.172 86.5 428 86.5C428.828 86.5 429.5 87.1716 429.5 88ZM428 97C428.828 97 429.5 96.3284 429.5 95.5C429.5 94.6716 428.828 94 428 94C427.172 94 426.5 94.6716 426.5 95.5C426.5 96.3284 427.172 97 428 97Z" fill="white"/>
</mask>
<g mask="url(#mask0_718_5561)">
<g id="color/gray/100">
<rect width="30" height="30" transform="matrix(2 0 0 2 416 76)" fill="#171717"/>
</g>
</g>
</g>
</g>
<rect id="Rectangle 6 Copy 31" opacity="0.75" x="212" y="134" width="150" height="10" fill="#A8A8A8"/>
<rect id="Rectangle 6 Copy 32" opacity="0.75" x="212" y="232" width="150" height="10" fill="#A8A8A8"/>
<rect id="Rectangle 2 Copy 28" opacity="0.6" x="188" y="164" width="264" height="48" fill="#DCDCDC"/>
<rect id="Rectangle 3 Copy 9" x="212" y="182" width="109.524" height="10" fill="#8D8D8D"/>
</g>
</g>
<defs>
<filter id="filter0_d_718_5561" x="176" y="56" width="288" height="220" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="3"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_718_5561"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_718_5561" result="shape"/>
</filter>
</defs>
</svg>

Overflow Menu in other icon packs

Suru++ Ubuntu

Copied!

Overflow Menu Icon

More from Carbon Icons

Overflow Menu in other icon packs