food icon
food-48 from Fluent UI System Color Icons by Microsoft Corporation · 48 · MIT Free for personal and commercial use.
- Name
- food-48
- Set
- Fluent UI System Color Icons
- Style
- 48
- Viewbox
- 48×48
- License
- MIT
5 other variants in Fluent UI System Color Icons
The same icon in other sets
Use the food icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path fill="url(#SVGzjyc0chI1)" d="M30.847 24.912L30.91 24h-1.66A3.25 3.25 0 0 1 26 20.75v-5.5C26 9.037 31.037 4 37.25 4h.5c.69 0 1.25.56 1.25 1.25v17.5c0 .49.185 3.196.403 6.368l.01.13C39.684 33.206 40 37.79 40 39a5 5 0 0 1-10 0c0-1.089.255-5.21.503-8.984c.125-1.903.25-3.742.344-5.104"/><path fill="url(#SVGNUlG8cIy1)" d="M10.614 4a1.38 1.38 0 0 0-1.367 1.176C9.107 6.124 8 13.666 8 17c0 2.196.946 4.174 2.448 5.544c.695.633 1.052 1.273 1.052 1.842c0 .045-.001.082-.005.122C11.401 25.682 10.5 36.976 10.5 39a5 5 0 0 0 10 0c0-2.024-.901-13.318-.995-14.492l-.005-.122c0-.569.357-1.209 1.052-1.842A7.48 7.48 0 0 0 23 17c0-3.334-1.107-10.88-1.247-11.824A1.38 1.38 0 0 0 20.387 4h-.018c-.796 0-1.367.655-1.367 1.37v10.51a1.12 1.12 0 1 1-2.24 0V5.319a1.263 1.263 0 1 0-2.522.051v10.51a1.12 1.12 0 1 1-2.24 0V5.37A1.37 1.37 0 0 0 10.633 4z"/><defs><linearGradient id="SVGzjyc0chI1" x1="23.846" x2="57.911" y1="6.5" y2="17.839" gradientUnits="userSpaceOnUse"><stop stop-color="#6ce0ff"/><stop offset="1" stop-color="#0067bf"/></linearGradient><linearGradient id="SVGNUlG8cIy1" x1="5.692" x2="41.659" y1="6.5" y2="19.327" gradientUnits="userSpaceOnUse"><stop stop-color="#6ce0ff"/><stop offset="1" stop-color="#0067bf"/></linearGradient></defs></g></svg>
React
import type { SVGProps } from "react";
export function FluentColorFood48(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path fill="url(#SVGzjyc0chI1)" d="M30.847 24.912L30.91 24h-1.66A3.25 3.25 0 0 1 26 20.75v-5.5C26 9.037 31.037 4 37.25 4h.5c.69 0 1.25.56 1.25 1.25v17.5c0 .49.185 3.196.403 6.368l.01.13C39.684 33.206 40 37.79 40 39a5 5 0 0 1-10 0c0-1.089.255-5.21.503-8.984c.125-1.903.25-3.742.344-5.104"/><path fill="url(#SVGNUlG8cIy1)" d="M10.614 4a1.38 1.38 0 0 0-1.367 1.176C9.107 6.124 8 13.666 8 17c0 2.196.946 4.174 2.448 5.544c.695.633 1.052 1.273 1.052 1.842c0 .045-.001.082-.005.122C11.401 25.682 10.5 36.976 10.5 39a5 5 0 0 0 10 0c0-2.024-.901-13.318-.995-14.492l-.005-.122c0-.569.357-1.209 1.052-1.842A7.48 7.48 0 0 0 23 17c0-3.334-1.107-10.88-1.247-11.824A1.38 1.38 0 0 0 20.387 4h-.018c-.796 0-1.367.655-1.367 1.37v10.51a1.12 1.12 0 1 1-2.24 0V5.319a1.263 1.263 0 1 0-2.522.051v10.51a1.12 1.12 0 1 1-2.24 0V5.37A1.37 1.37 0 0 0 10.633 4z"/><defs><linearGradient id="SVGzjyc0chI1" x1="23.846" x2="57.911" y1="6.5" y2="17.839" gradientUnits="userSpaceOnUse"><stop stopColor="#6ce0ff"/><stop offset="1" stopColor="#0067bf"/></linearGradient><linearGradient id="SVGNUlG8cIy1" x1="5.692" x2="41.659" y1="6.5" y2="19.327" gradientUnits="userSpaceOnUse"><stop stopColor="#6ce0ff"/><stop offset="1" stopColor="#0067bf"/></linearGradient></defs></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path fill="url(#SVGzjyc0chI1)" d="M30.847 24.912L30.91 24h-1.66A3.25 3.25 0 0 1 26 20.75v-5.5C26 9.037 31.037 4 37.25 4h.5c.69 0 1.25.56 1.25 1.25v17.5c0 .49.185 3.196.403 6.368l.01.13C39.684 33.206 40 37.79 40 39a5 5 0 0 1-10 0c0-1.089.255-5.21.503-8.984c.125-1.903.25-3.742.344-5.104"/><path fill="url(#SVGNUlG8cIy1)" d="M10.614 4a1.38 1.38 0 0 0-1.367 1.176C9.107 6.124 8 13.666 8 17c0 2.196.946 4.174 2.448 5.544c.695.633 1.052 1.273 1.052 1.842c0 .045-.001.082-.005.122C11.401 25.682 10.5 36.976 10.5 39a5 5 0 0 0 10 0c0-2.024-.901-13.318-.995-14.492l-.005-.122c0-.569.357-1.209 1.052-1.842A7.48 7.48 0 0 0 23 17c0-3.334-1.107-10.88-1.247-11.824A1.38 1.38 0 0 0 20.387 4h-.018c-.796 0-1.367.655-1.367 1.37v10.51a1.12 1.12 0 1 1-2.24 0V5.319a1.263 1.263 0 1 0-2.522.051v10.51a1.12 1.12 0 1 1-2.24 0V5.37A1.37 1.37 0 0 0 10.633 4z"/><defs><linearGradient id="SVGzjyc0chI1" x1="23.846" x2="57.911" y1="6.5" y2="17.839" gradientUnits="userSpaceOnUse"><stop stop-color="#6ce0ff"/><stop offset="1" stop-color="#0067bf"/></linearGradient><linearGradient id="SVGNUlG8cIy1" x1="5.692" x2="41.659" y1="6.5" y2="19.327" gradientUnits="userSpaceOnUse"><stop stop-color="#6ce0ff"/><stop offset="1" stop-color="#0067bf"/></linearGradient></defs></g></svg> </template>
CSS
.icon-food-48 {
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%2048%2048%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGzjyc0chI1)%22%20d%3D%22M30.847%2024.912L30.91%2024h-1.66A3.25%203.25%200%200%201%2026%2020.75v-5.5C26%209.037%2031.037%204%2037.25%204h.5c.69%200%201.25.56%201.25%201.25v17.5c0%20.49.185%203.196.403%206.368l.01.13C39.684%2033.206%2040%2037.79%2040%2039a5%205%200%200%201-10%200c0-1.089.255-5.21.503-8.984c.125-1.903.25-3.742.344-5.104%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGNUlG8cIy1)%22%20d%3D%22M10.614%204a1.38%201.38%200%200%200-1.367%201.176C9.107%206.124%208%2013.666%208%2017c0%202.196.946%204.174%202.448%205.544c.695.633%201.052%201.273%201.052%201.842c0%20.045-.001.082-.005.122C11.401%2025.682%2010.5%2036.976%2010.5%2039a5%205%200%200%200%2010%200c0-2.024-.901-13.318-.995-14.492l-.005-.122c0-.569.357-1.209%201.052-1.842A7.48%207.48%200%200%200%2023%2017c0-3.334-1.107-10.88-1.247-11.824A1.38%201.38%200%200%200%2020.387%204h-.018c-.796%200-1.367.655-1.367%201.37v10.51a1.12%201.12%200%201%201-2.24%200V5.319a1.263%201.263%200%201%200-2.522.051v10.51a1.12%201.12%200%201%201-2.24%200V5.37A1.37%201.37%200%200%200%2010.633%204z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGzjyc0chI1%22%20x1%3D%2223.846%22%20x2%3D%2257.911%22%20y1%3D%226.5%22%20y2%3D%2217.839%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%236ce0ff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230067bf%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGNUlG8cIy1%22%20x1%3D%225.692%22%20x2%3D%2241.659%22%20y1%3D%226.5%22%20y2%3D%2219.327%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%236ce0ff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230067bf%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%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%2048%2048%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGzjyc0chI1)%22%20d%3D%22M30.847%2024.912L30.91%2024h-1.66A3.25%203.25%200%200%201%2026%2020.75v-5.5C26%209.037%2031.037%204%2037.25%204h.5c.69%200%201.25.56%201.25%201.25v17.5c0%20.49.185%203.196.403%206.368l.01.13C39.684%2033.206%2040%2037.79%2040%2039a5%205%200%200%201-10%200c0-1.089.255-5.21.503-8.984c.125-1.903.25-3.742.344-5.104%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGNUlG8cIy1)%22%20d%3D%22M10.614%204a1.38%201.38%200%200%200-1.367%201.176C9.107%206.124%208%2013.666%208%2017c0%202.196.946%204.174%202.448%205.544c.695.633%201.052%201.273%201.052%201.842c0%20.045-.001.082-.005.122C11.401%2025.682%2010.5%2036.976%2010.5%2039a5%205%200%200%200%2010%200c0-2.024-.901-13.318-.995-14.492l-.005-.122c0-.569.357-1.209%201.052-1.842A7.48%207.48%200%200%200%2023%2017c0-3.334-1.107-10.88-1.247-11.824A1.38%201.38%200%200%200%2020.387%204h-.018c-.796%200-1.367.655-1.367%201.37v10.51a1.12%201.12%200%201%201-2.24%200V5.319a1.263%201.263%200%201%200-2.522.051v10.51a1.12%201.12%200%201%201-2.24%200V5.37A1.37%201.37%200%200%200%2010.633%204z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGzjyc0chI1%22%20x1%3D%2223.846%22%20x2%3D%2257.911%22%20y1%3D%226.5%22%20y2%3D%2217.839%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%236ce0ff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230067bf%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGNUlG8cIy1%22%20x1%3D%225.692%22%20x2%3D%2241.659%22%20y1%3D%226.5%22%20y2%3D%2219.327%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%236ce0ff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230067bf%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent-color/food-48.svg?color=%231a73e8&size=48
