Bowl Salad icon
Used to represent healthy food options. The Bowl Salad 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 Bowl Salad 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 { BowlSalad24Regular, BowlSalad24Filled } from "@fluentui/react-icons";
export function Example() {
return <BowlSalad24Regular aria-label="Bowl Salad" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_bowl_salad_24_regular.svg" width="24" height="24" alt="Bowl Salad"> 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="M11.9993 2C9.65649 2 7.65582 3.46481 6.86317 5.52853C6.42485 5.40193 5.99954 5.30611 5.60212 5.23342C4.7957 5.08591 4.08151 5.02951 3.5677 5.00986C3.31029 5.00002 3.10181 4.99935 2.95557 5.00125C2.88241 5.0022 2.82472 5.0038 2.78415 5.00522L2.7363 5.00712C2.35142 5.02601 2.02931 5.325 2.00775 5.7157L2.00672 5.7367L2.00482 5.78455C2.0034 5.82512 2.0018 5.88281 2.00085 5.95597C1.99895 6.10221 1.99962 6.31069 2.00946 6.5681C2.02911 7.08191 2.08551 7.7961 2.23301 8.60252C2.36747 9.33764 2.58106 10.1681 2.9222 11H2.75C2.33579 11 2 11.3358 2 11.75V12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12V11.75C22 11.3358 21.6642 11 21.25 11H20.9969C20.998 10.9585 20.9985 10.9168 20.9985 10.875C20.9985 8.6 19.4401 6.68897 17.3327 6.15113C16.7312 3.76569 14.5715 2 11.9993 2ZM8.27413 6.03992C8.85743 4.5529 10.3054 3.5 11.9993 3.5C13.6844 3.5 15.1261 4.54201 15.7153 6.01685C13.926 6.16518 12.411 7.27979 11.6934 8.83751C11.4287 8.44708 11.1249 8.07183 10.7761 7.72309C10.027 6.97397 9.15563 6.43219 8.27413 6.03992ZM19.4985 10.875C19.4985 10.9168 19.4977 10.9585 19.4962 11H12.7672L12.7493 10.9498C12.7488 10.9249 12.7485 10.9 12.7485 10.875C12.7485 9.01104 14.2595 7.5 16.1235 7.5C17.9875 7.5 19.4985 9.01104 19.4985 10.875ZM9.71548 8.78375C10.3579 9.42615 10.8239 10.1993 11.1603 11H9.06015L7.27868 9.21952C6.9857 8.92671 6.51083 8.92684 6.21802 9.21982C5.92521 9.51279 5.92534 9.98767 6.21832 10.2805L6.93824 11H4.56835C4.12976 10.1243 3.86487 9.18733 3.70853 8.33263C3.57662 7.61143 3.52594 6.97034 3.50836 6.51078L3.50828 6.50869L3.51038 6.50877C3.96994 6.52634 4.61103 6.57702 5.33223 6.70894C6.7917 6.97589 8.4911 7.55937 9.71548 8.78375ZM4.78755 16.5H19.2124C17.7105 18.9022 15.0419 20.5 12 20.5C8.95814 20.5 6.28948 18.9022 4.78755 16.5ZM3.51446 12.5H20.4855C20.4348 13.3755 20.2515 14.2154 19.9554 15H4.04455C3.74853 14.2154 3.56525 13.3755 3.51446 12.5ZM2.71797 5.00801L2.72237 5.00779L2.7363 5.00712L2.71797 5.00801Z" 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/bowl_salad_24_regular.svg";Details
| Name | Bowl Salad |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_bowl_salad_24_regular.svg |
| Filled file | ic_fluent_bowl_salad_24_filled.svg |
| React components | BowlSalad24Regular, BowlSalad24Filled |
| License | MIT (© Microsoft Corporation) |