Add icons to this collection by clicking the heart icon.
Clock icon - also known as clock, time, alarm, countdown, timer, and birthday and party. 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="#f8f6fb" />
<stop offset="1" stop-color="#efdcfb" />
</linearGradient>
<linearGradient
id="g"
x1="209.778"
x2="391.854"
y1="204.753"
y2="406.647"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="h"
x1="219.638"
x2="362.014"
y1="215.892"
y2="373.765"
gradientTransform="rotate(180 255 255)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="i"
x1="250.974"
x2="267.185"
y1="74.057"
y2="92.033"
gradientTransform="rotate(180 255 65.65)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="j"
x1="250.974"
x2="267.185"
y1="-330.182"
y2="-312.206"
gradientTransform="rotate(180 255 65.65)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient id="b">
<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="k"
x1="252.028"
x2="263.996"
y1="49.482"
y2="62.753"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="l"
x1="252.028"
x2="263.996"
y1="453.721"
y2="466.991"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="m"
x1="48.854"
x2="65.066"
y1="-128.063"
y2="-110.086"
gradientTransform="rotate(180 255 65.65)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="n"
x1="454.146"
x2="466.115"
y1="251.601"
y2="264.872"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="o"
x1="453.093"
x2="469.304"
y1="-128.063"
y2="-110.086"
gradientTransform="rotate(180 255 65.65)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="p"
x1="49.909"
x2="61.877"
y1="251.602"
y2="264.872"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient id="c">
<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="q"
x1="334.944"
x2="59.546"
y1="281.656"
y2="130.792"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient
id="r"
x1="302.596"
x2="211.33"
y1="309.444"
y2="238.459"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient
id="s"
x1="311.537"
x2="190.917"
y1="265.795"
y2="232.349"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient id="d">
<stop offset="0" stop-color="#92f37f" />
<stop offset="1" stop-color="#4ab272" />
</linearGradient>
<linearGradient
id="t"
x1="237.027"
x2="272.973"
y1="191.118"
y2="191.118"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<linearGradient
id="u"
x1="267.036"
x2="205.535"
y1="185.048"
y2="218.449"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#005a01" stop-opacity="0" />
<stop offset="1" stop-color="#005a01" />
</linearGradient>
<linearGradient id="e">
<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="v"
x1="723.276"
x2="809.51"
y1="-3438.646"
y2="-3376.42"
gradientTransform="matrix(.907 -.42 .42 .907 973.22 3598.419)"
gradientUnits="userSpaceOnUse"
href="#e"
/>
<linearGradient
id="w"
x1="776.504"
x2="663.08"
y1="-3442.722"
y2="-3273.656"
gradientTransform="matrix(.907 -.42 .42 .907 973.22 3598.419)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#f35227" stop-opacity="0" />
<stop offset="1" stop-color="#f35227" />
</linearGradient>
<linearGradient id="f">
<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>
<linearGradient
id="x"
x1="249.454"
x2="271.783"
y1="248.748"
y2="273.507"
gradientUnits="userSpaceOnUse"
href="#f"
/>
<linearGradient
id="y"
x1="-63.959"
x2="-10.588"
y1="-121.124"
y2="-49.962"
gradientTransform="translate(97.656 150.658)"
gradientUnits="userSpaceOnUse"
href="#f"
/>
<linearGradient
id="z"
x1="338.191"
x2="397.908"
y1="276.563"
y2="356.186"
gradientTransform="translate(97.656 150.658)"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<linearGradient
id="A"
x1="234.622"
x2="270.512"
y1="309.199"
y2="357.052"
gradientTransform="translate(97.656 150.658)"
gradientUnits="userSpaceOnUse"
href="#e"
/>
<linearGradient
id="B"
x1="432.31"
x2="522.199"
y1="44.791"
y2="134.68"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#00adfb" />
<stop offset="1" stop-color="#3f3ced" />
</linearGradient>
<linearGradient
id="C"
x1="32.346"
x2="98.906"
y1="428.45"
y2="495.011"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<linearGradient
id="D"
x1="13.161"
x2="60.925"
y1="320.965"
y2="368.729"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ff7044" />
<stop offset="1" stop-color="#f82814" />
</linearGradient>
<circle cx="255" cy="254.897" r="227.448" fill="url(#g)" />
<circle cx="255" cy="254.897" r="177.856" fill="url(#h)" />
<circle cx="255" cy="52.778" r="20.251" fill="url(#i)" />
<circle cx="255" cy="457.017" r="20.251" fill="url(#j)" />
<circle cx="255" cy="52.778" r="14.951" fill="url(#k)" />
<circle cx="255" cy="457.017" r="14.951" fill="url(#l)" />
<circle cx="457.119" cy="254.897" r="20.251" fill="url(#m)" />
<circle cx="457.119" cy="254.897" r="14.951" fill="url(#n)" />
<circle cx="52.881" cy="254.897" r="20.251" fill="url(#o)" />
<circle cx="52.881" cy="254.897" r="14.951" fill="url(#p)" />
<path
fill="url(#q)"
d="M222.595 110.384c-.621-.988-1.571-1.806-2.845-2.273l-34.694-12.724a5.685 5.685 0 0 0-7.294 3.378l-12.721 34.688c-.719 1.961-.312 3.874.738 5.296l21.635 19.906c.12 1.297.699 2.466 1.561 3.368l46.634 100.643 166.059 166.06c25.463-21.506 46.136-48.498 60.192-79.161z"
/>
<path
fill="url(#r)"
d="M434.27 394.886 276.427 237.043c-5.116-6.134-12.815-10.038-21.427-10.038-15.405 0-27.893 12.488-27.893 27.893 0 8.612 3.905 16.31 10.038 21.427l157.843 157.843a228.768 228.768 0 0 0 39.282-39.282z"
/>
<path
fill="url(#s)"
d="M255 127.339c-9.926 0-17.973 81.515-17.973 92.716 0 9.58 5.888 28.247 13.802 33.453l163.594 163.594c22.342-21.961 40.17-48.494 51.959-78.094z"
/>
<path
fill="url(#t)"
d="M272.973 220.055c0 11.201-8.047 34.842-17.973 34.842s-17.973-23.641-17.973-34.842 8.047-92.716 17.973-92.716 17.973 81.515 17.973 92.716z"
/>
<path
fill="url(#u)"
d="M272.973 220.055c0-11.201-8.047-92.716-17.973-92.716v127.559c9.926-.001 17.973-23.642 17.973-34.843z"
/>
<path
fill="url(#v)"
d="m217.415 126.149 55.293 119.331c.953 2.057-.822 2.598-2.879 3.551l-29.65 13.734c-2.058.953-3.618 1.957-4.572-.1l-55.293-119.331a5.685 5.685 0 0 0-7.547-2.768c-4.595 2.128-9.47-2.36-7.727-7.114l12.721-34.687a5.684 5.684 0 0 1 7.294-3.378l34.694 12.724c4.754 1.744 5.028 8.364.433 10.493a5.681 5.681 0 0 0-2.767 7.545z"
/>
<path
fill="url(#w)"
d="M269.829 249.032c2.057-.953 3.833-1.494 2.879-3.551L217.415 126.15a5.683 5.683 0 0 1 2.767-7.546c4.595-2.128 4.321-8.749-.433-10.493l-34.694-12.724a5.671 5.671 0 0 0-4.347.179l74.295 160.333z"
/>
<circle cx="255" cy="254.897" r="27.893" fill="url(#x)" />
<path
fill="url(#y)"
d="M97.802 56.709a143.5 143.5 0 0 0-42.285 42.535c-2.458 3.82-8.132 3.81-10.576-.019A143.47 143.47 0 0 0 2.813 56.536c-3.746-2.461-3.736-8.056.019-10.504A143.47 143.47 0 0 0 45.116 3.498c2.458-3.82 8.131-3.81 10.576.019a143.509 143.509 0 0 0 42.129 42.689c3.746 2.461 3.736 8.056-.019 10.503z"
/>
<path
fill="url(#z)"
d="M506.832 458.365a160.556 160.556 0 0 0-47.312 47.592c-2.75 4.274-9.098 4.263-11.833-.022a160.529 160.529 0 0 0-47.138-47.764c-4.192-2.754-4.18-9.014.022-11.752a160.54 160.54 0 0 0 47.311-47.592c2.75-4.274 9.098-4.263 11.833.021a160.553 160.553 0 0 0 47.138 47.764c4.192 2.754 4.181 9.014-.021 11.753z"
/>
<path
fill="url(#A)"
d="M374.683 478.631a96.497 96.497 0 0 0-28.434 28.603c-1.653 2.569-5.468 2.562-7.112-.013a96.481 96.481 0 0 0-28.329-28.706c-2.519-1.655-2.512-5.418.013-7.063a96.486 96.486 0 0 0 28.434-28.603c1.653-2.569 5.468-2.562 7.112.013a96.484 96.484 0 0 0 28.33 28.706c2.518 1.654 2.511 5.417-.014 7.063z"
/>
<path
fill="url(#B)"
d="M441.738 117.906a173 173 0 0 0-51.284-50.982c-4.606-2.964-4.593-9.804.023-12.751a172.994 172.994 0 0 0 51.469-50.794c2.967-4.517 9.713-4.504 12.664.023a172.997 172.997 0 0 0 51.284 50.981c4.606 2.964 4.593 9.804-.023 12.751a173.01 173.01 0 0 0-51.469 50.795c-2.968 4.517-9.714 4.505-12.664-.023z"
/>
<path
fill="url(#C)"
d="M51.634 506.842A160.556 160.556 0 0 0 4.042 459.53c-4.274-2.75-4.263-9.098.022-11.833a160.529 160.529 0 0 0 47.764-47.138c2.754-4.192 9.014-4.18 11.752.022a160.54 160.54 0 0 0 47.592 47.311c4.274 2.75 4.263 9.098-.021 11.833a160.553 160.553 0 0 0-47.764 47.138c-2.755 4.192-9.015 4.18-11.753-.021z"
/>
<path
fill="url(#D)"
d="M31.368 374.692a96.486 96.486 0 0 0-28.603-28.434c-2.569-1.653-2.562-5.468.013-7.112a96.473 96.473 0 0 0 28.706-28.33c1.655-2.519 5.418-2.512 7.063.013a96.486 96.486 0 0 0 28.603 28.434c2.569 1.653 2.562 5.468-.013 7.112a96.484 96.484 0 0 0-28.706 28.33c-1.655 2.519-5.418 2.513-7.063-.013z"
/>
</svg>
More icons in the same style and category