# subtitles-sparkle icon

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

- Category: Accessibility
- Use it for: auto captions, ai captions, generate captions, live captions
- Example: Auto captions next to manual captions in a video editor
- Built from: subtitles + sparkle
- Tags: subtitles, captions, text, transcript, video, accessibility, sparkle
- Family: subtitles, closed-caption, subtitles-off
- Component name: SubtitlesSparkleIcon
- Added: 2026-10-15

## Alternatives

- `speech-to-text`: transcribe speech into text, not captions on a video

## Files

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it.

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

The SVG of every style: https://gentleface.com/icons/subtitles-sparkle.json (`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="M0.14 3.264C0.242 3.007 0.391 2.781 0.586 2.586C0.781 2.391 1.007 2.242 1.264 2.14C1.5 2.047 1.746 2 2 2L12 2C12.254 2 12.5 2.047 12.736 2.14C12.993 2.242 13.219 2.391 13.414 2.586C13.609 2.781 13.758 3.007 13.86 3.264C13.953 3.5 14 3.746 14 4L14 8.5C14 8.641 13.952 8.759 13.856 8.856C13.759 8.952 13.641 9 13.5 9C13.359 9 13.241 8.952 13.144 8.856C13.048 8.759 13 8.641 13 8.5L13 4C13 3.724 12.902 3.488 12.707 3.293C12.512 3.098 12.276 3 12 3L2 3C1.724 3 1.488 3.098 1.293 3.293C1.098 3.488 1 3.724 1 4L1 10C1 10.276 1.098 10.512 1.293 10.707C1.488 10.902 1.724 11 2 11L4.5 11C4.641 11 4.759 11.048 4.856 11.144C4.952 11.241 5 11.359 5 11.5C5 11.641 4.952 11.759 4.856 11.856C4.759 11.952 4.641 12 4.5 12L2 12C1.746 12 1.5 11.953 1.264 11.86C1.007 11.758 0.781 11.609 0.586 11.414C0.391 11.219 0.242 10.993 0.14 10.736C0.047 10.5 0 10.254 0 10L0 4C0 3.746 0.047 3.5 0.14 3.264ZM4.856 6.144C4.952 6.241 5 6.359 5 6.5C5 6.641 4.952 6.759 4.856 6.856C4.759 6.952 4.641 7 4.5 7L2.5 7C2.359 7 2.241 6.952 2.144 6.856C2.048 6.759 2 6.641 2 6.5C2 6.359 2.048 6.241 2.144 6.144C2.241 6.048 2.359 6 2.5 6L4.5 6C4.641 6 4.759 6.048 4.856 6.144ZM11.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 16ZM2 9.5C2 9.359 2.048 9.241 2.144 9.144C2.241 9.048 2.359 9 2.5 9L6.5 9C6.641 9 6.759 9.048 6.856 9.144C6.952 9.241 7 9.359 7 9.5C7 9.641 6.952 9.759 6.856 9.856C6.759 9.952 6.641 10 6.5 10L2.5 10C2.359 10 2.241 9.952 2.144 9.856C2.048 9.759 2 9.641 2 9.5Z"/></svg>
```

### React

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

export function SubtitlesSparkleIcon(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="M0.14 3.264C0.242 3.007 0.391 2.781 0.586 2.586C0.781 2.391 1.007 2.242 1.264 2.14C1.5 2.047 1.746 2 2 2L12 2C12.254 2 12.5 2.047 12.736 2.14C12.993 2.242 13.219 2.391 13.414 2.586C13.609 2.781 13.758 3.007 13.86 3.264C13.953 3.5 14 3.746 14 4L14 8.5C14 8.641 13.952 8.759 13.856 8.856C13.759 8.952 13.641 9 13.5 9C13.359 9 13.241 8.952 13.144 8.856C13.048 8.759 13 8.641 13 8.5L13 4C13 3.724 12.902 3.488 12.707 3.293C12.512 3.098 12.276 3 12 3L2 3C1.724 3 1.488 3.098 1.293 3.293C1.098 3.488 1 3.724 1 4L1 10C1 10.276 1.098 10.512 1.293 10.707C1.488 10.902 1.724 11 2 11L4.5 11C4.641 11 4.759 11.048 4.856 11.144C4.952 11.241 5 11.359 5 11.5C5 11.641 4.952 11.759 4.856 11.856C4.759 11.952 4.641 12 4.5 12L2 12C1.746 12 1.5 11.953 1.264 11.86C1.007 11.758 0.781 11.609 0.586 11.414C0.391 11.219 0.242 10.993 0.14 10.736C0.047 10.5 0 10.254 0 10L0 4C0 3.746 0.047 3.5 0.14 3.264ZM4.856 6.144C4.952 6.241 5 6.359 5 6.5C5 6.641 4.952 6.759 4.856 6.856C4.759 6.952 4.641 7 4.5 7L2.5 7C2.359 7 2.241 6.952 2.144 6.856C2.048 6.759 2 6.641 2 6.5C2 6.359 2.048 6.241 2.144 6.144C2.241 6.048 2.359 6 2.5 6L4.5 6C4.641 6 4.759 6.048 4.856 6.144ZM11.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 16ZM2 9.5C2 9.359 2.048 9.241 2.144 9.144C2.241 9.048 2.359 9 2.5 9L6.5 9C6.641 9 6.759 9.048 6.856 9.144C6.952 9.241 7 9.359 7 9.5C7 9.641 6.952 9.759 6.856 9.856C6.759 9.952 6.641 10 6.5 10L2.5 10C2.359 10 2.241 9.952 2.144 9.856C2.048 9.759 2 9.641 2 9.5Z" />
    </svg>
  );
}
```

### Vue

```vue
<!-- Gentleface "subtitles-sparkle" (line-round), MIT. https://gentleface.com/icons/subtitles-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="M0.14 3.264C0.242 3.007 0.391 2.781 0.586 2.586C0.781 2.391 1.007 2.242 1.264 2.14C1.5 2.047 1.746 2 2 2L12 2C12.254 2 12.5 2.047 12.736 2.14C12.993 2.242 13.219 2.391 13.414 2.586C13.609 2.781 13.758 3.007 13.86 3.264C13.953 3.5 14 3.746 14 4L14 8.5C14 8.641 13.952 8.759 13.856 8.856C13.759 8.952 13.641 9 13.5 9C13.359 9 13.241 8.952 13.144 8.856C13.048 8.759 13 8.641 13 8.5L13 4C13 3.724 12.902 3.488 12.707 3.293C12.512 3.098 12.276 3 12 3L2 3C1.724 3 1.488 3.098 1.293 3.293C1.098 3.488 1 3.724 1 4L1 10C1 10.276 1.098 10.512 1.293 10.707C1.488 10.902 1.724 11 2 11L4.5 11C4.641 11 4.759 11.048 4.856 11.144C4.952 11.241 5 11.359 5 11.5C5 11.641 4.952 11.759 4.856 11.856C4.759 11.952 4.641 12 4.5 12L2 12C1.746 12 1.5 11.953 1.264 11.86C1.007 11.758 0.781 11.609 0.586 11.414C0.391 11.219 0.242 10.993 0.14 10.736C0.047 10.5 0 10.254 0 10L0 4C0 3.746 0.047 3.5 0.14 3.264ZM4.856 6.144C4.952 6.241 5 6.359 5 6.5C5 6.641 4.952 6.759 4.856 6.856C4.759 6.952 4.641 7 4.5 7L2.5 7C2.359 7 2.241 6.952 2.144 6.856C2.048 6.759 2 6.641 2 6.5C2 6.359 2.048 6.241 2.144 6.144C2.241 6.048 2.359 6 2.5 6L4.5 6C4.641 6 4.759 6.048 4.856 6.144ZM11.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 16ZM2 9.5C2 9.359 2.048 9.241 2.144 9.144C2.241 9.048 2.359 9 2.5 9L6.5 9C6.641 9 6.759 9.048 6.856 9.144C6.952 9.241 7 9.359 7 9.5C7 9.641 6.952 9.759 6.856 9.856C6.759 9.952 6.641 10 6.5 10L2.5 10C2.359 10 2.241 9.952 2.144 9.856C2.048 9.759 2 9.641 2 9.5Z" />
  </svg>
</template>
```

### Svelte

```svelte
<!-- Gentleface "subtitles-sparkle" (line-round), MIT. https://gentleface.com/icons/subtitles-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="M0.14 3.264C0.242 3.007 0.391 2.781 0.586 2.586C0.781 2.391 1.007 2.242 1.264 2.14C1.5 2.047 1.746 2 2 2L12 2C12.254 2 12.5 2.047 12.736 2.14C12.993 2.242 13.219 2.391 13.414 2.586C13.609 2.781 13.758 3.007 13.86 3.264C13.953 3.5 14 3.746 14 4L14 8.5C14 8.641 13.952 8.759 13.856 8.856C13.759 8.952 13.641 9 13.5 9C13.359 9 13.241 8.952 13.144 8.856C13.048 8.759 13 8.641 13 8.5L13 4C13 3.724 12.902 3.488 12.707 3.293C12.512 3.098 12.276 3 12 3L2 3C1.724 3 1.488 3.098 1.293 3.293C1.098 3.488 1 3.724 1 4L1 10C1 10.276 1.098 10.512 1.293 10.707C1.488 10.902 1.724 11 2 11L4.5 11C4.641 11 4.759 11.048 4.856 11.144C4.952 11.241 5 11.359 5 11.5C5 11.641 4.952 11.759 4.856 11.856C4.759 11.952 4.641 12 4.5 12L2 12C1.746 12 1.5 11.953 1.264 11.86C1.007 11.758 0.781 11.609 0.586 11.414C0.391 11.219 0.242 10.993 0.14 10.736C0.047 10.5 0 10.254 0 10L0 4C0 3.746 0.047 3.5 0.14 3.264ZM4.856 6.144C4.952 6.241 5 6.359 5 6.5C5 6.641 4.952 6.759 4.856 6.856C4.759 6.952 4.641 7 4.5 7L2.5 7C2.359 7 2.241 6.952 2.144 6.856C2.048 6.759 2 6.641 2 6.5C2 6.359 2.048 6.241 2.144 6.144C2.241 6.048 2.359 6 2.5 6L4.5 6C4.641 6 4.759 6.048 4.856 6.144ZM11.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 16ZM2 9.5C2 9.359 2.048 9.241 2.144 9.144C2.241 9.048 2.359 9 2.5 9L6.5 9C6.641 9 6.759 9.048 6.856 9.144C6.952 9.241 7 9.359 7 9.5C7 9.641 6.952 9.759 6.856 9.856C6.759 9.952 6.641 10 6.5 10L2.5 10C2.359 10 2.241 9.952 2.144 9.856C2.048 9.759 2 9.641 2 9.5Z" />
</svg>
```

### HTML img

```html
<!-- Gentleface "subtitles-sparkle" (line-round), MIT. https://gentleface.com/icons/subtitles-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/subtitles-sparkle.svg" width="16" height="16" alt="">
```

### CSS

```css
/* Gentleface "subtitles-sparkle" (line-round), MIT. https://gentleface.com/icons/subtitles-sparkle. Takes the text color. */
.icon-subtitles-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='M0.14 3.264C0.242 3.007 0.391 2.781 0.586 2.586C0.781 2.391 1.007 2.242 1.264 2.14C1.5 2.047 1.746 2 2 2L12 2C12.254 2 12.5 2.047 12.736 2.14C12.993 2.242 13.219 2.391 13.414 2.586C13.609 2.781 13.758 3.007 13.86 3.264C13.953 3.5 14 3.746 14 4L14 8.5C14 8.641 13.952 8.759 13.856 8.856C13.759 8.952 13.641 9 13.5 9C13.359 9 13.241 8.952 13.144 8.856C13.048 8.759 13 8.641 13 8.5L13 4C13 3.724 12.902 3.488 12.707 3.293C12.512 3.098 12.276 3 12 3L2 3C1.724 3 1.488 3.098 1.293 3.293C1.098 3.488 1 3.724 1 4L1 10C1 10.276 1.098 10.512 1.293 10.707C1.488 10.902 1.724 11 2 11L4.5 11C4.641 11 4.759 11.048 4.856 11.144C4.952 11.241 5 11.359 5 11.5C5 11.641 4.952 11.759 4.856 11.856C4.759 11.952 4.641 12 4.5 12L2 12C1.746 12 1.5 11.953 1.264 11.86C1.007 11.758 0.781 11.609 0.586 11.414C0.391 11.219 0.242 10.993 0.14 10.736C0.047 10.5 0 10.254 0 10L0 4C0 3.746 0.047 3.5 0.14 3.264ZM4.856 6.144C4.952 6.241 5 6.359 5 6.5C5 6.641 4.952 6.759 4.856 6.856C4.759 6.952 4.641 7 4.5 7L2.5 7C2.359 7 2.241 6.952 2.144 6.856C2.048 6.759 2 6.641 2 6.5C2 6.359 2.048 6.241 2.144 6.144C2.241 6.048 2.359 6 2.5 6L4.5 6C4.641 6 4.759 6.048 4.856 6.144ZM11.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 16ZM2 9.5C2 9.359 2.048 9.241 2.144 9.144C2.241 9.048 2.359 9 2.5 9L6.5 9C6.641 9 6.759 9.048 6.856 9.144C6.952 9.241 7 9.359 7 9.5C7 9.641 6.952 9.759 6.856 9.856C6.759 9.952 6.641 10 6.5 10L2.5 10C2.359 10 2.241 9.952 2.144 9.856C2.048 9.759 2 9.641 2 9.5Z'/%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='M0.14 3.264C0.242 3.007 0.391 2.781 0.586 2.586C0.781 2.391 1.007 2.242 1.264 2.14C1.5 2.047 1.746 2 2 2L12 2C12.254 2 12.5 2.047 12.736 2.14C12.993 2.242 13.219 2.391 13.414 2.586C13.609 2.781 13.758 3.007 13.86 3.264C13.953 3.5 14 3.746 14 4L14 8.5C14 8.641 13.952 8.759 13.856 8.856C13.759 8.952 13.641 9 13.5 9C13.359 9 13.241 8.952 13.144 8.856C13.048 8.759 13 8.641 13 8.5L13 4C13 3.724 12.902 3.488 12.707 3.293C12.512 3.098 12.276 3 12 3L2 3C1.724 3 1.488 3.098 1.293 3.293C1.098 3.488 1 3.724 1 4L1 10C1 10.276 1.098 10.512 1.293 10.707C1.488 10.902 1.724 11 2 11L4.5 11C4.641 11 4.759 11.048 4.856 11.144C4.952 11.241 5 11.359 5 11.5C5 11.641 4.952 11.759 4.856 11.856C4.759 11.952 4.641 12 4.5 12L2 12C1.746 12 1.5 11.953 1.264 11.86C1.007 11.758 0.781 11.609 0.586 11.414C0.391 11.219 0.242 10.993 0.14 10.736C0.047 10.5 0 10.254 0 10L0 4C0 3.746 0.047 3.5 0.14 3.264ZM4.856 6.144C4.952 6.241 5 6.359 5 6.5C5 6.641 4.952 6.759 4.856 6.856C4.759 6.952 4.641 7 4.5 7L2.5 7C2.359 7 2.241 6.952 2.144 6.856C2.048 6.759 2 6.641 2 6.5C2 6.359 2.048 6.241 2.144 6.144C2.241 6.048 2.359 6 2.5 6L4.5 6C4.641 6 4.759 6.048 4.856 6.144ZM11.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 16ZM2 9.5C2 9.359 2.048 9.241 2.144 9.144C2.241 9.048 2.359 9 2.5 9L6.5 9C6.641 9 6.759 9.048 6.856 9.144C6.952 9.241 7 9.359 7 9.5C7 9.641 6.952 9.759 6.856 9.856C6.759 9.952 6.641 10 6.5 10L2.5 10C2.359 10 2.241 9.952 2.144 9.856C2.048 9.759 2 9.641 2 9.5Z'/%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='M0.14 3.264C0.242 3.007 0.391 2.781 0.586 2.586C0.781 2.391 1.007 2.242 1.264 2.14C1.5 2.047 1.746 2 2 2L12 2C12.254 2 12.5 2.047 12.736 2.14C12.993 2.242 13.219 2.391 13.414 2.586C13.609 2.781 13.758 3.007 13.86 3.264C13.953 3.5 14 3.746 14 4L14 8.5C14 8.641 13.952 8.759 13.856 8.856C13.759 8.952 13.641 9 13.5 9C13.359 9 13.241 8.952 13.144 8.856C13.048 8.759 13 8.641 13 8.5L13 4C13 3.724 12.902 3.488 12.707 3.293C12.512 3.098 12.276 3 12 3L2 3C1.724 3 1.488 3.098 1.293 3.293C1.098 3.488 1 3.724 1 4L1 10C1 10.276 1.098 10.512 1.293 10.707C1.488 10.902 1.724 11 2 11L4.5 11C4.641 11 4.759 11.048 4.856 11.144C4.952 11.241 5 11.359 5 11.5C5 11.641 4.952 11.759 4.856 11.856C4.759 11.952 4.641 12 4.5 12L2 12C1.746 12 1.5 11.953 1.264 11.86C1.007 11.758 0.781 11.609 0.586 11.414C0.391 11.219 0.242 10.993 0.14 10.736C0.047 10.5 0 10.254 0 10L0 4C0 3.746 0.047 3.5 0.14 3.264ZM4.856 6.144C4.952 6.241 5 6.359 5 6.5C5 6.641 4.952 6.759 4.856 6.856C4.759 6.952 4.641 7 4.5 7L2.5 7C2.359 7 2.241 6.952 2.144 6.856C2.048 6.759 2 6.641 2 6.5C2 6.359 2.048 6.241 2.144 6.144C2.241 6.048 2.359 6 2.5 6L4.5 6C4.641 6 4.759 6.048 4.856 6.144ZM11.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 16ZM2 9.5C2 9.359 2.048 9.241 2.144 9.144C2.241 9.048 2.359 9 2.5 9L6.5 9C6.641 9 6.759 9.048 6.856 9.144C6.952 9.241 7 9.359 7 9.5C7 9.641 6.952 9.759 6.856 9.856C6.759 9.952 6.641 10 6.5 10L2.5 10C2.359 10 2.241 9.952 2.144 9.856C2.048 9.759 2 9.641 2 9.5Z'/%3E%3C/svg%3E
```

### Sprite

```html
<!-- Gentleface "subtitles-sparkle" (line-round), MIT. https://gentleface.com/icons/subtitles-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#subtitles-sparkle"/></svg>
```

### SwiftUI

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

struct SubtitlesSparkleIcon: Shape {
    func path(in rect: CGRect) -> Path {
        var p = Path()
        p.move(to: CGPoint(x: 0.14, y: 3.264))
        p.addCurve(to: CGPoint(x: 0.586, y: 2.586), control1: CGPoint(x: 0.242, y: 3.007), control2: CGPoint(x: 0.391, y: 2.781))
        p.addCurve(to: CGPoint(x: 1.264, y: 2.14), control1: CGPoint(x: 0.781, y: 2.391), control2: CGPoint(x: 1.007, y: 2.242))
        p.addCurve(to: CGPoint(x: 2, y: 2), control1: CGPoint(x: 1.5, y: 2.047), control2: CGPoint(x: 1.746, y: 2))
        p.addLine(to: CGPoint(x: 12, y: 2))
        p.addCurve(to: CGPoint(x: 12.736, y: 2.14), control1: CGPoint(x: 12.254, y: 2), control2: CGPoint(x: 12.5, y: 2.047))
        p.addCurve(to: CGPoint(x: 13.414, y: 2.586), control1: CGPoint(x: 12.993, y: 2.242), control2: CGPoint(x: 13.219, y: 2.391))
        p.addCurve(to: CGPoint(x: 13.86, y: 3.264), control1: CGPoint(x: 13.609, y: 2.781), control2: CGPoint(x: 13.758, y: 3.007))
        p.addCurve(to: CGPoint(x: 14, y: 4), control1: CGPoint(x: 13.953, y: 3.5), control2: CGPoint(x: 14, y: 3.746))
        p.addLine(to: CGPoint(x: 14, y: 8.5))
        p.addCurve(to: CGPoint(x: 13.856, y: 8.856), control1: CGPoint(x: 14, y: 8.641), control2: CGPoint(x: 13.952, y: 8.759))
        p.addCurve(to: CGPoint(x: 13.5, y: 9), control1: CGPoint(x: 13.759, y: 8.952), control2: CGPoint(x: 13.641, y: 9))
        p.addCurve(to: CGPoint(x: 13.144, y: 8.856), control1: CGPoint(x: 13.359, y: 9), control2: CGPoint(x: 13.241, y: 8.952))
        p.addCurve(to: CGPoint(x: 13, y: 8.5), control1: CGPoint(x: 13.048, y: 8.759), control2: CGPoint(x: 13, y: 8.641))
        p.addLine(to: CGPoint(x: 13, y: 4))
        p.addCurve(to: CGPoint(x: 12.707, y: 3.293), control1: CGPoint(x: 13, y: 3.724), control2: CGPoint(x: 12.902, y: 3.488))
        p.addCurve(to: CGPoint(x: 12, y: 3), control1: CGPoint(x: 12.512, y: 3.098), control2: CGPoint(x: 12.276, y: 3))
        p.addLine(to: CGPoint(x: 2, y: 3))
        p.addCurve(to: CGPoint(x: 1.293, y: 3.293), control1: CGPoint(x: 1.724, y: 3), control2: CGPoint(x: 1.488, y: 3.098))
        p.addCurve(to: CGPoint(x: 1, y: 4), control1: CGPoint(x: 1.098, y: 3.488), control2: CGPoint(x: 1, y: 3.724))
        p.addLine(to: CGPoint(x: 1, y: 10))
        p.addCurve(to: CGPoint(x: 1.293, y: 10.707), control1: CGPoint(x: 1, y: 10.276), control2: CGPoint(x: 1.098, y: 10.512))
        p.addCurve(to: CGPoint(x: 2, y: 11), control1: CGPoint(x: 1.488, y: 10.902), control2: CGPoint(x: 1.724, y: 11))
        p.addLine(to: CGPoint(x: 4.5, y: 11))
        p.addCurve(to: CGPoint(x: 4.856, y: 11.144), control1: CGPoint(x: 4.641, y: 11), control2: CGPoint(x: 4.759, y: 11.048))
        p.addCurve(to: CGPoint(x: 5, y: 11.5), control1: CGPoint(x: 4.952, y: 11.241), control2: CGPoint(x: 5, y: 11.359))
        p.addCurve(to: CGPoint(x: 4.856, y: 11.856), control1: CGPoint(x: 5, y: 11.641), control2: CGPoint(x: 4.952, y: 11.759))
        p.addCurve(to: CGPoint(x: 4.5, y: 12), control1: CGPoint(x: 4.759, y: 11.952), control2: CGPoint(x: 4.641, y: 12))
        p.addLine(to: CGPoint(x: 2, y: 12))
        p.addCurve(to: CGPoint(x: 1.264, y: 11.86), control1: CGPoint(x: 1.746, y: 12), control2: CGPoint(x: 1.5, y: 11.953))
        p.addCurve(to: CGPoint(x: 0.586, y: 11.414), control1: CGPoint(x: 1.007, y: 11.758), control2: CGPoint(x: 0.781, y: 11.609))
        p.addCurve(to: CGPoint(x: 0.14, y: 10.736), control1: CGPoint(x: 0.391, y: 11.219), control2: CGPoint(x: 0.242, y: 10.993))
        p.addCurve(to: CGPoint(x: 0, y: 10), control1: CGPoint(x: 0.047, y: 10.5), control2: CGPoint(x: 0, y: 10.254))
        p.addLine(to: CGPoint(x: 0, y: 4))
        p.addCurve(to: CGPoint(x: 0.14, y: 3.264), control1: CGPoint(x: 0, y: 3.746), control2: CGPoint(x: 0.047, y: 3.5))
        p.closeSubpath()
        p.move(to: CGPoint(x: 4.856, y: 6.144))
        p.addCurve(to: CGPoint(x: 5, y: 6.5), control1: CGPoint(x: 4.952, y: 6.241), control2: CGPoint(x: 5, y: 6.359))
        p.addCurve(to: CGPoint(x: 4.856, y: 6.856), control1: CGPoint(x: 5, y: 6.641), control2: CGPoint(x: 4.952, y: 6.759))
        p.addCurve(to: CGPoint(x: 4.5, y: 7), control1: CGPoint(x: 4.759, y: 6.952), control2: CGPoint(x: 4.641, y: 7))
        p.addLine(to: CGPoint(x: 2.5, y: 7))
        p.addCurve(to: CGPoint(x: 2.144, y: 6.856), control1: CGPoint(x: 2.359, y: 7), control2: CGPoint(x: 2.241, y: 6.952))
        p.addCurve(to: CGPoint(x: 2, y: 6.5), control1: CGPoint(x: 2.048, y: 6.759), control2: CGPoint(x: 2, y: 6.641))
        p.addCurve(to: CGPoint(x: 2.144, y: 6.144), control1: CGPoint(x: 2, y: 6.359), control2: CGPoint(x: 2.048, y: 6.241))
        p.addCurve(to: CGPoint(x: 2.5, y: 6), control1: CGPoint(x: 2.241, y: 6.048), control2: CGPoint(x: 2.359, y: 6))
        p.addLine(to: CGPoint(x: 4.5, y: 6))
        p.addCurve(to: CGPoint(x: 4.856, y: 6.144), control1: CGPoint(x: 4.641, y: 6), control2: CGPoint(x: 4.759, y: 6.048))
        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()
        p.move(to: CGPoint(x: 2, y: 9.5))
        p.addCurve(to: CGPoint(x: 2.144, y: 9.144), control1: CGPoint(x: 2, y: 9.359), control2: CGPoint(x: 2.048, y: 9.241))
        p.addCurve(to: CGPoint(x: 2.5, y: 9), control1: CGPoint(x: 2.241, y: 9.048), control2: CGPoint(x: 2.359, y: 9))
        p.addLine(to: CGPoint(x: 6.5, y: 9))
        p.addCurve(to: CGPoint(x: 6.856, y: 9.144), control1: CGPoint(x: 6.641, y: 9), control2: CGPoint(x: 6.759, y: 9.048))
        p.addCurve(to: CGPoint(x: 7, y: 9.5), control1: CGPoint(x: 6.952, y: 9.241), control2: CGPoint(x: 7, y: 9.359))
        p.addCurve(to: CGPoint(x: 6.856, y: 9.856), control1: CGPoint(x: 7, y: 9.641), control2: CGPoint(x: 6.952, y: 9.759))
        p.addCurve(to: CGPoint(x: 6.5, y: 10), control1: CGPoint(x: 6.759, y: 9.952), control2: CGPoint(x: 6.641, y: 10))
        p.addLine(to: CGPoint(x: 2.5, y: 10))
        p.addCurve(to: CGPoint(x: 2.144, y: 9.856), control1: CGPoint(x: 2.359, y: 10), control2: CGPoint(x: 2.241, y: 9.952))
        p.addCurve(to: CGPoint(x: 2, y: 9.5), control1: CGPoint(x: 2.048, y: 9.759), control2: CGPoint(x: 2, y: 9.641))
        p.closeSubpath()
        return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
    }
}

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

### Compose

```kotlin
// Gentleface "subtitles-sparkle" (line-round), MIT. https://gentleface.com/icons/subtitles-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 SubtitlesSparkleIcon: ImageVector by lazy {
    ImageVector.Builder(
        name = "subtitles-sparkle", defaultWidth = 16.dp, defaultHeight = 16.dp,
        viewportWidth = 16f, viewportHeight = 16f,
    ).addPath(
        pathData = addPathNodes("M0.14 3.264C0.242 3.007 0.391 2.781 0.586 2.586C0.781 2.391 1.007 2.242 1.264 2.14C1.5 2.047 1.746 2 2 2L12 2C12.254 2 12.5 2.047 12.736 2.14C12.993 2.242 13.219 2.391 13.414 2.586C13.609 2.781 13.758 3.007 13.86 3.264C13.953 3.5 14 3.746 14 4L14 8.5C14 8.641 13.952 8.759 13.856 8.856C13.759 8.952 13.641 9 13.5 9C13.359 9 13.241 8.952 13.144 8.856C13.048 8.759 13 8.641 13 8.5L13 4C13 3.724 12.902 3.488 12.707 3.293C12.512 3.098 12.276 3 12 3L2 3C1.724 3 1.488 3.098 1.293 3.293C1.098 3.488 1 3.724 1 4L1 10C1 10.276 1.098 10.512 1.293 10.707C1.488 10.902 1.724 11 2 11L4.5 11C4.641 11 4.759 11.048 4.856 11.144C4.952 11.241 5 11.359 5 11.5C5 11.641 4.952 11.759 4.856 11.856C4.759 11.952 4.641 12 4.5 12L2 12C1.746 12 1.5 11.953 1.264 11.86C1.007 11.758 0.781 11.609 0.586 11.414C0.391 11.219 0.242 10.993 0.14 10.736C0.047 10.5 0 10.254 0 10L0 4C0 3.746 0.047 3.5 0.14 3.264ZM4.856 6.144C4.952 6.241 5 6.359 5 6.5C5 6.641 4.952 6.759 4.856 6.856C4.759 6.952 4.641 7 4.5 7L2.5 7C2.359 7 2.241 6.952 2.144 6.856C2.048 6.759 2 6.641 2 6.5C2 6.359 2.048 6.241 2.144 6.144C2.241 6.048 2.359 6 2.5 6L4.5 6C4.641 6 4.759 6.048 4.856 6.144ZM11.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 16ZM2 9.5C2 9.359 2.048 9.241 2.144 9.144C2.241 9.048 2.359 9 2.5 9L6.5 9C6.641 9 6.759 9.048 6.856 9.144C6.952 9.241 7 9.359 7 9.5C7 9.641 6.952 9.759 6.856 9.856C6.759 9.952 6.641 10 6.5 10L2.5 10C2.359 10 2.241 9.952 2.144 9.856C2.048 9.759 2 9.641 2 9.5Z"),
        fill = SolidColor(Color.Black),
    ).build()
}

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

### Android XML

```xml
<!-- res/drawable/ic_subtitles_sparkle.xml · Gentleface "subtitles-sparkle" (line-round), MIT. https://gentleface.com/icons/subtitles-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="M0.14 3.264C0.242 3.007 0.391 2.781 0.586 2.586C0.781 2.391 1.007 2.242 1.264 2.14C1.5 2.047 1.746 2 2 2L12 2C12.254 2 12.5 2.047 12.736 2.14C12.993 2.242 13.219 2.391 13.414 2.586C13.609 2.781 13.758 3.007 13.86 3.264C13.953 3.5 14 3.746 14 4L14 8.5C14 8.641 13.952 8.759 13.856 8.856C13.759 8.952 13.641 9 13.5 9C13.359 9 13.241 8.952 13.144 8.856C13.048 8.759 13 8.641 13 8.5L13 4C13 3.724 12.902 3.488 12.707 3.293C12.512 3.098 12.276 3 12 3L2 3C1.724 3 1.488 3.098 1.293 3.293C1.098 3.488 1 3.724 1 4L1 10C1 10.276 1.098 10.512 1.293 10.707C1.488 10.902 1.724 11 2 11L4.5 11C4.641 11 4.759 11.048 4.856 11.144C4.952 11.241 5 11.359 5 11.5C5 11.641 4.952 11.759 4.856 11.856C4.759 11.952 4.641 12 4.5 12L2 12C1.746 12 1.5 11.953 1.264 11.86C1.007 11.758 0.781 11.609 0.586 11.414C0.391 11.219 0.242 10.993 0.14 10.736C0.047 10.5 0 10.254 0 10L0 4C0 3.746 0.047 3.5 0.14 3.264ZM4.856 6.144C4.952 6.241 5 6.359 5 6.5C5 6.641 4.952 6.759 4.856 6.856C4.759 6.952 4.641 7 4.5 7L2.5 7C2.359 7 2.241 6.952 2.144 6.856C2.048 6.759 2 6.641 2 6.5C2 6.359 2.048 6.241 2.144 6.144C2.241 6.048 2.359 6 2.5 6L4.5 6C4.641 6 4.759 6.048 4.856 6.144ZM11.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 16ZM2 9.5C2 9.359 2.048 9.241 2.144 9.144C2.241 9.048 2.359 9 2.5 9L6.5 9C6.641 9 6.759 9.048 6.856 9.144C6.952 9.241 7 9.359 7 9.5C7 9.641 6.952 9.759 6.856 9.856C6.759 9.952 6.641 10 6.5 10L2.5 10C2.359 10 2.241 9.952 2.144 9.856C2.048 9.759 2 9.641 2 9.5Z"/>
</vector>
```

### Flutter

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

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

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

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

  @override
  void paint(Canvas canvas, Size size) {
    canvas.scale(size.width / 16, size.height / 16);
    final p = Path()
      ..moveTo(0.14, 3.264)
      ..cubicTo(0.242, 3.007, 0.391, 2.781, 0.586, 2.586)
      ..cubicTo(0.781, 2.391, 1.007, 2.242, 1.264, 2.14)
      ..cubicTo(1.5, 2.047, 1.746, 2, 2, 2)
      ..lineTo(12, 2)
      ..cubicTo(12.254, 2, 12.5, 2.047, 12.736, 2.14)
      ..cubicTo(12.993, 2.242, 13.219, 2.391, 13.414, 2.586)
      ..cubicTo(13.609, 2.781, 13.758, 3.007, 13.86, 3.264)
      ..cubicTo(13.953, 3.5, 14, 3.746, 14, 4)
      ..lineTo(14, 8.5)
      ..cubicTo(14, 8.641, 13.952, 8.759, 13.856, 8.856)
      ..cubicTo(13.759, 8.952, 13.641, 9, 13.5, 9)
      ..cubicTo(13.359, 9, 13.241, 8.952, 13.144, 8.856)
      ..cubicTo(13.048, 8.759, 13, 8.641, 13, 8.5)
      ..lineTo(13, 4)
      ..cubicTo(13, 3.724, 12.902, 3.488, 12.707, 3.293)
      ..cubicTo(12.512, 3.098, 12.276, 3, 12, 3)
      ..lineTo(2, 3)
      ..cubicTo(1.724, 3, 1.488, 3.098, 1.293, 3.293)
      ..cubicTo(1.098, 3.488, 1, 3.724, 1, 4)
      ..lineTo(1, 10)
      ..cubicTo(1, 10.276, 1.098, 10.512, 1.293, 10.707)
      ..cubicTo(1.488, 10.902, 1.724, 11, 2, 11)
      ..lineTo(4.5, 11)
      ..cubicTo(4.641, 11, 4.759, 11.048, 4.856, 11.144)
      ..cubicTo(4.952, 11.241, 5, 11.359, 5, 11.5)
      ..cubicTo(5, 11.641, 4.952, 11.759, 4.856, 11.856)
      ..cubicTo(4.759, 11.952, 4.641, 12, 4.5, 12)
      ..lineTo(2, 12)
      ..cubicTo(1.746, 12, 1.5, 11.953, 1.264, 11.86)
      ..cubicTo(1.007, 11.758, 0.781, 11.609, 0.586, 11.414)
      ..cubicTo(0.391, 11.219, 0.242, 10.993, 0.14, 10.736)
      ..cubicTo(0.047, 10.5, 0, 10.254, 0, 10)
      ..lineTo(0, 4)
      ..cubicTo(0, 3.746, 0.047, 3.5, 0.14, 3.264)
      ..close()
      ..moveTo(4.856, 6.144)
      ..cubicTo(4.952, 6.241, 5, 6.359, 5, 6.5)
      ..cubicTo(5, 6.641, 4.952, 6.759, 4.856, 6.856)
      ..cubicTo(4.759, 6.952, 4.641, 7, 4.5, 7)
      ..lineTo(2.5, 7)
      ..cubicTo(2.359, 7, 2.241, 6.952, 2.144, 6.856)
      ..cubicTo(2.048, 6.759, 2, 6.641, 2, 6.5)
      ..cubicTo(2, 6.359, 2.048, 6.241, 2.144, 6.144)
      ..cubicTo(2.241, 6.048, 2.359, 6, 2.5, 6)
      ..lineTo(4.5, 6)
      ..cubicTo(4.641, 6, 4.759, 6.048, 4.856, 6.144)
      ..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()
      ..moveTo(2, 9.5)
      ..cubicTo(2, 9.359, 2.048, 9.241, 2.144, 9.144)
      ..cubicTo(2.241, 9.048, 2.359, 9, 2.5, 9)
      ..lineTo(6.5, 9)
      ..cubicTo(6.641, 9, 6.759, 9.048, 6.856, 9.144)
      ..cubicTo(6.952, 9.241, 7, 9.359, 7, 9.5)
      ..cubicTo(7, 9.641, 6.952, 9.759, 6.856, 9.856)
      ..cubicTo(6.759, 9.952, 6.641, 10, 6.5, 10)
      ..lineTo(2.5, 10)
      ..cubicTo(2.359, 10, 2.241, 9.952, 2.144, 9.856)
      ..cubicTo(2.048, 9.759, 2, 9.641, 2, 9.5)
      ..close();
    canvas.drawPath(p, Paint()..color = color);
  }

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