Phone Person icon

Use the Phone 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 { PhonePerson24Regular, PhonePerson24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_phone_person_24_regular.svg" width="24" height="24" alt="Phone 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="M13.75 2C14.9926 2 16 3.00736 16 4.25V11.3368C15.3764 11.6331 14.8542 12.1083 14.5 12.6962V4.25C14.5 3.83579 14.1642 3.5 13.75 3.5H6.25C5.83579 3.5 5.5 3.83579 5.5 4.25V19.75C5.5 20.1642 5.83579 20.5 6.25 20.5H12.0518C12.1398 21.0252 12.3414 21.537 12.6652 22H6.25C5.00736 22 4 20.9926 4 19.75V4.25C4 3.00736 5.00736 2 6.25 2H13.75ZM11.2489 17.5C11.6631 17.4994 11.9994 17.8347 12 18.2489C12.0006 18.6631 11.6653 18.9994 11.2511 19L8.75113 19.0038C8.33692 19.0044 8.00062 18.6691 8 18.2549C7.99938 17.8407 8.33466 17.5044 8.74887 17.5038L11.2489 17.5ZM20 14.5C20 15.8807 18.8807 17 17.5 17C16.1193 17 15 15.8807 15 14.5C15 13.1193 16.1193 12 17.5 12C18.8807 12 20 13.1193 20 14.5ZM22 19.875C22 21.4315 20.7143 23 17.5 23C14.2857 23 13 21.4374 13 19.875V19.772C13 18.7929 13.7937 18 14.7727 18H20.2273C21.2063 18 22 18.793 22 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/phone_person_24_regular.svg";

Details

Keywords

phonedevicepeoplepersonenrollmentaccountworkorgorganizationprofile