Food Fish icon
Used to represent fish diet, or seafood cuisine and events. The Food Fish 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 Fish 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 { FoodFish24Regular, FoodFish24Filled } from "@fluentui/react-icons";
export function Example() {
return <FoodFish24Regular aria-label="Food Fish" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_food_fish_24_regular.svg" width="24" height="24" alt="Food Fish"> 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="M9.51477 11.7244C9.5141 10.5939 9.60735 9.32179 9.901 8.13745C10.1959 6.94819 10.6792 5.90237 11.418 5.16351C12.2382 4.34337 13.3915 3.88395 14.6672 3.66471C15.9387 3.44622 17.2673 3.47776 18.3596 3.58455C19.4669 3.6928 20.3133 4.53921 20.4216 5.64653C20.5284 6.73885 20.5599 8.06743 20.3414 9.33891C20.1222 10.6147 19.6628 11.768 18.8426 12.5881C18.103 13.3278 17.0561 13.8116 15.866 14.1069C14.6809 14.4009 13.4082 14.4944 12.2779 14.494C11.2776 14.4937 10.458 15.3055 10.4533 16.3081C10.4453 18.0032 10.2339 19.9684 9.51719 21.4771C9.49171 21.4556 9.45942 21.415 9.44137 21.3409C9.24247 20.5246 8.97818 19.5478 8.66997 18.678C8.51592 18.2433 8.34657 17.8229 8.16341 17.457C7.98547 17.1015 7.77121 16.7495 7.51152 16.4898C7.2518 16.2302 6.89964 16.0158 6.54394 15.8378C6.17781 15.6545 5.75711 15.485 5.32206 15.3308C4.45163 15.0222 3.47417 14.7575 2.65746 14.5583C2.58366 14.5403 2.54312 14.5082 2.52167 14.4827C4.03232 13.7657 6.00138 13.5559 7.69893 13.5495C8.70241 13.5457 9.51537 12.7255 9.51477 11.7244ZM10.3574 4.10285C9.35577 5.10444 8.7769 6.43816 8.44508 7.77647C8.11203 9.1197 8.01405 10.5232 8.01477 11.7253C8.01488 11.9022 7.86784 12.0488 7.69325 12.0495C5.92192 12.0562 3.67688 12.2686 1.86105 13.1359C1.17859 13.4619 0.89395 14.1338 1.03531 14.7708C1.16763 15.3669 1.65025 15.8565 2.30197 16.0155C3.09682 16.2094 4.01898 16.4603 4.82087 16.7446C5.22197 16.8868 5.58059 17.033 5.87253 17.1791C6.17489 17.3305 6.35954 17.4592 6.45095 17.5506C6.54226 17.6419 6.67088 17.8263 6.82207 18.1284C6.96805 18.42 7.1141 18.7783 7.25611 19.179C7.54 19.9802 7.79044 20.9016 7.98401 21.696C8.14285 22.3479 8.63248 22.8307 9.22867 22.9632C9.86557 23.1047 10.5377 22.8203 10.8639 22.1378C11.7306 20.3247 11.9449 18.0842 11.9533 16.3152C11.9541 16.1408 12.1006 15.994 12.2774 15.994C13.4793 15.9945 14.8833 15.8962 16.2272 15.5627C17.5663 15.2305 18.901 14.6511 19.9033 13.6488C21.0225 12.5295 21.5711 11.04 21.8198 9.59295C22.0692 8.14162 22.0286 6.66744 21.9145 5.50058C21.7365 3.68024 20.3259 2.26963 18.5056 2.09167C17.3387 1.97759 15.8645 1.93698 14.4132 2.18638C12.9661 2.43505 11.4766 2.9836 10.3574 4.10285ZM16.0019 5.0001C16.5542 5.0001 17.0019 5.44781 17.0019 6.0001C17.0019 6.55238 16.5542 7.0001 16.0019 7.0001C15.4496 7.0001 15.0019 6.55238 15.0019 6.0001C15.0019 5.44781 15.4496 5.0001 16.0019 5.0001Z" 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_fish_24_regular.svg";Details
| Name | Food Fish |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_food_fish_24_regular.svg |
| Filled file | ic_fluent_food_fish_24_filled.svg |
| React components | FoodFish24Regular, FoodFish24Filled |
| License | MIT (© Microsoft Corporation) |