Tooltip Quote icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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="M6.25 5.5C5.83579 5.5 5.5 5.83579 5.5 6.25V7.25C5.5 7.66421 5.83579 8 6.25 8C6.39062 8 6.52221 7.9613 6.63469 7.89396C6.33212 8.55794 5.92043 9.01891 5.71967 9.21967C5.42678 9.51256 5.42678 9.98744 5.71967 10.2803C6.01256 10.5732 6.48744 10.5732 6.78033 10.2803C7.21199 9.84867 8.5 8.4013 8.5 6.25C8.5 5.83579 8.16421 5.5 7.75 5.5H6.25ZM10.25 5.5C9.83579 5.5 9.5 5.83579 9.5 6.25V7.25C9.5 7.66421 9.83579 8 10.25 8C10.3906 8 10.5222 7.9613 10.6347 7.89396C10.3321 8.55794 9.92043 9.01891 9.71967 9.21967C9.42678 9.51256 9.42678 9.98744 9.71967 10.2803C10.0126 10.5732 10.4874 10.5732 10.7803 10.2803C11.212 9.84867 12.5 8.4013 12.5 6.25C12.5 5.83579 12.1642 5.5 11.75 5.5H10.25ZM2 4.25C2 3.00736 3.00736 2 4.25 2H13.25C14.4926 2 15.5 3.00736 15.5 4.25V11.75C15.5 12.9926 14.4926 14 13.25 14H11.308L9.41363 17.5994C9.28394 17.8458 9.0284 18.0001 8.74994 18.0001C8.47148 18.0001 8.21594 17.8458 8.08625 17.5994L6.19185 14H4.25C3.00736 14 2 12.9926 2 11.75L2 4.25ZM4.25 3.5C3.83579 3.5 3.5 3.83579 3.5 4.25L3.5 11.75C3.5 12.1642 3.83579 12.5 4.25 12.5H6.64464C6.9231 12.5 7.17864 12.6543 7.30833 12.9007L8.74994 15.6397L10.1915 12.9007C10.3212 12.6543 10.5768 12.5 10.8552 12.5H13.25C13.6642 12.5 14 12.1642 14 11.75V4.25C14 3.83579 13.6642 3.5 13.25 3.5H4.25ZM6.37759 16.5H2.75C2.33579 16.5 2 16.8358 2 17.25C2 17.6642 2.33579 18 2.75 18H7.16706L6.37759 16.5ZM10.3328 18H21.25C21.6642 18 22 17.6642 22 17.25C22 16.8358 21.6642 16.5 21.25 16.5H11.1223L10.3328 18ZM2.75 20.5C2.33579 20.5 2 20.8358 2 21.25C2 21.6642 2.33579 22 2.75 22H14.75C15.1642 22 15.5 21.6642 15.5 21.25C15.5 20.8358 15.1642 20.5 14.75 20.5H2.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_24_regular.svg";

Details

Keywords

textdescriptiontypequote