Add icons to this collection by clicking the heart icon.
Alarm Clock icon - also known as wake up, alarm, alarm clock, 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"
x1="4"
x2="60"
y1="33.5"
y2="33.5"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#13678c" />
<stop offset="1" stop-color="#00354c" />
</linearGradient>
<linearGradient
id="b"
x1="4"
x2="60"
y1="25"
y2="25"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#56bdea" />
<stop offset="1" stop-color="#008fcd" />
</linearGradient>
<linearGradient
id="c"
x1="4"
x2="60"
y1="32"
y2="32"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#faab18" />
<stop offset="1" stop-color="#a86d00" />
</linearGradient>
<linearGradient
id="d"
x1="4"
x2="60"
y1="30"
y2="30"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#b4e3f5" />
<stop offset="1" stop-color="#22c2ff" />
</linearGradient>
<linearGradient
id="e"
x1="4"
x2="60"
y1="16.5"
y2="16.5"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#fdcd08" />
<stop offset="1" stop-color="#9e7f00" />
</linearGradient>
<linearGradient
id="f"
x1="4"
x2="60"
y1="34"
y2="34"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ef5227" />
<stop offset="1" stop-color="#ab2500" />
</linearGradient>
<g fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
<path
fill="url(#a)"
d="M30 10.5h-3a2 2 0 0 1 0-4h10a2 2 0 0 1 0 4h-3v4.099a19.878 19.878 0 0 1 8.924 3.149l1.949-1.95-4.963-4.963c3.52-3.52 9.235-3.52 12.755 0s3.52 9.235 0 12.755l-4.963-4.963-1.649 1.648A19.942 19.942 0 0 1 52 34.5c0 6.376-2.99 12.059-7.644 15.723l2.392 4.306a1.998 1.998 0 0 1-2.719 2.719l-6.397-3.553c-1.787.524-3.677.805-5.632.805s-3.845-.281-5.632-.805l-6.397 3.553a1.998 1.998 0 0 1-2.719-2.719l2.392-4.306C14.99 46.559 12 40.876 12 34.5a19.942 19.942 0 0 1 5.947-14.225l-1.649-1.648-4.963 4.963c-3.52-3.52-3.52-9.235 0-12.755s9.235-3.52 12.755 0l-4.963 4.963 1.949 1.95A19.882 19.882 0 0 1 30 14.599z"
/>
<path
fill="url(#b)"
d="M30 10.5h-3a2 2 0 0 1 0-4h10a2 2 0 0 1 0 4h-3v4.099a19.878 19.878 0 0 1 8.924 3.149l1.949-1.95-4.963-4.963c3.52-3.52 9.235-3.52 12.755 0s3.52 9.235 0 12.755l-4.963-4.963-1.649 1.648A19.942 19.942 0 0 1 52 34.5c0 11.038-8.962 20-20 20s-20-8.962-20-20a19.942 19.942 0 0 1 5.947-14.225l-1.649-1.648-4.963 4.963c-3.52-3.52-3.52-9.235 0-12.755s9.235-3.52 12.755 0l-4.963 4.963 1.949 1.95A19.882 19.882 0 0 1 30 14.599z"
/>
<path
fill="url(#c)"
d="m44.873 15.798-4.963-4.963c3.52-3.52 9.235-3.52 12.755 0s3.52 9.235 0 12.755l-4.963-4.963-1.649 1.648a20.099 20.099 0 0 0-3.129-2.527zM16.298 18.627l-4.963 4.963c-3.52-3.52-3.52-9.235 0-12.755s9.235-3.52 12.755 0l-4.963 4.963 1.949 1.95a20.157 20.157 0 0 0-3.129 2.527zM30 10.5h-3a2 2 0 0 1 0-4h10a2 2 0 0 1 0 4h-3v4.099a20.063 20.063 0 0 0-4 0z"
/>
<circle cx="32" cy="34.5" r="16" fill="url(#d)" />
<path fill="url(#e)" d="M37 6.5a2 2 0 0 1 0 4H27a2 2 0 0 1 0-4z" />
<g fill="url(#f)">
<path
d="M31 44.5v2a1 1 0 0 0 2 0v-2a1 1 0 0 0-2 0zM24.222 40.864l-1.414 1.414a.999.999 0 1 0 1.414 1.414l1.414-1.414a1 1 0 0 0-1.414-1.414zM22 33.5h-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2zM25.636 26.722l-1.414-1.414a.999.999 0 1 0-1.414 1.414l1.414 1.414a1 1 0 0 0 1.414-1.414zM31 22.5v2a1 1 0 0 0 2 0v-2a1 1 0 0 0-2 0zM31 28.5v5.586l-2.707 2.707a1 1 0 0 0 1.414 1.414l3-3A.997.997 0 0 0 33 34.5v-6a1 1 0 0 0-2 0zM39.778 25.308l-1.414 1.414a1 1 0 0 0 1.414 1.414l1.414-1.414a.999.999 0 1 0-1.414-1.414zM44 33.5h-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2zM41.192 42.278l-1.414-1.414a1 1 0 0 0-1.414 1.414l1.414 1.414a.999.999 0 1 0 1.414-1.414z"
/>
</g>
<path
fill="url(#e)"
d="M52.665 23.59 39.91 10.835c3.52-3.52 9.235-3.52 12.755 0s3.52 9.235 0 12.755zM11.335 23.59 24.09 10.835c-3.52-3.52-9.235-3.52-12.755 0s-3.52 9.235 0 12.755z"
/>
</g>
</svg>
More icons in the same style and category