Comment Quote icon

Use the Comment 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 { CommentQuote24Regular, CommentQuote24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_comment_quote_24_regular.svg" width="24" height="24" alt="Comment 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="M22 4.25C22 3.00736 20.9926 2 19.75 2C18.5074 2 17.5 3.00736 17.5 4.25C17.5 5.49264 18.5074 6.5 19.75 6.5C19.9475 6.5 20.139 6.47457 20.3214 6.42679C20.2128 7.02744 20.0578 7.55888 19.8653 8.04418C19.4674 9.04767 18.8944 9.89268 18.1705 10.7739C17.9075 11.094 17.9539 11.5666 18.2739 11.8295C18.594 12.0925 19.0666 12.0461 19.3295 11.7261C20.1056 10.7812 20.7826 9.80015 21.2597 8.59712C21.7377 7.39158 22 6.00189 22 4.25ZM20.5 11.8614V14.75C20.5 15.7165 19.7165 16.5 18.75 16.5H12.5135L7.49986 20.2506L7.49879 16.5H5.25C4.2835 16.5 3.5 15.7165 3.5 14.75V6.25C3.5 5.2835 4.2835 4.5 5.25 4.5H10.5095C10.5032 4.41749 10.5 4.33412 10.5 4.25C10.5 3.80705 10.5886 3.3848 10.7491 3H5.25C3.45507 3 2 4.45507 2 6.25V14.75C2 16.5449 3.45507 18 5.25 18H5.99921L6 20.7499C6 21.0196 6.08736 21.2822 6.24901 21.4984C6.6625 22.0512 7.44585 22.1642 7.99868 21.7507L13.0125 18H18.75C20.5449 18 22 16.5449 22 14.75V9.41231C21.5844 10.3327 21.0655 11.1267 20.5 11.8614ZM13.75 2C14.9926 2 16 3.00736 16 4.25C16 6.00189 15.7377 7.39158 15.2597 8.59712C14.7826 9.80015 14.1056 10.7812 13.3295 11.7261C13.0666 12.0461 12.594 12.0925 12.2739 11.8295C11.9539 11.5666 11.9075 11.094 12.1705 10.7739C12.8944 9.89268 13.4674 9.04767 13.8653 8.04418C14.0578 7.55888 14.2128 7.02744 14.3214 6.42679C14.139 6.47457 13.9475 6.5 13.75 6.5C12.5074 6.5 11.5 5.49264 11.5 4.25C11.5 3.00736 12.5074 2 13.75 2Z" 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/comment_quote_24_regular.svg";

Details

Keywords

chatmentionquotequotationdiscussioncaptiontext