watch icon
watch from Material Line Icons by Vjacheslav Trushkin · Line · Interface · MIT Free for personal and commercial use.
- Name
- watch
- Set
- Material Line Icons
- Style
- Line
- Category
- Interface
- Viewbox
- 24×24
- License
- MIT
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 IconswatchLucidewatchMajesticonswatchMaterial SymbolswatchMaterial Symbols LightwatchMaterial Design Iconswatch-fillMingCute IconwatchMyna UI Icons
More interface icons from Material Line Icons
backup-restorecancelcancel-twotonecheck-allcirclecircle-filledcircle-filled-to-confirm-circle-filled-transitioncircle-to-confirm-circle-transitioncircle-to-confirm-circle-twotone-transitioncircle-twotonecircle-twotone-to-confirm-circle-transitioncircle-twotone-to-confirm-circle-twotone-transitioncloseclose-circleclose-circle-filledclose-circle-twotoneclose-smallclose-squareclose-square-filledclose-square-twotonecogcog-filledcog-filled-loopcog-loop
Use the watch icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 12c1.72 -3.83 5.53 -6.5 10 -6.5c4.47 0 8.28 2.67 10 6.5c-1.72 3.83 -5.53 6.5 -10 6.5c-4.47 0 -8.28 -2.67 -10 -6.5Z"><animate fill="freeze" attributeName="d" dur="0.5s" values="M4 12c1.38 -0.77 4.42 -1.3 8 -1.3c3.58 0 6.62 0.53 8 1.3c-1.38 0.77 -4.42 1.3 -8 1.3c-3.58 0 -6.62 -0.53 -8 -1.3Z;M2 12c1.72 -3.83 5.53 -6.5 10 -6.5c4.47 0 8.28 2.67 10 6.5c-1.72 3.83 -5.53 6.5 -10 6.5c-4.47 0 -8.28 -2.67 -10 -6.5Z"/></path><circle cx="12" cy="12" r="3" fill="currentColor"><animate fill="freeze" attributeName="r" dur="0.2s" values="0;3"/></circle></svg>
React
import type { SVGProps } from "react";
export function LineMdWatch(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M2 12c1.72 -3.83 5.53 -6.5 10 -6.5c4.47 0 8.28 2.67 10 6.5c-1.72 3.83 -5.53 6.5 -10 6.5c-4.47 0 -8.28 -2.67 -10 -6.5Z"><animate fill="freeze" attributeName="d" dur="0.5s" values="M4 12c1.38 -0.77 4.42 -1.3 8 -1.3c3.58 0 6.62 0.53 8 1.3c-1.38 0.77 -4.42 1.3 -8 1.3c-3.58 0 -6.62 -0.53 -8 -1.3Z;M2 12c1.72 -3.83 5.53 -6.5 10 -6.5c4.47 0 8.28 2.67 10 6.5c-1.72 3.83 -5.53 6.5 -10 6.5c-4.47 0 -8.28 -2.67 -10 -6.5Z"/></path><circle cx="12" cy="12" r="3" fill="currentColor"><animate fill="freeze" attributeName="r" dur="0.2s" values="0;3"/></circle></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 12c1.72 -3.83 5.53 -6.5 10 -6.5c4.47 0 8.28 2.67 10 6.5c-1.72 3.83 -5.53 6.5 -10 6.5c-4.47 0 -8.28 -2.67 -10 -6.5Z"><animate fill="freeze" attributeName="d" dur="0.5s" values="M4 12c1.38 -0.77 4.42 -1.3 8 -1.3c3.58 0 6.62 0.53 8 1.3c-1.38 0.77 -4.42 1.3 -8 1.3c-3.58 0 -6.62 -0.53 -8 -1.3Z;M2 12c1.72 -3.83 5.53 -6.5 10 -6.5c4.47 0 8.28 2.67 10 6.5c-1.72 3.83 -5.53 6.5 -10 6.5c-4.47 0 -8.28 -2.67 -10 -6.5Z"/></path><circle cx="12" cy="12" r="3" fill="currentColor"><animate fill="freeze" attributeName="r" dur="0.2s" values="0;3"/></circle></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%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M2%2012c1.72%20-3.83%205.53%20-6.5%2010%20-6.5c4.47%200%208.28%202.67%2010%206.5c-1.72%203.83%20-5.53%206.5%20-10%206.5c-4.47%200%20-8.28%20-2.67%20-10%20-6.5Z%22%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22d%22%20dur%3D%220.5s%22%20values%3D%22M4%2012c1.38%20-0.77%204.42%20-1.3%208%20-1.3c3.58%200%206.62%200.53%208%201.3c-1.38%200.77%20-4.42%201.3%20-8%201.3c-3.58%200%20-6.62%20-0.53%20-8%20-1.3Z%3BM2%2012c1.72%20-3.83%205.53%20-6.5%2010%20-6.5c4.47%200%208.28%202.67%2010%206.5c-1.72%203.83%20-5.53%206.5%20-10%206.5c-4.47%200%20-8.28%20-2.67%20-10%20-6.5Z%22%2F%3E%3C%2Fpath%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%20fill%3D%22currentColor%22%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22r%22%20dur%3D%220.2s%22%20values%3D%220%3B3%22%2F%3E%3C%2Fcircle%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%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M2%2012c1.72%20-3.83%205.53%20-6.5%2010%20-6.5c4.47%200%208.28%202.67%2010%206.5c-1.72%203.83%20-5.53%206.5%20-10%206.5c-4.47%200%20-8.28%20-2.67%20-10%20-6.5Z%22%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22d%22%20dur%3D%220.5s%22%20values%3D%22M4%2012c1.38%20-0.77%204.42%20-1.3%208%20-1.3c3.58%200%206.62%200.53%208%201.3c-1.38%200.77%20-4.42%201.3%20-8%201.3c-3.58%200%20-6.62%20-0.53%20-8%20-1.3Z%3BM2%2012c1.72%20-3.83%205.53%20-6.5%2010%20-6.5c4.47%200%208.28%202.67%2010%206.5c-1.72%203.83%20-5.53%206.5%20-10%206.5c-4.47%200%20-8.28%20-2.67%20-10%20-6.5Z%22%2F%3E%3C%2Fpath%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%20fill%3D%22currentColor%22%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22r%22%20dur%3D%220.2s%22%20values%3D%220%3B3%22%2F%3E%3C%2Fcircle%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/line-md/watch.svg?color=%231a73e8&size=48
