Gentleface › Time & calendar › alarm-clock-sparkle

alarm-clock-sparkle icon

Alarm clock sparkle: smart alarm, smart wake. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Animated alarm-clock-sparkle-ring · line-round

The sparkle twinkles out. The alarm goes off: the two bells knock in toward the case in turn, three times each, and on the last knock the sparkle twinkles back in.

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 1.55 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="M12.854 2.146C12.951 2.244 13 2.362 13 2.5C13 2.638 12.951 2.756 12.854 2.854C12.754 2.953 12.636 3.003 12.5 3.003C12.364 3.003 12.246 2.953 12.146 2.854L10.146 0.854C10.049 0.756 10 0.638 10 0.5C10 0.362 10.049 0.244 10.146 0.146C10.246 0.047 10.364-0.003 10.5-0.003C10.636-0.003 10.754 0.047 10.854 0.146L12.854 2.146ZM0.854 2.854C0.754 2.953 0.636 3.003 0.5 3.003C0.364 3.003 0.246 2.953 0.146 2.854C0.049 2.756 0 2.638 0 2.5C0 2.362 0.049 2.244 0.146 2.146L2.146 0.146C2.244 0.049 2.362 0 2.5 0C2.638 0 2.756 0.049 2.854 0.146C2.953 0.246 3.003 0.364 3.003 0.5C3.003 0.636 2.953 0.754 2.854 0.854L0.854 2.854ZM2.564 11.341C2.043 10.807 1.646 10.193 1.375 9.497C1.125 8.855 1 8.189 1 7.5C1 6.801 1.129 6.126 1.386 5.475C1.666 4.769 2.074 4.148 2.611 3.611C3.148 3.074 3.769 2.666 4.475 2.386C5.126 2.129 5.801 2 6.5 2C7.027 2 7.544 2.074 8.05 2.223C8.579 2.378 9.073 2.608 9.533 2.912C9.993 3.216 10.398 3.581 10.748 4.006C11.083 4.413 11.354 4.86 11.56 5.345C11.615 5.474 11.618 5.602 11.567 5.729C11.516 5.855 11.426 5.946 11.296 6.001C11.169 6.055 11.041 6.056 10.913 6.005C10.785 5.953 10.694 5.864 10.64 5.737C10.471 5.34 10.249 4.975 9.975 4.641C9.689 4.293 9.358 3.995 8.981 3.746C8.605 3.497 8.201 3.309 7.768 3.182C7.354 3.061 6.931 3 6.5 3C5.928 3 5.376 3.105 4.844 3.316C4.266 3.545 3.757 3.879 3.318 4.318C2.879 4.757 2.545 5.266 2.316 5.844C2.105 6.376 2 6.928 2 7.5C2 8.064 2.102 8.609 2.307 9.134C2.529 9.703 2.853 10.206 3.28 10.643C3.706 11.08 4.201 11.416 4.764 11.652C5.203 11.835 5.656 11.946 6.125 11.985C6.273 12.251 6.535 12.436 6.836 12.486C6.85 12.489 6.864 12.491 6.878 12.494C6.878 12.499 6.878 12.505 6.878 12.511C6.875 12.649 6.823 12.765 6.723 12.861C6.623 12.956 6.504 13.002 6.366 12.998C5.677 12.982 5.015 12.84 4.379 12.574C3.69 12.287 3.085 11.876 2.564 11.341ZM8.5 7C8.641 7 8.759 7.048 8.856 7.144C8.952 7.241 9 7.359 9 7.5C9 7.641 8.952 7.759 8.856 7.856C8.759 7.952 8.641 8 8.5 8L6.5 8C6.359 8 6.241 7.952 6.144 7.856C6.048 7.759 6 7.641 6 7.5L6 4.5C6 4.359 6.048 4.241 6.144 4.144C6.241 4.048 6.359 4 6.5 4C6.641 4 6.759 4.048 6.856 4.144C6.952 4.241 7 4.359 7 4.5L7 7L8.5 7ZM11.5 16C11 13 10 12 7 11.5C10 11 11 10 11.5 7C12 10 13 11 16 11.5C13 12 12 13 11.5 16Z"/></svg>

React

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

export function AlarmClockSparkleIcon(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="M12.854 2.146C12.951 2.244 13 2.362 13 2.5C13 2.638 12.951 2.756 12.854 2.854C12.754 2.953 12.636 3.003 12.5 3.003C12.364 3.003 12.246 2.953 12.146 2.854L10.146 0.854C10.049 0.756 10 0.638 10 0.5C10 0.362 10.049 0.244 10.146 0.146C10.246 0.047 10.364-0.003 10.5-0.003C10.636-0.003 10.754 0.047 10.854 0.146L12.854 2.146ZM0.854 2.854C0.754 2.953 0.636 3.003 0.5 3.003C0.364 3.003 0.246 2.953 0.146 2.854C0.049 2.756 0 2.638 0 2.5C0 2.362 0.049 2.244 0.146 2.146L2.146 0.146C2.244 0.049 2.362 0 2.5 0C2.638 0 2.756 0.049 2.854 0.146C2.953 0.246 3.003 0.364 3.003 0.5C3.003 0.636 2.953 0.754 2.854 0.854L0.854 2.854ZM2.564 11.341C2.043 10.807 1.646 10.193 1.375 9.497C1.125 8.855 1 8.189 1 7.5C1 6.801 1.129 6.126 1.386 5.475C1.666 4.769 2.074 4.148 2.611 3.611C3.148 3.074 3.769 2.666 4.475 2.386C5.126 2.129 5.801 2 6.5 2C7.027 2 7.544 2.074 8.05 2.223C8.579 2.378 9.073 2.608 9.533 2.912C9.993 3.216 10.398 3.581 10.748 4.006C11.083 4.413 11.354 4.86 11.56 5.345C11.615 5.474 11.618 5.602 11.567 5.729C11.516 5.855 11.426 5.946 11.296 6.001C11.169 6.055 11.041 6.056 10.913 6.005C10.785 5.953 10.694 5.864 10.64 5.737C10.471 5.34 10.249 4.975 9.975 4.641C9.689 4.293 9.358 3.995 8.981 3.746C8.605 3.497 8.201 3.309 7.768 3.182C7.354 3.061 6.931 3 6.5 3C5.928 3 5.376 3.105 4.844 3.316C4.266 3.545 3.757 3.879 3.318 4.318C2.879 4.757 2.545 5.266 2.316 5.844C2.105 6.376 2 6.928 2 7.5C2 8.064 2.102 8.609 2.307 9.134C2.529 9.703 2.853 10.206 3.28 10.643C3.706 11.08 4.201 11.416 4.764 11.652C5.203 11.835 5.656 11.946 6.125 11.985C6.273 12.251 6.535 12.436 6.836 12.486C6.85 12.489 6.864 12.491 6.878 12.494C6.878 12.499 6.878 12.505 6.878 12.511C6.875 12.649 6.823 12.765 6.723 12.861C6.623 12.956 6.504 13.002 6.366 12.998C5.677 12.982 5.015 12.84 4.379 12.574C3.69 12.287 3.085 11.876 2.564 11.341ZM8.5 7C8.641 7 8.759 7.048 8.856 7.144C8.952 7.241 9 7.359 9 7.5C9 7.641 8.952 7.759 8.856 7.856C8.759 7.952 8.641 8 8.5 8L6.5 8C6.359 8 6.241 7.952 6.144 7.856C6.048 7.759 6 7.641 6 7.5L6 4.5C6 4.359 6.048 4.241 6.144 4.144C6.241 4.048 6.359 4 6.5 4C6.641 4 6.759 4.048 6.856 4.144C6.952 4.241 7 4.359 7 4.5L7 7L8.5 7ZM11.5 16C11 13 10 12 7 11.5C10 11 11 10 11.5 7C12 10 13 11 16 11.5C13 12 12 13 11.5 16Z" />
    </svg>
  );
}

Vue

Vue: see /icons/alarm-clock-sparkle.md

Svelte

Svelte: see /icons/alarm-clock-sparkle.md

HTML img

HTML img: see /icons/alarm-clock-sparkle.md

CSS

CSS: see /icons/alarm-clock-sparkle.md

Data URL

Data URL: see /icons/alarm-clock-sparkle.md

Sprite

Sprite: see /icons/alarm-clock-sparkle.md

SwiftUI

SwiftUI: see /icons/alarm-clock-sparkle.md

Compose

Compose: see /icons/alarm-clock-sparkle.md

Android XML

Android XML: see /icons/alarm-clock-sparkle.md

Flutter

Flutter: see /icons/alarm-clock-sparkle.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 { AlarmClockSparkleIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

smart alarm, smart wake

Example

Smart alarm that wakes you in light sleep

Built from

alarm-clock + sparkle

Tags

alarm, wake, reminder, clock, time, morning, sparkle

Category

Time & calendar

Component name

AlarmClockSparkleIcon

History

2026-11-06 added, released in 0.4.0

Since

version 0.4.0

Family 10

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-x

More time & calendar icons

calendar calendar-alert calendar-arrow-down calendar-arrow-up calendar-bolt calendar-check calendar-clock calendar-day calendar-dot calendar-due calendar-event calendar-flag calendar-gear calendar-heart calendar-link calendar-list · all time & calendar icons

For agents

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

alarm-clock-sparkle icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp