Phone Desktop icon
Used to represent a physical or digital mobile phone scenarios. The Phone Desktop 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 Phone Desktop 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 { PhoneDesktop24Regular, PhoneDesktop24Filled } from "@fluentui/react-icons";
export function Example() {
return <PhoneDesktop24Regular aria-label="Phone Desktop" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_phone_desktop_24_regular.svg" width="24" height="24" alt="Phone Desktop"> 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="M8.25444 8.99986C9.22093 8.99986 10.0044 9.78336 10.0044 10.7499V20.25C10.0044 21.2165 9.22093 22 8.25444 22H3.75C2.7835 22 2 21.2165 2 20.25V10.7499C2 9.78336 2.7835 8.99986 3.75 8.99986H8.25444ZM8.25444 10.4999H3.75C3.61193 10.4999 3.5 10.6118 3.5 10.7499V20.25C3.5 20.3881 3.61193 20.5 3.75 20.5H8.25444C8.39251 20.5 8.50444 20.3881 8.50444 20.25V10.7499C8.50444 10.6118 8.39251 10.4999 8.25444 10.4999ZM6.24937 18C6.66359 18 6.99937 18.3358 6.99937 18.75C6.99937 19.1297 6.71722 19.4435 6.35114 19.4932L6.24937 19.5H5.74937C5.33516 19.5 4.99937 19.1642 4.99937 18.75C4.99937 18.3703 5.28153 18.0565 5.6476 18.0068L5.74937 18H6.24937ZM19.7494 2C20.9402 2 21.915 2.92516 21.9942 4.09595L21.9994 4.25V13.25C21.9994 14.4409 21.0742 15.4156 19.9034 15.4948L19.7494 15.5H16.0034V17.5H17.2494C17.6636 17.5 17.9994 17.8358 17.9994 18.25C17.9994 18.6297 17.7172 18.9435 17.3511 18.9932L17.2494 19H10.9994V17.5H14.5034V15.5H10.9994V14H19.7494C20.1291 14 20.4429 13.7178 20.4925 13.3518L20.4994 13.25V4.25C20.4994 3.83579 20.1636 3.5 19.7494 3.5H6.24937C5.86968 3.5 5.55588 3.78215 5.50622 4.14823L5.49937 4.25V8H3.99937V4.25C3.99937 3.05914 4.92454 2.08436 6.09533 2.00519L6.24937 2H19.7494Z" 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_desktop_24_regular.svg";Details
| Name | Phone Desktop |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_phone_desktop_24_regular.svg |
| Filled file | ic_fluent_phone_desktop_24_filled.svg |
| React components | PhoneDesktop24Regular, PhoneDesktop24Filled |
| License | MIT (© Microsoft Corporation) |
Keywords
devicemobilesmallscreencellulartelephoneappleandroidmonitorlargescreenconnect