# alarm-clock-sparkle icon

Alarm clock sparkle. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/alarm-clock-sparkle

- Category: Time & calendar
- 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
- Family: 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
- Component name: AlarmClockSparkleIcon
- Added: 2026-11-06
- Since: version 0.4.0
- npm: `import { AlarmClockSparkleIcon } from '@gentleface/react';` (@gentleface/react 0.6.0)

## Files

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.

- line-round: https://gentleface.com/svg/line-round/16/alarm-clock-sparkle.svg · PNG https://gentleface.com/png/line-round/16/alarm-clock-sparkle.png · https://gentleface.com/png/line-round/32/alarm-clock-sparkle.png · https://gentleface.com/png/line-round/48/alarm-clock-sparkle.png
- line-soft: https://gentleface.com/svg/line-soft/16/alarm-clock-sparkle.svg · PNG https://gentleface.com/png/line-soft/16/alarm-clock-sparkle.png · https://gentleface.com/png/line-soft/32/alarm-clock-sparkle.png · https://gentleface.com/png/line-soft/48/alarm-clock-sparkle.png
- line-sharp: https://gentleface.com/svg/line-sharp/16/alarm-clock-sparkle.svg · PNG https://gentleface.com/png/line-sharp/16/alarm-clock-sparkle.png · https://gentleface.com/png/line-sharp/32/alarm-clock-sparkle.png · https://gentleface.com/png/line-sharp/48/alarm-clock-sparkle.png
- solid-round: https://gentleface.com/svg/solid-round/16/alarm-clock-sparkle.svg · PNG https://gentleface.com/png/solid-round/16/alarm-clock-sparkle.png · https://gentleface.com/png/solid-round/32/alarm-clock-sparkle.png · https://gentleface.com/png/solid-round/48/alarm-clock-sparkle.png
- solid-soft: https://gentleface.com/svg/solid-soft/16/alarm-clock-sparkle.svg · PNG https://gentleface.com/png/solid-soft/16/alarm-clock-sparkle.png · https://gentleface.com/png/solid-soft/32/alarm-clock-sparkle.png · https://gentleface.com/png/solid-soft/48/alarm-clock-sparkle.png
- solid-sharp: https://gentleface.com/svg/solid-sharp/16/alarm-clock-sparkle.svg · PNG https://gentleface.com/png/solid-sharp/16/alarm-clock-sparkle.png · https://gentleface.com/png/solid-sharp/32/alarm-clock-sparkle.png · https://gentleface.com/png/solid-sharp/48/alarm-clock-sparkle.png

The SVG of every style: https://gentleface.com/icons/alarm-clock-sparkle.json (`svg`).

## Animated

`alarm-clock-sparkle-ring`: 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.

File: https://gentleface.com/motion/alarm-clock-sparkle-ring.svg (line-round, 16 px). Native SVG animation that loops by itself. To play it once, run 0.2 s to 1.55 s. Patterns: https://gentleface.com/animated-icons.md

```svg
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.001" stroke-linecap="round" stroke-linejoin="round"><path d="M10.623 10.329C9.722 11.64 8.211 12.5 6.5 12.5C3.739 12.5 1.5 10.261 1.5 7.5C1.5 4.739 3.739 2.5 6.5 2.5C9.261 2.5 11.5 4.739 11.5 7.5C11.5 8.55 11.176 9.524 10.623 10.329" stroke-dasharray="21.385 33.384" stroke-dashoffset="-5"><animate attributeName="stroke-dasharray" dur="2.8s" repeatCount="indefinite" keyTimes="0;0.089;0.098;0.107;0.116;0.125;0.134;0.143;0.152;0.161;0.375;0.384;0.393;0.401;0.41;0.419;0.428;0.437;0.446;0.454;0.463;0.472;0.481;0.49;0.499;0.507;0.516;0.525;1" values="21.385 33.384;21.388 33.384;21.551 33.384;22 33.384;22.66 33.384;23.538 33.384;24.257 33.384;27.316 33.384;29.644 33.384;31.384 33.384;31.384 33.384;28.925 33.384;25.162 33.384;22.425 33.384;21.975 33.384;22.577 33.384;22.899 33.384;23.16 33.384;23.38 33.384;23.536 33.384;23.603 33.384;23.579 33.384;23.311 33.384;22.913 33.384;22.471 33.384;22.013 33.384;21.596 33.384;21.388 33.384;21.385 33.384"/><animate attributeName="stroke-dashoffset" dur="2.8s" repeatCount="indefinite" keyTimes="0;0.089;0.098;0.107;0.116;0.125;0.134;0.143;0.152;0.161;0.375;0.384;0.393;0.401;0.41;0.419;0.428;0.437;0.446;0.454;0.463;0.472;0.481;0.49;0.499;0.507;0.516;0.525;1" values="-5;-4.999;-4.873;-4.55;-4.129;-3.652;-3.123;-2.513;-1.74;0;0;-1.533;-3.975;-4.981;-4.781;-4.102;-3.87;-3.751;-3.679;-3.637;-3.62;-3.626;-3.7;-3.857;-4.105;-4.441;-4.803;-4.999;-5"/></path><path d="M6.5 4.5L6.5 7.5L8.5 7.5" stroke-dasharray="5 7" stroke-dashoffset="0"></path><g><animateTransform attributeName="transform" type="translate" dur="2.8s" repeatCount="indefinite" keyTimes="0;0.15;0.171;0.2;0.229;0.257;0.286;0.314;1" values="0 0;0 0;.5 .5;0 0;.5 .5;0 0;.5 .5;0 0;0 0" calcMode="spline" keySplines="0 0 1 1;.15 .75 .25 1;.37 0 .63 1;.15 .75 .25 1;.37 0 .63 1;.15 .75 .25 1;.37 0 .63 1;0 0 1 1"/><path d="M0.5 2.5L2.5 0.5"></path></g><g><animateTransform attributeName="transform" type="translate" dur="2.8s" repeatCount="indefinite" keyTimes="0;0.179;0.2;0.229;0.257;0.286;0.314;0.343;1" values="0 0;0 0;-.5 .5;0 0;-.5 .5;0 0;-.5 .5;0 0;0 0" calcMode="spline" keySplines="0 0 1 1;.15 .75 .25 1;.37 0 .63 1;.15 .75 .25 1;.37 0 .63 1;.15 .75 .25 1;.37 0 .63 1;0 0 1 1"/><path d="M10.5 0.5L12.5 2.5"></path></g><g transform="translate(11.5 11.5)"><g><animateTransform attributeName="transform" type="scale" dur="2.8s" repeatCount="indefinite" keyTimes="0;0.089;0.161;0.375;0.446;1" values="1;1;0;0;1;1" calcMode="spline" keySplines="0 0 1 1;.6 0 .9 .4;0 0 1 1;.15 .75 .25 1;0 0 1 1"/><animate attributeName="visibility" calcMode="discrete" dur="2.8s" repeatCount="indefinite" keyTimes="0;0.161;0.375" values="visible;hidden;visible"/><g><animateTransform attributeName="transform" type="rotate" dur="2.8s" repeatCount="indefinite" keyTimes="0;0.089;0.161;0.375;0.468;0.525;1" values="0;0;45;-90;12;0;0" calcMode="spline" keySplines="0 0 1 1;.6 0 .9 .4;0 0 1 1;.15 .75 .25 1;.37 0 .63 1;0 0 1 1"/><g transform="translate(-11.5 -11.5)"><path fill="currentColor" stroke="none" d="M16 11.5C13 12 12 13 11.5 16C11 13 10 12 7 11.5C10 11 11 10 11.5 7C12 10 13 11 16 11.5Z"></path></g></g></g></g></svg>
```

## Code (line-round)

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. For another style, take its SVG from the JSON and swap the path `d`.

### SVG

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

```tsx
// 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
<!-- Gentleface "alarm-clock-sparkle" (line-round), MIT. https://gentleface.com/icons/alarm-clock-sparkle -->
<template>
  <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>
</template>
```

### Svelte

```svelte
<!-- Gentleface "alarm-clock-sparkle" (line-round), MIT. https://gentleface.com/icons/alarm-clock-sparkle -->
<script>
  let props = $props();
</script>

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

### HTML img

```html
<!-- Gentleface "alarm-clock-sparkle" (line-round), MIT. https://gentleface.com/icons/alarm-clock-sparkle. An <img> can't take currentColor: it draws black. Inline the SVG or use the CSS mask to color it. -->
<img src="https://gentleface.com/svg/line-round/16/alarm-clock-sparkle.svg" width="16" height="16" alt="">
```

### CSS

```css
/* Gentleface "alarm-clock-sparkle" (line-round), MIT. https://gentleface.com/icons/alarm-clock-sparkle. Takes the text color. */
.icon-alarm-clock-sparkle {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
```

### Data URL

```text
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E
```

### Sprite

```html
<!-- Gentleface "alarm-clock-sparkle" (line-round), MIT. https://gentleface.com/icons/alarm-clock-sparkle
     Every icon of this style in one file: https://gentleface.com/sprite/line-round.svg
     Serve it from your own origin: <use> does not load from another origin. -->
<svg width="16" height="16" aria-hidden="true"><use href="/sprite/line-round.svg#alarm-clock-sparkle"/></svg>
```

### SwiftUI

```swift
// Gentleface "alarm-clock-sparkle" (line-round), MIT. https://gentleface.com/icons/alarm-clock-sparkle
import SwiftUI

struct AlarmClockSparkleIcon: Shape {
    func path(in rect: CGRect) -> Path {
        var p = Path()
        p.move(to: CGPoint(x: 12.854, y: 2.146))
        p.addCurve(to: CGPoint(x: 13, y: 2.5), control1: CGPoint(x: 12.951, y: 2.244), control2: CGPoint(x: 13, y: 2.362))
        p.addCurve(to: CGPoint(x: 12.854, y: 2.854), control1: CGPoint(x: 13, y: 2.638), control2: CGPoint(x: 12.951, y: 2.756))
        p.addCurve(to: CGPoint(x: 12.5, y: 3.003), control1: CGPoint(x: 12.754, y: 2.953), control2: CGPoint(x: 12.636, y: 3.003))
        p.addCurve(to: CGPoint(x: 12.146, y: 2.854), control1: CGPoint(x: 12.364, y: 3.003), control2: CGPoint(x: 12.246, y: 2.953))
        p.addLine(to: CGPoint(x: 10.146, y: 0.854))
        p.addCurve(to: CGPoint(x: 10, y: 0.5), control1: CGPoint(x: 10.049, y: 0.756), control2: CGPoint(x: 10, y: 0.638))
        p.addCurve(to: CGPoint(x: 10.146, y: 0.146), control1: CGPoint(x: 10, y: 0.362), control2: CGPoint(x: 10.049, y: 0.244))
        p.addCurve(to: CGPoint(x: 10.5, y: -0.003), control1: CGPoint(x: 10.246, y: 0.047), control2: CGPoint(x: 10.364, y: -0.003))
        p.addCurve(to: CGPoint(x: 10.854, y: 0.146), control1: CGPoint(x: 10.636, y: -0.003), control2: CGPoint(x: 10.754, y: 0.047))
        p.addLine(to: CGPoint(x: 12.854, y: 2.146))
        p.closeSubpath()
        p.move(to: CGPoint(x: 0.854, y: 2.854))
        p.addCurve(to: CGPoint(x: 0.5, y: 3.003), control1: CGPoint(x: 0.754, y: 2.953), control2: CGPoint(x: 0.636, y: 3.003))
        p.addCurve(to: CGPoint(x: 0.146, y: 2.854), control1: CGPoint(x: 0.364, y: 3.003), control2: CGPoint(x: 0.246, y: 2.953))
        p.addCurve(to: CGPoint(x: 0, y: 2.5), control1: CGPoint(x: 0.049, y: 2.756), control2: CGPoint(x: 0, y: 2.638))
        p.addCurve(to: CGPoint(x: 0.146, y: 2.146), control1: CGPoint(x: 0, y: 2.362), control2: CGPoint(x: 0.049, y: 2.244))
        p.addLine(to: CGPoint(x: 2.146, y: 0.146))
        p.addCurve(to: CGPoint(x: 2.5, y: 0), control1: CGPoint(x: 2.244, y: 0.049), control2: CGPoint(x: 2.362, y: 0))
        p.addCurve(to: CGPoint(x: 2.854, y: 0.146), control1: CGPoint(x: 2.638, y: 0), control2: CGPoint(x: 2.756, y: 0.049))
        p.addCurve(to: CGPoint(x: 3.003, y: 0.5), control1: CGPoint(x: 2.953, y: 0.246), control2: CGPoint(x: 3.003, y: 0.364))
        p.addCurve(to: CGPoint(x: 2.854, y: 0.854), control1: CGPoint(x: 3.003, y: 0.636), control2: CGPoint(x: 2.953, y: 0.754))
        p.addLine(to: CGPoint(x: 0.854, y: 2.854))
        p.closeSubpath()
        p.move(to: CGPoint(x: 2.564, y: 11.341))
        p.addCurve(to: CGPoint(x: 1.375, y: 9.497), control1: CGPoint(x: 2.043, y: 10.807), control2: CGPoint(x: 1.646, y: 10.193))
        p.addCurve(to: CGPoint(x: 1, y: 7.5), control1: CGPoint(x: 1.125, y: 8.855), control2: CGPoint(x: 1, y: 8.189))
        p.addCurve(to: CGPoint(x: 1.386, y: 5.475), control1: CGPoint(x: 1, y: 6.801), control2: CGPoint(x: 1.129, y: 6.126))
        p.addCurve(to: CGPoint(x: 2.611, y: 3.611), control1: CGPoint(x: 1.666, y: 4.769), control2: CGPoint(x: 2.074, y: 4.148))
        p.addCurve(to: CGPoint(x: 4.475, y: 2.386), control1: CGPoint(x: 3.148, y: 3.074), control2: CGPoint(x: 3.769, y: 2.666))
        p.addCurve(to: CGPoint(x: 6.5, y: 2), control1: CGPoint(x: 5.126, y: 2.129), control2: CGPoint(x: 5.801, y: 2))
        p.addCurve(to: CGPoint(x: 8.05, y: 2.223), control1: CGPoint(x: 7.027, y: 2), control2: CGPoint(x: 7.544, y: 2.074))
        p.addCurve(to: CGPoint(x: 9.533, y: 2.912), control1: CGPoint(x: 8.579, y: 2.378), control2: CGPoint(x: 9.073, y: 2.608))
        p.addCurve(to: CGPoint(x: 10.748, y: 4.006), control1: CGPoint(x: 9.993, y: 3.216), control2: CGPoint(x: 10.398, y: 3.581))
        p.addCurve(to: CGPoint(x: 11.56, y: 5.345), control1: CGPoint(x: 11.083, y: 4.413), control2: CGPoint(x: 11.354, y: 4.86))
        p.addCurve(to: CGPoint(x: 11.567, y: 5.729), control1: CGPoint(x: 11.615, y: 5.474), control2: CGPoint(x: 11.618, y: 5.602))
        p.addCurve(to: CGPoint(x: 11.296, y: 6.001), control1: CGPoint(x: 11.516, y: 5.855), control2: CGPoint(x: 11.426, y: 5.946))
        p.addCurve(to: CGPoint(x: 10.913, y: 6.005), control1: CGPoint(x: 11.169, y: 6.055), control2: CGPoint(x: 11.041, y: 6.056))
        p.addCurve(to: CGPoint(x: 10.64, y: 5.737), control1: CGPoint(x: 10.785, y: 5.953), control2: CGPoint(x: 10.694, y: 5.864))
        p.addCurve(to: CGPoint(x: 9.975, y: 4.641), control1: CGPoint(x: 10.471, y: 5.34), control2: CGPoint(x: 10.249, y: 4.975))
        p.addCurve(to: CGPoint(x: 8.981, y: 3.746), control1: CGPoint(x: 9.689, y: 4.293), control2: CGPoint(x: 9.358, y: 3.995))
        p.addCurve(to: CGPoint(x: 7.768, y: 3.182), control1: CGPoint(x: 8.605, y: 3.497), control2: CGPoint(x: 8.201, y: 3.309))
        p.addCurve(to: CGPoint(x: 6.5, y: 3), control1: CGPoint(x: 7.354, y: 3.061), control2: CGPoint(x: 6.931, y: 3))
        p.addCurve(to: CGPoint(x: 4.844, y: 3.316), control1: CGPoint(x: 5.928, y: 3), control2: CGPoint(x: 5.376, y: 3.105))
        p.addCurve(to: CGPoint(x: 3.318, y: 4.318), control1: CGPoint(x: 4.266, y: 3.545), control2: CGPoint(x: 3.757, y: 3.879))
        p.addCurve(to: CGPoint(x: 2.316, y: 5.844), control1: CGPoint(x: 2.879, y: 4.757), control2: CGPoint(x: 2.545, y: 5.266))
        p.addCurve(to: CGPoint(x: 2, y: 7.5), control1: CGPoint(x: 2.105, y: 6.376), control2: CGPoint(x: 2, y: 6.928))
        p.addCurve(to: CGPoint(x: 2.307, y: 9.134), control1: CGPoint(x: 2, y: 8.064), control2: CGPoint(x: 2.102, y: 8.609))
        p.addCurve(to: CGPoint(x: 3.28, y: 10.643), control1: CGPoint(x: 2.529, y: 9.703), control2: CGPoint(x: 2.853, y: 10.206))
        p.addCurve(to: CGPoint(x: 4.764, y: 11.652), control1: CGPoint(x: 3.706, y: 11.08), control2: CGPoint(x: 4.201, y: 11.416))
        p.addCurve(to: CGPoint(x: 6.125, y: 11.985), control1: CGPoint(x: 5.203, y: 11.835), control2: CGPoint(x: 5.656, y: 11.946))
        p.addCurve(to: CGPoint(x: 6.836, y: 12.486), control1: CGPoint(x: 6.273, y: 12.251), control2: CGPoint(x: 6.535, y: 12.436))
        p.addCurve(to: CGPoint(x: 6.878, y: 12.494), control1: CGPoint(x: 6.85, y: 12.489), control2: CGPoint(x: 6.864, y: 12.491))
        p.addCurve(to: CGPoint(x: 6.878, y: 12.511), control1: CGPoint(x: 6.878, y: 12.499), control2: CGPoint(x: 6.878, y: 12.505))
        p.addCurve(to: CGPoint(x: 6.723, y: 12.861), control1: CGPoint(x: 6.875, y: 12.649), control2: CGPoint(x: 6.823, y: 12.765))
        p.addCurve(to: CGPoint(x: 6.366, y: 12.998), control1: CGPoint(x: 6.623, y: 12.956), control2: CGPoint(x: 6.504, y: 13.002))
        p.addCurve(to: CGPoint(x: 4.379, y: 12.574), control1: CGPoint(x: 5.677, y: 12.982), control2: CGPoint(x: 5.015, y: 12.84))
        p.addCurve(to: CGPoint(x: 2.564, y: 11.341), control1: CGPoint(x: 3.69, y: 12.287), control2: CGPoint(x: 3.085, y: 11.876))
        p.closeSubpath()
        p.move(to: CGPoint(x: 8.5, y: 7))
        p.addCurve(to: CGPoint(x: 8.856, y: 7.144), control1: CGPoint(x: 8.641, y: 7), control2: CGPoint(x: 8.759, y: 7.048))
        p.addCurve(to: CGPoint(x: 9, y: 7.5), control1: CGPoint(x: 8.952, y: 7.241), control2: CGPoint(x: 9, y: 7.359))
        p.addCurve(to: CGPoint(x: 8.856, y: 7.856), control1: CGPoint(x: 9, y: 7.641), control2: CGPoint(x: 8.952, y: 7.759))
        p.addCurve(to: CGPoint(x: 8.5, y: 8), control1: CGPoint(x: 8.759, y: 7.952), control2: CGPoint(x: 8.641, y: 8))
        p.addLine(to: CGPoint(x: 6.5, y: 8))
        p.addCurve(to: CGPoint(x: 6.144, y: 7.856), control1: CGPoint(x: 6.359, y: 8), control2: CGPoint(x: 6.241, y: 7.952))
        p.addCurve(to: CGPoint(x: 6, y: 7.5), control1: CGPoint(x: 6.048, y: 7.759), control2: CGPoint(x: 6, y: 7.641))
        p.addLine(to: CGPoint(x: 6, y: 4.5))
        p.addCurve(to: CGPoint(x: 6.144, y: 4.144), control1: CGPoint(x: 6, y: 4.359), control2: CGPoint(x: 6.048, y: 4.241))
        p.addCurve(to: CGPoint(x: 6.5, y: 4), control1: CGPoint(x: 6.241, y: 4.048), control2: CGPoint(x: 6.359, y: 4))
        p.addCurve(to: CGPoint(x: 6.856, y: 4.144), control1: CGPoint(x: 6.641, y: 4), control2: CGPoint(x: 6.759, y: 4.048))
        p.addCurve(to: CGPoint(x: 7, y: 4.5), control1: CGPoint(x: 6.952, y: 4.241), control2: CGPoint(x: 7, y: 4.359))
        p.addLine(to: CGPoint(x: 7, y: 7))
        p.addLine(to: CGPoint(x: 8.5, y: 7))
        p.closeSubpath()
        p.move(to: CGPoint(x: 11.5, y: 16))
        p.addCurve(to: CGPoint(x: 7, y: 11.5), control1: CGPoint(x: 11, y: 13), control2: CGPoint(x: 10, y: 12))
        p.addCurve(to: CGPoint(x: 11.5, y: 7), control1: CGPoint(x: 10, y: 11), control2: CGPoint(x: 11, y: 10))
        p.addCurve(to: CGPoint(x: 16, y: 11.5), control1: CGPoint(x: 12, y: 10), control2: CGPoint(x: 13, y: 11))
        p.addCurve(to: CGPoint(x: 11.5, y: 16), control1: CGPoint(x: 13, y: 12), control2: CGPoint(x: 12, y: 13))
        p.closeSubpath()
        return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
    }
}

// AlarmClockSparkleIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp.
```

### Compose

```kotlin
// Gentleface "alarm-clock-sparkle" (line-round), MIT. https://gentleface.com/icons/alarm-clock-sparkle
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.graphics.vector.addPathNodes
import androidx.compose.ui.unit.dp

val AlarmClockSparkleIcon: ImageVector by lazy {
    ImageVector.Builder(
        name = "alarm-clock-sparkle", defaultWidth = 16.dp, defaultHeight = 16.dp,
        viewportWidth = 16f, viewportHeight = 16f,
    ).addPath(
        pathData = addPathNodes("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"),
        fill = SolidColor(Color.Black),
    ).build()
}

// Icon(AlarmClockSparkleIcon, contentDescription = null) tints it with LocalContentColor.
```

### Android XML

```xml
<!-- res/drawable/ic_alarm_clock_sparkle.xml · Gentleface "alarm-clock-sparkle" (line-round), MIT. https://gentleface.com/icons/alarm-clock-sparkle -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="16dp"
    android:height="16dp"
    android:viewportWidth="16"
    android:viewportHeight="16"
    android:tint="?attr/colorControlNormal">
  <path
      android:fillColor="@android:color/white"
      android:pathData="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"/>
</vector>
```

### Flutter

```dart
// Gentleface "alarm-clock-sparkle" (line-round), MIT. https://gentleface.com/icons/alarm-clock-sparkle
import 'package:flutter/widgets.dart';

class AlarmClockSparkleIcon extends StatelessWidget {
  const AlarmClockSparkleIcon({super.key, this.size = 16, this.color});
  final double size;
  final Color? color;

  @override
  Widget build(BuildContext context) => CustomPaint(
        size: Size.square(size),
        painter: _AlarmClockSparkleIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)),
      );
}

class _AlarmClockSparkleIconPainter extends CustomPainter {
  _AlarmClockSparkleIconPainter(this.color);
  final Color color;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.scale(size.width / 16, size.height / 16);
    final p = Path()
      ..moveTo(12.854, 2.146)
      ..cubicTo(12.951, 2.244, 13, 2.362, 13, 2.5)
      ..cubicTo(13, 2.638, 12.951, 2.756, 12.854, 2.854)
      ..cubicTo(12.754, 2.953, 12.636, 3.003, 12.5, 3.003)
      ..cubicTo(12.364, 3.003, 12.246, 2.953, 12.146, 2.854)
      ..lineTo(10.146, 0.854)
      ..cubicTo(10.049, 0.756, 10, 0.638, 10, 0.5)
      ..cubicTo(10, 0.362, 10.049, 0.244, 10.146, 0.146)
      ..cubicTo(10.246, 0.047, 10.364, -0.003, 10.5, -0.003)
      ..cubicTo(10.636, -0.003, 10.754, 0.047, 10.854, 0.146)
      ..lineTo(12.854, 2.146)
      ..close()
      ..moveTo(0.854, 2.854)
      ..cubicTo(0.754, 2.953, 0.636, 3.003, 0.5, 3.003)
      ..cubicTo(0.364, 3.003, 0.246, 2.953, 0.146, 2.854)
      ..cubicTo(0.049, 2.756, 0, 2.638, 0, 2.5)
      ..cubicTo(0, 2.362, 0.049, 2.244, 0.146, 2.146)
      ..lineTo(2.146, 0.146)
      ..cubicTo(2.244, 0.049, 2.362, 0, 2.5, 0)
      ..cubicTo(2.638, 0, 2.756, 0.049, 2.854, 0.146)
      ..cubicTo(2.953, 0.246, 3.003, 0.364, 3.003, 0.5)
      ..cubicTo(3.003, 0.636, 2.953, 0.754, 2.854, 0.854)
      ..lineTo(0.854, 2.854)
      ..close()
      ..moveTo(2.564, 11.341)
      ..cubicTo(2.043, 10.807, 1.646, 10.193, 1.375, 9.497)
      ..cubicTo(1.125, 8.855, 1, 8.189, 1, 7.5)
      ..cubicTo(1, 6.801, 1.129, 6.126, 1.386, 5.475)
      ..cubicTo(1.666, 4.769, 2.074, 4.148, 2.611, 3.611)
      ..cubicTo(3.148, 3.074, 3.769, 2.666, 4.475, 2.386)
      ..cubicTo(5.126, 2.129, 5.801, 2, 6.5, 2)
      ..cubicTo(7.027, 2, 7.544, 2.074, 8.05, 2.223)
      ..cubicTo(8.579, 2.378, 9.073, 2.608, 9.533, 2.912)
      ..cubicTo(9.993, 3.216, 10.398, 3.581, 10.748, 4.006)
      ..cubicTo(11.083, 4.413, 11.354, 4.86, 11.56, 5.345)
      ..cubicTo(11.615, 5.474, 11.618, 5.602, 11.567, 5.729)
      ..cubicTo(11.516, 5.855, 11.426, 5.946, 11.296, 6.001)
      ..cubicTo(11.169, 6.055, 11.041, 6.056, 10.913, 6.005)
      ..cubicTo(10.785, 5.953, 10.694, 5.864, 10.64, 5.737)
      ..cubicTo(10.471, 5.34, 10.249, 4.975, 9.975, 4.641)
      ..cubicTo(9.689, 4.293, 9.358, 3.995, 8.981, 3.746)
      ..cubicTo(8.605, 3.497, 8.201, 3.309, 7.768, 3.182)
      ..cubicTo(7.354, 3.061, 6.931, 3, 6.5, 3)
      ..cubicTo(5.928, 3, 5.376, 3.105, 4.844, 3.316)
      ..cubicTo(4.266, 3.545, 3.757, 3.879, 3.318, 4.318)
      ..cubicTo(2.879, 4.757, 2.545, 5.266, 2.316, 5.844)
      ..cubicTo(2.105, 6.376, 2, 6.928, 2, 7.5)
      ..cubicTo(2, 8.064, 2.102, 8.609, 2.307, 9.134)
      ..cubicTo(2.529, 9.703, 2.853, 10.206, 3.28, 10.643)
      ..cubicTo(3.706, 11.08, 4.201, 11.416, 4.764, 11.652)
      ..cubicTo(5.203, 11.835, 5.656, 11.946, 6.125, 11.985)
      ..cubicTo(6.273, 12.251, 6.535, 12.436, 6.836, 12.486)
      ..cubicTo(6.85, 12.489, 6.864, 12.491, 6.878, 12.494)
      ..cubicTo(6.878, 12.499, 6.878, 12.505, 6.878, 12.511)
      ..cubicTo(6.875, 12.649, 6.823, 12.765, 6.723, 12.861)
      ..cubicTo(6.623, 12.956, 6.504, 13.002, 6.366, 12.998)
      ..cubicTo(5.677, 12.982, 5.015, 12.84, 4.379, 12.574)
      ..cubicTo(3.69, 12.287, 3.085, 11.876, 2.564, 11.341)
      ..close()
      ..moveTo(8.5, 7)
      ..cubicTo(8.641, 7, 8.759, 7.048, 8.856, 7.144)
      ..cubicTo(8.952, 7.241, 9, 7.359, 9, 7.5)
      ..cubicTo(9, 7.641, 8.952, 7.759, 8.856, 7.856)
      ..cubicTo(8.759, 7.952, 8.641, 8, 8.5, 8)
      ..lineTo(6.5, 8)
      ..cubicTo(6.359, 8, 6.241, 7.952, 6.144, 7.856)
      ..cubicTo(6.048, 7.759, 6, 7.641, 6, 7.5)
      ..lineTo(6, 4.5)
      ..cubicTo(6, 4.359, 6.048, 4.241, 6.144, 4.144)
      ..cubicTo(6.241, 4.048, 6.359, 4, 6.5, 4)
      ..cubicTo(6.641, 4, 6.759, 4.048, 6.856, 4.144)
      ..cubicTo(6.952, 4.241, 7, 4.359, 7, 4.5)
      ..lineTo(7, 7)
      ..lineTo(8.5, 7)
      ..close()
      ..moveTo(11.5, 16)
      ..cubicTo(11, 13, 10, 12, 7, 11.5)
      ..cubicTo(10, 11, 11, 10, 11.5, 7)
      ..cubicTo(12, 10, 13, 11, 16, 11.5)
      ..cubicTo(13, 12, 12, 13, 11.5, 16)
      ..close();
    canvas.drawPath(p, Paint()..color = color);
  }

  @override
  bool shouldRepaint(_AlarmClockSparkleIconPainter old) => old.color != color;
}
```