Communication Person icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_communication_person_24_regular.svg" width="24" height="24" alt="Communication 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="M3.5 13C3.5 8.30558 7.30558 4.5 12 4.5C16.1982 4.5 19.6856 7.5436 20.3759 11.5446C21.2035 12.0711 21.795 12.9355 21.956 13.9437C21.9851 13.633 22 13.3182 22 13C22 7.47715 17.5228 3 12 3C6.47715 3 2 7.47715 2 13C2 15.7581 3.11755 18.2565 4.92274 20.0649C5.21538 20.358 5.69025 20.3584 5.9834 20.0658C6.27655 19.7732 6.27696 19.2983 5.98432 19.0051C4.44841 17.4665 3.5 15.3447 3.5 13ZM18.1908 11.0135C17.3514 8.39523 14.897 6.5 12 6.5C8.41015 6.5 5.5 9.41015 5.5 13C5.5 14.7958 6.22927 16.4228 7.40601 17.5984C7.69905 17.8912 8.17392 17.8909 8.46667 17.5979C8.75943 17.3049 8.7592 16.83 8.46617 16.5372C7.55952 15.6315 7 14.3818 7 13C7 10.2386 9.23858 8 12 8C14.2251 8 16.1108 9.45353 16.7593 11.4629C17.1877 11.2168 17.6731 11.0588 18.1908 11.0135ZM9.5 13C9.5 11.6193 10.6193 10.5 12 10.5C13.3807 10.5 14.5 11.6193 14.5 13C14.5 14.3807 13.3807 15.5 12 15.5C10.6193 15.5 9.5 14.3807 9.5 13ZM12 12C11.4477 12 11 12.4477 11 13C11 13.5523 11.4477 14 12 14C12.5523 14 13 13.5523 13 13C13 12.4477 12.5523 12 12 12ZM21 14.5C21 15.8807 19.8807 17 18.5 17C17.1193 17 16 15.8807 16 14.5C16 13.1193 17.1193 12 18.5 12C19.8807 12 21 13.1193 21 14.5ZM23 19.875C23 21.4315 21.7143 23 18.5 23C15.2857 23 14 21.4374 14 19.875V19.772C14 18.7929 14.7937 18 15.7727 18H21.2273C22.2063 18 23 18.793 23 19.772V19.875Z" 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/communication_person_24_regular.svg";

Details

Keywords

castconnectwifishare