beer icon

beer from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.

Name: beer
Set: IonIcons
Style: Regular
Viewbox: 512×512
License: MIT

2 other variants in IonIcons

The same icon in other sets

beerBoxIcons v2 beerBoxIcons v2 Solid beerFont Awesome Solid beerHuge Icons beerHumbleicons beerIconPark beerIconPark Outline beerIconPark Solid beerIconPark TwoTone beerJam Icons beerLine Awesome beerMaterial Line Icons beerLucide beerMaterial Design Icons beer-fillRemix Icon beerTabler Icons beerTDesign Icons

Use the beer icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M392 208h-24v-5.74A63.93 63.93 0 0 0 321.65 96a111 111 0 0 0-27.59-47.29A108.62 108.62 0 0 0 216 16c-29.91 0-57.78 12.28-79 34.68a56 56 0 0 0-67.51 77.54A63.91 63.91 0 0 0 80 231.39V440a56.06 56.06 0 0 0 56 56h176a56.06 56.06 0 0 0 56-56v-8h24a72.08 72.08 0 0 0 72-72v-80a72.08 72.08 0 0 0-72-72M176 416a16 16 0 0 1-32 0V256a16 16 0 0 1 32 0Zm64 0a16 16 0 0 1-32 0V256a16 16 0 0 1 32 0Zm64 0a16 16 0 0 1-32 0V256a16 16 0 0 1 32 0Zm16-224c-8.33 0-20.55-5.18-26.69-11.31A16 16 0 0 0 282 176H160a16 16 0 0 0-15 10.53c-6.83 18.68-23.6 21.47-33 21.47a32 32 0 0 1 0-64c.09 0 9.12.34 16.4 5.8a16 16 0 1 0 19.2-25.6A63.7 63.7 0 0 0 112 112a63.6 63.6 0 0 0-14 1.57A24 24 0 0 1 120 80a23.78 23.78 0 0 1 19.38 9.84a51.4 51.4 0 0 1 4.71 7.9A16 16 0 0 0 176 96c0-6.77-3.61-15.17-10.76-25c-.46-.63-1-1.25-1.45-1.86C178.39 55.44 196.64 48 216 48a76.86 76.86 0 0 1 55.23 23.18A80.2 80.2 0 0 1 292.61 142a16 16 0 0 0 12.73 18.71a16.3 16.3 0 0 0 3 .28a16 16 0 0 0 15.7-13a112 112 0 0 0 1.96-19.42a32 32 0 0 1-6 63.43m112 168a40 40 0 0 1-40 40h-24V240h24a40 40 0 0 1 40 40Z"/></svg>

React

import type { SVGProps } from "react";

export function IonBeer(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M392 208h-24v-5.74A63.93 63.93 0 0 0 321.65 96a111 111 0 0 0-27.59-47.29A108.62 108.62 0 0 0 216 16c-29.91 0-57.78 12.28-79 34.68a56 56 0 0 0-67.51 77.54A63.91 63.91 0 0 0 80 231.39V440a56.06 56.06 0 0 0 56 56h176a56.06 56.06 0 0 0 56-56v-8h24a72.08 72.08 0 0 0 72-72v-80a72.08 72.08 0 0 0-72-72M176 416a16 16 0 0 1-32 0V256a16 16 0 0 1 32 0Zm64 0a16 16 0 0 1-32 0V256a16 16 0 0 1 32 0Zm64 0a16 16 0 0 1-32 0V256a16 16 0 0 1 32 0Zm16-224c-8.33 0-20.55-5.18-26.69-11.31A16 16 0 0 0 282 176H160a16 16 0 0 0-15 10.53c-6.83 18.68-23.6 21.47-33 21.47a32 32 0 0 1 0-64c.09 0 9.12.34 16.4 5.8a16 16 0 1 0 19.2-25.6A63.7 63.7 0 0 0 112 112a63.6 63.6 0 0 0-14 1.57A24 24 0 0 1 120 80a23.78 23.78 0 0 1 19.38 9.84a51.4 51.4 0 0 1 4.71 7.9A16 16 0 0 0 176 96c0-6.77-3.61-15.17-10.76-25c-.46-.63-1-1.25-1.45-1.86C178.39 55.44 196.64 48 216 48a76.86 76.86 0 0 1 55.23 23.18A80.2 80.2 0 0 1 292.61 142a16 16 0 0 0 12.73 18.71a16.3 16.3 0 0 0 3 .28a16 16 0 0 0 15.7-13a112 112 0 0 0 1.96-19.42a32 32 0 0 1-6 63.43m112 168a40 40 0 0 1-40 40h-24V240h24a40 40 0 0 1 40 40Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M392 208h-24v-5.74A63.93 63.93 0 0 0 321.65 96a111 111 0 0 0-27.59-47.29A108.62 108.62 0 0 0 216 16c-29.91 0-57.78 12.28-79 34.68a56 56 0 0 0-67.51 77.54A63.91 63.91 0 0 0 80 231.39V440a56.06 56.06 0 0 0 56 56h176a56.06 56.06 0 0 0 56-56v-8h24a72.08 72.08 0 0 0 72-72v-80a72.08 72.08 0 0 0-72-72M176 416a16 16 0 0 1-32 0V256a16 16 0 0 1 32 0Zm64 0a16 16 0 0 1-32 0V256a16 16 0 0 1 32 0Zm64 0a16 16 0 0 1-32 0V256a16 16 0 0 1 32 0Zm16-224c-8.33 0-20.55-5.18-26.69-11.31A16 16 0 0 0 282 176H160a16 16 0 0 0-15 10.53c-6.83 18.68-23.6 21.47-33 21.47a32 32 0 0 1 0-64c.09 0 9.12.34 16.4 5.8a16 16 0 1 0 19.2-25.6A63.7 63.7 0 0 0 112 112a63.6 63.6 0 0 0-14 1.57A24 24 0 0 1 120 80a23.78 23.78 0 0 1 19.38 9.84a51.4 51.4 0 0 1 4.71 7.9A16 16 0 0 0 176 96c0-6.77-3.61-15.17-10.76-25c-.46-.63-1-1.25-1.45-1.86C178.39 55.44 196.64 48 216 48a76.86 76.86 0 0 1 55.23 23.18A80.2 80.2 0 0 1 292.61 142a16 16 0 0 0 12.73 18.71a16.3 16.3 0 0 0 3 .28a16 16 0 0 0 15.7-13a112 112 0 0 0 1.96-19.42a32 32 0 0 1-6 63.43m112 168a40 40 0 0 1-40 40h-24V240h24a40 40 0 0 1 40 40Z"/></svg>
</template>

CSS

.icon-beer {
  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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M392%20208h-24v-5.74A63.93%2063.93%200%200%200%20321.65%2096a111%20111%200%200%200-27.59-47.29A108.62%20108.62%200%200%200%20216%2016c-29.91%200-57.78%2012.28-79%2034.68a56%2056%200%200%200-67.51%2077.54A63.91%2063.91%200%200%200%2080%20231.39V440a56.06%2056.06%200%200%200%2056%2056h176a56.06%2056.06%200%200%200%2056-56v-8h24a72.08%2072.08%200%200%200%2072-72v-80a72.08%2072.08%200%200%200-72-72M176%20416a16%2016%200%200%201-32%200V256a16%2016%200%200%201%2032%200Zm64%200a16%2016%200%200%201-32%200V256a16%2016%200%200%201%2032%200Zm64%200a16%2016%200%200%201-32%200V256a16%2016%200%200%201%2032%200Zm16-224c-8.33%200-20.55-5.18-26.69-11.31A16%2016%200%200%200%20282%20176H160a16%2016%200%200%200-15%2010.53c-6.83%2018.68-23.6%2021.47-33%2021.47a32%2032%200%200%201%200-64c.09%200%209.12.34%2016.4%205.8a16%2016%200%201%200%2019.2-25.6A63.7%2063.7%200%200%200%20112%20112a63.6%2063.6%200%200%200-14%201.57A24%2024%200%200%201%20120%2080a23.78%2023.78%200%200%201%2019.38%209.84a51.4%2051.4%200%200%201%204.71%207.9A16%2016%200%200%200%20176%2096c0-6.77-3.61-15.17-10.76-25c-.46-.63-1-1.25-1.45-1.86C178.39%2055.44%20196.64%2048%20216%2048a76.86%2076.86%200%200%201%2055.23%2023.18A80.2%2080.2%200%200%201%20292.61%20142a16%2016%200%200%200%2012.73%2018.71a16.3%2016.3%200%200%200%203%20.28a16%2016%200%200%200%2015.7-13a112%20112%200%200%200%201.96-19.42a32%2032%200%200%201-6%2063.43m112%20168a40%2040%200%200%201-40%2040h-24V240h24a40%2040%200%200%201%2040%2040Z%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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M392%20208h-24v-5.74A63.93%2063.93%200%200%200%20321.65%2096a111%20111%200%200%200-27.59-47.29A108.62%20108.62%200%200%200%20216%2016c-29.91%200-57.78%2012.28-79%2034.68a56%2056%200%200%200-67.51%2077.54A63.91%2063.91%200%200%200%2080%20231.39V440a56.06%2056.06%200%200%200%2056%2056h176a56.06%2056.06%200%200%200%2056-56v-8h24a72.08%2072.08%200%200%200%2072-72v-80a72.08%2072.08%200%200%200-72-72M176%20416a16%2016%200%200%201-32%200V256a16%2016%200%200%201%2032%200Zm64%200a16%2016%200%200%201-32%200V256a16%2016%200%200%201%2032%200Zm64%200a16%2016%200%200%201-32%200V256a16%2016%200%200%201%2032%200Zm16-224c-8.33%200-20.55-5.18-26.69-11.31A16%2016%200%200%200%20282%20176H160a16%2016%200%200%200-15%2010.53c-6.83%2018.68-23.6%2021.47-33%2021.47a32%2032%200%200%201%200-64c.09%200%209.12.34%2016.4%205.8a16%2016%200%201%200%2019.2-25.6A63.7%2063.7%200%200%200%20112%20112a63.6%2063.6%200%200%200-14%201.57A24%2024%200%200%201%20120%2080a23.78%2023.78%200%200%201%2019.38%209.84a51.4%2051.4%200%200%201%204.71%207.9A16%2016%200%200%200%20176%2096c0-6.77-3.61-15.17-10.76-25c-.46-.63-1-1.25-1.45-1.86C178.39%2055.44%20196.64%2048%20216%2048a76.86%2076.86%200%200%201%2055.23%2023.18A80.2%2080.2%200%200%201%20292.61%20142a16%2016%200%200%200%2012.73%2018.71a16.3%2016.3%200%200%200%203%20.28a16%2016%200%200%200%2015.7-13a112%20112%200%200%200%201.96-19.42a32%2032%200%200%201-6%2063.43m112%20168a40%2040%200%200%201-40%2040h-24V240h24a40%2040%200%200%201%2040%2040Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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