Chat Multiple Person icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_chat_multiple_person_24_regular.svg" width="24" height="24" alt="Chat Multiple Person">

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="M17.0146 6.41016C19.9519 7.42647 22.0615 10.2171 22.0615 13.5C22.0615 14.6331 21.8095 15.7092 21.3583 16.6738C21.6114 17.6818 21.8677 18.7742 22.0302 19.4775C22.2345 20.3624 21.4549 21.1631 20.5624 20.9766C19.8353 20.8246 18.693 20.5812 17.6494 20.3369C16.7069 20.7632 15.6609 21 14.5615 21C12.5921 21 10.8001 20.2405 9.46186 18.999C9.49502 18.9994 9.52822 19 9.56147 19C10.2794 19 10.9766 18.9108 11.6425 18.7432C12.5065 19.2251 13.5019 19.5 14.5615 19.5C15.5222 19.5 16.4282 19.2749 17.2314 18.875L17.4746 18.7539L17.7392 18.8164C18.6607 19.0358 19.7044 19.2621 20.4785 19.4258C20.3035 18.6753 20.0646 17.6706 19.8369 16.7754L19.7666 16.5L19.8974 16.2471C20.3216 15.4249 20.5615 14.4914 20.5615 13.5C20.5615 11.3854 19.4673 9.52657 17.8144 8.45801C17.636 7.73476 17.3649 7.04719 17.0146 6.41016ZM9.56147 3C13.7036 3 17.0615 6.35787 17.0615 10.5C17.0615 14.6421 13.7036 18 9.56147 18C8.46236 18 7.41683 17.763 6.47456 17.3369C5.44718 17.5818 4.29412 17.8587 3.54389 18.0391C2.62955 18.2588 1.80696 17.4279 2.03998 16.5146C2.22635 15.7842 2.51059 14.6717 2.76459 13.6738C2.31361 12.7093 2.06147 11.6329 2.06147 10.5C2.06147 6.35786 5.41933 3 9.56147 3ZM9.56147 4.5C6.24776 4.5 3.56147 7.18629 3.56147 10.5C3.56147 11.4914 3.80131 12.4249 4.22553 13.2471L4.35639 13.5L4.28608 13.7754C4.05795 14.672 3.79439 15.7043 3.59565 16.4834C4.39462 16.2915 5.46101 16.0361 6.38374 15.8164L6.64838 15.7539L6.89155 15.875C7.69479 16.2749 8.60077 16.5 9.56147 16.5C12.8752 16.5 15.5615 13.8137 15.5615 10.5C15.5615 7.18629 12.8752 4.5 9.56147 4.5ZM11.4999 11C12.3284 11 12.9999 11.6716 12.9999 12.5C12.9999 14 11.4999 15 9.49995 15C7.49995 15 5.99995 14 5.99995 12.5C5.99995 11.6716 6.67152 11 7.49995 11H11.4999ZM9.49995 6C10.6045 6.00003 11.4999 6.89545 11.4999 8C11.4999 9.10455 10.6045 9.99997 9.49995 10C8.39538 10 7.49995 9.10457 7.49995 8C7.49995 6.89543 8.39538 6 9.49995 6Z" 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_person_24_regular.svg";

Details