Food Cake icon
Used to represent food based scenarios (restaurant, meals, etc). The Food Cake 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 Cake 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 { FoodCake24Regular, FoodCake24Filled } from "@fluentui/react-icons";
export function Example() {
return <FoodCake24Regular aria-label="Food Cake" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_food_cake_24_regular.svg" width="24" height="24" alt="Food Cake"> 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="M12 1C11.0503 1 10.4145 1.68199 10.0634 2.28249C9.70175 2.90087 9.5 3.65552 9.5 4.25C9.5 4.74417 9.56283 5.42355 9.9325 5.99584C10.3421 6.63003 11.0377 7 12 7C12.9623 7 13.6579 6.63003 14.0675 5.99584C14.4372 5.42355 14.5 4.74417 14.5 4.25C14.5 3.65552 14.2983 2.90087 13.9366 2.28249C13.5855 1.68199 12.9497 1 12 1ZM11 4.25C11 3.94074 11.121 3.4454 11.3582 3.0397C11.6059 2.61614 11.8451 2.5 12 2.5C12.1549 2.5 12.3941 2.61614 12.6418 3.0397C12.879 3.4454 13 3.94074 13 4.25C13 4.65957 12.9378 4.98019 12.8075 5.18196C12.7171 5.32184 12.5377 5.5 12 5.5C11.4623 5.5 11.2829 5.32184 11.1925 5.18196C11.0622 4.98019 11 4.65957 11 4.25ZM20.5 10.25V18.5H21.25C21.6642 18.5 22 18.8358 22 19.25C22 19.6642 21.6642 20 21.25 20H2.75C2.33579 20 2 19.6642 2 19.25C2 18.8358 2.33579 18.5 2.75 18.5H3.5V10.25C3.5 9.00736 4.50736 8 5.75 8H18.25C19.4926 8 20.5 9.00736 20.5 10.25ZM5 10.25V12.3413L7.44734 13.9203C7.85991 14.1864 8.39009 14.1864 8.80266 13.9203L10.55 12.7929C11.4287 12.2261 12.5528 12.2065 13.4506 12.7425L15.459 13.9416C15.8821 14.1942 16.4143 14.1746 16.8177 13.8915L19 12.3601V10.25C19 9.83579 18.6642 9.5 18.25 9.5H5.75C5.33579 9.5 5 9.83579 5 10.25ZM17.6794 15.1193C16.7918 15.7422 15.6211 15.7853 14.69 15.2295L12.6817 14.0305C12.2736 13.7868 11.7626 13.7957 11.3632 14.0534L9.61585 15.1807C8.7082 15.7663 7.5418 15.7663 6.63415 15.1807L5 14.1264V18.5H19V14.1926L17.6794 15.1193Z" 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_cake_24_regular.svg";Details
| Name | Food Cake |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_food_cake_24_regular.svg |
| Filled file | ic_fluent_food_cake_24_filled.svg |
| React components | FoodCake24Regular, FoodCake24Filled |
| License | MIT (© Microsoft Corporation) |