watch icon
watch-sharp from IonIcons by Ben Sperry · Sharp · MIT Free for personal and commercial use.
- Name
- watch-sharp
- Set
- IonIcons
- Style
- Sharp
- Viewbox
- 512×512
- License
- MIT
2 other variants in IonIcons
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 TwoTonewatchJam 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 512 512"><rect width="240" height="240" x="136" y="136" fill="currentColor" rx="8" ry="8"/><path fill="currentColor" d="M384 96h-48V16H176v80h-48a32 32 0 0 0-32 32v256a32 32 0 0 0 32 32h48v80h160v-80h48a32 32 0 0 0 32-32V128a32 32 0 0 0-32-32m8 272a24 24 0 0 1-24 24H144a24 24 0 0 1-24-24V144a24 24 0 0 1 24-24h224a24 24 0 0 1 24 24Z"/></svg>
React
import type { SVGProps } from "react";
export function IonWatchSharp(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><rect width="240" height="240" x="136" y="136" fill="currentColor" rx="8" ry="8"/><path fill="currentColor" d="M384 96h-48V16H176v80h-48a32 32 0 0 0-32 32v256a32 32 0 0 0 32 32h48v80h160v-80h48a32 32 0 0 0 32-32V128a32 32 0 0 0-32-32m8 272a24 24 0 0 1-24 24H144a24 24 0 0 1-24-24V144a24 24 0 0 1 24-24h224a24 24 0 0 1 24 24Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><rect width="240" height="240" x="136" y="136" fill="currentColor" rx="8" ry="8"/><path fill="currentColor" d="M384 96h-48V16H176v80h-48a32 32 0 0 0-32 32v256a32 32 0 0 0 32 32h48v80h160v-80h48a32 32 0 0 0 32-32V128a32 32 0 0 0-32-32m8 272a24 24 0 0 1-24 24H144a24 24 0 0 1-24-24V144a24 24 0 0 1 24-24h224a24 24 0 0 1 24 24Z"/></svg> </template>
CSS
.icon-watch-sharp {
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%20512%20512%22%3E%3Crect%20width%3D%22240%22%20height%3D%22240%22%20x%3D%22136%22%20y%3D%22136%22%20fill%3D%22currentColor%22%20rx%3D%228%22%20ry%3D%228%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M384%2096h-48V16H176v80h-48a32%2032%200%200%200-32%2032v256a32%2032%200%200%200%2032%2032h48v80h160v-80h48a32%2032%200%200%200%2032-32V128a32%2032%200%200%200-32-32m8%20272a24%2024%200%200%201-24%2024H144a24%2024%200%200%201-24-24V144a24%2024%200%200%201%2024-24h224a24%2024%200%200%201%2024%2024Z%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%20512%20512%22%3E%3Crect%20width%3D%22240%22%20height%3D%22240%22%20x%3D%22136%22%20y%3D%22136%22%20fill%3D%22currentColor%22%20rx%3D%228%22%20ry%3D%228%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M384%2096h-48V16H176v80h-48a32%2032%200%200%200-32%2032v256a32%2032%200%200%200%2032%2032h48v80h160v-80h48a32%2032%200%200%200%2032-32V128a32%2032%200%200%200-32-32m8%20272a24%2024%200%200%201-24%2024H144a24%2024%200%200%201-24-24V144a24%2024%200%200%201%2024-24h224a24%2024%200%200%201%2024%2024Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/watch-sharp.svg?color=%231a73e8&size=48
