stopwatch icon
stopwatch from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.
- Name
- stopwatch
- Set
- IonIcons
- Style
- Regular
- Viewbox
- 512×512
- License
- MIT
2 other variants in IonIcons
The same icon in other sets
stopwatchBootstrap IconsstopwatchBoxIcons v2stopwatchBoxIcons v2 SolidstopwatchEmoji One (Colored)stopwatchElement PlusstopwatchFramework7 IconsstopwatchFont Awesome 6 SolidstopwatchFont Awesome SolidstopwatchFluent EmojistopwatchFluent Emoji FlatstopwatchFluent Emoji High Contraststopwatchcss.ggstopwatchIconParkstopwatchIconPark OutlinestopwatchIconPark SolidstopwatchIconPark TwoTonestopwatchLine Awesomestopwatch-fillMingCute IconstopwatchNoto Emojistopwatch-16OcticonsstopwatchOpenMojistopwatchPrime IconsstopwatchRadix Iconsstopwatch-boldSolar
Use the stopwatch icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><circle cx="256" cy="272" r="16" fill="currentColor"/><path fill="currentColor" d="M280 81.5V72a24 24 0 0 0-48 0v9.5a191 191 0 0 0-84.43 32.13L137 103a24 24 0 0 0-34 34l8.6 8.6A191.17 191.17 0 0 0 64 272c0 105.87 86.13 192 192 192s192-86.13 192-192c0-97.74-73.42-178.66-168-190.5M256 320a48 48 0 0 1-16-93.25V152a16 16 0 0 1 32 0v74.75A48 48 0 0 1 256 320"/></svg>
React
import type { SVGProps } from "react";
export function IonStopwatch(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><circle cx="256" cy="272" r="16" fill="currentColor"/><path fill="currentColor" d="M280 81.5V72a24 24 0 0 0-48 0v9.5a191 191 0 0 0-84.43 32.13L137 103a24 24 0 0 0-34 34l8.6 8.6A191.17 191.17 0 0 0 64 272c0 105.87 86.13 192 192 192s192-86.13 192-192c0-97.74-73.42-178.66-168-190.5M256 320a48 48 0 0 1-16-93.25V152a16 16 0 0 1 32 0v74.75A48 48 0 0 1 256 320"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><circle cx="256" cy="272" r="16" fill="currentColor"/><path fill="currentColor" d="M280 81.5V72a24 24 0 0 0-48 0v9.5a191 191 0 0 0-84.43 32.13L137 103a24 24 0 0 0-34 34l8.6 8.6A191.17 191.17 0 0 0 64 272c0 105.87 86.13 192 192 192s192-86.13 192-192c0-97.74-73.42-178.66-168-190.5M256 320a48 48 0 0 1-16-93.25V152a16 16 0 0 1 32 0v74.75A48 48 0 0 1 256 320"/></svg> </template>
CSS
.icon-stopwatch {
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%3Ccircle%20cx%3D%22256%22%20cy%3D%22272%22%20r%3D%2216%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M280%2081.5V72a24%2024%200%200%200-48%200v9.5a191%20191%200%200%200-84.43%2032.13L137%20103a24%2024%200%200%200-34%2034l8.6%208.6A191.17%20191.17%200%200%200%2064%20272c0%20105.87%2086.13%20192%20192%20192s192-86.13%20192-192c0-97.74-73.42-178.66-168-190.5M256%20320a48%2048%200%200%201-16-93.25V152a16%2016%200%200%201%2032%200v74.75A48%2048%200%200%201%20256%20320%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%3Ccircle%20cx%3D%22256%22%20cy%3D%22272%22%20r%3D%2216%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M280%2081.5V72a24%2024%200%200%200-48%200v9.5a191%20191%200%200%200-84.43%2032.13L137%20103a24%2024%200%200%200-34%2034l8.6%208.6A191.17%20191.17%200%200%200%2064%20272c0%20105.87%2086.13%20192%20192%20192s192-86.13%20192-192c0-97.74-73.42-178.66-168-190.5M256%20320a48%2048%200%200%201-16-93.25V152a16%2016%200%200%201%2032%200v74.75A48%2048%200%200%201%20256%20320%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/stopwatch.svg?color=%231a73e8&size=48
