People Chat icon

Use the People Chat 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 { PeopleChat24Regular, PeopleChat24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M8 4.5C6.61929 4.5 5.5 5.61929 5.5 7C5.5 8.38071 6.61929 9.5 8 9.5C9.38071 9.5 10.5 8.38071 10.5 7C10.5 5.61929 9.38071 4.5 8 4.5ZM4 7C4 4.79086 5.79086 3 8 3C10.2091 3 12 4.79086 12 7C12 9.20914 10.2091 11 8 11C5.79086 11 4 9.20914 4 7ZM17 6.5C16.1716 6.5 15.5 7.17157 15.5 8C15.5 8.82843 16.1716 9.5 17 9.5C17.8284 9.5 18.5 8.82843 18.5 8C18.5 7.17157 17.8284 6.5 17 6.5ZM14 8C14 6.34315 15.3431 5 17 5C18.6569 5 20 6.34315 20 8C20 9.65685 18.6569 11 17 11C15.3431 11 14 9.65685 14 8ZM2 15.25C2 14.0074 3.00736 13 4.25 13H11.75C12.0663 13 12.3674 13.0653 12.6405 13.1831C12.2865 13.5813 11.9807 14.0233 11.7322 14.5H4.25C3.83579 14.5 3.5 14.8358 3.5 15.25V15.4947L3.50047 15.5072C3.50117 15.5222 3.50281 15.5493 3.50653 15.5865C3.514 15.6612 3.5297 15.7753 3.56241 15.9155C3.62818 16.1974 3.75971 16.5721 4.02067 16.9449C4.51434 17.6501 5.57822 18.5 8 18.5C9.41267 18.5 10.3633 18.2108 11.0082 17.8299C11.035 18.366 11.1268 18.8851 11.2758 19.3793C10.4411 19.7598 9.36897 20 8 20C5.17178 20 3.61066 18.9749 2.79183 17.8051C2.39654 17.2404 2.19995 16.6776 2.10165 16.2564C2.05233 16.045 2.02701 15.8661 2.01398 15.7358C2.00745 15.6705 2.00396 15.6169 2.0021 15.5771C2.00117 15.5571 2.00064 15.5406 2.00035 15.5277L2.00007 15.5111L2.00001 15.5048L2 15.5022L2 15.5011V15.25ZM17.5011 23.0024C20.5393 23.0024 23.0023 20.5395 23.0023 17.5012C23.0023 14.463 20.5393 12 17.5011 12C14.4629 12 12 14.463 12 17.5012C12 18.4692 12.25 19.3787 12.6889 20.1688L12.0231 22.3553C11.9066 22.7381 12.2644 23.0959 12.6471 22.9795L14.8343 22.3139C15.6242 22.7526 16.5335 23.0024 17.5011 23.0024ZM15.5009 17.0011C15.2247 17.0011 15.0008 16.7772 15.0008 16.501C15.0008 16.2248 15.2247 16.0009 15.5009 16.0009H19.5015C19.7777 16.0009 20.0016 16.2248 20.0016 16.501C20.0016 16.7772 19.7777 17.0011 19.5015 17.0011H15.5009ZM17.5011 19.0015H15.5009C15.2247 19.0015 15.0008 18.7776 15.0008 18.5014C15.0008 18.2252 15.2247 18.0013 15.5009 18.0013H17.5011C17.7773 18.0013 18.0012 18.2252 18.0012 18.5014C18.0012 18.7776 17.7773 19.0015 17.5011 19.0015Z" 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/people_chat_24_regular.svg";

Details

Keywords

discussionmessagepostgroupteamorganizationcontactguest