watch icon
watch-light from Phosphor by Phosphor Icons · Light · MIT Free for personal and commercial use.
- Name
- watch-light
- Set
- Phosphor
- Style
- Light
- Viewbox
- 256×256
- License
- MIT
5 other variants in Phosphor
The same icon in other sets
watchBootstrap IconswatchBoxIcons v2 SolidwatchCarbonwatchCodiconswatchEmoji One (Colored)watchElement PluswatchFeather IconswatchFluent EmojiwatchFluent Emoji FlatwatchFluent Emoji High ContrastwatchFirefox OS EmojiwatchIconParkwatchIconPark OutlinewatchIconPark SolidwatchIconPark TwoTonewatchIonIconswatchJam IconswatchMaterial Line IconswatchLucidewatchMajesticonswatchMaterial SymbolswatchMaterial Symbols LightwatchMaterial Design Iconswatch-fillMingCute Icon
Use the watch icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M206 128a77.92 77.92 0 0 0-32.53-63.31L167.1 29.5A14 14 0 0 0 153.32 18h-50.64A14 14 0 0 0 88.9 29.5l-6.37 35.19a77.87 77.87 0 0 0 0 126.62l6.37 35.19a14 14 0 0 0 13.78 11.5h50.64a14 14 0 0 0 13.78-11.5l6.37-35.19A77.92 77.92 0 0 0 206 128M100.71 31.64a2 2 0 0 1 2-1.64h50.64a2 2 0 0 1 2 1.64l4.56 25.19a77.68 77.68 0 0 0-63.7 0Zm54.58 192.72a2 2 0 0 1-2 1.64h-50.61a2 2 0 0 1-2-1.64l-4.56-25.19a77.68 77.68 0 0 0 63.7 0ZM128 194a66 66 0 1 1 66-66a66.08 66.08 0 0 1-66 66m46-66a6 6 0 0 1-6 6h-40a6 6 0 0 1-6-6V88a6 6 0 0 1 12 0v34h34a6 6 0 0 1 6 6"/></svg>
React
import type { SVGProps } from "react";
export function PhWatchLight(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M206 128a77.92 77.92 0 0 0-32.53-63.31L167.1 29.5A14 14 0 0 0 153.32 18h-50.64A14 14 0 0 0 88.9 29.5l-6.37 35.19a77.87 77.87 0 0 0 0 126.62l6.37 35.19a14 14 0 0 0 13.78 11.5h50.64a14 14 0 0 0 13.78-11.5l6.37-35.19A77.92 77.92 0 0 0 206 128M100.71 31.64a2 2 0 0 1 2-1.64h50.64a2 2 0 0 1 2 1.64l4.56 25.19a77.68 77.68 0 0 0-63.7 0Zm54.58 192.72a2 2 0 0 1-2 1.64h-50.61a2 2 0 0 1-2-1.64l-4.56-25.19a77.68 77.68 0 0 0 63.7 0ZM128 194a66 66 0 1 1 66-66a66.08 66.08 0 0 1-66 66m46-66a6 6 0 0 1-6 6h-40a6 6 0 0 1-6-6V88a6 6 0 0 1 12 0v34h34a6 6 0 0 1 6 6"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M206 128a77.92 77.92 0 0 0-32.53-63.31L167.1 29.5A14 14 0 0 0 153.32 18h-50.64A14 14 0 0 0 88.9 29.5l-6.37 35.19a77.87 77.87 0 0 0 0 126.62l6.37 35.19a14 14 0 0 0 13.78 11.5h50.64a14 14 0 0 0 13.78-11.5l6.37-35.19A77.92 77.92 0 0 0 206 128M100.71 31.64a2 2 0 0 1 2-1.64h50.64a2 2 0 0 1 2 1.64l4.56 25.19a77.68 77.68 0 0 0-63.7 0Zm54.58 192.72a2 2 0 0 1-2 1.64h-50.61a2 2 0 0 1-2-1.64l-4.56-25.19a77.68 77.68 0 0 0 63.7 0ZM128 194a66 66 0 1 1 66-66a66.08 66.08 0 0 1-66 66m46-66a6 6 0 0 1-6 6h-40a6 6 0 0 1-6-6V88a6 6 0 0 1 12 0v34h34a6 6 0 0 1 6 6"/></svg> </template>
CSS
.icon-watch-light {
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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M206%20128a77.92%2077.92%200%200%200-32.53-63.31L167.1%2029.5A14%2014%200%200%200%20153.32%2018h-50.64A14%2014%200%200%200%2088.9%2029.5l-6.37%2035.19a77.87%2077.87%200%200%200%200%20126.62l6.37%2035.19a14%2014%200%200%200%2013.78%2011.5h50.64a14%2014%200%200%200%2013.78-11.5l6.37-35.19A77.92%2077.92%200%200%200%20206%20128M100.71%2031.64a2%202%200%200%201%202-1.64h50.64a2%202%200%200%201%202%201.64l4.56%2025.19a77.68%2077.68%200%200%200-63.7%200Zm54.58%20192.72a2%202%200%200%201-2%201.64h-50.61a2%202%200%200%201-2-1.64l-4.56-25.19a77.68%2077.68%200%200%200%2063.7%200ZM128%20194a66%2066%200%201%201%2066-66a66.08%2066.08%200%200%201-66%2066m46-66a6%206%200%200%201-6%206h-40a6%206%200%200%201-6-6V88a6%206%200%200%201%2012%200v34h34a6%206%200%200%201%206%206%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M206%20128a77.92%2077.92%200%200%200-32.53-63.31L167.1%2029.5A14%2014%200%200%200%20153.32%2018h-50.64A14%2014%200%200%200%2088.9%2029.5l-6.37%2035.19a77.87%2077.87%200%200%200%200%20126.62l6.37%2035.19a14%2014%200%200%200%2013.78%2011.5h50.64a14%2014%200%200%200%2013.78-11.5l6.37-35.19A77.92%2077.92%200%200%200%20206%20128M100.71%2031.64a2%202%200%200%201%202-1.64h50.64a2%202%200%200%201%202%201.64l4.56%2025.19a77.68%2077.68%200%200%200-63.7%200Zm54.58%20192.72a2%202%200%200%201-2%201.64h-50.61a2%202%200%200%201-2-1.64l-4.56-25.19a77.68%2077.68%200%200%200%2063.7%200ZM128%20194a66%2066%200%201%201%2066-66a66.08%2066.08%200%200%201-66%2066m46-66a6%206%200%200%201-6%206h-40a6%206%200%200%201-6-6V88a6%206%200%200%201%2012%200v34h34a6%206%200%200%201%206%206%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/watch-light.svg?color=%231a73e8&size=48
