Chat Checkmark icon

Use the Chat Checkmark 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 { ChatCheckmark24Regular, ChatCheckmark24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ChatCheckmark24Regular aria-label="Chat Checkmark" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_chat_checkmark_24_regular.svg" width="24" height="24" alt="Chat Checkmark">

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="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C10.3817 22 8.81804 21.6142 7.41309 20.8877L3.58691 21.9551C2.9221 22.1407 2.23266 21.7526 2.04688 21.0879C1.98543 20.8679 1.98542 20.6349 2.04688 20.415L3.11426 16.5918C2.38617 15.1857 2 13.6201 2 12C2 6.47715 6.47715 2 12 2ZM12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 13.4696 3.87298 14.8836 4.57324 16.1377L4.72363 16.4072L3.61133 20.3916L7.59766 19.2793L7.86719 19.4297C9.12012 20.1283 10.5322 20.5 12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM15.2197 8.96973C15.5126 8.67683 15.9874 8.67683 16.2803 8.96973C16.5732 9.26262 16.5732 9.73738 16.2803 10.0303L11.2803 15.0303C11.1396 15.1709 10.9489 15.25 10.75 15.25C10.5511 15.25 10.3604 15.1709 10.2197 15.0303L7.71973 12.5303C7.42683 12.2374 7.42683 11.7626 7.71973 11.4697C8.01262 11.1768 8.48738 11.1768 8.78027 11.4697L10.75 13.4395L15.2197 8.96973Z" 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/chat_checkmark_24_regular.svg";

Details