watch icon
watch from TDesign Icons by TDesign · Outline · MIT Free for personal and commercial use.
- Name
- watch
- Set
- TDesign Icons
- Style
- Outline
- Viewbox
- 24×24
- License
- MIT
1 other variant in TDesign Icons
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 24 24"><g fill="none"><path d="M5 7a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2zm3-6h8l.5 4h-9zm-.5 18h9l-.5 4H8z"/><path stroke="currentColor" stroke-linecap="square" stroke-width="2" d="M8 1h8l.5 4h-9zm-.5 18h9l-.5 4H8zM20 10v4M7 19h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2Z"/></g></svg>
React
import type { SVGProps } from "react";
export function TdesignWatch(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path d="M5 7a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2zm3-6h8l.5 4h-9zm-.5 18h9l-.5 4H8z"/><path stroke="currentColor" strokeLinecap="square" strokeWidth="2" d="M8 1h8l.5 4h-9zm-.5 18h9l-.5 4H8zM20 10v4M7 19h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2Z"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path d="M5 7a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2zm3-6h8l.5 4h-9zm-.5 18h9l-.5 4H8z"/><path stroke="currentColor" stroke-linecap="square" stroke-width="2" d="M8 1h8l.5 4h-9zm-.5 18h9l-.5 4H8zM20 10v4M7 19h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2Z"/></g></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%3Cg%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M5%207a2%202%200%200%201%202-2h10a2%202%200%200%201%202%202v10a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2zm3-6h8l.5%204h-9zm-.5%2018h9l-.5%204H8z%22%2F%3E%3Cpath%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22square%22%20stroke-width%3D%222%22%20d%3D%22M8%201h8l.5%204h-9zm-.5%2018h9l-.5%204H8zM20%2010v4M7%2019h10a2%202%200%200%200%202-2V7a2%202%200%200%200-2-2H7a2%202%200%200%200-2%202v10a2%202%200%200%200%202%202Z%22%2F%3E%3C%2Fg%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%3Cg%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M5%207a2%202%200%200%201%202-2h10a2%202%200%200%201%202%202v10a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2zm3-6h8l.5%204h-9zm-.5%2018h9l-.5%204H8z%22%2F%3E%3Cpath%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22square%22%20stroke-width%3D%222%22%20d%3D%22M8%201h8l.5%204h-9zm-.5%2018h9l-.5%204H8zM20%2010v4M7%2019h10a2%202%200%200%200%202-2V7a2%202%200%200%200-2-2H7a2%202%200%200%200-2%202v10a2%202%200%200%200%202%202Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/tdesign/watch.svg?color=%231a73e8&size=48
