food icon
food-24 from Fluent UI System Color Icons by Microsoft Corporation · 24 · MIT Free for personal and commercial use.
- Name
- food-24
- Set
- Fluent UI System Color Icons
- Style
- 24
- Viewbox
- 24×24
- 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 24 24"><g fill="none"><path fill="url(#SVGmWG5Iexg)" d="M18.75 2A5.75 5.75 0 0 0 13 7.75v2.5c0 .966.784 1.75 1.75 1.75h.697l-.023.352c-.047.699-.11 1.64-.172 2.611c-.124 1.923-.252 4.02-.252 4.534a2.5 2.5 0 0 0 5 0c0-.539-.14-2.614-.27-4.522l-.005-.083c-.119-1.747-.225-3.324-.225-3.642v-8.5a.75.75 0 0 0-.75-.75"/><path fill="url(#SVGaHraBbvQ)" d="M3.743 2.816A.88.88 0 0 1 5.5 2.88v4.494a.625.625 0 1 0 1.25 0V2.75a.75.75 0 0 1 1.5 0v4.624a.625.625 0 1 0 1.25 0V2.88a.88.88 0 0 1 1.757-.064C11.3 3.428 11.5 6.37 11.5 8c0 1.35-.67 2.544-1.692 3.267c-.216.153-.268.315-.263.397c.123 1.878.455 7.018.455 7.833a2.5 2.5 0 0 1-5 0c0-.816.332-5.955.455-7.833c.005-.082-.047-.244-.263-.397A4 4 0 0 1 3.5 8c0-1.63.2-4.572.243-5.184"/><defs><linearGradient id="SVGmWG5Iexg" x1="11.923" x2="28.955" y1="3.25" y2="8.92" gradientUnits="userSpaceOnUse"><stop stop-color="#6ce0ff"/><stop offset="1" stop-color="#0067bf"/></linearGradient><linearGradient id="SVGaHraBbvQ" x1="2.269" x2="21.157" y1="3.25" y2="10.436" gradientUnits="userSpaceOnUse"><stop stop-color="#6ce0ff"/><stop offset="1" stop-color="#0067bf"/></linearGradient></defs></g></svg>
React
import type { SVGProps } from "react";
export function FluentColorFood24(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path fill="url(#SVGmWG5Iexg)" d="M18.75 2A5.75 5.75 0 0 0 13 7.75v2.5c0 .966.784 1.75 1.75 1.75h.697l-.023.352c-.047.699-.11 1.64-.172 2.611c-.124 1.923-.252 4.02-.252 4.534a2.5 2.5 0 0 0 5 0c0-.539-.14-2.614-.27-4.522l-.005-.083c-.119-1.747-.225-3.324-.225-3.642v-8.5a.75.75 0 0 0-.75-.75"/><path fill="url(#SVGaHraBbvQ)" d="M3.743 2.816A.88.88 0 0 1 5.5 2.88v4.494a.625.625 0 1 0 1.25 0V2.75a.75.75 0 0 1 1.5 0v4.624a.625.625 0 1 0 1.25 0V2.88a.88.88 0 0 1 1.757-.064C11.3 3.428 11.5 6.37 11.5 8c0 1.35-.67 2.544-1.692 3.267c-.216.153-.268.315-.263.397c.123 1.878.455 7.018.455 7.833a2.5 2.5 0 0 1-5 0c0-.816.332-5.955.455-7.833c.005-.082-.047-.244-.263-.397A4 4 0 0 1 3.5 8c0-1.63.2-4.572.243-5.184"/><defs><linearGradient id="SVGmWG5Iexg" x1="11.923" x2="28.955" y1="3.25" y2="8.92" gradientUnits="userSpaceOnUse"><stop stopColor="#6ce0ff"/><stop offset="1" stopColor="#0067bf"/></linearGradient><linearGradient id="SVGaHraBbvQ" x1="2.269" x2="21.157" y1="3.25" y2="10.436" 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 24 24"><g fill="none"><path fill="url(#SVGmWG5Iexg)" d="M18.75 2A5.75 5.75 0 0 0 13 7.75v2.5c0 .966.784 1.75 1.75 1.75h.697l-.023.352c-.047.699-.11 1.64-.172 2.611c-.124 1.923-.252 4.02-.252 4.534a2.5 2.5 0 0 0 5 0c0-.539-.14-2.614-.27-4.522l-.005-.083c-.119-1.747-.225-3.324-.225-3.642v-8.5a.75.75 0 0 0-.75-.75"/><path fill="url(#SVGaHraBbvQ)" d="M3.743 2.816A.88.88 0 0 1 5.5 2.88v4.494a.625.625 0 1 0 1.25 0V2.75a.75.75 0 0 1 1.5 0v4.624a.625.625 0 1 0 1.25 0V2.88a.88.88 0 0 1 1.757-.064C11.3 3.428 11.5 6.37 11.5 8c0 1.35-.67 2.544-1.692 3.267c-.216.153-.268.315-.263.397c.123 1.878.455 7.018.455 7.833a2.5 2.5 0 0 1-5 0c0-.816.332-5.955.455-7.833c.005-.082-.047-.244-.263-.397A4 4 0 0 1 3.5 8c0-1.63.2-4.572.243-5.184"/><defs><linearGradient id="SVGmWG5Iexg" x1="11.923" x2="28.955" y1="3.25" y2="8.92" gradientUnits="userSpaceOnUse"><stop stop-color="#6ce0ff"/><stop offset="1" stop-color="#0067bf"/></linearGradient><linearGradient id="SVGaHraBbvQ" x1="2.269" x2="21.157" y1="3.25" y2="10.436" gradientUnits="userSpaceOnUse"><stop stop-color="#6ce0ff"/><stop offset="1" stop-color="#0067bf"/></linearGradient></defs></g></svg> </template>
CSS
.icon-food-24 {
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%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGmWG5Iexg)%22%20d%3D%22M18.75%202A5.75%205.75%200%200%200%2013%207.75v2.5c0%20.966.784%201.75%201.75%201.75h.697l-.023.352c-.047.699-.11%201.64-.172%202.611c-.124%201.923-.252%204.02-.252%204.534a2.5%202.5%200%200%200%205%200c0-.539-.14-2.614-.27-4.522l-.005-.083c-.119-1.747-.225-3.324-.225-3.642v-8.5a.75.75%200%200%200-.75-.75%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGaHraBbvQ)%22%20d%3D%22M3.743%202.816A.88.88%200%200%201%205.5%202.88v4.494a.625.625%200%201%200%201.25%200V2.75a.75.75%200%200%201%201.5%200v4.624a.625.625%200%201%200%201.25%200V2.88a.88.88%200%200%201%201.757-.064C11.3%203.428%2011.5%206.37%2011.5%208c0%201.35-.67%202.544-1.692%203.267c-.216.153-.268.315-.263.397c.123%201.878.455%207.018.455%207.833a2.5%202.5%200%200%201-5%200c0-.816.332-5.955.455-7.833c.005-.082-.047-.244-.263-.397A4%204%200%200%201%203.5%208c0-1.63.2-4.572.243-5.184%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGmWG5Iexg%22%20x1%3D%2211.923%22%20x2%3D%2228.955%22%20y1%3D%223.25%22%20y2%3D%228.92%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%22SVGaHraBbvQ%22%20x1%3D%222.269%22%20x2%3D%2221.157%22%20y1%3D%223.25%22%20y2%3D%2210.436%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%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGmWG5Iexg)%22%20d%3D%22M18.75%202A5.75%205.75%200%200%200%2013%207.75v2.5c0%20.966.784%201.75%201.75%201.75h.697l-.023.352c-.047.699-.11%201.64-.172%202.611c-.124%201.923-.252%204.02-.252%204.534a2.5%202.5%200%200%200%205%200c0-.539-.14-2.614-.27-4.522l-.005-.083c-.119-1.747-.225-3.324-.225-3.642v-8.5a.75.75%200%200%200-.75-.75%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGaHraBbvQ)%22%20d%3D%22M3.743%202.816A.88.88%200%200%201%205.5%202.88v4.494a.625.625%200%201%200%201.25%200V2.75a.75.75%200%200%201%201.5%200v4.624a.625.625%200%201%200%201.25%200V2.88a.88.88%200%200%201%201.757-.064C11.3%203.428%2011.5%206.37%2011.5%208c0%201.35-.67%202.544-1.692%203.267c-.216.153-.268.315-.263.397c.123%201.878.455%207.018.455%207.833a2.5%202.5%200%200%201-5%200c0-.816.332-5.955.455-7.833c.005-.082-.047-.244-.263-.397A4%204%200%200%201%203.5%208c0-1.63.2-4.572.243-5.184%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGmWG5Iexg%22%20x1%3D%2211.923%22%20x2%3D%2228.955%22%20y1%3D%223.25%22%20y2%3D%228.92%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%22SVGaHraBbvQ%22%20x1%3D%222.269%22%20x2%3D%2221.157%22%20y1%3D%223.25%22%20y2%3D%2210.436%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-24.svg?color=%231a73e8&size=48
