Food Toast icon
Used to represent food based scenarios (restaurant, meals, etc). The Food Toast icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Food Toast 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 { FoodToast24Regular, FoodToast24Filled } from "@fluentui/react-icons";
export function Example() {
return <FoodToast24Regular aria-label="Food Toast" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_food_toast_24_regular.svg" width="24" height="24" alt="Food Toast"> 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="M8.25 9C7.83579 9 7.5 9.33579 7.5 9.75V14.25C7.5 14.6642 7.83579 15 8.25 15H12.75C13.1642 15 13.5 14.6642 13.5 14.25V9.75C13.5 9.33579 13.1642 9 12.75 9H8.25ZM9 13.5V10.5H12V13.5H9ZM2 7.75C2 5.12665 4.12665 3 6.75 3H17.2501C19.8734 3 22.0001 5.12665 22.0001 7.75C22.0001 8.98811 21.5256 10.1164 20.7501 10.9613V18.75C20.7501 19.9926 19.7427 21 18.5001 21H5.5C4.25736 21 3.25 19.9926 3.25 18.75V10.9613C2.47451 10.1164 2 8.98811 2 7.75ZM6.75 4.5C4.95507 4.5 3.5 5.95507 3.5 7.75C3.5 8.67951 3.88924 9.51689 4.51572 10.1102C4.66528 10.2518 4.75 10.4488 4.75 10.6548V18.75C4.75 19.1642 5.08579 19.5 5.5 19.5H15.5C15.9142 19.5 16.25 19.1642 16.25 18.75V11.0577C16.25 10.8096 16.3726 10.5776 16.5776 10.4379C17.4378 9.85165 18 8.86637 18 7.75C18 5.95507 16.5449 4.5 14.75 4.5H6.75ZM19.5 7.75C19.5 9.23626 18.8168 10.5628 17.75 11.4329V18.75C17.75 19.013 17.7049 19.2654 17.622 19.5H18.5001C18.9143 19.5 19.2501 19.1642 19.2501 18.75V10.6548C19.2501 10.4488 19.3348 10.2518 19.4844 10.1102C20.1108 9.51689 20.5001 8.67951 20.5001 7.75C20.5001 6.35958 19.6269 5.17309 18.399 4.70894C19.0864 5.53284 19.5 6.59312 19.5 7.75Z" 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_toast_24_regular.svg";Details
| Name | Food Toast |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_food_toast_24_regular.svg |
| Filled file | ic_fluent_food_toast_24_filled.svg |
| React components | FoodToast24Regular, FoodToast24Filled |
| License | MIT (© Microsoft Corporation) |