phone laptop icon

phone-laptop-32 from Fluent UI System Color Icons by Microsoft Corporation · 32 · MIT Free for personal and commercial use.

Name: phone-laptop-32
Set: Fluent UI System Color Icons
Style: 32
Viewbox: 32×32
License: MIT

3 other variants in Fluent UI System Color Icons

phone-laptop-16 phone-laptop-20 phone-laptop-24

The same icon in other sets

phone-laptop-16-filledFluent UI System Icons

Use the phone laptop icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><path fill="url(#SVGtm3Decpm)" d="m7.5 22l8.5-.5l8.5.5h.307q.194 0 .372.072l3.893 1.557c.56.224.928.767.928 1.371H2c0-.604.368-1.147.928-1.371l3.893-1.558A1 1 0 0 1 7.193 22z"/><path fill="url(#SVGz3frCoae)" d="M3 24a1 1 0 1 0 0 2h26a1 1 0 1 0 0-2z"/><path fill="url(#SVG8jUSIdFl)" d="M4 9.25A3.25 3.25 0 0 1 7.25 6h17.5A3.25 3.25 0 0 1 28 9.25v9.5A3.25 3.25 0 0 1 24.75 22H7.25A3.25 3.25 0 0 1 4 18.75z"/><path fill="url(#SVG3wORTciJ)" fill-opacity=".3" d="M7.25 6A3.25 3.25 0 0 0 4 9.25v9.5A3.25 3.25 0 0 0 7.25 22h-.057a1 1 0 0 0-.372.072l-3.893 1.557C2.368 23.853 2 24.396 2 25a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1c0-.604-.368-1.147-.928-1.371l-3.893-1.558a1 1 0 0 0-.372-.071h-.057A3.25 3.25 0 0 0 28 18.75v-9.5A3.25 3.25 0 0 0 24.75 6z"/><path fill="url(#SVGMJdWVb7B)" d="M2 13a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3z"/><rect width="4" height="2" x="6" y="23" fill="url(#SVGDeexSBNv)" rx="1"/><defs><radialGradient id="SVG3wORTciJ" cx="0" cy="0" r="1" gradientTransform="matrix(4.5 0 0 13 12 22)" gradientUnits="userSpaceOnUse"><stop offset=".009" stop-color="#4a43cb"/><stop offset=".325" stop-color="#4a43cb"/><stop offset="1" stop-color="#4a43cb" stop-opacity="0"/></radialGradient><radialGradient id="SVGMJdWVb7B" cx="0" cy="0" r="1" gradientTransform="rotate(60.63 -3.76 1.051)scale(29.8201 60.3172)" gradientUnits="userSpaceOnUse"><stop stop-color="#f08af4"/><stop offset=".535" stop-color="#9c6cfe"/><stop offset="1" stop-color="#4e44db"/></radialGradient><radialGradient id="SVGDeexSBNv" cx="0" cy="0" r="1" gradientTransform="rotate(53.319 -20.35 16.92)scale(6.06837 6.95492)" gradientUnits="userSpaceOnUse"><stop stop-color="#decbff"/><stop offset="1" stop-color="#d6cfff"/></radialGradient><linearGradient id="SVGtm3Decpm" x1="29.913" x2="27.617" y1="27.071" y2="16.424" gradientUnits="userSpaceOnUse"><stop stop-color="#63686e"/><stop offset="1" stop-color="#889096"/></linearGradient><linearGradient id="SVGz3frCoae" x1="30" x2="29.736" y1="25.857" y2="22.162" gradientUnits="userSpaceOnUse"><stop stop-color="#889096"/><stop offset="1" stop-color="#aab3bd"/></linearGradient><linearGradient id="SVG8jUSIdFl" x1="20.8" x2="21.689" y1="6" y2="24.307" gradientUnits="userSpaceOnUse"><stop stop-color="#6ce0ff"/><stop offset="1" stop-color="#4894fe"/></linearGradient></defs></g></svg>

React

import type { SVGProps } from "react";

export function FluentColorPhoneLaptop32(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><path fill="url(#SVGtm3Decpm)" d="m7.5 22l8.5-.5l8.5.5h.307q.194 0 .372.072l3.893 1.557c.56.224.928.767.928 1.371H2c0-.604.368-1.147.928-1.371l3.893-1.558A1 1 0 0 1 7.193 22z"/><path fill="url(#SVGz3frCoae)" d="M3 24a1 1 0 1 0 0 2h26a1 1 0 1 0 0-2z"/><path fill="url(#SVG8jUSIdFl)" d="M4 9.25A3.25 3.25 0 0 1 7.25 6h17.5A3.25 3.25 0 0 1 28 9.25v9.5A3.25 3.25 0 0 1 24.75 22H7.25A3.25 3.25 0 0 1 4 18.75z"/><path fill="url(#SVG3wORTciJ)" fillOpacity=".3" d="M7.25 6A3.25 3.25 0 0 0 4 9.25v9.5A3.25 3.25 0 0 0 7.25 22h-.057a1 1 0 0 0-.372.072l-3.893 1.557C2.368 23.853 2 24.396 2 25a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1c0-.604-.368-1.147-.928-1.371l-3.893-1.558a1 1 0 0 0-.372-.071h-.057A3.25 3.25 0 0 0 28 18.75v-9.5A3.25 3.25 0 0 0 24.75 6z"/><path fill="url(#SVGMJdWVb7B)" d="M2 13a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3z"/><rect width="4" height="2" x="6" y="23" fill="url(#SVGDeexSBNv)" rx="1"/><defs><radialGradient id="SVG3wORTciJ" cx="0" cy="0" r="1" gradientTransform="matrix(4.5 0 0 13 12 22)" gradientUnits="userSpaceOnUse"><stop offset=".009" stopColor="#4a43cb"/><stop offset=".325" stopColor="#4a43cb"/><stop offset="1" stopColor="#4a43cb" stopOpacity="0"/></radialGradient><radialGradient id="SVGMJdWVb7B" cx="0" cy="0" r="1" gradientTransform="rotate(60.63 -3.76 1.051)scale(29.8201 60.3172)" gradientUnits="userSpaceOnUse"><stop stopColor="#f08af4"/><stop offset=".535" stopColor="#9c6cfe"/><stop offset="1" stopColor="#4e44db"/></radialGradient><radialGradient id="SVGDeexSBNv" cx="0" cy="0" r="1" gradientTransform="rotate(53.319 -20.35 16.92)scale(6.06837 6.95492)" gradientUnits="userSpaceOnUse"><stop stopColor="#decbff"/><stop offset="1" stopColor="#d6cfff"/></radialGradient><linearGradient id="SVGtm3Decpm" x1="29.913" x2="27.617" y1="27.071" y2="16.424" gradientUnits="userSpaceOnUse"><stop stopColor="#63686e"/><stop offset="1" stopColor="#889096"/></linearGradient><linearGradient id="SVGz3frCoae" x1="30" x2="29.736" y1="25.857" y2="22.162" gradientUnits="userSpaceOnUse"><stop stopColor="#889096"/><stop offset="1" stopColor="#aab3bd"/></linearGradient><linearGradient id="SVG8jUSIdFl" x1="20.8" x2="21.689" y1="6" y2="24.307" gradientUnits="userSpaceOnUse"><stop stopColor="#6ce0ff"/><stop offset="1" stopColor="#4894fe"/></linearGradient></defs></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><path fill="url(#SVGtm3Decpm)" d="m7.5 22l8.5-.5l8.5.5h.307q.194 0 .372.072l3.893 1.557c.56.224.928.767.928 1.371H2c0-.604.368-1.147.928-1.371l3.893-1.558A1 1 0 0 1 7.193 22z"/><path fill="url(#SVGz3frCoae)" d="M3 24a1 1 0 1 0 0 2h26a1 1 0 1 0 0-2z"/><path fill="url(#SVG8jUSIdFl)" d="M4 9.25A3.25 3.25 0 0 1 7.25 6h17.5A3.25 3.25 0 0 1 28 9.25v9.5A3.25 3.25 0 0 1 24.75 22H7.25A3.25 3.25 0 0 1 4 18.75z"/><path fill="url(#SVG3wORTciJ)" fill-opacity=".3" d="M7.25 6A3.25 3.25 0 0 0 4 9.25v9.5A3.25 3.25 0 0 0 7.25 22h-.057a1 1 0 0 0-.372.072l-3.893 1.557C2.368 23.853 2 24.396 2 25a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1c0-.604-.368-1.147-.928-1.371l-3.893-1.558a1 1 0 0 0-.372-.071h-.057A3.25 3.25 0 0 0 28 18.75v-9.5A3.25 3.25 0 0 0 24.75 6z"/><path fill="url(#SVGMJdWVb7B)" d="M2 13a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3z"/><rect width="4" height="2" x="6" y="23" fill="url(#SVGDeexSBNv)" rx="1"/><defs><radialGradient id="SVG3wORTciJ" cx="0" cy="0" r="1" gradientTransform="matrix(4.5 0 0 13 12 22)" gradientUnits="userSpaceOnUse"><stop offset=".009" stop-color="#4a43cb"/><stop offset=".325" stop-color="#4a43cb"/><stop offset="1" stop-color="#4a43cb" stop-opacity="0"/></radialGradient><radialGradient id="SVGMJdWVb7B" cx="0" cy="0" r="1" gradientTransform="rotate(60.63 -3.76 1.051)scale(29.8201 60.3172)" gradientUnits="userSpaceOnUse"><stop stop-color="#f08af4"/><stop offset=".535" stop-color="#9c6cfe"/><stop offset="1" stop-color="#4e44db"/></radialGradient><radialGradient id="SVGDeexSBNv" cx="0" cy="0" r="1" gradientTransform="rotate(53.319 -20.35 16.92)scale(6.06837 6.95492)" gradientUnits="userSpaceOnUse"><stop stop-color="#decbff"/><stop offset="1" stop-color="#d6cfff"/></radialGradient><linearGradient id="SVGtm3Decpm" x1="29.913" x2="27.617" y1="27.071" y2="16.424" gradientUnits="userSpaceOnUse"><stop stop-color="#63686e"/><stop offset="1" stop-color="#889096"/></linearGradient><linearGradient id="SVGz3frCoae" x1="30" x2="29.736" y1="25.857" y2="22.162" gradientUnits="userSpaceOnUse"><stop stop-color="#889096"/><stop offset="1" stop-color="#aab3bd"/></linearGradient><linearGradient id="SVG8jUSIdFl" x1="20.8" x2="21.689" y1="6" y2="24.307" gradientUnits="userSpaceOnUse"><stop stop-color="#6ce0ff"/><stop offset="1" stop-color="#4894fe"/></linearGradient></defs></g></svg>
</template>

CSS

.icon-phone-laptop-32 {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGtm3Decpm)%22%20d%3D%22m7.5%2022l8.5-.5l8.5.5h.307q.194%200%20.372.072l3.893%201.557c.56.224.928.767.928%201.371H2c0-.604.368-1.147.928-1.371l3.893-1.558A1%201%200%200%201%207.193%2022z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGz3frCoae)%22%20d%3D%22M3%2024a1%201%200%201%200%200%202h26a1%201%200%201%200%200-2z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG8jUSIdFl)%22%20d%3D%22M4%209.25A3.25%203.25%200%200%201%207.25%206h17.5A3.25%203.25%200%200%201%2028%209.25v9.5A3.25%203.25%200%200%201%2024.75%2022H7.25A3.25%203.25%200%200%201%204%2018.75z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG3wORTciJ)%22%20fill-opacity%3D%22.3%22%20d%3D%22M7.25%206A3.25%203.25%200%200%200%204%209.25v9.5A3.25%203.25%200%200%200%207.25%2022h-.057a1%201%200%200%200-.372.072l-3.893%201.557C2.368%2023.853%202%2024.396%202%2025a1%201%200%200%200%201%201h26a1%201%200%200%200%201-1c0-.604-.368-1.147-.928-1.371l-3.893-1.558a1%201%200%200%200-.372-.071h-.057A3.25%203.25%200%200%200%2028%2018.75v-9.5A3.25%203.25%200%200%200%2024.75%206z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGMJdWVb7B)%22%20d%3D%22M2%2013a3%203%200%200%201%203-3h6a3%203%200%200%201%203%203v12a3%203%200%200%201-3%203H5a3%203%200%200%201-3-3z%22%2F%3E%3Crect%20width%3D%224%22%20height%3D%222%22%20x%3D%226%22%20y%3D%2223%22%20fill%3D%22url(%23SVGDeexSBNv)%22%20rx%3D%221%22%2F%3E%3Cdefs%3E%3CradialGradient%20id%3D%22SVG3wORTciJ%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(4.5%200%200%2013%2012%2022)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.009%22%20stop-color%3D%22%234a43cb%22%2F%3E%3Cstop%20offset%3D%22.325%22%20stop-color%3D%22%234a43cb%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234a43cb%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGMJdWVb7B%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(60.63%20-3.76%201.051)scale(29.8201%2060.3172)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23f08af4%22%2F%3E%3Cstop%20offset%3D%22.535%22%20stop-color%3D%22%239c6cfe%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234e44db%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGDeexSBNv%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(53.319%20-20.35%2016.92)scale(6.06837%206.95492)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23decbff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23d6cfff%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22SVGtm3Decpm%22%20x1%3D%2229.913%22%20x2%3D%2227.617%22%20y1%3D%2227.071%22%20y2%3D%2216.424%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2363686e%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23889096%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGz3frCoae%22%20x1%3D%2230%22%20x2%3D%2229.736%22%20y1%3D%2225.857%22%20y2%3D%2222.162%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23889096%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23aab3bd%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVG8jUSIdFl%22%20x1%3D%2220.8%22%20x2%3D%2221.689%22%20y1%3D%226%22%20y2%3D%2224.307%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%236ce0ff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234894fe%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGtm3Decpm)%22%20d%3D%22m7.5%2022l8.5-.5l8.5.5h.307q.194%200%20.372.072l3.893%201.557c.56.224.928.767.928%201.371H2c0-.604.368-1.147.928-1.371l3.893-1.558A1%201%200%200%201%207.193%2022z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGz3frCoae)%22%20d%3D%22M3%2024a1%201%200%201%200%200%202h26a1%201%200%201%200%200-2z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG8jUSIdFl)%22%20d%3D%22M4%209.25A3.25%203.25%200%200%201%207.25%206h17.5A3.25%203.25%200%200%201%2028%209.25v9.5A3.25%203.25%200%200%201%2024.75%2022H7.25A3.25%203.25%200%200%201%204%2018.75z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG3wORTciJ)%22%20fill-opacity%3D%22.3%22%20d%3D%22M7.25%206A3.25%203.25%200%200%200%204%209.25v9.5A3.25%203.25%200%200%200%207.25%2022h-.057a1%201%200%200%200-.372.072l-3.893%201.557C2.368%2023.853%202%2024.396%202%2025a1%201%200%200%200%201%201h26a1%201%200%200%200%201-1c0-.604-.368-1.147-.928-1.371l-3.893-1.558a1%201%200%200%200-.372-.071h-.057A3.25%203.25%200%200%200%2028%2018.75v-9.5A3.25%203.25%200%200%200%2024.75%206z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGMJdWVb7B)%22%20d%3D%22M2%2013a3%203%200%200%201%203-3h6a3%203%200%200%201%203%203v12a3%203%200%200%201-3%203H5a3%203%200%200%201-3-3z%22%2F%3E%3Crect%20width%3D%224%22%20height%3D%222%22%20x%3D%226%22%20y%3D%2223%22%20fill%3D%22url(%23SVGDeexSBNv)%22%20rx%3D%221%22%2F%3E%3Cdefs%3E%3CradialGradient%20id%3D%22SVG3wORTciJ%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(4.5%200%200%2013%2012%2022)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.009%22%20stop-color%3D%22%234a43cb%22%2F%3E%3Cstop%20offset%3D%22.325%22%20stop-color%3D%22%234a43cb%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234a43cb%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGMJdWVb7B%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(60.63%20-3.76%201.051)scale(29.8201%2060.3172)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23f08af4%22%2F%3E%3Cstop%20offset%3D%22.535%22%20stop-color%3D%22%239c6cfe%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234e44db%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGDeexSBNv%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(53.319%20-20.35%2016.92)scale(6.06837%206.95492)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23decbff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23d6cfff%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22SVGtm3Decpm%22%20x1%3D%2229.913%22%20x2%3D%2227.617%22%20y1%3D%2227.071%22%20y2%3D%2216.424%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2363686e%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23889096%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGz3frCoae%22%20x1%3D%2230%22%20x2%3D%2229.736%22%20y1%3D%2225.857%22%20y2%3D%2222.162%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23889096%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23aab3bd%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVG8jUSIdFl%22%20x1%3D%2220.8%22%20x2%3D%2221.689%22%20y1%3D%226%22%20y2%3D%2224.307%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%236ce0ff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234894fe%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent-color/phone-laptop-32.svg?color=%231a73e8&size=48