Chat Multiple Checkmark icon

Use the Chat Multiple 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 { ChatMultipleCheckmark24Regular, ChatMultipleCheckmark24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_chat_multiple_checkmark_24_regular.svg" width="24" height="24" alt="Chat Multiple 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="M13.0606 8.99827C13.3357 8.68869 13.3079 8.21463 12.9983 7.93944C12.6887 7.66425 12.2146 7.69214 11.9394 8.00173L8.44187 11.9365L7.0029 10.6359C6.69561 10.3582 6.22134 10.3821 5.94359 10.6894C5.66585 10.9967 5.6898 11.471 5.9971 11.7487L7.9971 13.5564C8.14546 13.6905 8.34124 13.7598 8.54094 13.7489C8.74063 13.738 8.92769 13.6477 9.06056 13.4983L13.0606 8.99827ZM2.06158 10.5C2.06158 6.35786 5.41944 3 9.56158 3C13.7037 3 17.0616 6.35786 17.0616 10.5C17.0616 14.6421 13.7037 18 9.56158 18C8.46241 18 7.41678 17.7631 6.47447 17.337C5.44699 17.5819 4.29396 17.8587 3.54374 18.039C2.6294 18.2588 1.80697 17.428 2.03999 16.5147C2.22638 15.7842 2.5102 14.6714 2.76423 13.6734C2.31325 12.7088 2.06158 11.6329 2.06158 10.5ZM9.56158 4.5C6.24787 4.5 3.56158 7.18629 3.56158 10.5C3.56158 11.4914 3.80145 12.4246 4.22568 13.2468L4.35619 13.4998L4.28601 13.7757C4.05784 14.6724 3.79467 15.7047 3.59592 16.4838C4.39489 16.2919 5.46095 16.0363 6.38368 15.8167L6.6482 15.7537L6.89161 15.8749C7.69487 16.2748 8.60084 16.5 9.56158 16.5C12.8753 16.5 15.5616 13.8137 15.5616 10.5C15.5616 7.18629 12.8753 4.5 9.56158 4.5ZM9.46191 18.9995C10.8001 20.241 12.5922 21.0001 14.5616 21.0001C15.6611 21.0001 16.707 20.763 17.6495 20.3367C18.6933 20.581 19.8358 20.8248 20.563 20.9768C21.4554 21.1633 22.2348 20.3623 22.0304 19.4773C21.8679 18.774 21.6117 17.6821 21.3586 16.6741C21.8098 15.7094 22.0616 14.6332 22.0616 13.5001C22.0616 10.2171 19.9523 7.42684 17.015 6.41052C17.3653 7.04756 17.6363 7.73435 17.8146 8.45761C19.4676 9.52617 20.5616 11.3853 20.5616 13.5001C20.5616 14.4915 20.3217 15.4247 19.8975 16.2469L19.767 16.4999L19.8372 16.7757C20.065 17.6711 20.3037 18.6757 20.4787 19.4262C19.7046 19.2625 18.6611 19.0361 17.7395 18.8167L17.475 18.7537L17.2316 18.8749C16.4283 19.2748 15.5223 19.5001 14.5616 19.5001C13.5021 19.5001 12.5067 19.2254 11.6427 18.7434C10.9768 18.911 10.2796 19.0001 9.56163 19.0001C9.52835 19.0001 9.49511 18.9999 9.46191 18.9995Z" 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_multiple_checkmark_24_regular.svg";

Details