hamburger icon
hamburger-line from MingCute Icon by MingCute Design · Line · Apache-2.0 Free for personal and commercial use.
- Name
- hamburger-line
- Set
- MingCute Icon
- Style
- Line
- Viewbox
- 24×24
- License
- Apache 2.0
1 other variant in MingCute Icon
The same icon in other sets
hamburgerEmoji One (Colored)hamburgerFont Awesome SolidhamburgerFluent EmojihamburgerFluent Emoji FlathamburgerFluent Emoji High ContrasthamburgerFirefox OS EmojihamburgerIconParkhamburgerIconPark OutlinehamburgerIconPark SolidhamburgerIconPark TwoTonehamburgerLine AwesomehamburgerLucidehamburgerMaterial Design IconshamburgerNoto EmojihamburgerOpenMojihamburgerPhosphorhamburgerTDesign IconshamburgerTwitter Emoji
Use the hamburger icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m20.034 13.357l-.925-.617a2 2 0 0 0-2.218 0l-.782.521a2 2 0 0 1-2.218 0l-.782-.52a2 2 0 0 0-2.218 0l-.782.52a2 2 0 0 1-2.218 0l-.782-.52a2 2 0 0 0-2.218 0c-.293.194-.579.416-.891.58M4 16h16v1a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3zm16-7.714C20 10 17 10 12 10s-8 0-8-1.714C4 6.392 7.582 4 12 4s8 2.392 8 4.286"/></svg>
React
import type { SVGProps } from "react";
export function MingcuteHamburgerLine(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m20.034 13.357l-.925-.617a2 2 0 0 0-2.218 0l-.782.521a2 2 0 0 1-2.218 0l-.782-.52a2 2 0 0 0-2.218 0l-.782.52a2 2 0 0 1-2.218 0l-.782-.52a2 2 0 0 0-2.218 0c-.293.194-.579.416-.891.58M4 16h16v1a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3zm16-7.714C20 10 17 10 12 10s-8 0-8-1.714C4 6.392 7.582 4 12 4s8 2.392 8 4.286"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m20.034 13.357l-.925-.617a2 2 0 0 0-2.218 0l-.782.521a2 2 0 0 1-2.218 0l-.782-.52a2 2 0 0 0-2.218 0l-.782.52a2 2 0 0 1-2.218 0l-.782-.52a2 2 0 0 0-2.218 0c-.293.194-.579.416-.891.58M4 16h16v1a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3zm16-7.714C20 10 17 10 12 10s-8 0-8-1.714C4 6.392 7.582 4 12 4s8 2.392 8 4.286"/></svg> </template>
CSS
.icon-hamburger-line {
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%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m20.034%2013.357l-.925-.617a2%202%200%200%200-2.218%200l-.782.521a2%202%200%200%201-2.218%200l-.782-.52a2%202%200%200%200-2.218%200l-.782.52a2%202%200%200%201-2.218%200l-.782-.52a2%202%200%200%200-2.218%200c-.293.194-.579.416-.891.58M4%2016h16v1a3%203%200%200%201-3%203H7a3%203%200%200%201-3-3zm16-7.714C20%2010%2017%2010%2012%2010s-8%200-8-1.714C4%206.392%207.582%204%2012%204s8%202.392%208%204.286%22%2F%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%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m20.034%2013.357l-.925-.617a2%202%200%200%200-2.218%200l-.782.521a2%202%200%200%201-2.218%200l-.782-.52a2%202%200%200%200-2.218%200l-.782.52a2%202%200%200%201-2.218%200l-.782-.52a2%202%200%200%200-2.218%200c-.293.194-.579.416-.891.58M4%2016h16v1a3%203%200%200%201-3%203H7a3%203%200%200%201-3-3zm16-7.714C20%2010%2017%2010%2012%2010s-8%200-8-1.714C4%206.392%207.582%204%2012%204s8%202.392%208%204.286%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/mingcute/hamburger-line.svg?color=%231a73e8&size=48
