Tooltip Quote Off icon

Use the Tooltip Quote Off 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 { TooltipQuoteOff24Regular, TooltipQuoteOff24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TooltipQuoteOff24Regular aria-label="Tooltip Quote Off" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_tooltip_quote_off_24_regular.svg" width="24" height="24" alt="Tooltip Quote Off">

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="M14.75 20.5C15.1642 20.5 15.5 20.8358 15.5 21.25C15.5 21.6642 15.1642 22 14.75 22H2.75C2.33579 22 2 21.6642 2 21.25C2 20.8358 2.33579 20.5 2.75 20.5H14.75ZM2.21973 2.21973C2.51262 1.92684 2.98738 1.92684 3.28027 2.21973L21.7803 20.7197L21.8311 20.7764C22.0715 21.0709 22.0548 21.5056 21.7803 21.7803C21.5056 22.0549 21.0709 22.0715 20.7764 21.8311L20.7197 21.7803L16.9395 18H10.333L11.1221 16.5H15.4395L12.9395 14H11.3076L9.41406 17.5996C9.28438 17.846 9.02843 18 8.75 18C8.47156 18 8.21564 17.846 8.08594 17.5996L6.19141 14H4.25C3.00736 14 2 12.9926 2 11.75V4.25C2 3.90283 2.08023 3.57481 2.2207 3.28125L2.21973 3.28027C1.92684 2.98738 1.92684 2.51262 2.21973 2.21973ZM7.16699 18H2.75C2.33579 18 2 17.6642 2 17.25C2 16.8358 2.33579 16.5 2.75 16.5H6.37793L7.16699 18ZM21.25 16.5C21.6642 16.5 22 16.8358 22 17.25C22 17.6642 21.6642 18 21.25 18H21.1816L19.6816 16.5H21.25ZM3.5 11.75C3.5 12.1642 3.83579 12.5 4.25 12.5H6.64453C6.92294 12.5 7.17888 12.6541 7.30859 12.9004L8.75 15.6396L10.1914 12.9004C10.3211 12.6541 10.5771 12.5 10.8555 12.5H11.4395L7.81641 8.87695C7.43707 9.57918 6.99943 10.0611 6.78027 10.2803C6.48738 10.5732 6.01262 10.5732 5.71973 10.2803C5.42683 9.98738 5.42683 9.51262 5.71973 9.21973C5.92049 9.01896 6.3322 8.55753 6.63477 7.89355C6.52229 7.96089 6.39062 8 6.25 8C5.83579 8 5.5 7.66421 5.5 7.25V6.56055L3.5 4.56055V11.75ZM13.25 2C14.4926 2 15.5 3.00736 15.5 4.25V11.75C15.5 11.9249 15.4772 12.0944 15.4395 12.2578L14 10.8184V4.25C14 3.83579 13.6642 3.5 13.25 3.5H6.68164L5.18164 2H13.25ZM11.75 5.5C12.1642 5.5 12.5 5.83579 12.5 6.25C12.5 7.22869 12.2316 8.06079 11.9004 8.71875L9.5 6.31836V6.25C9.5 5.83579 9.83579 5.5 10.25 5.5H11.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/tooltip_quote_off_24_regular.svg";

Details