Gentleface › Time & calendar › stopwatch-reset

stopwatch-reset icon

Stopwatch reset: reset timer, reset stopwatch, restart timer. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Animated stopwatch-reset-snap · line-round

The hand ticks on round the dial a step at a time. The crown is pressed, the dial’s arrow runs back into its head, and as the head sweeps round again the hand snaps back to its start, overshoots and settles.

Download SVG

Native SVG animation, with no CSS or script. It loops by itself. Inline it to take the text color: in an <img> it draws black. To play it once on hover or click, run 0.2 s to 2.45 s. Examples and helper.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M14.146 1.146C14.246 1.047 14.364 0.997 14.5 0.997C14.636 0.997 14.754 1.047 14.854 1.146C14.951 1.244 15 1.362 15 1.5C15 1.638 14.951 1.756 14.854 1.854L12.854 3.854C12.754 3.953 12.636 4.003 12.5 4.003C12.364 4.003 12.246 3.953 12.146 3.854C12.049 3.756 12 3.638 12 3.5C12 3.362 12.049 3.244 12.146 3.146L14.146 1.146ZM5.144 2.856C5.048 2.759 5 2.641 5 2.5C5 2.359 5.048 2.241 5.144 2.144C5.241 2.048 5.359 2 5.5 2L9.5 2C9.641 2 9.759 2.048 9.856 2.144C9.952 2.241 10 2.359 10 2.5C10 2.641 9.952 2.759 9.856 2.856C9.759 2.952 9.641 3 9.5 3L5.5 3C5.359 3 5.241 2.952 5.144 2.856ZM5.856 6.144C5.952 6.241 6 6.359 6 6.5C6 6.641 5.952 6.759 5.856 6.856C5.759 6.952 5.641 7 5.5 7L3.5 7C3.359 7 3.241 6.952 3.144 6.856C3.048 6.759 3 6.641 3 6.5L3 4.5C3 4.359 3.048 4.241 3.144 4.144C3.241 4.048 3.359 4 3.5 4C3.641 4 3.759 4.048 3.856 4.144C3.952 4.241 4 4.359 4 4.5L4 5.255C4.287 5.019 4.6 4.811 4.937 4.634C5.761 4.2 6.638 3.989 7.57 4C8.501 4.012 9.373 4.245 10.185 4.7C10.905 5.103 11.504 5.64 11.982 6.312C12.46 6.985 12.771 7.727 12.915 8.539C13.078 9.456 13.012 10.356 12.718 11.239C12.423 12.123 11.936 12.882 11.256 13.518C10.653 14.081 9.959 14.488 9.173 14.739C8.387 14.99 7.586 15.061 6.768 14.951C5.845 14.827 5.008 14.491 4.256 13.941C3.504 13.392 2.929 12.697 2.53 11.855C2.177 11.11 2 10.325 2 9.5C2 9.359 2.048 9.241 2.144 9.144C2.241 9.048 2.359 9 2.5 9C2.638 9 2.756 9.049 2.854 9.146C2.951 9.244 3 9.362 3 9.5C3 10.175 3.144 10.817 3.433 11.427C3.76 12.116 4.231 12.684 4.846 13.134C5.461 13.583 6.146 13.859 6.901 13.96C7.57 14.05 8.226 13.992 8.869 13.787C9.512 13.581 10.08 13.248 10.573 12.788C11.129 12.267 11.528 11.646 11.769 10.923C12.01 10.2 12.064 9.464 11.931 8.714C11.813 8.049 11.558 7.442 11.167 6.892C10.776 6.342 10.286 5.902 9.697 5.573C9.032 5.201 8.319 5.01 7.557 5C6.795 4.991 6.077 5.163 5.403 5.518C5.14 5.657 4.895 5.818 4.669 6L5.5 6C5.641 6 5.759 6.048 5.856 6.144ZM7.5 10C7.362 10 7.244 9.951 7.146 9.854C7.047 9.754 6.997 9.636 6.997 9.5C6.997 9.364 7.047 9.246 7.146 9.146L9.146 7.146C9.246 7.047 9.364 6.997 9.5 6.997C9.636 6.997 9.754 7.047 9.854 7.146C9.951 7.244 10 7.362 10 7.5C10 7.638 9.951 7.756 9.854 7.854L7.854 9.854C7.756 9.951 7.638 10 7.5 10Z"/></svg>

React

// Gentleface "stopwatch-reset" (line-round), MIT. https://gentleface.com/icons/stopwatch-reset
import type { SVGProps } from 'react';

export function StopwatchResetIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M14.146 1.146C14.246 1.047 14.364 0.997 14.5 0.997C14.636 0.997 14.754 1.047 14.854 1.146C14.951 1.244 15 1.362 15 1.5C15 1.638 14.951 1.756 14.854 1.854L12.854 3.854C12.754 3.953 12.636 4.003 12.5 4.003C12.364 4.003 12.246 3.953 12.146 3.854C12.049 3.756 12 3.638 12 3.5C12 3.362 12.049 3.244 12.146 3.146L14.146 1.146ZM5.144 2.856C5.048 2.759 5 2.641 5 2.5C5 2.359 5.048 2.241 5.144 2.144C5.241 2.048 5.359 2 5.5 2L9.5 2C9.641 2 9.759 2.048 9.856 2.144C9.952 2.241 10 2.359 10 2.5C10 2.641 9.952 2.759 9.856 2.856C9.759 2.952 9.641 3 9.5 3L5.5 3C5.359 3 5.241 2.952 5.144 2.856ZM5.856 6.144C5.952 6.241 6 6.359 6 6.5C6 6.641 5.952 6.759 5.856 6.856C5.759 6.952 5.641 7 5.5 7L3.5 7C3.359 7 3.241 6.952 3.144 6.856C3.048 6.759 3 6.641 3 6.5L3 4.5C3 4.359 3.048 4.241 3.144 4.144C3.241 4.048 3.359 4 3.5 4C3.641 4 3.759 4.048 3.856 4.144C3.952 4.241 4 4.359 4 4.5L4 5.255C4.287 5.019 4.6 4.811 4.937 4.634C5.761 4.2 6.638 3.989 7.57 4C8.501 4.012 9.373 4.245 10.185 4.7C10.905 5.103 11.504 5.64 11.982 6.312C12.46 6.985 12.771 7.727 12.915 8.539C13.078 9.456 13.012 10.356 12.718 11.239C12.423 12.123 11.936 12.882 11.256 13.518C10.653 14.081 9.959 14.488 9.173 14.739C8.387 14.99 7.586 15.061 6.768 14.951C5.845 14.827 5.008 14.491 4.256 13.941C3.504 13.392 2.929 12.697 2.53 11.855C2.177 11.11 2 10.325 2 9.5C2 9.359 2.048 9.241 2.144 9.144C2.241 9.048 2.359 9 2.5 9C2.638 9 2.756 9.049 2.854 9.146C2.951 9.244 3 9.362 3 9.5C3 10.175 3.144 10.817 3.433 11.427C3.76 12.116 4.231 12.684 4.846 13.134C5.461 13.583 6.146 13.859 6.901 13.96C7.57 14.05 8.226 13.992 8.869 13.787C9.512 13.581 10.08 13.248 10.573 12.788C11.129 12.267 11.528 11.646 11.769 10.923C12.01 10.2 12.064 9.464 11.931 8.714C11.813 8.049 11.558 7.442 11.167 6.892C10.776 6.342 10.286 5.902 9.697 5.573C9.032 5.201 8.319 5.01 7.557 5C6.795 4.991 6.077 5.163 5.403 5.518C5.14 5.657 4.895 5.818 4.669 6L5.5 6C5.641 6 5.759 6.048 5.856 6.144ZM7.5 10C7.362 10 7.244 9.951 7.146 9.854C7.047 9.754 6.997 9.636 6.997 9.5C6.997 9.364 7.047 9.246 7.146 9.146L9.146 7.146C9.246 7.047 9.364 6.997 9.5 6.997C9.636 6.997 9.754 7.047 9.854 7.146C9.951 7.244 10 7.362 10 7.5C10 7.638 9.951 7.756 9.854 7.854L7.854 9.854C7.756 9.951 7.638 10 7.5 10Z" />
    </svg>
  );
}

Vue

Vue: see /icons/stopwatch-reset.md

Svelte

Svelte: see /icons/stopwatch-reset.md

HTML img

HTML img: see /icons/stopwatch-reset.md

CSS

CSS: see /icons/stopwatch-reset.md

Data URL

Data URL: see /icons/stopwatch-reset.md

Sprite

Sprite: see /icons/stopwatch-reset.md

SwiftUI

SwiftUI: see /icons/stopwatch-reset.md

Compose

Compose: see /icons/stopwatch-reset.md

Android XML

Android XML: see /icons/stopwatch-reset.md

Flutter

Flutter: see /icons/stopwatch-reset.md

Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

With npm: import { StopwatchResetIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

reset timer, reset stopwatch, restart timer

Don’t confuse with

history: history is the clock with a counter-clockwise arrow; the crown makes a stopwatch

Tags

stopwatch, timer, reset, restart, clear, lap, time, counter-clockwise, rewind

Category

Time & calendar

Component name

StopwatchResetIcon

History

2026-11-07 20 px drawn, 24 px drawn, added, released in 0.5.0

Since

version 0.5.0

Family 12

stopwatch stopwatch-alert stopwatch-check stopwatch-gear stopwatch-lock stopwatch-off stopwatch-pause stopwatch-pencil stopwatch-play stopwatch-plus stopwatch-user stopwatch-x

More time & calendar icons

alarm-clock alarm-clock-alert alarm-clock-check alarm-clock-gear alarm-clock-off alarm-clock-pause alarm-clock-pencil alarm-clock-plus alarm-clock-snooze alarm-clock-sparkle alarm-clock-x calendar calendar-alert calendar-arrow-down calendar-arrow-up calendar-bolt · all time & calendar icons

For agents

Metadata: /icons/stopwatch-reset.json · Markdown: /icons/stopwatch-reset.md · SVG: https://gentleface.com/svg/{style}/16/stopwatch-reset.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/stopwatch-reset.png

stopwatch-reset icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp