People Communication icon

Use the People Communication 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 { PeopleCommunication24Regular, PeopleCommunication24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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.1113 13.6104C15.2592 11.4625 18.7418 11.4625 20.8896 13.6104C23.0372 15.7583 23.0374 19.2409 20.8896 21.3887C20.5968 21.6816 20.121 21.6816 19.8281 21.3887C19.5355 21.0959 19.5357 20.621 19.8281 20.3281C21.3902 18.766 21.3902 16.233 19.8281 14.6709C18.266 13.109 15.7339 13.1089 14.1719 14.6709C12.6098 16.233 12.6098 18.766 14.1719 20.3281C14.4645 20.621 14.4647 21.0959 14.1719 21.3887C13.8791 21.6813 13.4042 21.6812 13.1113 21.3887C10.9634 19.2408 10.9634 15.7582 13.1113 13.6104ZM11.75 13C11.924 13 12.0932 13.0202 12.2559 13.0576C11.853 13.4877 11.5083 13.9727 11.2334 14.5H4.25C3.83579 14.5 3.5 14.8358 3.5 15.25C3.5 15.3624 3.49564 15.475 3.50684 15.5869C3.51432 15.6616 3.52992 15.7753 3.5625 15.915C3.62827 16.1969 3.75954 16.5725 4.02051 16.9453C4.51424 17.6505 5.57844 18.5 8 18.5C9.0957 18.5 9.91266 18.3242 10.5254 18.0684C10.57 18.5838 10.6751 19.0817 10.833 19.5557C10.0709 19.8306 9.13872 20 8 20C5.17178 20 3.61082 18.9744 2.79199 17.8047C2.39694 17.2403 2.19988 16.678 2.10156 16.2568C2.05224 16.0454 2.02671 15.8657 2.01367 15.7354C1.99751 15.5735 2 15.4126 2 15.25C2 14.0074 3.00736 13 4.25 13H11.75ZM14.8828 15.3779C16.0544 14.2066 17.9535 14.2064 19.125 15.3779C20.2965 16.5494 20.2964 18.4485 19.125 19.6201C18.8321 19.913 18.3573 19.913 18.0645 19.6201C17.7717 19.3272 17.7716 18.8524 18.0645 18.5596C18.65 17.9738 18.6502 17.0242 18.0645 16.4385C17.4787 15.8528 16.5292 15.8529 15.9434 16.4385C15.3576 17.0243 15.3576 17.9738 15.9434 18.5596C16.2361 18.8523 16.2359 19.3272 15.9434 19.6201C15.6505 19.913 15.1757 19.913 14.8828 19.6201C13.7112 18.4485 13.7112 16.5495 14.8828 15.3779ZM8 3C10.2091 3 12 4.79086 12 7C12 9.20914 10.2091 11 8 11C5.79086 11 4 9.20914 4 7C4 4.79086 5.79086 3 8 3ZM17 5C18.6569 5 20 6.34315 20 8C20 9.65685 18.6569 11 17 11C15.3431 11 14 9.65685 14 8C14 6.34315 15.3431 5 17 5ZM8 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.5ZM17 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.5Z" 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_communication_24_regular.svg";

Details