Comment Off icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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="M3.28034 2.21968C2.98745 1.92678 2.51257 1.92677 2.21968 2.21966C1.92678 2.51255 1.92677 2.98743 2.21966 3.28032L2.92177 3.98244C2.35137 4.56801 2 5.36797 2 6.25001V14.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 18H16.9391L20.7194 21.7805C21.0123 22.0734 21.4872 22.0734 21.7801 21.7805C22.073 21.4876 22.073 21.0127 21.7801 20.7198L3.28034 2.21968ZM15.4391 16.5H12.5135L7.49986 20.2506L7.49879 16.5H5.25C4.2835 16.5 3.5 15.7165 3.5 14.75V6.25001C3.5 5.78219 3.68356 5.35725 3.98259 5.04329L15.4391 16.5ZM20.5 14.75C20.5 15.4446 20.0954 16.0446 19.509 16.3273L20.6024 17.4208C21.4471 16.8338 22 15.8565 22 14.75V6.25001C22 4.45508 20.5449 3.00001 18.75 3.00001H6.18197L7.68194 4.50001H18.75C19.7165 4.50001 20.5 5.28351 20.5 6.25001V14.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_off_24_regular.svg";

Details

Keywords

chatmentiondiscussion