Food icon

Use the Food 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 { Food24Regular, Food24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Food24Regular aria-label="Food" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_food_24_regular.svg" width="24" height="24" alt="Food">

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="M3.19268 3.72637C3.27793 2.73673 4.1093 2 5.08487 2C5.5359 2 5.95052 2.15592 6.27777 2.4168C6.61576 2.15549 7.03972 2 7.5 2C7.96028 2 8.38424 2.15549 8.72223 2.4168C9.04947 2.15592 9.46409 2 9.91513 2C10.8907 2 11.7221 2.73673 11.8073 3.72637C11.8913 4.70145 12 6.20918 12 7.50001C12 9.13618 11.1263 10.5676 9.82365 11.3543C9.60178 11.4883 9.54461 11.6534 9.55027 11.74C9.67665 13.674 10 18.6917 10 19.4975C10 20.8782 8.88071 21.9975 7.5 21.9975C6.11929 21.9975 5 20.8782 5 19.4975C5 18.6917 5.32335 13.674 5.44973 11.74C5.45539 11.6534 5.39822 11.4883 5.17635 11.3543C3.87367 10.5676 3 9.13618 3 7.50001C3 6.20918 3.10869 4.70145 3.19268 3.72637ZM9.5 7.25C9.5 7.66421 9.16421 8 8.75 8C8.33579 8 8 7.66421 8 7.25V4C8 3.72386 7.77614 3.5 7.5 3.5C7.22386 3.5 7 3.72386 7 4V7.25C7 7.66421 6.66421 8 6.25 8C5.83579 8 5.5 7.66421 5.5 7.25V3.91513C5.5 3.68586 5.31414 3.5 5.08487 3.5C4.87003 3.5 4.70406 3.65873 4.68714 3.8551C4.60403 4.81997 4.5 6.27568 4.5 7.50001C4.5 8.58932 5.0801 9.54385 5.95182 10.0703C6.49687 10.3995 6.9993 11.0304 6.94654 11.8378C6.8171 13.8186 6.5 18.7563 6.5 19.4975C6.5 20.0498 6.94772 20.4975 7.5 20.4975C8.05228 20.4975 8.5 20.0498 8.5 19.4975C8.5 18.7563 8.1829 13.8186 8.05346 11.8378C8.0007 11.0304 8.50313 10.3995 9.04818 10.0703C9.9199 9.54385 10.5 8.58932 10.5 7.50001C10.5 6.27568 10.396 4.81997 10.3129 3.8551C10.2959 3.65873 10.13 3.5 9.91513 3.5C9.68586 3.5 9.5 3.68586 9.5 3.91513V7.25ZM13 7.75C13 4.57436 15.5744 2 18.75 2C19.1642 2 19.5 2.33579 19.5 2.75V11.25C19.5 11.5677 19.6063 13.1447 19.7246 14.8917L19.7302 14.9745C19.8594 16.8829 20 18.9581 20 19.4975C20 20.8782 18.8807 21.9975 17.5 21.9975C16.1193 21.9975 15 20.8782 15 19.4975C15 18.9829 15.1278 16.8855 15.2516 14.9631C15.3141 13.9917 15.3767 13.0506 15.4236 12.3525L15.4473 12H14.75C13.7835 12 13 11.2165 13 10.25V7.75ZM16.9982 11.3015L16.9768 11.6156C16.9631 11.8164 16.9436 12.1044 16.9202 12.453C16.8733 13.1503 16.8109 14.0899 16.7484 15.0595C16.6222 17.0193 16.5 19.0456 16.5 19.4975C16.5 20.0498 16.9477 20.4975 17.5 20.4975C18.0523 20.4975 18.5 20.0498 18.5 19.4975C18.5 19.0171 18.362 16.9714 18.228 14.993L18.221 14.8894C18.1085 13.2292 18 11.6269 18 11.25V3.56597C16.0105 3.9202 14.5 5.6587 14.5 7.75V10.25C14.5 10.3881 14.6119 10.5 14.75 10.5H16.25C16.4578 10.5 16.6564 10.5862 16.7982 10.7382C16.94 10.8901 17.0125 11.0941 16.9982 11.3015Z" 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/food_24_regular.svg";

Details

Keywords

mealtravelrestauranteat