Add icons to this collection by clicking the heart icon.
Clock icon - also known as clock, time, alarm, countdown, timer, and time and date. Created in a clean color 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 510 510"
>
<linearGradient id="a">
<stop offset="0" stop-color="#8a7889" />
<stop offset="1" stop-color="#6e566e" />
</linearGradient>
<linearGradient
id="f"
x1="-695.292"
x2="-658.297"
y1="-1294.192"
y2="-1253.17"
gradientTransform="rotate(-45 1422.129 -1527.034)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient id="b">
<stop offset="0" stop-color="#ffd945" />
<stop offset=".304" stop-color="#ffcd3e" />
<stop offset=".856" stop-color="#ffad2b" />
<stop offset="1" stop-color="#ffa325" />
</linearGradient>
<linearGradient
id="g"
x1="-700.942"
x2="-644.753"
y1="-1344.705"
y2="-1282.4"
gradientTransform="rotate(-45 1422.129 -1527.034)"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="h"
x1="1831.25"
x2="1868.245"
y1="402.802"
y2="443.824"
gradientTransform="rotate(45 1458.722 -1456.838)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="i"
x1="1825.6"
x2="1881.789"
y1="352.289"
y2="414.594"
gradientTransform="rotate(45 1458.722 -1456.838)"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="j"
x1="91.608"
x2="127.193"
y1="426.919"
y2="462.504"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="k"
x1="2533.663"
x2="2569.248"
y1="426.919"
y2="462.504"
gradientTransform="matrix(-1 0 0 1 2952.055 0)"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="l"
x1="255"
x2="255"
y1="78.302"
y2="66.542"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="m"
x1="255"
x2="255"
y1="41.999"
y2="69.629"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#bdc2d1" />
<stop offset=".237" stop-color="#b5b6c5" />
<stop offset=".665" stop-color="#9e96a6" />
<stop offset="1" stop-color="#8a7889" />
</linearGradient>
<linearGradient
id="n"
x1="215.331"
x2="375.049"
y1="234.47"
y2="411.572"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="o"
x1="2348.9"
x2="2486.194"
y1="-2942.815"
y2="-2790.578"
gradientTransform="rotate(180 1319 -1313.274)"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient id="c">
<stop offset="0" stop-color="#f8f6fb" />
<stop offset="1" stop-color="#efdcfb" />
</linearGradient>
<linearGradient
id="p"
x1="224.53"
x2="347.211"
y1="244.67"
y2="380.705"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient
id="q"
x1="3423.173"
x2="3519.105"
y1="-7242.877"
y2="-7136.503"
gradientTransform="rotate(180 1851 -3469)"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient
id="r"
x1="3444.287"
x2="3455.21"
y1="-7461.98"
y2="-7449.868"
gradientTransform="rotate(180 1851 -3658.35)"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient
id="s"
x1="3444.287"
x2="3455.21"
y1="-7734.352"
y2="-7722.24"
gradientTransform="rotate(180 1851 -3658.35)"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient id="d">
<stop offset="0" stop-color="#9b62cd" />
<stop offset=".3" stop-color="#985dcb" />
<stop offset=".672" stop-color="#8f4ec7" />
<stop offset="1" stop-color="#833ac1" />
</linearGradient>
<linearGradient
id="t"
x1="252.997"
x2="261.061"
y1="140.05"
y2="148.992"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<linearGradient
id="u"
x1="252.997"
x2="261.061"
y1="412.422"
y2="421.364"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<linearGradient
id="v"
x1="3308.101"
x2="3319.024"
y1="-7598.166"
y2="-7586.054"
gradientTransform="rotate(180 1851 -3658.35)"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient
id="w"
x1="389.183"
x2="397.247"
y1="276.236"
y2="285.178"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<linearGradient
id="x"
x1="3580.473"
x2="3591.397"
y1="-7598.166"
y2="-7586.054"
gradientTransform="rotate(180 1851 -3658.35)"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient
id="y"
x1="116.811"
x2="124.875"
y1="276.236"
y2="285.178"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<linearGradient id="e">
<stop offset="0" stop-color="#efdcfb" stop-opacity="0" />
<stop offset=".486" stop-color="#baaad6" stop-opacity=".486" />
<stop offset="1" stop-color="#8679b2" />
</linearGradient>
<linearGradient
id="z"
x1="308.866"
x2="123.305"
y1="296.487"
y2="194.836"
gradientUnits="userSpaceOnUse"
href="#e"
/>
<linearGradient
id="A"
x1="287.07"
x2="225.575"
y1="315.21"
y2="267.381"
gradientUnits="userSpaceOnUse"
href="#e"
/>
<linearGradient
id="B"
x1="293.094"
x2="211.822"
y1="285.8"
y2="263.264"
gradientUnits="userSpaceOnUse"
href="#e"
/>
<linearGradient
id="C"
x1="242.89"
x2="267.11"
y1="235.483"
y2="235.483"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#92f37f" />
<stop offset="1" stop-color="#4ab272" />
</linearGradient>
<linearGradient
id="D"
x1="263.109"
x2="221.671"
y1="231.393"
y2="253.898"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#005a01" stop-opacity="0" />
<stop offset="1" stop-color="#005a01" />
</linearGradient>
<linearGradient
id="E"
x1="-694.304"
x2="-636.2"
y1="-4399.694"
y2="-4357.767"
gradientTransform="matrix(.907 -.42 .42 .907 2686.67 3924.307)"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="F"
x1="-658.439"
x2="-734.863"
y1="-4402.441"
y2="-4288.525"
gradientTransform="matrix(.907 -.42 .42 .907 2686.67 3924.307)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#f35227" stop-opacity="0" />
<stop offset="1" stop-color="#f35227" />
</linearGradient>
<linearGradient
id="G"
x1="251.263"
x2="266.308"
y1="274.314"
y2="290.996"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ff819c" />
<stop offset=".259" stop-color="#ff7e9a" />
<stop offset=".476" stop-color="#fe7396" />
<stop offset=".676" stop-color="#fc628e" />
<stop offset=".867" stop-color="#fa4a83" />
<stop offset="1" stop-color="#f83479" />
</linearGradient>
<path
fill="url(#f)"
d="m149.854 128.317-53.562 53.562-39.705-39.706 53.562-53.562z"
/>
<path
fill="url(#g)"
d="M137.189 55.562c31.384 31.384-82.267 145.034-113.651 113.651s-31.384-82.267 0-113.651 82.267-31.384 113.651 0z"
/>
<path
fill="url(#h)"
d="m413.708 181.879-53.562-53.562 39.705-39.706 53.562 53.562z"
/>
<path
fill="url(#i)"
d="M486.462 169.213c-31.384 31.384-145.034-82.267-113.651-113.651s82.267-31.384 113.651 0 31.384 82.267 0 113.651z"
/>
<path
fill="url(#j)"
d="M81.977 466.503c-10.783-10.783-10.783-28.265 0-39.048l29.691-29.691 39.048 39.048-29.691 29.691c-10.783 10.783-28.266 10.783-39.048 0z"
/>
<path
fill="url(#k)"
d="M428.023 466.503c10.783-10.783 10.783-28.265 0-39.048l-29.691-29.691-39.048 39.048 29.691 29.691c10.783 10.783 28.266 10.783 39.048 0z"
/>
<path fill="url(#l)" d="M230.07 62.725h49.86v27.338h-49.86z" />
<path
fill="url(#m)"
d="M281.018 68.194h-52.036c-7.516 0-13.608-6.093-13.608-13.608 0-7.516 6.093-13.608 13.608-13.608h52.036c7.516 0 13.608 6.093 13.608 13.608.001 7.515-6.092 13.608-13.608 13.608z"
/>
<circle cx="255" cy="278.457" r="199.519" fill="url(#n)" />
<circle cx="255" cy="278.457" r="171.506" fill="url(#o)" />
<circle cx="255" cy="278.457" r="153.253" fill="url(#p)" />
<circle cx="255" cy="278.457" r="119.837" fill="url(#q)" />
<circle cx="255" cy="142.271" r="13.645" fill="url(#r)" />
<circle cx="255" cy="414.643" r="13.645" fill="url(#s)" />
<circle cx="255" cy="142.271" r="10.074" fill="url(#t)" />
<circle cx="255" cy="414.643" r="10.074" fill="url(#u)" />
<circle cx="391.186" cy="278.457" r="13.645" fill="url(#v)" />
<circle cx="391.186" cy="278.457" r="10.074" fill="url(#w)" />
<circle cx="118.814" cy="278.457" r="13.645" fill="url(#x)" />
<circle cx="118.814" cy="278.457" r="10.074" fill="url(#y)" />
<path
fill="url(#z)"
d="M233.166 181.085a3.75 3.75 0 0 0-1.917-1.532l-23.377-8.573a3.83 3.83 0 0 0-4.914 2.276l-8.572 23.372a3.743 3.743 0 0 0 .497 3.568l14.578 13.413a3.795 3.795 0 0 0 1.051 2.269l31.422 67.813L353.823 395.58c17.156-14.49 31.086-32.677 40.557-53.338z"
/>
<path
fill="url(#A)"
d="M375.791 372.78 269.437 266.427c-3.447-4.133-8.634-6.764-14.437-6.764-10.38 0-18.794 8.414-18.794 18.794 0 5.803 2.631 10.99 6.764 14.437l106.354 106.354a154.167 154.167 0 0 0 26.467-26.468z"
/>
<path
fill="url(#B)"
d="M255 192.509c-6.688 0-12.11 54.924-12.11 62.471 0 6.455 3.967 19.032 9.3 22.541l110.228 110.228c15.054-14.797 27.066-32.675 35.009-52.619z"
/>
<path
fill="url(#C)"
d="M267.11 254.981c0 7.547-5.422 23.477-12.11 23.477s-12.11-15.929-12.11-23.477 5.422-62.471 12.11-62.471c6.688-.001 12.11 54.923 12.11 62.471z"
/>
<path
fill="url(#D)"
d="M267.11 254.981c0-7.547-5.422-62.471-12.11-62.471v85.948c6.688-.001 12.11-15.93 12.11-23.477z"
/>
<path
fill="url(#E)"
d="m229.676 191.708 37.256 80.404c.642 1.386-.554 1.751-1.94 2.393l-19.978 9.254c-1.386.642-2.438 1.319-3.08-.067l-37.256-80.404a3.83 3.83 0 0 0-5.085-1.865c-3.096 1.434-6.381-1.59-5.206-4.793l8.572-23.372a3.828 3.828 0 0 1 4.914-2.276l23.377 8.573c3.204 1.175 3.388 5.636.292 7.07a3.825 3.825 0 0 0-1.866 5.083z"
/>
<path
fill="url(#F)"
d="M264.992 274.505c1.386-.642 2.583-1.007 1.94-2.393l-37.256-80.404a3.828 3.828 0 0 1 1.865-5.084c3.096-1.434 2.912-5.895-.292-7.07l-23.377-8.573a3.82 3.82 0 0 0-2.929.121l50.059 108.031z"
/>
<circle cx="255" cy="278.457" r="18.794" fill="url(#G)" />
</svg>
More icons in the same style and category