People Call icon

Use the People Call 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 { PeopleCall24Regular, PeopleCall24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M5.5 7C5.5 5.61929 6.61929 4.5 8 4.5C9.38071 4.5 10.5 5.61929 10.5 7C10.5 8.38071 9.38071 9.5 8 9.5C6.61929 9.5 5.5 8.38071 5.5 7ZM8 3C5.79086 3 4 4.79086 4 7C4 9.20914 5.79086 11 8 11C10.2091 11 12 9.20914 12 7C12 4.79086 10.2091 3 8 3ZM15.5 8C15.5 7.17157 16.1716 6.5 17 6.5C17.8284 6.5 18.5 7.17157 18.5 8C18.5 8.82843 17.8284 9.5 17 9.5C16.1716 9.5 15.5 8.82843 15.5 8ZM17 5C15.3431 5 14 6.34315 14 8C14 9.65685 15.3431 11 17 11C18.6569 11 20 9.65685 20 8C20 6.34315 18.6569 5 17 5ZM4.25 13C3.00736 13 2 14.0074 2 15.25V15.5011L2 15.5022L2.00001 15.5048L2.00007 15.5111L2.00035 15.5277C2.00064 15.5406 2.00117 15.5571 2.0021 15.5771C2.00396 15.6169 2.00745 15.6705 2.01398 15.7358C2.02701 15.8661 2.05233 16.045 2.10165 16.2564C2.19995 16.6776 2.39654 17.2404 2.79183 17.8051C3.61066 18.9749 5.17178 20 8 20C10.8282 20 12.3893 18.9749 13.2082 17.8051C13.6035 17.2404 13.8001 16.6776 13.8983 16.2564C13.9477 16.045 13.973 15.8661 13.986 15.7358C13.9926 15.6705 13.996 15.6169 13.9979 15.5771C13.9988 15.5571 13.9994 15.5406 13.9996 15.5277L13.9999 15.5111L14 15.5048L14 15.5022L14 15.25C14 14.0074 12.9926 13 11.75 13H4.25ZM3.50047 15.5072L3.5 15.4947V15.25C3.5 14.8358 3.83579 14.5 4.25 14.5H11.75C12.1642 14.5 12.5 14.8358 12.5 15.25V15.4946L12.4995 15.5072C12.4988 15.5222 12.4972 15.5493 12.4935 15.5865C12.486 15.6612 12.4703 15.7753 12.4376 15.9155C12.3718 16.1974 12.2403 16.5721 11.9793 16.9449C11.4857 17.6501 10.4218 18.5 8 18.5C5.57822 18.5 4.51434 17.6501 4.02067 16.9449C3.75971 16.5721 3.62818 16.1974 3.56241 15.9155C3.5297 15.7753 3.514 15.6612 3.50653 15.5865C3.50281 15.5493 3.50117 15.5222 3.50047 15.5072ZM18.1924 13.9949L18.6679 12.7903C18.9104 12.1758 19.5886 11.8568 20.2161 12.0622L20.6472 12.2032C21.3714 12.4402 21.9726 13.0093 21.997 13.7719C22.0962 16.8829 19.5215 21.3545 16.7841 22.827C16.1109 23.1892 15.3158 22.9496 14.7485 22.4358L14.4118 22.1308C13.9231 21.6881 13.8611 20.9417 14.2702 20.4251L15.0701 19.4149C15.3603 19.0484 15.8368 18.8844 16.2909 18.9946L17.5822 19.308C18.6853 18.578 19.2765 17.5517 19.3557 16.2292L18.4395 15.2652C18.117 14.926 18.0206 14.4301 18.1924 13.9949Z" 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_call_24_regular.svg";

Details

Keywords

groupteamorganizationcontactguestphonehandset