Mail Fish Hook icon

Use the Mail Fish Hook 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 { MailFishHook24Regular, MailFishHook24Filled } from "@fluentui/react-icons";

export function Example() {
  return <MailFishHook24Regular aria-label="Mail Fish Hook" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_mail_fish_hook_24_regular.svg" width="24" height="24" alt="Mail Fish Hook">

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.25 3.5C15.6977 3.5 15.25 3.94772 15.25 4.5C15.25 5.05228 15.6977 5.5 16.25 5.5C16.8023 5.5 17.25 5.05228 17.25 4.5C17.25 3.94772 16.8023 3.5 16.25 3.5ZM18.75 4.5C18.75 5.61941 18.0143 6.56698 17 6.88555V9.25C17 10.4926 18.0074 11.5 19.25 11.5C20.4926 11.5 21.5 10.4926 21.5 9.25V9H20.25C19.9467 9 19.6732 8.81727 19.5571 8.53701C19.441 8.25676 19.5052 7.93417 19.7197 7.71967L21.7197 5.71967C21.9342 5.50517 22.2568 5.441 22.537 5.55709C22.8173 5.67318 23 5.94665 23 6.25V9.25C23 11.3211 21.3211 13 19.25 13C17.1789 13 15.5 11.3211 15.5 9.25V6.88555C14.4857 6.56698 13.75 5.61941 13.75 4.5C13.75 3.11929 14.8693 2 16.25 2C17.6307 2 18.75 3.11929 18.75 4.5ZM12.7854 4H5.25L5.06558 4.00514C3.35645 4.10075 2 5.51697 2 7.25V16.75L2.00514 16.9344C2.10075 18.6435 3.51697 20 5.25 20H18.75L18.9344 19.9949C20.6435 19.8992 22 18.483 22 16.75V13.1234C21.5515 13.4424 21.0453 13.6855 20.5 13.8338V16.75L20.4942 16.8935C20.4212 17.7929 19.6682 18.5 18.75 18.5H5.25L5.10647 18.4942C4.20711 18.4212 3.5 17.6682 3.5 16.75V9.374L11.6507 13.6637L11.7468 13.706C11.9431 13.7764 12.1619 13.7623 12.3493 13.6637L15.4132 12.0508C15.1193 11.6489 14.887 11.1991 14.7303 10.7152L12 12.1525L3.5 7.679V7.25L3.5058 7.10647C3.57881 6.20711 4.33183 5.5 5.25 5.5H12.8949C12.8006 5.18315 12.75 4.84749 12.75 4.5C12.75 4.33024 12.7621 4.1633 12.7854 4Z" 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/mail_fish_hook_24_regular.svg";

Details