Food Apple icon
Used to represent food based scenarios (restaurant, meals, etc). The Food Apple 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 Apple 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 { FoodApple24Regular, FoodApple24Filled } from "@fluentui/react-icons";
export function Example() {
return <FoodApple24Regular aria-label="Food Apple" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_food_apple_24_regular.svg" width="24" height="24" alt="Food Apple"> 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.3974 11.2348C8.80357 11.1536 9.06699 10.7584 8.98576 10.3523C8.90454 9.94609 8.50943 9.68267 8.10325 9.7639C7.19986 9.94456 6.51776 10.5755 6.15473 11.4227C5.7955 12.261 5.7422 13.3089 6.02255 14.4311C6.12294 14.833 6.5301 15.0774 6.93196 14.977C7.33383 14.8766 7.57822 14.4694 7.47783 14.0676C7.25856 13.1898 7.33026 12.4877 7.53347 12.0135C7.73288 11.5482 8.05066 11.3041 8.3974 11.2348ZM5.47146 3.41925C5.38955 4.80533 5.8618 6.22082 6.88864 7.30168C5.01112 7.8413 3.51795 9.43905 3.22815 11.5176C2.89974 13.8731 3.38387 16.2702 4.60072 18.3136L4.95173 18.9031C4.96474 18.9249 4.97885 18.9461 4.994 18.9665L6.40996 20.8732C7.68641 22.5921 10.2013 22.752 11.6853 21.2087C11.857 21.0301 12.1429 21.0301 12.3147 21.2087C13.7986 22.752 16.3135 22.5921 17.59 20.8732L19.0059 18.9665C19.0211 18.9461 19.0352 18.9249 19.0482 18.9031L19.3992 18.3136C20.6161 16.2702 21.1002 13.8731 20.7718 11.5176C20.3631 8.58626 17.5611 6.61122 14.6629 7.21168L12.7608 7.60578L12.7577 7.60642C12.7881 6.82657 12.9097 5.98554 13.149 5.26776C13.4383 4.3998 13.8411 3.87802 14.2884 3.69165C14.6708 3.53233 14.8516 3.09323 14.6923 2.71088C14.533 2.32852 14.0939 2.14772 13.7115 2.30703C12.6588 2.74565 12.0616 3.78637 11.726 4.79342C11.7103 4.84045 11.6951 4.88777 11.6803 4.93536C11.4405 4.47093 11.1259 4.03506 10.7366 3.64578C9.64409 2.55322 8.18457 2.04949 6.75636 2.13413C6.06327 2.1752 5.51241 2.72616 5.47146 3.41925ZM6.96373 3.62637C7.94351 3.59961 8.92931 3.95977 9.67599 4.70644C10.4225 5.45295 10.7827 6.4385 10.7561 7.41806C10.5747 7.42302 10.3931 7.41471 10.2129 7.39316L9.596 7.26534C9.02771 7.09589 8.49258 6.78675 8.04382 6.33799C7.29731 5.59148 6.93714 4.60594 6.96373 3.62637ZM9.03272 8.68049L9.23508 8.72241C9.47508 8.7904 9.71898 8.84079 9.96471 8.87359L10.9349 9.07459C11.6375 9.22016 12.3625 9.22016 13.0651 9.07459L14.9672 8.68049C17.0162 8.25596 18.9972 9.65231 19.2862 11.7248C19.5675 13.7425 19.1528 15.7958 18.1104 17.5462L17.7789 18.1028L16.3857 19.9789C15.6623 20.9531 14.237 21.0437 13.3959 20.1691C12.634 19.3766 11.366 19.3766 10.604 20.1691C9.76298 21.0437 8.33765 20.9531 7.61421 19.9789L6.221 18.1028L5.88951 17.5462C4.84717 15.7958 4.43247 13.7425 4.71378 11.7248C5.00273 9.65231 6.98373 8.25596 9.03272 8.68049Z" 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_apple_24_regular.svg";Details
| Name | Food Apple |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_food_apple_24_regular.svg |
| Filled file | ic_fluent_food_apple_24_filled.svg |
| React components | FoodApple24Regular, FoodApple24Filled |
| License | MIT (© Microsoft Corporation) |