Comment Text icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_comment_text_24_regular.svg" width="24" height="24" alt="Comment Text">

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="M2 14.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.75V6.25C22 4.45507 20.5449 3 18.75 3H5.25C3.45507 3 2 4.45507 2 6.25V14.75ZM18.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.5H18.75C19.7165 4.5 20.5 5.2835 20.5 6.25V14.75C20.5 15.7165 19.7165 16.5 18.75 16.5ZM11.25 12H18.25C18.6642 12 19 11.6642 19 11.25C19 10.8358 18.6642 10.5 18.25 10.5H11.25C10.8358 10.5 10.5 10.8358 10.5 11.25C10.5 11.6642 10.8358 12 11.25 12ZM8.25 10.5H5.75C5.33579 10.5 5 10.8358 5 11.25C5 11.6642 5.33579 12 5.75 12H8.25C8.66421 12 9 11.6642 9 11.25C9 10.8358 8.66421 10.5 8.25 10.5ZM5.75 13.5C5.33579 13.5 5 13.8358 5 14.25C5 14.6642 5.33579 15 5.75 15H12.75C13.1642 15 13.5 14.6642 13.5 14.25C13.5 13.8358 13.1642 13.5 12.75 13.5H5.75ZM15.75 15C15.3358 15 15 14.6642 15 14.25C15 13.8358 15.3358 13.5 15.75 13.5H18.25C18.6642 13.5 19 13.8358 19 14.25C19 14.6642 18.6642 15 18.25 15H15.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/comment_text_24_regular.svg";

Details

Keywords

chatmentiondiscussioncaptiontext