hamburger icon

hamburger from Lucide by Lucide Contributors · Outline · ISC Free for personal and commercial use.

Name: hamburger
Set: Lucide
Style: Outline
Viewbox: 24×24
License: ISC

The same icon in other sets

hamburgerEmoji One (Colored)hamburgerFont Awesome Solid hamburgerFluent Emoji hamburgerFluent Emoji Flat hamburgerFluent Emoji High Contrast hamburgerFirefox OS Emoji hamburgerIconPark hamburgerIconPark Outline hamburgerIconPark Solid hamburgerIconPark TwoTone hamburgerLine Awesome hamburgerMaterial Design Icons hamburger-fillMingCute Icon hamburgerNoto Emoji hamburgerOpenMoji hamburgerPhosphor hamburgerTDesign Icons hamburgerTwitter Emoji

Use the hamburger icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12 16H4a2 2 0 1 1 0-4h16a2 2 0 1 1 0 4h-4.25M5 12a2 2 0 0 1-2-2a9 7 0 0 1 18 0a2 2 0 0 1-2 2M5 16a2 2 0 0 0-2 2a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3a2 2 0 0 0-2-2q0 0 0 0"/><path d="m6.67 12l6.13 4.6a2 2 0 0 0 2.8-.4l3.15-4.2"/></g></svg>

React

import type { SVGProps } from "react";

export function LucideHamburger(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"><path d="M12 16H4a2 2 0 1 1 0-4h16a2 2 0 1 1 0 4h-4.25M5 12a2 2 0 0 1-2-2a9 7 0 0 1 18 0a2 2 0 0 1-2 2M5 16a2 2 0 0 0-2 2a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3a2 2 0 0 0-2-2q0 0 0 0"/><path d="m6.67 12l6.13 4.6a2 2 0 0 0 2.8-.4l3.15-4.2"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12 16H4a2 2 0 1 1 0-4h16a2 2 0 1 1 0 4h-4.25M5 12a2 2 0 0 1-2-2a9 7 0 0 1 18 0a2 2 0 0 1-2 2M5 16a2 2 0 0 0-2 2a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3a2 2 0 0 0-2-2q0 0 0 0"/><path d="m6.67 12l6.13 4.6a2 2 0 0 0 2.8-.4l3.15-4.2"/></g></svg>
</template>

CSS

.icon-hamburger {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M12%2016H4a2%202%200%201%201%200-4h16a2%202%200%201%201%200%204h-4.25M5%2012a2%202%200%200%201-2-2a9%207%200%200%201%2018%200a2%202%200%200%201-2%202M5%2016a2%202%200%200%200-2%202a3%203%200%200%200%203%203h12a3%203%200%200%200%203-3a2%202%200%200%200-2-2q0%200%200%200%22%2F%3E%3Cpath%20d%3D%22m6.67%2012l6.13%204.6a2%202%200%200%200%202.8-.4l3.15-4.2%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M12%2016H4a2%202%200%201%201%200-4h16a2%202%200%201%201%200%204h-4.25M5%2012a2%202%200%200%201-2-2a9%207%200%200%201%2018%200a2%202%200%200%201-2%202M5%2016a2%202%200%200%200-2%202a3%203%200%200%200%203%203h12a3%203%200%200%200%203-3a2%202%200%200%200-2-2q0%200%200%200%22%2F%3E%3Cpath%20d%3D%22m6.67%2012l6.13%204.6a2%202%200%200%200%202.8-.4l3.15-4.2%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/lucide/hamburger.svg?color=%231a73e8&size=48