watch icon

watch from Codicons by Microsoft Corporation · Regular · CC-BY-4.0 Attribution required.

Name
watch
Set
Codicons
Style
Regular
Viewbox
16×16
License
CC BY 4.0

The same icon in other sets

watchBootstrap IconswatchBoxIcons v2 SolidwatchCarbonwatchEmoji 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 IconwatchMyna UI Icons

Use the watch icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M12.5 6H12c0-.718-.39-1.373-1-1.725V2.5c0-.827-.673-1.5-1.5-1.5h-3C5.673 1 5 1.673 5 2.5v1.775C4.39 4.628 4 5.283 4 6v4c0 .718.39 1.373 1 1.725V13.5c0 .827.673 1.5 1.5 1.5h3c.827 0 1.5-.673 1.5-1.5v-1.775c.61-.353 1-1.008 1-1.725V9h.5a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5M6 2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V4H6zm4 11a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V12h4zm1-3.5c0 .418-.269.795-.667.937Q10.155 11 10 11H6q-.155 0-.333-.063A1 1 0 0 1 5 10V6c0-.418.269-.795.667-.937Q5.845 5 6 5h4q.154 0 .333.063c.398.142.667.519.667.937z"/></svg>

React

import type { SVGProps } from "react";

export function CodiconWatch(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M12.5 6H12c0-.718-.39-1.373-1-1.725V2.5c0-.827-.673-1.5-1.5-1.5h-3C5.673 1 5 1.673 5 2.5v1.775C4.39 4.628 4 5.283 4 6v4c0 .718.39 1.373 1 1.725V13.5c0 .827.673 1.5 1.5 1.5h3c.827 0 1.5-.673 1.5-1.5v-1.775c.61-.353 1-1.008 1-1.725V9h.5a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5M6 2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V4H6zm4 11a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V12h4zm1-3.5c0 .418-.269.795-.667.937Q10.155 11 10 11H6q-.155 0-.333-.063A1 1 0 0 1 5 10V6c0-.418.269-.795.667-.937Q5.845 5 6 5h4q.154 0 .333.063c.398.142.667.519.667.937z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M12.5 6H12c0-.718-.39-1.373-1-1.725V2.5c0-.827-.673-1.5-1.5-1.5h-3C5.673 1 5 1.673 5 2.5v1.775C4.39 4.628 4 5.283 4 6v4c0 .718.39 1.373 1 1.725V13.5c0 .827.673 1.5 1.5 1.5h3c.827 0 1.5-.673 1.5-1.5v-1.775c.61-.353 1-1.008 1-1.725V9h.5a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5M6 2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V4H6zm4 11a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V12h4zm1-3.5c0 .418-.269.795-.667.937Q10.155 11 10 11H6q-.155 0-.333-.063A1 1 0 0 1 5 10V6c0-.418.269-.795.667-.937Q5.845 5 6 5h4q.154 0 .333.063c.398.142.667.519.667.937z"/></svg>
</template>

CSS

.icon-watch {
  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%2016%2016%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12.5%206H12c0-.718-.39-1.373-1-1.725V2.5c0-.827-.673-1.5-1.5-1.5h-3C5.673%201%205%201.673%205%202.5v1.775C4.39%204.628%204%205.283%204%206v4c0%20.718.39%201.373%201%201.725V13.5c0%20.827.673%201.5%201.5%201.5h3c.827%200%201.5-.673%201.5-1.5v-1.775c.61-.353%201-1.008%201-1.725V9h.5a.5.5%200%200%200%20.5-.5v-2a.5.5%200%200%200-.5-.5M6%202.5a.5.5%200%200%201%20.5-.5h3a.5.5%200%200%201%20.5.5V4H6zm4%2011a.5.5%200%200%201-.5.5h-3a.5.5%200%200%201-.5-.5V12h4zm1-3.5c0%20.418-.269.795-.667.937Q10.155%2011%2010%2011H6q-.155%200-.333-.063A1%201%200%200%201%205%2010V6c0-.418.269-.795.667-.937Q5.845%205%206%205h4q.154%200%20.333.063c.398.142.667.519.667.937z%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%2016%2016%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12.5%206H12c0-.718-.39-1.373-1-1.725V2.5c0-.827-.673-1.5-1.5-1.5h-3C5.673%201%205%201.673%205%202.5v1.775C4.39%204.628%204%205.283%204%206v4c0%20.718.39%201.373%201%201.725V13.5c0%20.827.673%201.5%201.5%201.5h3c.827%200%201.5-.673%201.5-1.5v-1.775c.61-.353%201-1.008%201-1.725V9h.5a.5.5%200%200%200%20.5-.5v-2a.5.5%200%200%200-.5-.5M6%202.5a.5.5%200%200%201%20.5-.5h3a.5.5%200%200%201%20.5.5V4H6zm4%2011a.5.5%200%200%201-.5.5h-3a.5.5%200%200%201-.5-.5V12h4zm1-3.5c0%20.418-.269.795-.667.937Q10.155%2011%2010%2011H6q-.155%200-.333-.063A1%201%200%200%201%205%2010V6c0-.418.269-.795.667-.937Q5.845%205%206%205h4q.154%200%20.333.063c.398.142.667.519.667.937z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/codicon/watch.svg?color=%231a73e8&size=48