Person Phone icon
Used to represent a device tied to a person, through enrollment. The Person Phone icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Person Phone 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 { PersonPhone24Regular, PersonPhone24Filled } from "@fluentui/react-icons";
export function Example() {
return <PersonPhone24Regular aria-label="Person Phone" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_person_phone_24_regular.svg" width="24" height="24" alt="Person Phone"> 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="M14.0005 15.4999V13.9999H4.25278C3.01076 13.9999 2.00391 15.0068 2.00391 16.2488V16.8265C2.00391 17.7193 2.32242 18.5828 2.90219 19.2617C4.46849 21.0959 6.8545 22.0011 10.0004 22.0011C11.5108 22.0011 12.8463 21.7924 14.0005 21.3725V19.7523C12.9189 20.2499 11.5894 20.5011 10.0004 20.5011C7.26206 20.5011 5.29618 19.7553 4.04287 18.2876C3.69502 17.8802 3.50391 17.3622 3.50391 16.8265V16.2488C3.50391 15.8352 3.83919 15.4999 4.25278 15.4999H14.0005ZM10.0004 2.00464C12.7618 2.00464 15.0004 4.24321 15.0004 7.00464C15.0004 9.76606 12.7618 12.0046 10.0004 12.0046C7.23894 12.0046 5.00036 9.76606 5.00036 7.00464C5.00036 4.24321 7.23894 2.00464 10.0004 2.00464ZM10.0004 3.50464C8.06737 3.50464 6.50036 5.07164 6.50036 7.00464C6.50036 8.93764 8.06737 10.5046 10.0004 10.5046C11.9334 10.5046 13.5004 8.93764 13.5004 7.00464C13.5004 5.07164 11.9334 3.50464 10.0004 3.50464ZM21.2549 10C22.2214 10 23.0049 10.7835 23.0049 11.75V21.2501C23.0049 22.2166 22.2214 23.0001 21.2549 23.0001H16.7505C15.784 23.0001 15.0005 22.2166 15.0005 21.2501V11.75C15.0005 10.7835 15.784 10 16.7505 10H21.2549ZM19.2527 18.997H18.7527L18.6509 19.0038C18.2849 19.0535 18.0027 19.3673 18.0027 19.747C18.0027 20.1612 18.3385 20.497 18.7527 20.497H19.2527L19.3545 20.4902C19.7206 20.4405 20.0027 20.1267 20.0027 19.747C20.0027 19.3328 19.6669 18.997 19.2527 18.997Z" 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/person_phone_24_regular.svg";Details
| Name | Person Phone |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_person_phone_24_regular.svg |
| Filled file | ic_fluent_person_phone_24_filled.svg |
| React components | PersonPhone24Regular, PersonPhone24Filled |
| License | MIT (© Microsoft Corporation) |