Text Quote Opening icon

Use the Text Quote Opening 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 { TextQuoteOpening24Regular, TextQuoteOpening24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TextQuoteOpening24Regular aria-label="Text Quote Opening" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_text_quote_opening_24_regular.svg" width="24" height="24" alt="Text Quote Opening">

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.0039 19C14.3752 19 13.0513 17.702 13.0068 16.084C13.0037 16.0564 13.001 16.0285 13.001 16C13.001 13.0673 14.0679 10.6182 15.1143 8.91896C15.6388 8.06714 16.1639 7.39495 16.5596 6.93361C16.7576 6.70272 16.9242 6.52334 17.043 6.40041C17.1022 6.3391 17.1499 6.29189 17.1836 6.2588C17.2004 6.24224 17.2139 6.22906 17.2236 6.21974C17.2284 6.21514 17.2324 6.21082 17.2354 6.20802L17.2393 6.20509L17.2402 6.20314C17.5424 5.91999 18.0176 5.93521 18.3008 6.23732C18.5839 6.53953 18.5687 7.01367 18.2666 7.29689C18.2666 7.29689 18.2642 7.29941 18.2617 7.30177C18.2563 7.30697 18.2468 7.31591 18.2344 7.32814C18.2095 7.3526 18.1711 7.3916 18.1211 7.44337C18.021 7.54694 17.8751 7.70394 17.6982 7.91017C17.3435 8.32377 16.8676 8.93304 16.3916 9.70607C15.8041 10.6602 15.2257 11.8516 14.8662 13.2246C15.2172 13.0806 15.601 13 16.0039 13C17.6608 13 19.0039 14.3432 19.0039 16C19.0039 17.6569 17.6608 19 16.0039 19ZM8.00391 19C6.37515 19 5.05134 17.702 5.00684 16.084C5.00375 16.0564 5.00098 16.0285 5.00098 16C5.00098 13.0673 6.06791 10.6182 7.11426 8.91896C7.63881 8.06714 8.16389 7.39495 8.55957 6.93361C8.7576 6.70272 8.9242 6.52334 9.04297 6.40041C9.1022 6.3391 9.14993 6.29189 9.18359 6.2588C9.20045 6.24224 9.21392 6.22906 9.22363 6.21974C9.22843 6.21514 9.2324 6.21082 9.23535 6.20802L9.23926 6.20509L9.24023 6.20314C9.54245 5.91999 10.0176 5.93521 10.3008 6.23732C10.5839 6.53953 10.5687 7.01367 10.2666 7.29689C10.2666 7.29689 10.2642 7.29941 10.2617 7.30177C10.2563 7.30697 10.2468 7.31591 10.2344 7.32814C10.2095 7.3526 10.1711 7.3916 10.1211 7.44337C10.021 7.54694 9.87513 7.70394 9.69824 7.91017C9.34351 8.32377 8.8676 8.93304 8.3916 9.70607C7.80409 10.6602 7.22574 11.8516 6.86621 13.2246C7.21719 13.0806 7.60103 13 8.00391 13C9.66076 13 11.0039 14.3432 11.0039 16C11.0039 17.6569 9.66076 19 8.00391 19ZM16.0039 17.5C16.8323 17.5 17.5039 16.8284 17.5039 16C17.5039 15.1716 16.8323 14.5 16.0039 14.5C15.1755 14.5 14.5039 15.1716 14.5039 16C14.5039 16.8284 15.1755 17.5 16.0039 17.5ZM8.00391 17.5C8.83233 17.5 9.50391 16.8284 9.50391 16C9.50391 15.1716 8.83233 14.5 8.00391 14.5C7.17548 14.5 6.50391 15.1716 6.50391 16C6.50391 16.8284 7.17548 17.5 8.00391 17.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/text_quote_opening_24_regular.svg";

Details