food-28-filled from Fluent UI System Icons by Microsoft Corporation · 28 Filled · MIT Free for personal and commercial use.

Name
food-28-filled
Set
Fluent UI System Icons
Style
28 Filled
Viewbox
28×28
License
MIT

11 other variants in Fluent UI System Icons

The same icon in other sets

Related icons in Fluent UI System Icons

Use the food icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><path fill="currentColor" d="M5.492 2.79a.881.881 0 0 1 1.758.092v5.867a.75.75 0 1 0 1.5 0V2.75a.75.75 0 0 1 1.5 0v5.999a.75.75 0 0 0 1.5 0V2.882a.882.882 0 0 1 1.758-.092c.076.722.492 4.785.492 6.71c0 1.338-.585 2.54-1.51 3.364c-.334.296-.49.601-.49.857v.727l.001.047c.042.599.499 7.287.499 8.505a3 3 0 1 1-6 0c0-1.218.458-7.906.499-8.505L7 14.448v-.727c0-.255-.156-.56-.49-.857A4.5 4.5 0 0 1 5 9.5c0-1.925.416-5.988.492-6.71M18.955 14l-.032.556c-.047.817-.11 1.92-.172 3.062c-.124 2.267-.251 4.734-.251 5.382a3 3 0 1 0 6 0c0-.721-.158-3.474-.294-5.855l-.004-.066C24.093 15.18 24 13.55 24 13.25V2.75a.75.75 0 0 0-.75-.75h-.5A6.75 6.75 0 0 0 16 8.75v3.5c0 .966.784 1.75 1.75 1.75z"/></svg>

React

import type { SVGProps } from "react";

export function FluentFood28Filled(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><path fill="currentColor" d="M5.492 2.79a.881.881 0 0 1 1.758.092v5.867a.75.75 0 1 0 1.5 0V2.75a.75.75 0 0 1 1.5 0v5.999a.75.75 0 0 0 1.5 0V2.882a.882.882 0 0 1 1.758-.092c.076.722.492 4.785.492 6.71c0 1.338-.585 2.54-1.51 3.364c-.334.296-.49.601-.49.857v.727l.001.047c.042.599.499 7.287.499 8.505a3 3 0 1 1-6 0c0-1.218.458-7.906.499-8.505L7 14.448v-.727c0-.255-.156-.56-.49-.857A4.5 4.5 0 0 1 5 9.5c0-1.925.416-5.988.492-6.71M18.955 14l-.032.556c-.047.817-.11 1.92-.172 3.062c-.124 2.267-.251 4.734-.251 5.382a3 3 0 1 0 6 0c0-.721-.158-3.474-.294-5.855l-.004-.066C24.093 15.18 24 13.55 24 13.25V2.75a.75.75 0 0 0-.75-.75h-.5A6.75 6.75 0 0 0 16 8.75v3.5c0 .966.784 1.75 1.75 1.75z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><path fill="currentColor" d="M5.492 2.79a.881.881 0 0 1 1.758.092v5.867a.75.75 0 1 0 1.5 0V2.75a.75.75 0 0 1 1.5 0v5.999a.75.75 0 0 0 1.5 0V2.882a.882.882 0 0 1 1.758-.092c.076.722.492 4.785.492 6.71c0 1.338-.585 2.54-1.51 3.364c-.334.296-.49.601-.49.857v.727l.001.047c.042.599.499 7.287.499 8.505a3 3 0 1 1-6 0c0-1.218.458-7.906.499-8.505L7 14.448v-.727c0-.255-.156-.56-.49-.857A4.5 4.5 0 0 1 5 9.5c0-1.925.416-5.988.492-6.71M18.955 14l-.032.556c-.047.817-.11 1.92-.172 3.062c-.124 2.267-.251 4.734-.251 5.382a3 3 0 1 0 6 0c0-.721-.158-3.474-.294-5.855l-.004-.066C24.093 15.18 24 13.55 24 13.25V2.75a.75.75 0 0 0-.75-.75h-.5A6.75 6.75 0 0 0 16 8.75v3.5c0 .966.784 1.75 1.75 1.75z"/></svg>
</template>

CSS

.icon-food-28-filled {
  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%2028%2028%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M5.492%202.79a.881.881%200%200%201%201.758.092v5.867a.75.75%200%201%200%201.5%200V2.75a.75.75%200%200%201%201.5%200v5.999a.75.75%200%200%200%201.5%200V2.882a.882.882%200%200%201%201.758-.092c.076.722.492%204.785.492%206.71c0%201.338-.585%202.54-1.51%203.364c-.334.296-.49.601-.49.857v.727l.001.047c.042.599.499%207.287.499%208.505a3%203%200%201%201-6%200c0-1.218.458-7.906.499-8.505L7%2014.448v-.727c0-.255-.156-.56-.49-.857A4.5%204.5%200%200%201%205%209.5c0-1.925.416-5.988.492-6.71M18.955%2014l-.032.556c-.047.817-.11%201.92-.172%203.062c-.124%202.267-.251%204.734-.251%205.382a3%203%200%201%200%206%200c0-.721-.158-3.474-.294-5.855l-.004-.066C24.093%2015.18%2024%2013.55%2024%2013.25V2.75a.75.75%200%200%200-.75-.75h-.5A6.75%206.75%200%200%200%2016%208.75v3.5c0%20.966.784%201.75%201.75%201.75z%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%2028%2028%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M5.492%202.79a.881.881%200%200%201%201.758.092v5.867a.75.75%200%201%200%201.5%200V2.75a.75.75%200%200%201%201.5%200v5.999a.75.75%200%200%200%201.5%200V2.882a.882.882%200%200%201%201.758-.092c.076.722.492%204.785.492%206.71c0%201.338-.585%202.54-1.51%203.364c-.334.296-.49.601-.49.857v.727l.001.047c.042.599.499%207.287.499%208.505a3%203%200%201%201-6%200c0-1.218.458-7.906.499-8.505L7%2014.448v-.727c0-.255-.156-.56-.49-.857A4.5%204.5%200%200%201%205%209.5c0-1.925.416-5.988.492-6.71M18.955%2014l-.032.556c-.047.817-.11%201.92-.172%203.062c-.124%202.267-.251%204.734-.251%205.382a3%203%200%201%200%206%200c0-.721-.158-3.474-.294-5.855l-.004-.066C24.093%2015.18%2024%2013.55%2024%2013.25V2.75a.75.75%200%200%200-.75-.75h-.5A6.75%206.75%200%200%200%2016%208.75v3.5c0%20.966.784%201.75%201.75%201.75z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/food-28-filled.svg?color=%231a73e8&size=48