Drink Beer icon
Used for restaurant, product & calendar scenarios. Contains state variants. The Drink Beer icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Drink Beer icon in React
Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.
npm install @fluentui/react-icons
import { DrinkBeer24Regular, DrinkBeer24Filled } from "@fluentui/react-icons";
export function Example() {
return <DrinkBeer24Regular aria-label="Drink Beer" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_drink_beer_24_regular.svg" width="24" height="24" alt="Drink Beer"> Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 10C8.5 9.58579 8.16421 9.25 7.75 9.25C7.33579 9.25 7 9.58579 7 10V17C7 17.4142 7.33579 17.75 7.75 17.75C8.16421 17.75 8.5 17.4142 8.5 17V10ZM11.5 10C11.5 9.58579 11.1642 9.25 10.75 9.25C10.3358 9.25 10 9.58579 10 10V17C10 17.4142 10.3358 17.75 10.75 17.75C11.1642 17.75 11.5 17.4142 11.5 17V10ZM14.5 10C14.5 9.58579 14.1642 9.25 13.75 9.25C13.3358 9.25 13 9.58579 13 10V17C13 17.4142 13.3358 17.75 13.75 17.75C14.1642 17.75 14.5 17.4142 14.5 17V10ZM4 5.25C4 3.45507 5.45507 2 7.25 2H14.25C16.0449 2 17.5 3.45507 17.5 5.25V6H18.75C20.5449 6 22 7.45507 22 9.25V14.75C22 16.5449 20.5449 18 18.75 18H17.5V19.75C17.5 20.9926 16.4926 22 15.25 22H6.25C5.00736 22 4 20.9926 4 19.75V5.25ZM16 7.5H5.5V19.75C5.5 20.1642 5.83579 20.5 6.25 20.5H15.25C15.6642 20.5 16 20.1642 16 19.75V7.5ZM17.5 16.5H18.75C19.7165 16.5 20.5 15.7165 20.5 14.75V9.25C20.5 8.2835 19.7165 7.5 18.75 7.5H17.5V16.5ZM16 5.25C16 4.2835 15.2165 3.5 14.25 3.5H7.25C6.2835 3.5 5.5 4.2835 5.5 5.25V6H16V5.25Z" fill="currentColor"/></svg>Use it from the SVG package
Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:
npm install @fluentui/svg-icons
import icon from "@fluentui/svg-icons/icons/drink_beer_24_regular.svg";Details
| Name | Drink Beer |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_drink_beer_24_regular.svg |
| Filled file | ic_fluent_drink_beer_24_filled.svg |
| React components | DrinkBeer24Regular, DrinkBeer24Filled |
| License | MIT (© Microsoft Corporation) |