Bow Tie icon

Use the Bow Tie 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 { BowTie24Regular, BowTie24Filled } from "@fluentui/react-icons";

export function Example() {
  return <BowTie24Regular aria-label="Bow Tie" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_bow_tie_24_regular.svg" width="24" height="24" alt="Bow Tie">

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="M5.73352 13.8907L6.18223 13.6362L4.84634 18.8127C4.56049 19.9204 5.39685 21 6.54083 21H9C9.9665 21 10.75 20.2165 10.75 19.25V11.5L10.7498 11.4845C10.8318 11.4947 10.9153 11.5 11 11.5H13C13.0847 11.5 13.1682 11.4947 13.2502 11.4845C13.2501 11.4897 13.25 11.4948 13.25 11.5V19.25C13.25 20.2165 14.0335 21 15 21H17.4592C18.6031 21 19.4395 19.9204 19.1537 18.8127L17.8178 13.6362L18.2665 13.8907C19.9331 14.8361 22 13.6323 22 11.7162V5.76557C22 3.84601 19.9263 2.64259 18.2597 3.59496L14.7597 5.59496C14.5811 5.69697 14.4183 5.81911 14.2733 5.9576C13.9274 5.67175 13.4838 5.5 13 5.5H11C10.5162 5.5 10.0726 5.67175 9.72672 5.9576C9.58173 5.81911 9.41887 5.69697 9.24035 5.59496L5.74035 3.59496C4.07371 2.64259 2 3.84601 2 5.76557V11.7162C2 13.6323 4.06693 14.8361 5.73352 13.8907ZM3.5 5.76557C3.5 4.99774 4.32948 4.51638 4.99614 4.89732L8.49614 6.89732C8.80771 7.07537 9 7.40671 9 7.76557V8H6.75C6.33579 8 6 8.33579 6 8.75C6 9.16421 6.33579 9.5 6.75 9.5H9V9.73076C9 10.0907 8.80652 10.4229 8.49341 10.6006L4.99341 12.586C4.32677 12.9642 3.5 12.4826 3.5 11.7162V5.76557ZM9.23352 11.9053L9.25 11.8958V19.25C9.25 19.3881 9.13807 19.5 9 19.5H6.54083C6.3774 19.5 6.25792 19.3458 6.29876 19.1875L7.97621 12.6874C7.98291 12.6614 7.98816 12.6355 7.99202 12.6095L9.23352 11.9053ZM16.008 12.6095C16.0118 12.6355 16.0171 12.6614 16.0238 12.6874L17.7012 19.1875C17.7421 19.3458 17.6226 19.5 17.4592 19.5H15C14.8619 19.5 14.75 19.3881 14.75 19.25V11.8958C14.7555 11.899 14.761 11.9021 14.7665 11.9053L16.008 12.6095ZM10.5 9.5V7.5C10.5 7.22386 10.7239 7 11 7H13C13.2761 7 13.5 7.22386 13.5 7.5V9.5C13.5 9.77614 13.2761 10 13 10H11C10.7239 10 10.5 9.77614 10.5 9.5ZM15 9.5H17.2536C17.6678 9.5 18.0036 9.16421 18.0036 8.75C18.0036 8.33579 17.6678 8 17.2536 8H15V7.76557C15 7.40671 15.1923 7.07537 15.5039 6.89732L19.0039 4.89732C19.6705 4.51638 20.5 4.99774 20.5 5.76557V11.7162C20.5 12.4826 19.6732 12.9642 19.0066 12.586L15.5066 10.6006C15.1935 10.4229 15 10.0907 15 9.73076V9.5Z" 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/bow_tie_24_regular.svg";

Details