Add icons to this collection by clicking the heart icon.
Timer icon - also known as clock, time, stopwatch, chronometer, timer, and time and date. Created in a clean flat gradient style, perfect for web, apps, and UI projects. Available in SVG and PNG, with multiple style variants.
<svg
xmlns="http://www.w3.org/2000/svg"
width="512"
height="512"
viewBox="0 0 64 64"
>
<linearGradient id="a">
<stop offset="0" stop-color="#da6dff" />
<stop offset="1" stop-color="#5f2ade" />
</linearGradient>
<linearGradient
id="c"
x1="30.23"
x2="34.164"
y1="2.674"
y2="9.487"
gradientTransform="matrix(.717 .697 -.914 .94 31.85 -13.742)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="d"
x1="29.5"
x2="34.5"
y1=".67"
y2="9.33"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="e"
x1="31.067"
x2="32.933"
y1="6.384"
y2="9.616"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="f"
x1="56.045"
x2="59.996"
y1="-22.472"
y2="-15.627"
gradientTransform="matrix(-.717 .697 .976 1.004 75.28 -6.68)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient id="b">
<stop offset="0" stop-color="#fdff51" />
<stop offset="1" stop-color="#f6d546" />
</linearGradient>
<linearGradient
id="g"
x1="18.998"
x2="45.002"
y1="12.48"
y2="57.52"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="h"
x1="32"
x2="32"
y1="9"
y2="61"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#fdff51" stop-opacity="0" />
<stop offset=".332" stop-color="#fbfc50" stop-opacity=".332" />
<stop offset=".531" stop-color="#f6f44e" stop-opacity=".531" />
<stop offset=".695" stop-color="#ede64a" stop-opacity=".695" />
<stop offset=".841" stop-color="#e1d244" stop-opacity=".841" />
<stop offset=".972" stop-color="#d1b83c" stop-opacity=".972" />
<stop offset="1" stop-color="#cdb13a" />
</linearGradient>
<linearGradient
id="i"
x1="32"
x2="32"
y1="61"
y2="9"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#fdff51" stop-opacity="0" />
<stop offset=".332" stop-color="#fbfc50" stop-opacity=".166" />
<stop offset=".531" stop-color="#f6f44e" stop-opacity=".265" />
<stop offset=".695" stop-color="#ede64a" stop-opacity=".348" />
<stop offset=".841" stop-color="#e1d244" stop-opacity=".42" />
<stop offset=".972" stop-color="#d1b83c" stop-opacity=".486" />
<stop offset="1" stop-color="#cdb13a" stop-opacity=".5" />
</linearGradient>
<linearGradient
id="j"
x1="21.999"
x2="42.001"
y1="17.678"
y2="52.322"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="k"
x1="32"
x2="32"
y1="15.03"
y2="54.97"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#da6dff" stop-opacity="0" />
<stop offset=".258" stop-color="#d76cfd" stop-opacity=".129" />
<stop offset=".413" stop-color="#cf67f6" stop-opacity=".207" />
<stop offset=".541" stop-color="#c160ea" stop-opacity=".271" />
<stop offset=".654" stop-color="#ac55d8" stop-opacity=".327" />
<stop offset=".758" stop-color="#9248c2" stop-opacity=".379" />
<stop offset=".854" stop-color="#7237a7" stop-opacity=".427" />
<stop offset=".943" stop-color="#4c2487" stop-opacity=".472" />
<stop offset="1" stop-color="#30156f" stop-opacity=".5" />
</linearGradient>
<linearGradient
id="l"
x1="32"
x2="32"
y1="54.97"
y2="15.03"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#da6dff" stop-opacity="0" />
<stop offset=".258" stop-color="#d76cfd" stop-opacity=".077" />
<stop offset=".413" stop-color="#cf67f6" stop-opacity=".124" />
<stop offset=".541" stop-color="#c160ea" stop-opacity=".162" />
<stop offset=".654" stop-color="#ac55d8" stop-opacity=".196" />
<stop offset=".758" stop-color="#9248c2" stop-opacity=".227" />
<stop offset=".854" stop-color="#7237a7" stop-opacity=".256" />
<stop offset=".943" stop-color="#4c2487" stop-opacity=".283" />
<stop offset="1" stop-color="#30156f" stop-opacity=".3" />
</linearGradient>
<radialGradient
id="m"
cx="32"
cy="35"
r="19.97"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#af95ef" stop-opacity=".3" />
<stop offset=".147" stop-color="#a78ce8" stop-opacity=".256" />
<stop offset=".386" stop-color="#9074d6" stop-opacity=".184" />
<stop offset=".689" stop-color="#6b4cb8" stop-opacity=".093" />
<stop offset="1" stop-color="#3f1c94" stop-opacity="0" />
</radialGradient>
<linearGradient
id="n"
x1="32"
x2="41.9"
y1="28"
y2="28"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="o"
x1="36.95"
x2="36.95"
y1="21"
y2="35"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#fdff51" stop-opacity="0" />
<stop offset=".222" stop-color="#fafb50" stop-opacity=".222" />
<stop offset=".451" stop-color="#f3ee4c" stop-opacity=".451" />
<stop offset=".684" stop-color="#e6da46" stop-opacity=".684" />
<stop offset=".919" stop-color="#d4bd3d" stop-opacity=".919" />
<stop offset="1" stop-color="#cdb13a" />
</linearGradient>
<linearGradient
id="p"
x1="41.9"
x2="32"
y1="28"
y2="28"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#fdff51" stop-opacity="0" />
<stop offset=".332" stop-color="#fbfc50" stop-opacity=".199" />
<stop offset=".531" stop-color="#f6f44e" stop-opacity=".319" />
<stop offset=".695" stop-color="#ede64a" stop-opacity=".417" />
<stop offset=".841" stop-color="#e1d244" stop-opacity=".504" />
<stop offset=".972" stop-color="#d1b83c" stop-opacity=".583" />
<stop offset="1" stop-color="#cdb13a" stop-opacity=".6" />
</linearGradient>
<path
fill="url(#c)"
d="m50.433 19.339-5.735-5.578 2.697-2.772a4 4 0 1 1 5.735 5.577z"
/>
<path fill="url(#d)" d="M38 7H26a2 2 0 1 1 0-4h12a2 2 0 1 1 0 4z" />
<path fill="url(#e)" d="M30 7h4v2h-4z" />
<path
fill="url(#f)"
d="m14.202 19.722 5.735-5.578-3.069-3.155a4 4 0 1 0-5.735 5.577z"
/>
<circle cx="32" cy="35" r="26" fill="url(#g)" />
<circle cx="32" cy="35" r="26" fill="url(#h)" />
<circle cx="32" cy="35" r="26" fill="url(#i)" />
<path
fill="url(#j)"
d="M49 36h2.97c-.5 10.25-8.72 18.47-18.97 18.97V52h-2v2.97c-10.25-.5-18.47-8.72-18.97-18.97H15v-2h-2.97c.5-10.25 8.72-18.47 18.97-18.97V18h2v-2.97c10.25.5 18.47 8.72 18.97 18.97H49z"
/>
<path
fill="url(#k)"
d="M49 36h2.97c-.5 10.25-8.72 18.47-18.97 18.97V52h-2v2.97c-10.25-.5-18.47-8.72-18.97-18.97H15v-2h-2.97c.5-10.25 8.72-18.47 18.97-18.97V18h2v-2.97c10.25.5 18.47 8.72 18.97 18.97H49z"
/>
<path
fill="url(#l)"
d="M49 36h2.97c-.5 10.25-8.72 18.47-18.97 18.97V52h-2v2.97c-10.25-.5-18.47-8.72-18.97-18.97H15v-2h-2.97c.5-10.25 8.72-18.47 18.97-18.97V18h2v-2.97c10.25.5 18.47 8.72 18.97 18.97H49z"
/>
<path
fill="url(#m)"
d="M49 36h2.97c-.5 10.25-8.72 18.47-18.97 18.97V52h-2v2.97c-10.25-.5-18.47-8.72-18.97-18.97H15v-2h-2.97c.5-10.25 8.72-18.47 18.97-18.97V18h2v-2.97c10.25.5 18.47 8.72 18.97 18.97H49z"
/>
<path fill="url(#n)" d="M41.9 25.1 32 35V21c3.86 0 7.36 1.57 9.9 4.1z" />
<path fill="url(#o)" d="M41.9 25.1 32 35V21c3.86 0 7.36 1.57 9.9 4.1z" />
<path fill="url(#p)" d="M41.9 25.1 32 35V21c3.86 0 7.36 1.57 9.9 4.1z" />
</svg>
More icons in the same style and category