Comment Edit icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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.7507L10.1239 20.1608L10.5199 18.5768C10.5914 18.2911 10.6965 18.0162 10.8322 17.7578L7.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.25V10.0946C21.0475 10.2288 21.5671 10.5054 22 10.9246V6.25C22 4.45507 20.5449 3 18.75 3H5.25C3.45507 3 2 4.45507 2 6.25V14.75ZM18.0979 11.6695L12.1955 17.5719C11.8513 17.916 11.6072 18.3472 11.4892 18.8194L11.0315 20.6501C10.8325 21.4462 11.5536 22.1674 12.3497 21.9683L14.1804 21.5106C14.6526 21.3926 15.0838 21.1485 15.4279 20.8043L21.3303 14.9019C22.223 14.0093 22.223 12.5621 21.3303 11.6695C20.4377 10.7768 18.9905 10.7768 18.0979 11.6695Z" 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_edit_24_regular.svg";

Details

Keywords

chatmentiondiscussion