Comment Link icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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="M23 5.75C23 3.67893 21.3211 2 19.25 2L19.1482 2.00685C18.7822 2.05651 18.5 2.3703 18.5 2.75C18.5 3.16421 18.8358 3.5 19.25 3.5L19.404 3.50519C20.5748 3.58435 21.5 4.55914 21.5 5.75C21.5 6.99264 20.4926 8 19.25 8L19.2466 8.0046L19.1448 8.01191C18.779 8.06326 18.4983 8.37834 18.5 8.75803C18.5019 9.17224 18.8392 9.50649 19.2534 9.50462V9.5L19.4523 9.4948C21.4276 9.39127 23 7.75426 23 5.75ZM16.5 2.75C16.5 2.33579 16.1642 2 15.75 2L15.5508 2.0052C13.5724 2.10873 12 3.74574 12 5.75C12 7.82107 13.6789 9.5 15.75 9.5L15.8518 9.49315C16.2178 9.44349 16.5 9.1297 16.5 8.75C16.5 8.33579 16.1642 8 15.75 8L15.596 7.99481C14.4252 7.91565 13.5 6.94086 13.5 5.75C13.5 4.50736 14.5074 3.5 15.75 3.5L15.8518 3.49315C16.2178 3.44349 16.5 3.1297 16.5 2.75ZM20 5.75C20 5.33579 19.6642 5 19.25 5H15.75L15.6482 5.00685C15.2822 5.05651 15 5.3703 15 5.75C15 6.16421 15.3358 6.5 15.75 6.5H19.25L19.3518 6.49315C19.7178 6.44349 20 6.1297 20 5.75ZM5.25 3H11.8766C11.5576 3.44848 11.3145 3.95473 11.1662 4.5H5.25C4.2835 4.5 3.5 5.2835 3.5 6.25V14.75C3.5 15.7165 4.2835 16.5 5.25 16.5H7.49879L7.49986 20.2506L12.5135 16.5H18.75C19.7165 16.5 20.5 15.7165 20.5 14.75V10.3338C21.0453 10.1855 21.5515 9.94243 22 9.62345V14.75C22 16.5449 20.5449 18 18.75 18H13.0125L7.99868 21.7507C7.44585 22.1642 6.6625 22.0512 6.24901 21.4984C6.08736 21.2822 6 21.0196 6 20.7499L5.99921 18H5.25C3.45507 18 2 16.5449 2 14.75V6.25C2 4.45507 3.45507 3 5.25 3Z" 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_link_24_regular.svg";

Details

Keywords

chatmentiondiscussionlinkshare