food icon
food-20 from Fluent UI System Color Icons by Microsoft Corporation · 20 · MIT Free for personal and commercial use.
- Name
- food-20
- Set
- Fluent UI System Color Icons
- Style
- 20
- Viewbox
- 20×20
- 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 20 20"><g fill="none"><path fill="url(#SVGHRixmjTz1)" d="M15.5 2A4.5 4.5 0 0 0 11 6.5v2a1.5 1.5 0 0 0 1.5 1.5h.454l-.03.356a426 426 0 0 0-.172 2.042c-.124 1.507-.252 3.161-.252 3.602a2 2 0 1 0 4 0c0-.44-.128-2.095-.252-3.602a528 528 0 0 0-.228-2.696L16 9.478V2.5a.5.5 0 0 0-.5-.5"/><path fill="url(#SVG3MZrXcNv1)" d="M4.492 2h.013c.28 0 .507.227.507.506v3.999A.495.495 0 1 0 6 6.5v-4a.5.5 0 0 1 1 0v4.026a.495.495 0 0 0 .99-.021v-4A.505.505 0 0 1 8.49 2h.019a.5.5 0 0 1 .485.423C9.007 2.501 9.5 5.592 9.5 7c0 .95-.442 1.797-1.13 2.345c-.25.201-.37.419-.37.601v.5q0 .027.003.054c.027.26.151 1.429.268 2.631c.115 1.185.229 2.45.229 2.869a2 2 0 1 1-4 0c0-.42.114-1.684.229-2.869c.117-1.202.24-2.372.268-2.63L5 10.446v-.5c0-.183-.12-.4-.37-.601A3 3 0 0 1 3.5 7c0-1.405.49-4.482.506-4.576A.504.504 0 0 1 4.492 2"/><defs><linearGradient id="SVGHRixmjTz1" x1="10.154" x2="23.584" y1="3" y2="7.391" gradientUnits="userSpaceOnUse"><stop stop-color="#6ce0ff"/><stop offset="1" stop-color="#0067bf"/></linearGradient><linearGradient id="SVG3MZrXcNv1" x1="2.577" x2="16.964" y1="3" y2="8.131" gradientUnits="userSpaceOnUse"><stop stop-color="#6ce0ff"/><stop offset="1" stop-color="#0067bf"/></linearGradient></defs></g></svg>
React
import type { SVGProps } from "react";
export function FluentColorFood20(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><g fill="none"><path fill="url(#SVGHRixmjTz1)" d="M15.5 2A4.5 4.5 0 0 0 11 6.5v2a1.5 1.5 0 0 0 1.5 1.5h.454l-.03.356a426 426 0 0 0-.172 2.042c-.124 1.507-.252 3.161-.252 3.602a2 2 0 1 0 4 0c0-.44-.128-2.095-.252-3.602a528 528 0 0 0-.228-2.696L16 9.478V2.5a.5.5 0 0 0-.5-.5"/><path fill="url(#SVG3MZrXcNv1)" d="M4.492 2h.013c.28 0 .507.227.507.506v3.999A.495.495 0 1 0 6 6.5v-4a.5.5 0 0 1 1 0v4.026a.495.495 0 0 0 .99-.021v-4A.505.505 0 0 1 8.49 2h.019a.5.5 0 0 1 .485.423C9.007 2.501 9.5 5.592 9.5 7c0 .95-.442 1.797-1.13 2.345c-.25.201-.37.419-.37.601v.5q0 .027.003.054c.027.26.151 1.429.268 2.631c.115 1.185.229 2.45.229 2.869a2 2 0 1 1-4 0c0-.42.114-1.684.229-2.869c.117-1.202.24-2.372.268-2.63L5 10.446v-.5c0-.183-.12-.4-.37-.601A3 3 0 0 1 3.5 7c0-1.405.49-4.482.506-4.576A.504.504 0 0 1 4.492 2"/><defs><linearGradient id="SVGHRixmjTz1" x1="10.154" x2="23.584" y1="3" y2="7.391" gradientUnits="userSpaceOnUse"><stop stopColor="#6ce0ff"/><stop offset="1" stopColor="#0067bf"/></linearGradient><linearGradient id="SVG3MZrXcNv1" x1="2.577" x2="16.964" y1="3" y2="8.131" 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 20 20"><g fill="none"><path fill="url(#SVGHRixmjTz1)" d="M15.5 2A4.5 4.5 0 0 0 11 6.5v2a1.5 1.5 0 0 0 1.5 1.5h.454l-.03.356a426 426 0 0 0-.172 2.042c-.124 1.507-.252 3.161-.252 3.602a2 2 0 1 0 4 0c0-.44-.128-2.095-.252-3.602a528 528 0 0 0-.228-2.696L16 9.478V2.5a.5.5 0 0 0-.5-.5"/><path fill="url(#SVG3MZrXcNv1)" d="M4.492 2h.013c.28 0 .507.227.507.506v3.999A.495.495 0 1 0 6 6.5v-4a.5.5 0 0 1 1 0v4.026a.495.495 0 0 0 .99-.021v-4A.505.505 0 0 1 8.49 2h.019a.5.5 0 0 1 .485.423C9.007 2.501 9.5 5.592 9.5 7c0 .95-.442 1.797-1.13 2.345c-.25.201-.37.419-.37.601v.5q0 .027.003.054c.027.26.151 1.429.268 2.631c.115 1.185.229 2.45.229 2.869a2 2 0 1 1-4 0c0-.42.114-1.684.229-2.869c.117-1.202.24-2.372.268-2.63L5 10.446v-.5c0-.183-.12-.4-.37-.601A3 3 0 0 1 3.5 7c0-1.405.49-4.482.506-4.576A.504.504 0 0 1 4.492 2"/><defs><linearGradient id="SVGHRixmjTz1" x1="10.154" x2="23.584" y1="3" y2="7.391" gradientUnits="userSpaceOnUse"><stop stop-color="#6ce0ff"/><stop offset="1" stop-color="#0067bf"/></linearGradient><linearGradient id="SVG3MZrXcNv1" x1="2.577" x2="16.964" y1="3" y2="8.131" gradientUnits="userSpaceOnUse"><stop stop-color="#6ce0ff"/><stop offset="1" stop-color="#0067bf"/></linearGradient></defs></g></svg> </template>
CSS
.icon-food-20 {
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%2020%2020%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGHRixmjTz1)%22%20d%3D%22M15.5%202A4.5%204.5%200%200%200%2011%206.5v2a1.5%201.5%200%200%200%201.5%201.5h.454l-.03.356a426%20426%200%200%200-.172%202.042c-.124%201.507-.252%203.161-.252%203.602a2%202%200%201%200%204%200c0-.44-.128-2.095-.252-3.602a528%20528%200%200%200-.228-2.696L16%209.478V2.5a.5.5%200%200%200-.5-.5%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG3MZrXcNv1)%22%20d%3D%22M4.492%202h.013c.28%200%20.507.227.507.506v3.999A.495.495%200%201%200%206%206.5v-4a.5.5%200%200%201%201%200v4.026a.495.495%200%200%200%20.99-.021v-4A.505.505%200%200%201%208.49%202h.019a.5.5%200%200%201%20.485.423C9.007%202.501%209.5%205.592%209.5%207c0%20.95-.442%201.797-1.13%202.345c-.25.201-.37.419-.37.601v.5q0%20.027.003.054c.027.26.151%201.429.268%202.631c.115%201.185.229%202.45.229%202.869a2%202%200%201%201-4%200c0-.42.114-1.684.229-2.869c.117-1.202.24-2.372.268-2.63L5%2010.446v-.5c0-.183-.12-.4-.37-.601A3%203%200%200%201%203.5%207c0-1.405.49-4.482.506-4.576A.504.504%200%200%201%204.492%202%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGHRixmjTz1%22%20x1%3D%2210.154%22%20x2%3D%2223.584%22%20y1%3D%223%22%20y2%3D%227.391%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%22SVG3MZrXcNv1%22%20x1%3D%222.577%22%20x2%3D%2216.964%22%20y1%3D%223%22%20y2%3D%228.131%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%2020%2020%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGHRixmjTz1)%22%20d%3D%22M15.5%202A4.5%204.5%200%200%200%2011%206.5v2a1.5%201.5%200%200%200%201.5%201.5h.454l-.03.356a426%20426%200%200%200-.172%202.042c-.124%201.507-.252%203.161-.252%203.602a2%202%200%201%200%204%200c0-.44-.128-2.095-.252-3.602a528%20528%200%200%200-.228-2.696L16%209.478V2.5a.5.5%200%200%200-.5-.5%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG3MZrXcNv1)%22%20d%3D%22M4.492%202h.013c.28%200%20.507.227.507.506v3.999A.495.495%200%201%200%206%206.5v-4a.5.5%200%200%201%201%200v4.026a.495.495%200%200%200%20.99-.021v-4A.505.505%200%200%201%208.49%202h.019a.5.5%200%200%201%20.485.423C9.007%202.501%209.5%205.592%209.5%207c0%20.95-.442%201.797-1.13%202.345c-.25.201-.37.419-.37.601v.5q0%20.027.003.054c.027.26.151%201.429.268%202.631c.115%201.185.229%202.45.229%202.869a2%202%200%201%201-4%200c0-.42.114-1.684.229-2.869c.117-1.202.24-2.372.268-2.63L5%2010.446v-.5c0-.183-.12-.4-.37-.601A3%203%200%200%201%203.5%207c0-1.405.49-4.482.506-4.576A.504.504%200%200%201%204.492%202%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGHRixmjTz1%22%20x1%3D%2210.154%22%20x2%3D%2223.584%22%20y1%3D%223%22%20y2%3D%227.391%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%22SVG3MZrXcNv1%22%20x1%3D%222.577%22%20x2%3D%2216.964%22%20y1%3D%223%22%20y2%3D%228.131%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-20.svg?color=%231a73e8&size=48
