Menu

Beta
Sign in
Menu SVG icon, rounded

Menu SVG icon, rounded

Three horizontal lines represent a menu of navigation choices. Add this control to a mobile app header or a responsive website toolbar to reveal links and sections.

Free · from Rounded Interface Icons

Similar SVGs

More from Rounded Interface Icons

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/PXnZBRfwqwFK/amnt.svg" alt="Menu" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><g id="layer-1" data-name="Rectangle 1"><path d="M16 14L48 14C50.21 14 52 15.79 52 18L52 18C52 20.21 50.21 22 48 22L16 22C13.79 22 12 20.21 12 18L12 18C12 15.79 13.79 14 16 14Z" fill="#a8dadc" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g><g id="layer-2" data-name="Rectangle 2"><path d="M16 28L48 28C50.21 28 52 29.79 52 32L52 32C52 34.21 50.21 36 48 36L16 36C13.79 36 12 34.21 12 32L12 32C12 29.79 13.79 28 16 28Z" fill="#a8dadc" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g><g id="layer-3" data-name="Rectangle 3"><path d="M16 42L48 42C50.21 42 52 43.79 52 46L52 46C52 48.21 50.21 50 48 50L16 50C13.79 50 12 48.21 12 46L12 46C12 43.79 13.79 42 16 42Z" fill="#a8dadc" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
CSS background-image
.menu {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/PXnZBRfwqwFK/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.menu {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/PXnZBRfwqwFK/amnt.svg") center / contain no-repeat;
}
React
import MenuSvg from "./menu.jsx"; // from the React tab above

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

Tags

menunavigationbarsoptions

Made with AMNT

AMNT SVG Pro 1.1 drew this from the words Menu. Flat, rounded icons in a consistent set. Use two colours and clean 2 px lines with rounded ends and corners. Keep the shapes simple, balanced, and easy to recognise at small sizes. Use the same proportions, line weight, and colour placement for every icon. as part of the pack Rounded Interface Icons. 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