Comment Lightning icon

Use the Comment Lightning 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 { CommentLightning24Regular, CommentLightning24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M16.3167 1H21.1443C21.5267 1 21.7676 1.41183 21.5801 1.74513L19.7492 5H21.2454C21.8899 5 22.2342 5.75928 21.8096 6.24414L16.9857 11.7519C16.4811 12.328 15.543 11.8375 15.7282 11.0945L16.4992 8H13.4967C13.1303 8 12.8883 7.61892 13.0442 7.28732L15.8642 1.28732C15.9466 1.11195 16.1229 1 16.3167 1ZM5.25 3H13.9555L13.2505 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.75V9.25852L22 7.54586V14.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_lightning_24_regular.svg";

Details

Keywords

chatmentiondiscussion