food cake icon

food-cake-20-filled from Fluent UI System Icons by Microsoft Corporation · 20 Filled · MIT Free for personal and commercial use.

Name: food-cake-20-filled
Set: Fluent UI System Icons
Style: 20 Filled
Viewbox: 20×20
License: MIT

7 other variants in Fluent UI System Icons

food-cake-12-filled food-cake-12-regular food-cake-16-filled food-cake-16-regular food-cake-20-regular food-cake-24-filled food-cake-24-regular

Related icons in Fluent UI System Icons

food-apple-20-filled food-carrot-20-filled food-chicken-leg-16-filled food-egg-16-filled food-fish-20-filled food-grains-20-filled food-pizza-20-filled food-toast-16-filled

Use the food cake icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M9.996 1.992c-.77 0-1.279.541-1.568 1.027c-.294.493-.45 1.07-.471 1.442c-.041.74.07 1.388.439 1.856c.384.488.96.675 1.6.675c.649 0 1.223-.209 1.605-.697c.369-.472.488-1.115.44-1.839c-.023-.352-.181-.926-.474-1.421c-.287-.485-.796-1.043-1.57-1.043M3.011 9.79l3.203 2.94a1 1 0 0 0 1.424-.073l.866-.975a2 2 0 0 1 2.992 0l.865.975a1 1 0 0 0 1.424.073l3.204-2.94A2 2 0 0 0 15 8H5a2 2 0 0 0-1.99 1.79M17 11.137l-2.539 2.33a2 2 0 0 1-2.847-.146l-.866-.976a1 1 0 0 0-1.496 0l-.866.976a2 2 0 0 1-2.848.146L3 11.137V16h-.5a.5.5 0 0 0 0 1h15a.5.5 0 0 0 0-1H17z"/></svg>

React

import type { SVGProps } from "react";

export function FluentFoodCake20Filled(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M9.996 1.992c-.77 0-1.279.541-1.568 1.027c-.294.493-.45 1.07-.471 1.442c-.041.74.07 1.388.439 1.856c.384.488.96.675 1.6.675c.649 0 1.223-.209 1.605-.697c.369-.472.488-1.115.44-1.839c-.023-.352-.181-.926-.474-1.421c-.287-.485-.796-1.043-1.57-1.043M3.011 9.79l3.203 2.94a1 1 0 0 0 1.424-.073l.866-.975a2 2 0 0 1 2.992 0l.865.975a1 1 0 0 0 1.424.073l3.204-2.94A2 2 0 0 0 15 8H5a2 2 0 0 0-1.99 1.79M17 11.137l-2.539 2.33a2 2 0 0 1-2.847-.146l-.866-.976a1 1 0 0 0-1.496 0l-.866.976a2 2 0 0 1-2.848.146L3 11.137V16h-.5a.5.5 0 0 0 0 1h15a.5.5 0 0 0 0-1H17z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M9.996 1.992c-.77 0-1.279.541-1.568 1.027c-.294.493-.45 1.07-.471 1.442c-.041.74.07 1.388.439 1.856c.384.488.96.675 1.6.675c.649 0 1.223-.209 1.605-.697c.369-.472.488-1.115.44-1.839c-.023-.352-.181-.926-.474-1.421c-.287-.485-.796-1.043-1.57-1.043M3.011 9.79l3.203 2.94a1 1 0 0 0 1.424-.073l.866-.975a2 2 0 0 1 2.992 0l.865.975a1 1 0 0 0 1.424.073l3.204-2.94A2 2 0 0 0 15 8H5a2 2 0 0 0-1.99 1.79M17 11.137l-2.539 2.33a2 2 0 0 1-2.847-.146l-.866-.976a1 1 0 0 0-1.496 0l-.866.976a2 2 0 0 1-2.848.146L3 11.137V16h-.5a.5.5 0 0 0 0 1h15a.5.5 0 0 0 0-1H17z"/></svg>
</template>

CSS

.icon-food-cake-20-filled {
  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%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M9.996%201.992c-.77%200-1.279.541-1.568%201.027c-.294.493-.45%201.07-.471%201.442c-.041.74.07%201.388.439%201.856c.384.488.96.675%201.6.675c.649%200%201.223-.209%201.605-.697c.369-.472.488-1.115.44-1.839c-.023-.352-.181-.926-.474-1.421c-.287-.485-.796-1.043-1.57-1.043M3.011%209.79l3.203%202.94a1%201%200%200%200%201.424-.073l.866-.975a2%202%200%200%201%202.992%200l.865.975a1%201%200%200%200%201.424.073l3.204-2.94A2%202%200%200%200%2015%208H5a2%202%200%200%200-1.99%201.79M17%2011.137l-2.539%202.33a2%202%200%200%201-2.847-.146l-.866-.976a1%201%200%200%200-1.496%200l-.866.976a2%202%200%200%201-2.848.146L3%2011.137V16h-.5a.5.5%200%200%200%200%201h15a.5.5%200%200%200%200-1H17z%22%2F%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%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M9.996%201.992c-.77%200-1.279.541-1.568%201.027c-.294.493-.45%201.07-.471%201.442c-.041.74.07%201.388.439%201.856c.384.488.96.675%201.6.675c.649%200%201.223-.209%201.605-.697c.369-.472.488-1.115.44-1.839c-.023-.352-.181-.926-.474-1.421c-.287-.485-.796-1.043-1.57-1.043M3.011%209.79l3.203%202.94a1%201%200%200%200%201.424-.073l.866-.975a2%202%200%200%201%202.992%200l.865.975a1%201%200%200%200%201.424.073l3.204-2.94A2%202%200%200%200%2015%208H5a2%202%200%200%200-1.99%201.79M17%2011.137l-2.539%202.33a2%202%200%200%201-2.847-.146l-.866-.976a1%201%200%200%200-1.496%200l-.866.976a2%202%200%200%201-2.848.146L3%2011.137V16h-.5a.5.5%200%200%200%200%201h15a.5.5%200%200%200%200-1H17z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/food-cake-20-filled.svg?color=%231a73e8&size=48