watch icon

watch from Element Plus by Element Plus · Outline · MIT Free for personal and commercial use.

Name
watch
Set
Element Plus
Style
Outline
Viewbox
1024×1024
License
MIT

The same icon in other sets

watchBootstrap IconswatchBoxIcons v2 SolidwatchCarbonwatchCodiconswatchEmoji One (Colored)watchFeather 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 1024 1024"><path fill="currentColor" d="M512 768a256 256 0 1 0 0-512a256 256 0 0 0 0 512m0 64a320 320 0 1 1 0-640a320 320 0 0 1 0 640"/><path fill="currentColor" d="M480 352a32 32 0 0 1 32 32v160a32 32 0 0 1-64 0V384a32 32 0 0 1 32-32"/><path fill="currentColor" d="M480 512h128q32 0 32 32t-32 32H480q-32 0-32-32t32-32m128-256V128H416v128h-64V64h320v192zM416 768v128h192V768h64v192H352V768z"/></svg>

React

import type { SVGProps } from "react";

export function EpWatch(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" d="M512 768a256 256 0 1 0 0-512a256 256 0 0 0 0 512m0 64a320 320 0 1 1 0-640a320 320 0 0 1 0 640"/><path fill="currentColor" d="M480 352a32 32 0 0 1 32 32v160a32 32 0 0 1-64 0V384a32 32 0 0 1 32-32"/><path fill="currentColor" d="M480 512h128q32 0 32 32t-32 32H480q-32 0-32-32t32-32m128-256V128H416v128h-64V64h320v192zM416 768v128h192V768h64v192H352V768z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" d="M512 768a256 256 0 1 0 0-512a256 256 0 0 0 0 512m0 64a320 320 0 1 1 0-640a320 320 0 0 1 0 640"/><path fill="currentColor" d="M480 352a32 32 0 0 1 32 32v160a32 32 0 0 1-64 0V384a32 32 0 0 1 32-32"/><path fill="currentColor" d="M480 512h128q32 0 32 32t-32 32H480q-32 0-32-32t32-32m128-256V128H416v128h-64V64h320v192zM416 768v128h192V768h64v192H352V768z"/></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%201024%201024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M512%20768a256%20256%200%201%200%200-512a256%20256%200%200%200%200%20512m0%2064a320%20320%200%201%201%200-640a320%20320%200%200%201%200%20640%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M480%20352a32%2032%200%200%201%2032%2032v160a32%2032%200%200%201-64%200V384a32%2032%200%200%201%2032-32%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M480%20512h128q32%200%2032%2032t-32%2032H480q-32%200-32-32t32-32m128-256V128H416v128h-64V64h320v192zM416%20768v128h192V768h64v192H352V768z%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%201024%201024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M512%20768a256%20256%200%201%200%200-512a256%20256%200%200%200%200%20512m0%2064a320%20320%200%201%201%200-640a320%20320%200%200%201%200%20640%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M480%20352a32%2032%200%200%201%2032%2032v160a32%2032%200%200%201-64%200V384a32%2032%200%200%201%2032-32%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M480%20512h128q32%200%2032%2032t-32%2032H480q-32%200-32-32t32-32m128-256V128H416v128h-64V64h320v192zM416%20768v128h192V768h64v192H352V768z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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