Fluent Icons

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 regular and filled styles in 4 sizes from 12 to 24 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG
Xceed Toolkit Plus for WPF logoXceed Toolkit Plus for WPFSponsorUpgrade Your WPF UI with Xceed Toolkit Plus

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_food_cake_24_regular.svg

Food Cake icon in React

npm install @fluentui/react-icons

import { FoodCake24Regular } from "@fluentui/react-icons";

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

Food Cake icon in SVG

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/food_cake_24_regular.svg";

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/food_cake_24_regular.svg" width="24" height="24" alt="Food Cake">

Food Cake icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.FoodCake())" />

Food Cake icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.food_cake_24_regular)

Food Cake icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xF445;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xF445;" FontSize="24" />

Food Cake icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_food_cake_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\f445";
  font-size: 24px;
}

Food Cake icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_food_cake_24_regular" />

// Kotlin
R.drawable.ic_fluent_food_cake_24_regular

Food Cake icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .foodCake24Regular)

Food Cake icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

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" />;
}

Coding agents can look up this component through the Fluent Icons MCP server.

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>

Details

NameFood Cake
StylesRegular (outlined), Filled
Sizes12 px, 16 px, 20 px, 24 px
Regular (outlined) fileic_fluent_food_cake_24_regular.svg
Filled fileic_fluent_food_cake_24_filled.svg
React (Regular)FoodCake12Regular, FoodCake16Regular, FoodCake20Regular, FoodCake24Regular
React (Filled)FoodCake12Filled, FoodCake16Filled, FoodCake20Filled, FoodCake24Filled
LicenseMIT (© Microsoft Corporation)

Keywords

mealtravel

Related icons

FoodFood AppleFood Chicken LegFood EggFood GrainsFood PizzaFood ToastFood CarrotFood FishAirplaneAirplane LandingAirplane Take Off