phone icon
phone from BoxIcons v2 by Boxicons · Regular · MIT Free for personal and commercial use.
- Name
- phone
- Set
- BoxIcons v2
- Style
- Regular
- Viewbox
- 24×24
- License
- MIT
- Aliases
- bx-phone
The same icon in other sets
phoneAkar IconsphoneBootstrap IconsphoneBoxIcons v2 SolidphoneCarbonphone-fillEva IconsphoneFramework7 IconsphoneFont Awesome 6 SolidphoneFeather Iconsphone-12-filledFluent UI System Iconsphonecss.ggphoneHeroIconsphoneHuge IconsphoneHumbleiconsphoneIconoirphoneJam IconsphoneLine AwesomephoneMaterial Line IconsphoneLucidephoneMage IconsphoneMajesticonsphoneMaterial Design Iconsphone-fillMingCute IconphonePhosphorphonePixelarticons
Related icons in BoxIcons v2
Use the phone icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M17.707 12.293a1 1 0 0 0-1.414 0l-1.594 1.594c-.739-.22-2.118-.72-2.992-1.594s-1.374-2.253-1.594-2.992l1.594-1.594a1 1 0 0 0 0-1.414l-4-4a1 1 0 0 0-1.414 0L3.581 5.005c-.38.38-.594.902-.586 1.435c.023 1.424.4 6.37 4.298 10.268s8.844 4.274 10.269 4.298h.028c.528 0 1.027-.208 1.405-.586l2.712-2.712a1 1 0 0 0 0-1.414zm-.127 6.712c-1.248-.021-5.518-.356-8.873-3.712c-3.366-3.366-3.692-7.651-3.712-8.874L7 4.414L9.586 7L8.293 8.293a1 1 0 0 0-.272.912c.024.115.611 2.842 2.271 4.502s4.387 2.247 4.502 2.271a.99.99 0 0 0 .912-.271L17 14.414L19.586 17z"/></svg>
React
import type { SVGProps } from "react";
export function BxPhone(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M17.707 12.293a1 1 0 0 0-1.414 0l-1.594 1.594c-.739-.22-2.118-.72-2.992-1.594s-1.374-2.253-1.594-2.992l1.594-1.594a1 1 0 0 0 0-1.414l-4-4a1 1 0 0 0-1.414 0L3.581 5.005c-.38.38-.594.902-.586 1.435c.023 1.424.4 6.37 4.298 10.268s8.844 4.274 10.269 4.298h.028c.528 0 1.027-.208 1.405-.586l2.712-2.712a1 1 0 0 0 0-1.414zm-.127 6.712c-1.248-.021-5.518-.356-8.873-3.712c-3.366-3.366-3.692-7.651-3.712-8.874L7 4.414L9.586 7L8.293 8.293a1 1 0 0 0-.272.912c.024.115.611 2.842 2.271 4.502s4.387 2.247 4.502 2.271a.99.99 0 0 0 .912-.271L17 14.414L19.586 17z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M17.707 12.293a1 1 0 0 0-1.414 0l-1.594 1.594c-.739-.22-2.118-.72-2.992-1.594s-1.374-2.253-1.594-2.992l1.594-1.594a1 1 0 0 0 0-1.414l-4-4a1 1 0 0 0-1.414 0L3.581 5.005c-.38.38-.594.902-.586 1.435c.023 1.424.4 6.37 4.298 10.268s8.844 4.274 10.269 4.298h.028c.528 0 1.027-.208 1.405-.586l2.712-2.712a1 1 0 0 0 0-1.414zm-.127 6.712c-1.248-.021-5.518-.356-8.873-3.712c-3.366-3.366-3.692-7.651-3.712-8.874L7 4.414L9.586 7L8.293 8.293a1 1 0 0 0-.272.912c.024.115.611 2.842 2.271 4.502s4.387 2.247 4.502 2.271a.99.99 0 0 0 .912-.271L17 14.414L19.586 17z"/></svg> </template>
CSS
.icon-phone {
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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M17.707%2012.293a1%201%200%200%200-1.414%200l-1.594%201.594c-.739-.22-2.118-.72-2.992-1.594s-1.374-2.253-1.594-2.992l1.594-1.594a1%201%200%200%200%200-1.414l-4-4a1%201%200%200%200-1.414%200L3.581%205.005c-.38.38-.594.902-.586%201.435c.023%201.424.4%206.37%204.298%2010.268s8.844%204.274%2010.269%204.298h.028c.528%200%201.027-.208%201.405-.586l2.712-2.712a1%201%200%200%200%200-1.414zm-.127%206.712c-1.248-.021-5.518-.356-8.873-3.712c-3.366-3.366-3.692-7.651-3.712-8.874L7%204.414L9.586%207L8.293%208.293a1%201%200%200%200-.272.912c.024.115.611%202.842%202.271%204.502s4.387%202.247%204.502%202.271a.99.99%200%200%200%20.912-.271L17%2014.414L19.586%2017z%22%2F%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M17.707%2012.293a1%201%200%200%200-1.414%200l-1.594%201.594c-.739-.22-2.118-.72-2.992-1.594s-1.374-2.253-1.594-2.992l1.594-1.594a1%201%200%200%200%200-1.414l-4-4a1%201%200%200%200-1.414%200L3.581%205.005c-.38.38-.594.902-.586%201.435c.023%201.424.4%206.37%204.298%2010.268s8.844%204.274%2010.269%204.298h.028c.528%200%201.027-.208%201.405-.586l2.712-2.712a1%201%200%200%200%200-1.414zm-.127%206.712c-1.248-.021-5.518-.356-8.873-3.712c-3.366-3.366-3.692-7.651-3.712-8.874L7%204.414L9.586%207L8.293%208.293a1%201%200%200%200-.272.912c.024.115.611%202.842%202.271%204.502s4.387%202.247%204.502%202.271a.99.99%200%200%200%20.912-.271L17%2014.414L19.586%2017z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/bx/phone.svg?color=%231a73e8&size=48
