Menu

AI SVG Studio
Sign in
Menu Button SVG element, flat

Menu Button SVG element, flat

Three evenly spaced horizontal bars fill the centre of this rounded button. Use it in a mobile page header or a compact sidebar.

Free ยท from Website Buttons, Flat

Similar SVGs

More from Website Buttons, Flat

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/dAdyxj3it_N0/amnt.svg" alt="Menu Button" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 80" preserveAspectRatio="none" fill="currentColor"><path fill-rule="evenodd" d="M22 5h196a18 18 0 0 1 18 18v34a18 18 0 0 1-18 18H22A18 18 0 0 1 4 57V23A18 18 0 0 1 22 5Zm68 18v6h60v-6Zm0 14v6h60v-6Zm0 14v6h60v-6Z"/></svg>
CSS background-image
.menu-button {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/dAdyxj3it_N0/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.menu-button {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/dAdyxj3it_N0/amnt.svg") center / contain no-repeat;
}
React
import MenuButtonSvg from "./menu-button.jsx"; // from the React tab above

<MenuButtonSvg width={48} height={48} />

Tags

menunavigationhamburgeroptionsbuttonselementflat

Made with AMNT

AMNT SVG 1.1 drew this from the words Menu Button: Wide rounded button with three evenly spaced horizontal bars. as part of the pack Website Buttons, Flat. Want one like it? Make your own in the SVG studio.

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence

Settings