Spatula Spoon icon

Use the Spatula Spoon 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 { SpatulaSpoon24Regular, SpatulaSpoon24Filled } from "@fluentui/react-icons";

export function Example() {
  return <SpatulaSpoon24Regular aria-label="Spatula Spoon" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_spatula_spoon_24_regular.svg" width="24" height="24" alt="Spatula Spoon">

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="M16.3773 4.37868C15.6183 5.13765 14.9648 6.57585 14.8868 7.85895C14.8389 8.64639 14.6171 9.60934 13.8917 10.2874L13.2352 10.9011L14.1577 11.7018L14.714 11.1067C15.3917 10.3819 16.3538 10.1598 17.1408 10.1118C18.4237 10.0335 19.8612 9.38004 20.6199 8.62132C21.7915 7.44975 21.7915 5.55025 20.6199 4.37868C19.4484 3.20711 17.5489 3.20711 16.3773 4.37868ZM15.8098 12.1311L15.2913 12.6857L20.1013 16.8603L20.12 16.8791C21.2916 18.0506 21.2916 19.9501 20.12 21.1217C18.9485 22.2933 17.049 22.2933 15.8774 21.1217L15.8587 21.103L11.7971 16.4234L7.27669 21.2588L7.26777 21.2678C6.29146 22.2441 4.70854 22.2441 3.73223 21.2678C2.75592 20.2915 2.75592 18.7085 3.73223 17.7322L3.74116 17.7233L8.25807 13.5007H6.58157C5.85269 13.5007 5.15363 13.2113 4.63798 12.6962L1.8064 9.86735C0.731568 8.79356 0.731145 7.05163 1.80546 5.97731L4.97634 2.80643C6.05028 1.73249 7.79149 1.73249 8.86543 2.80643L11.6936 5.63456C12.2093 6.15028 12.499 6.84976 12.499 7.5791V9.53603L12.8674 9.19167C13.1811 8.89841 13.3511 8.40027 13.3896 7.76797C13.4882 6.14529 14.2807 4.35398 15.3166 3.31802C17.074 1.56066 19.9232 1.56066 21.6806 3.31802C23.438 5.07538 23.438 7.92462 21.6806 9.68198C20.6449 10.7176 18.8544 11.51 17.2322 11.609C16.6005 11.6475 16.1028 11.8176 15.8098 12.1311ZM9.79535 14.1169L4.78524 18.8006C4.40239 19.1917 4.40494 19.8192 4.79289 20.2071C5.18085 20.5951 5.80827 20.5976 6.19937 20.2148L10.8086 15.2843L9.79535 14.1169ZM7.80477 3.86709C7.31661 3.37894 6.52516 3.37894 6.037 3.86709L2.86612 7.03797C2.37779 7.5263 2.37799 8.31809 2.86655 8.80617L5.69812 11.635C5.93251 11.8691 6.25027 12.0007 6.58157 12.0007H8.69025C9.48711 12.0007 10.2448 12.3463 10.7671 12.9481L16.955 20.0778C17.5421 20.6468 18.4792 20.6412 19.0594 20.061C19.6395 19.4809 19.6451 18.5437 19.0761 17.9567L11.9465 11.7688C11.3447 11.2465 10.999 10.4888 10.999 9.69191V7.5791C10.999 7.24758 10.8673 6.92964 10.6329 6.69522L7.80477 3.86709ZM7.53033 5.46967C7.23744 5.17678 6.76256 5.17678 6.46967 5.46967C6.17678 5.76256 6.17678 6.23744 6.46967 6.53033L8.46967 8.53033C8.76256 8.82322 9.23744 8.82322 9.53033 8.53033C9.82322 8.23744 9.82322 7.76256 9.53033 7.46967L7.53033 5.46967ZM4.46967 7.46967C4.76256 7.17678 5.23744 7.17678 5.53033 7.46967L7.53033 9.46967C7.82322 9.76256 7.82322 10.2374 7.53033 10.5303C7.23744 10.8232 6.76256 10.8232 6.46967 10.5303L4.46967 8.53033C4.17678 8.23744 4.17678 7.76256 4.46967 7.46967ZM17.5 6.75C17.5 6.33579 17.1642 6 16.75 6C16.3358 6 16 6.33579 16 6.75C16 7.99264 17.0074 9 18.25 9C18.6642 9 19 8.66421 19 8.25C19 7.83579 18.6642 7.5 18.25 7.5C17.8358 7.5 17.5 7.16421 17.5 6.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/spatula_spoon_24_regular.svg";

Details

Keywords

toolskitchenladlecooking