watch icon
watch-thin from Phosphor by Phosphor Icons · Thin · MIT Free for personal and commercial use.
- Name
- watch-thin
- Set
- Phosphor
- Style
- Thin
- 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="M204 128a75.94 75.94 0 0 0-32.35-62.16l-6.52-36A12 12 0 0 0 153.32 20h-50.64a12 12 0 0 0-11.81 9.86l-6.52 36a75.89 75.89 0 0 0 0 124.32l6.52 36a12 12 0 0 0 11.81 9.82h50.64a12 12 0 0 0 11.81-9.86l6.52-36A75.94 75.94 0 0 0 204 128M98.74 31.29a4 4 0 0 1 3.94-3.29h50.64a4 4 0 0 1 3.94 3.29l5.26 29a75.69 75.69 0 0 0-69 0Zm58.52 193.42a4 4 0 0 1-3.94 3.29h-50.64a4 4 0 0 1-3.94-3.29l-5.26-29a75.69 75.69 0 0 0 69 0ZM128 196a68 68 0 1 1 68-68a68.07 68.07 0 0 1-68 68m44-68a4 4 0 0 1-4 4h-40a4 4 0 0 1-4-4V88a4 4 0 0 1 8 0v36h36a4 4 0 0 1 4 4"/></svg>
React
import type { SVGProps } from "react";
export function PhWatchThin(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="M204 128a75.94 75.94 0 0 0-32.35-62.16l-6.52-36A12 12 0 0 0 153.32 20h-50.64a12 12 0 0 0-11.81 9.86l-6.52 36a75.89 75.89 0 0 0 0 124.32l6.52 36a12 12 0 0 0 11.81 9.82h50.64a12 12 0 0 0 11.81-9.86l6.52-36A75.94 75.94 0 0 0 204 128M98.74 31.29a4 4 0 0 1 3.94-3.29h50.64a4 4 0 0 1 3.94 3.29l5.26 29a75.69 75.69 0 0 0-69 0Zm58.52 193.42a4 4 0 0 1-3.94 3.29h-50.64a4 4 0 0 1-3.94-3.29l-5.26-29a75.69 75.69 0 0 0 69 0ZM128 196a68 68 0 1 1 68-68a68.07 68.07 0 0 1-68 68m44-68a4 4 0 0 1-4 4h-40a4 4 0 0 1-4-4V88a4 4 0 0 1 8 0v36h36a4 4 0 0 1 4 4"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M204 128a75.94 75.94 0 0 0-32.35-62.16l-6.52-36A12 12 0 0 0 153.32 20h-50.64a12 12 0 0 0-11.81 9.86l-6.52 36a75.89 75.89 0 0 0 0 124.32l6.52 36a12 12 0 0 0 11.81 9.82h50.64a12 12 0 0 0 11.81-9.86l6.52-36A75.94 75.94 0 0 0 204 128M98.74 31.29a4 4 0 0 1 3.94-3.29h50.64a4 4 0 0 1 3.94 3.29l5.26 29a75.69 75.69 0 0 0-69 0Zm58.52 193.42a4 4 0 0 1-3.94 3.29h-50.64a4 4 0 0 1-3.94-3.29l-5.26-29a75.69 75.69 0 0 0 69 0ZM128 196a68 68 0 1 1 68-68a68.07 68.07 0 0 1-68 68m44-68a4 4 0 0 1-4 4h-40a4 4 0 0 1-4-4V88a4 4 0 0 1 8 0v36h36a4 4 0 0 1 4 4"/></svg> </template>
CSS
.icon-watch-thin {
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%22M204%20128a75.94%2075.94%200%200%200-32.35-62.16l-6.52-36A12%2012%200%200%200%20153.32%2020h-50.64a12%2012%200%200%200-11.81%209.86l-6.52%2036a75.89%2075.89%200%200%200%200%20124.32l6.52%2036a12%2012%200%200%200%2011.81%209.82h50.64a12%2012%200%200%200%2011.81-9.86l6.52-36A75.94%2075.94%200%200%200%20204%20128M98.74%2031.29a4%204%200%200%201%203.94-3.29h50.64a4%204%200%200%201%203.94%203.29l5.26%2029a75.69%2075.69%200%200%200-69%200Zm58.52%20193.42a4%204%200%200%201-3.94%203.29h-50.64a4%204%200%200%201-3.94-3.29l-5.26-29a75.69%2075.69%200%200%200%2069%200ZM128%20196a68%2068%200%201%201%2068-68a68.07%2068.07%200%200%201-68%2068m44-68a4%204%200%200%201-4%204h-40a4%204%200%200%201-4-4V88a4%204%200%200%201%208%200v36h36a4%204%200%200%201%204%204%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%22M204%20128a75.94%2075.94%200%200%200-32.35-62.16l-6.52-36A12%2012%200%200%200%20153.32%2020h-50.64a12%2012%200%200%200-11.81%209.86l-6.52%2036a75.89%2075.89%200%200%200%200%20124.32l6.52%2036a12%2012%200%200%200%2011.81%209.82h50.64a12%2012%200%200%200%2011.81-9.86l6.52-36A75.94%2075.94%200%200%200%20204%20128M98.74%2031.29a4%204%200%200%201%203.94-3.29h50.64a4%204%200%200%201%203.94%203.29l5.26%2029a75.69%2075.69%200%200%200-69%200Zm58.52%20193.42a4%204%200%200%201-3.94%203.29h-50.64a4%204%200%200%201-3.94-3.29l-5.26-29a75.69%2075.69%200%200%200%2069%200ZM128%20196a68%2068%200%201%201%2068-68a68.07%2068.07%200%200%201-68%2068m44-68a4%204%200%200%201-4%204h-40a4%204%200%200%201-4-4V88a4%204%200%200%201%208%200v36h36a4%204%200%200%201%204%204%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/watch-thin.svg?color=%231a73e8&size=48
