Comment Mention icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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="M18 2C15.7906 2 13.9995 3.7911 13.9995 6.00054C13.9995 8.20997 15.7906 10.0011 18 10.0011C18.8264 10.0011 19.5878 9.75982 20.2217 9.33514C20.4512 9.18145 20.7617 9.24285 20.9154 9.47228C21.0691 9.7017 21.0077 10.0123 20.7783 10.166C19.9798 10.7008 19.0248 11.0011 18 11.0011C15.2383 11.0011 12.9995 8.76226 12.9995 6.00054C12.9995 3.23882 15.2383 1 18 1C20.7618 1 23.0006 3.23882 23.0006 6.00054L23.0005 6.01035V6.75052C23.0005 7.71702 22.217 8.50052 21.2505 8.50052C20.6484 8.50052 20.1173 8.19645 19.8024 7.73348C19.3476 8.20632 18.7084 8.50055 18.0005 8.50055C16.6198 8.50055 15.5005 7.38126 15.5005 6.00055C15.5005 4.61984 16.6198 3.50055 18.0005 3.50055C18.5633 3.50055 19.0827 3.68652 19.5005 4.00037C19.5006 3.72431 19.7244 3.50055 20.0005 3.50055C20.2766 3.50055 20.5005 3.72441 20.5005 4.00055V6.75052C20.5005 7.16474 20.8363 7.50052 21.2505 7.50052C21.6647 7.50052 22.0005 7.16474 22.0005 6.75052V5.9952L22.0006 5.98669C21.9931 3.78362 20.2049 2 18 2ZM16.5005 6.00055C16.5005 6.82898 17.1721 7.50055 18.0005 7.50055C18.8289 7.50055 19.5005 6.82898 19.5005 6.00055C19.5005 5.17212 18.8289 4.50055 18.0005 4.50055C17.1721 4.50055 16.5005 5.17212 16.5005 6.00055ZM22 14.7505V10.4728C21.5548 10.8712 21.0498 11.2042 20.5 11.4565V14.7505C20.5 15.717 19.7165 16.5005 18.75 16.5005H12.5135L7.49986 20.2511L7.49879 16.5005H5.25C4.2835 16.5005 3.5 15.717 3.5 14.7505V6.25055C3.5 5.28405 4.2835 4.50055 5.25 4.50055H12.189C12.326 3.96839 12.5341 3.46481 12.8027 3.00055H5.25C3.45507 3.00055 2 4.45562 2 6.25055V14.7505C2 16.5455 3.45507 18.0005 5.25 18.0005H5.99921L6 20.7505C6 21.0201 6.08736 21.2828 6.24901 21.4989C6.6625 22.0518 7.44585 22.1647 7.99868 21.7512L13.0125 18.0005H18.75C20.5449 18.0005 22 16.5455 22 14.7505Z" 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_mention_24_regular.svg";

Details

Keywords

chatmentiondiscussion