hamburger icon
hamburger-light from Phosphor by Phosphor Icons · Light · MIT Free for personal and commercial use.
- Name
- hamburger-light
- Set
- Phosphor
- Style
- Light
- Viewbox
- 256×256
- License
- MIT
5 other variants in Phosphor
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 Iconshamburger-fillMingCute IconhamburgerNoto EmojihamburgerOpenMojihamburgerTDesign IconshamburgerTwitter Emoji
Use the hamburger icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M48.07 102h159.86a14 14 0 0 0 13.76-17c-7.24-34.17-46.64-59-93.69-59S41.55 50.83 34.31 85a14 14 0 0 0 13.76 17m-2-14.48C52 59.29 87.25 38 128 38s76 21.29 82 49.52a2 2 0 0 1-2 2.48H48.07a2 2 0 0 1-2-2.48M230 154.36l-41.9 15.22l-37.87-15.15a6 6 0 0 0-4.46 0L108 169.54l-37.77-15.11a6 6 0 0 0-4.28-.07l-44 16A6 6 0 0 0 24 182a6.1 6.1 0 0 0 2.05-.36l16-5.8V184a38 38 0 0 0 38 38h96a38 38 0 0 0 38-38v-11.07l20.05-7.29a6 6 0 0 0-4.1-11.28M202 184a26 26 0 0 1-26 26H80a26 26 0 0 1-26-26v-12.52l13.9-5.06l37.87 15.15a6 6 0 0 0 4.46 0L148 166.46l37.77 15.11a6 6 0 0 0 4.28.07l11.95-4.35ZM18 128a6 6 0 0 1 6-6h208a6 6 0 0 1 0 12H24a6 6 0 0 1-6-6"/></svg>
React
import type { SVGProps } from "react";
export function PhHamburgerLight(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M48.07 102h159.86a14 14 0 0 0 13.76-17c-7.24-34.17-46.64-59-93.69-59S41.55 50.83 34.31 85a14 14 0 0 0 13.76 17m-2-14.48C52 59.29 87.25 38 128 38s76 21.29 82 49.52a2 2 0 0 1-2 2.48H48.07a2 2 0 0 1-2-2.48M230 154.36l-41.9 15.22l-37.87-15.15a6 6 0 0 0-4.46 0L108 169.54l-37.77-15.11a6 6 0 0 0-4.28-.07l-44 16A6 6 0 0 0 24 182a6.1 6.1 0 0 0 2.05-.36l16-5.8V184a38 38 0 0 0 38 38h96a38 38 0 0 0 38-38v-11.07l20.05-7.29a6 6 0 0 0-4.1-11.28M202 184a26 26 0 0 1-26 26H80a26 26 0 0 1-26-26v-12.52l13.9-5.06l37.87 15.15a6 6 0 0 0 4.46 0L148 166.46l37.77 15.11a6 6 0 0 0 4.28.07l11.95-4.35ZM18 128a6 6 0 0 1 6-6h208a6 6 0 0 1 0 12H24a6 6 0 0 1-6-6"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M48.07 102h159.86a14 14 0 0 0 13.76-17c-7.24-34.17-46.64-59-93.69-59S41.55 50.83 34.31 85a14 14 0 0 0 13.76 17m-2-14.48C52 59.29 87.25 38 128 38s76 21.29 82 49.52a2 2 0 0 1-2 2.48H48.07a2 2 0 0 1-2-2.48M230 154.36l-41.9 15.22l-37.87-15.15a6 6 0 0 0-4.46 0L108 169.54l-37.77-15.11a6 6 0 0 0-4.28-.07l-44 16A6 6 0 0 0 24 182a6.1 6.1 0 0 0 2.05-.36l16-5.8V184a38 38 0 0 0 38 38h96a38 38 0 0 0 38-38v-11.07l20.05-7.29a6 6 0 0 0-4.1-11.28M202 184a26 26 0 0 1-26 26H80a26 26 0 0 1-26-26v-12.52l13.9-5.06l37.87 15.15a6 6 0 0 0 4.46 0L148 166.46l37.77 15.11a6 6 0 0 0 4.28.07l11.95-4.35ZM18 128a6 6 0 0 1 6-6h208a6 6 0 0 1 0 12H24a6 6 0 0 1-6-6"/></svg> </template>
CSS
.icon-hamburger-light {
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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M48.07%20102h159.86a14%2014%200%200%200%2013.76-17c-7.24-34.17-46.64-59-93.69-59S41.55%2050.83%2034.31%2085a14%2014%200%200%200%2013.76%2017m-2-14.48C52%2059.29%2087.25%2038%20128%2038s76%2021.29%2082%2049.52a2%202%200%200%201-2%202.48H48.07a2%202%200%200%201-2-2.48M230%20154.36l-41.9%2015.22l-37.87-15.15a6%206%200%200%200-4.46%200L108%20169.54l-37.77-15.11a6%206%200%200%200-4.28-.07l-44%2016A6%206%200%200%200%2024%20182a6.1%206.1%200%200%200%202.05-.36l16-5.8V184a38%2038%200%200%200%2038%2038h96a38%2038%200%200%200%2038-38v-11.07l20.05-7.29a6%206%200%200%200-4.1-11.28M202%20184a26%2026%200%200%201-26%2026H80a26%2026%200%200%201-26-26v-12.52l13.9-5.06l37.87%2015.15a6%206%200%200%200%204.46%200L148%20166.46l37.77%2015.11a6%206%200%200%200%204.28.07l11.95-4.35ZM18%20128a6%206%200%200%201%206-6h208a6%206%200%200%201%200%2012H24a6%206%200%200%201-6-6%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M48.07%20102h159.86a14%2014%200%200%200%2013.76-17c-7.24-34.17-46.64-59-93.69-59S41.55%2050.83%2034.31%2085a14%2014%200%200%200%2013.76%2017m-2-14.48C52%2059.29%2087.25%2038%20128%2038s76%2021.29%2082%2049.52a2%202%200%200%201-2%202.48H48.07a2%202%200%200%201-2-2.48M230%20154.36l-41.9%2015.22l-37.87-15.15a6%206%200%200%200-4.46%200L108%20169.54l-37.77-15.11a6%206%200%200%200-4.28-.07l-44%2016A6%206%200%200%200%2024%20182a6.1%206.1%200%200%200%202.05-.36l16-5.8V184a38%2038%200%200%200%2038%2038h96a38%2038%200%200%200%2038-38v-11.07l20.05-7.29a6%206%200%200%200-4.1-11.28M202%20184a26%2026%200%200%201-26%2026H80a26%2026%200%200%201-26-26v-12.52l13.9-5.06l37.87%2015.15a6%206%200%200%200%204.46%200L148%20166.46l37.77%2015.11a6%206%200%200%200%204.28.07l11.95-4.35ZM18%20128a6%206%200%200%201%206-6h208a6%206%200%200%201%200%2012H24a6%206%200%200%201-6-6%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/hamburger-light.svg?color=%231a73e8&size=48
