# smartphone-sparkle icon

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

- Category: Devices & hardware
- Use it for: phone ai, ai phone
- Example: On-device AI assistant
- Built from: smartphone + sparkle
- Tags: phone, mobile, device, cellphone, handheld, sparkle
- Family: smartphone, smartphone-alert, smartphone-arrow-down, smartphone-arrow-right, smartphone-check, smartphone-clock, smartphone-code, smartphone-dock, smartphone-dot, smartphone-fold, smartphone-fold-half, smartphone-gear, smartphone-info, smartphone-link, smartphone-lock, smartphone-off, smartphone-password, smartphone-plus, smartphone-question, smartphone-rotate, smartphone-rotate-lock, smartphone-search, smartphone-shield, smartphone-sync, smartphone-unlock, smartphone-user, smartphone-vibrate, smartphone-vibrate-off, smartphone-x
- Component name: SmartphoneSparkleIcon
- Added: 2026-11-12

## 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/smartphone-sparkle.svg · PNG https://gentleface.com/png/line-round/16/smartphone-sparkle.png · https://gentleface.com/png/line-round/32/smartphone-sparkle.png · https://gentleface.com/png/line-round/48/smartphone-sparkle.png
- line-soft: https://gentleface.com/svg/line-soft/16/smartphone-sparkle.svg · PNG https://gentleface.com/png/line-soft/16/smartphone-sparkle.png · https://gentleface.com/png/line-soft/32/smartphone-sparkle.png · https://gentleface.com/png/line-soft/48/smartphone-sparkle.png
- line-sharp: https://gentleface.com/svg/line-sharp/16/smartphone-sparkle.svg · PNG https://gentleface.com/png/line-sharp/16/smartphone-sparkle.png · https://gentleface.com/png/line-sharp/32/smartphone-sparkle.png · https://gentleface.com/png/line-sharp/48/smartphone-sparkle.png
- solid-round: https://gentleface.com/svg/solid-round/16/smartphone-sparkle.svg · PNG https://gentleface.com/png/solid-round/16/smartphone-sparkle.png · https://gentleface.com/png/solid-round/32/smartphone-sparkle.png · https://gentleface.com/png/solid-round/48/smartphone-sparkle.png
- solid-soft: https://gentleface.com/svg/solid-soft/16/smartphone-sparkle.svg · PNG https://gentleface.com/png/solid-soft/16/smartphone-sparkle.png · https://gentleface.com/png/solid-soft/32/smartphone-sparkle.png · https://gentleface.com/png/solid-soft/48/smartphone-sparkle.png
- solid-sharp: https://gentleface.com/svg/solid-sharp/16/smartphone-sparkle.svg · PNG https://gentleface.com/png/solid-sharp/16/smartphone-sparkle.png · https://gentleface.com/png/solid-sharp/32/smartphone-sparkle.png · https://gentleface.com/png/solid-sharp/48/smartphone-sparkle.png

The SVG of every style: https://gentleface.com/icons/smartphone-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="M1.586 13.414C1.391 13.219 1.242 12.993 1.14 12.736C1.047 12.5 1 12.254 1 12L1 2C1 1.746 1.047 1.5 1.14 1.264C1.242 1.007 1.391 0.781 1.586 0.586C1.781 0.391 2.007 0.242 2.264 0.14C2.5 0.047 2.746 0 3 0L7 0C7.254 0 7.5 0.047 7.736 0.14C7.993 0.242 8.219 0.391 8.414 0.586C8.609 0.781 8.758 1.007 8.86 1.264C8.953 1.5 9 1.746 9 2L9 9.5C9 9.641 8.952 9.759 8.856 9.856C8.759 9.952 8.641 10 8.5 10C8.359 10 8.241 9.952 8.144 9.856C8.048 9.759 8 9.641 8 9.5L8 2C8 1.724 7.902 1.488 7.707 1.293C7.512 1.098 7.276 1 7 1L3 1C2.724 1 2.488 1.098 2.293 1.293C2.098 1.488 2 1.724 2 2L2 12C2 12.276 2.098 12.512 2.293 12.707C2.488 12.902 2.724 13 3 13L7 13C7.207 13 7.396 12.941 7.567 12.824C7.68 12.746 7.805 12.719 7.941 12.744C8.077 12.769 8.184 12.839 8.262 12.953C8.342 13.069 8.369 13.194 8.345 13.328C8.32 13.461 8.249 13.568 8.133 13.648C7.792 13.883 7.414 14 7 14L3 14C2.746 14 2.5 13.953 2.264 13.86C2.007 13.758 1.781 13.609 1.586 13.414ZM11.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 16ZM5.707 10.293C5.902 10.488 6 10.724 6 11C6 11.276 5.902 11.512 5.707 11.707C5.512 11.902 5.276 12 5 12C4.724 12 4.488 11.902 4.293 11.707C4.098 11.512 4 11.276 4 11C4 10.724 4.098 10.488 4.293 10.293C4.488 10.098 4.724 10 5 10C5.276 10 5.512 10.098 5.707 10.293Z"/></svg>
```

### React

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

export function SmartphoneSparkleIcon(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="M1.586 13.414C1.391 13.219 1.242 12.993 1.14 12.736C1.047 12.5 1 12.254 1 12L1 2C1 1.746 1.047 1.5 1.14 1.264C1.242 1.007 1.391 0.781 1.586 0.586C1.781 0.391 2.007 0.242 2.264 0.14C2.5 0.047 2.746 0 3 0L7 0C7.254 0 7.5 0.047 7.736 0.14C7.993 0.242 8.219 0.391 8.414 0.586C8.609 0.781 8.758 1.007 8.86 1.264C8.953 1.5 9 1.746 9 2L9 9.5C9 9.641 8.952 9.759 8.856 9.856C8.759 9.952 8.641 10 8.5 10C8.359 10 8.241 9.952 8.144 9.856C8.048 9.759 8 9.641 8 9.5L8 2C8 1.724 7.902 1.488 7.707 1.293C7.512 1.098 7.276 1 7 1L3 1C2.724 1 2.488 1.098 2.293 1.293C2.098 1.488 2 1.724 2 2L2 12C2 12.276 2.098 12.512 2.293 12.707C2.488 12.902 2.724 13 3 13L7 13C7.207 13 7.396 12.941 7.567 12.824C7.68 12.746 7.805 12.719 7.941 12.744C8.077 12.769 8.184 12.839 8.262 12.953C8.342 13.069 8.369 13.194 8.345 13.328C8.32 13.461 8.249 13.568 8.133 13.648C7.792 13.883 7.414 14 7 14L3 14C2.746 14 2.5 13.953 2.264 13.86C2.007 13.758 1.781 13.609 1.586 13.414ZM11.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 16ZM5.707 10.293C5.902 10.488 6 10.724 6 11C6 11.276 5.902 11.512 5.707 11.707C5.512 11.902 5.276 12 5 12C4.724 12 4.488 11.902 4.293 11.707C4.098 11.512 4 11.276 4 11C4 10.724 4.098 10.488 4.293 10.293C4.488 10.098 4.724 10 5 10C5.276 10 5.512 10.098 5.707 10.293Z" />
    </svg>
  );
}
```

### Vue

```vue
<!-- Gentleface "smartphone-sparkle" (line-round), MIT. https://gentleface.com/icons/smartphone-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="M1.586 13.414C1.391 13.219 1.242 12.993 1.14 12.736C1.047 12.5 1 12.254 1 12L1 2C1 1.746 1.047 1.5 1.14 1.264C1.242 1.007 1.391 0.781 1.586 0.586C1.781 0.391 2.007 0.242 2.264 0.14C2.5 0.047 2.746 0 3 0L7 0C7.254 0 7.5 0.047 7.736 0.14C7.993 0.242 8.219 0.391 8.414 0.586C8.609 0.781 8.758 1.007 8.86 1.264C8.953 1.5 9 1.746 9 2L9 9.5C9 9.641 8.952 9.759 8.856 9.856C8.759 9.952 8.641 10 8.5 10C8.359 10 8.241 9.952 8.144 9.856C8.048 9.759 8 9.641 8 9.5L8 2C8 1.724 7.902 1.488 7.707 1.293C7.512 1.098 7.276 1 7 1L3 1C2.724 1 2.488 1.098 2.293 1.293C2.098 1.488 2 1.724 2 2L2 12C2 12.276 2.098 12.512 2.293 12.707C2.488 12.902 2.724 13 3 13L7 13C7.207 13 7.396 12.941 7.567 12.824C7.68 12.746 7.805 12.719 7.941 12.744C8.077 12.769 8.184 12.839 8.262 12.953C8.342 13.069 8.369 13.194 8.345 13.328C8.32 13.461 8.249 13.568 8.133 13.648C7.792 13.883 7.414 14 7 14L3 14C2.746 14 2.5 13.953 2.264 13.86C2.007 13.758 1.781 13.609 1.586 13.414ZM11.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 16ZM5.707 10.293C5.902 10.488 6 10.724 6 11C6 11.276 5.902 11.512 5.707 11.707C5.512 11.902 5.276 12 5 12C4.724 12 4.488 11.902 4.293 11.707C4.098 11.512 4 11.276 4 11C4 10.724 4.098 10.488 4.293 10.293C4.488 10.098 4.724 10 5 10C5.276 10 5.512 10.098 5.707 10.293Z" />
  </svg>
</template>
```

### Svelte

```svelte
<!-- Gentleface "smartphone-sparkle" (line-round), MIT. https://gentleface.com/icons/smartphone-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="M1.586 13.414C1.391 13.219 1.242 12.993 1.14 12.736C1.047 12.5 1 12.254 1 12L1 2C1 1.746 1.047 1.5 1.14 1.264C1.242 1.007 1.391 0.781 1.586 0.586C1.781 0.391 2.007 0.242 2.264 0.14C2.5 0.047 2.746 0 3 0L7 0C7.254 0 7.5 0.047 7.736 0.14C7.993 0.242 8.219 0.391 8.414 0.586C8.609 0.781 8.758 1.007 8.86 1.264C8.953 1.5 9 1.746 9 2L9 9.5C9 9.641 8.952 9.759 8.856 9.856C8.759 9.952 8.641 10 8.5 10C8.359 10 8.241 9.952 8.144 9.856C8.048 9.759 8 9.641 8 9.5L8 2C8 1.724 7.902 1.488 7.707 1.293C7.512 1.098 7.276 1 7 1L3 1C2.724 1 2.488 1.098 2.293 1.293C2.098 1.488 2 1.724 2 2L2 12C2 12.276 2.098 12.512 2.293 12.707C2.488 12.902 2.724 13 3 13L7 13C7.207 13 7.396 12.941 7.567 12.824C7.68 12.746 7.805 12.719 7.941 12.744C8.077 12.769 8.184 12.839 8.262 12.953C8.342 13.069 8.369 13.194 8.345 13.328C8.32 13.461 8.249 13.568 8.133 13.648C7.792 13.883 7.414 14 7 14L3 14C2.746 14 2.5 13.953 2.264 13.86C2.007 13.758 1.781 13.609 1.586 13.414ZM11.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 16ZM5.707 10.293C5.902 10.488 6 10.724 6 11C6 11.276 5.902 11.512 5.707 11.707C5.512 11.902 5.276 12 5 12C4.724 12 4.488 11.902 4.293 11.707C4.098 11.512 4 11.276 4 11C4 10.724 4.098 10.488 4.293 10.293C4.488 10.098 4.724 10 5 10C5.276 10 5.512 10.098 5.707 10.293Z" />
</svg>
```

### HTML img

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

### CSS

```css
/* Gentleface "smartphone-sparkle" (line-round), MIT. https://gentleface.com/icons/smartphone-sparkle. Takes the text color. */
.icon-smartphone-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='M1.586 13.414C1.391 13.219 1.242 12.993 1.14 12.736C1.047 12.5 1 12.254 1 12L1 2C1 1.746 1.047 1.5 1.14 1.264C1.242 1.007 1.391 0.781 1.586 0.586C1.781 0.391 2.007 0.242 2.264 0.14C2.5 0.047 2.746 0 3 0L7 0C7.254 0 7.5 0.047 7.736 0.14C7.993 0.242 8.219 0.391 8.414 0.586C8.609 0.781 8.758 1.007 8.86 1.264C8.953 1.5 9 1.746 9 2L9 9.5C9 9.641 8.952 9.759 8.856 9.856C8.759 9.952 8.641 10 8.5 10C8.359 10 8.241 9.952 8.144 9.856C8.048 9.759 8 9.641 8 9.5L8 2C8 1.724 7.902 1.488 7.707 1.293C7.512 1.098 7.276 1 7 1L3 1C2.724 1 2.488 1.098 2.293 1.293C2.098 1.488 2 1.724 2 2L2 12C2 12.276 2.098 12.512 2.293 12.707C2.488 12.902 2.724 13 3 13L7 13C7.207 13 7.396 12.941 7.567 12.824C7.68 12.746 7.805 12.719 7.941 12.744C8.077 12.769 8.184 12.839 8.262 12.953C8.342 13.069 8.369 13.194 8.345 13.328C8.32 13.461 8.249 13.568 8.133 13.648C7.792 13.883 7.414 14 7 14L3 14C2.746 14 2.5 13.953 2.264 13.86C2.007 13.758 1.781 13.609 1.586 13.414ZM11.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 16ZM5.707 10.293C5.902 10.488 6 10.724 6 11C6 11.276 5.902 11.512 5.707 11.707C5.512 11.902 5.276 12 5 12C4.724 12 4.488 11.902 4.293 11.707C4.098 11.512 4 11.276 4 11C4 10.724 4.098 10.488 4.293 10.293C4.488 10.098 4.724 10 5 10C5.276 10 5.512 10.098 5.707 10.293Z'/%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='M1.586 13.414C1.391 13.219 1.242 12.993 1.14 12.736C1.047 12.5 1 12.254 1 12L1 2C1 1.746 1.047 1.5 1.14 1.264C1.242 1.007 1.391 0.781 1.586 0.586C1.781 0.391 2.007 0.242 2.264 0.14C2.5 0.047 2.746 0 3 0L7 0C7.254 0 7.5 0.047 7.736 0.14C7.993 0.242 8.219 0.391 8.414 0.586C8.609 0.781 8.758 1.007 8.86 1.264C8.953 1.5 9 1.746 9 2L9 9.5C9 9.641 8.952 9.759 8.856 9.856C8.759 9.952 8.641 10 8.5 10C8.359 10 8.241 9.952 8.144 9.856C8.048 9.759 8 9.641 8 9.5L8 2C8 1.724 7.902 1.488 7.707 1.293C7.512 1.098 7.276 1 7 1L3 1C2.724 1 2.488 1.098 2.293 1.293C2.098 1.488 2 1.724 2 2L2 12C2 12.276 2.098 12.512 2.293 12.707C2.488 12.902 2.724 13 3 13L7 13C7.207 13 7.396 12.941 7.567 12.824C7.68 12.746 7.805 12.719 7.941 12.744C8.077 12.769 8.184 12.839 8.262 12.953C8.342 13.069 8.369 13.194 8.345 13.328C8.32 13.461 8.249 13.568 8.133 13.648C7.792 13.883 7.414 14 7 14L3 14C2.746 14 2.5 13.953 2.264 13.86C2.007 13.758 1.781 13.609 1.586 13.414ZM11.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 16ZM5.707 10.293C5.902 10.488 6 10.724 6 11C6 11.276 5.902 11.512 5.707 11.707C5.512 11.902 5.276 12 5 12C4.724 12 4.488 11.902 4.293 11.707C4.098 11.512 4 11.276 4 11C4 10.724 4.098 10.488 4.293 10.293C4.488 10.098 4.724 10 5 10C5.276 10 5.512 10.098 5.707 10.293Z'/%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='M1.586 13.414C1.391 13.219 1.242 12.993 1.14 12.736C1.047 12.5 1 12.254 1 12L1 2C1 1.746 1.047 1.5 1.14 1.264C1.242 1.007 1.391 0.781 1.586 0.586C1.781 0.391 2.007 0.242 2.264 0.14C2.5 0.047 2.746 0 3 0L7 0C7.254 0 7.5 0.047 7.736 0.14C7.993 0.242 8.219 0.391 8.414 0.586C8.609 0.781 8.758 1.007 8.86 1.264C8.953 1.5 9 1.746 9 2L9 9.5C9 9.641 8.952 9.759 8.856 9.856C8.759 9.952 8.641 10 8.5 10C8.359 10 8.241 9.952 8.144 9.856C8.048 9.759 8 9.641 8 9.5L8 2C8 1.724 7.902 1.488 7.707 1.293C7.512 1.098 7.276 1 7 1L3 1C2.724 1 2.488 1.098 2.293 1.293C2.098 1.488 2 1.724 2 2L2 12C2 12.276 2.098 12.512 2.293 12.707C2.488 12.902 2.724 13 3 13L7 13C7.207 13 7.396 12.941 7.567 12.824C7.68 12.746 7.805 12.719 7.941 12.744C8.077 12.769 8.184 12.839 8.262 12.953C8.342 13.069 8.369 13.194 8.345 13.328C8.32 13.461 8.249 13.568 8.133 13.648C7.792 13.883 7.414 14 7 14L3 14C2.746 14 2.5 13.953 2.264 13.86C2.007 13.758 1.781 13.609 1.586 13.414ZM11.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 16ZM5.707 10.293C5.902 10.488 6 10.724 6 11C6 11.276 5.902 11.512 5.707 11.707C5.512 11.902 5.276 12 5 12C4.724 12 4.488 11.902 4.293 11.707C4.098 11.512 4 11.276 4 11C4 10.724 4.098 10.488 4.293 10.293C4.488 10.098 4.724 10 5 10C5.276 10 5.512 10.098 5.707 10.293Z'/%3E%3C/svg%3E
```

### Sprite

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

### SwiftUI

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

struct SmartphoneSparkleIcon: Shape {
    func path(in rect: CGRect) -> Path {
        var p = Path()
        p.move(to: CGPoint(x: 1.586, y: 13.414))
        p.addCurve(to: CGPoint(x: 1.14, y: 12.736), control1: CGPoint(x: 1.391, y: 13.219), control2: CGPoint(x: 1.242, y: 12.993))
        p.addCurve(to: CGPoint(x: 1, y: 12), control1: CGPoint(x: 1.047, y: 12.5), control2: CGPoint(x: 1, y: 12.254))
        p.addLine(to: CGPoint(x: 1, y: 2))
        p.addCurve(to: CGPoint(x: 1.14, y: 1.264), control1: CGPoint(x: 1, y: 1.746), control2: CGPoint(x: 1.047, y: 1.5))
        p.addCurve(to: CGPoint(x: 1.586, y: 0.586), control1: CGPoint(x: 1.242, y: 1.007), control2: CGPoint(x: 1.391, y: 0.781))
        p.addCurve(to: CGPoint(x: 2.264, y: 0.14), control1: CGPoint(x: 1.781, y: 0.391), control2: CGPoint(x: 2.007, y: 0.242))
        p.addCurve(to: CGPoint(x: 3, y: 0), control1: CGPoint(x: 2.5, y: 0.047), control2: CGPoint(x: 2.746, y: 0))
        p.addLine(to: CGPoint(x: 7, y: 0))
        p.addCurve(to: CGPoint(x: 7.736, y: 0.14), control1: CGPoint(x: 7.254, y: 0), control2: CGPoint(x: 7.5, y: 0.047))
        p.addCurve(to: CGPoint(x: 8.414, y: 0.586), control1: CGPoint(x: 7.993, y: 0.242), control2: CGPoint(x: 8.219, y: 0.391))
        p.addCurve(to: CGPoint(x: 8.86, y: 1.264), control1: CGPoint(x: 8.609, y: 0.781), control2: CGPoint(x: 8.758, y: 1.007))
        p.addCurve(to: CGPoint(x: 9, y: 2), control1: CGPoint(x: 8.953, y: 1.5), control2: CGPoint(x: 9, y: 1.746))
        p.addLine(to: CGPoint(x: 9, y: 9.5))
        p.addCurve(to: CGPoint(x: 8.856, y: 9.856), control1: CGPoint(x: 9, y: 9.641), control2: CGPoint(x: 8.952, y: 9.759))
        p.addCurve(to: CGPoint(x: 8.5, y: 10), control1: CGPoint(x: 8.759, y: 9.952), control2: CGPoint(x: 8.641, y: 10))
        p.addCurve(to: CGPoint(x: 8.144, y: 9.856), control1: CGPoint(x: 8.359, y: 10), control2: CGPoint(x: 8.241, y: 9.952))
        p.addCurve(to: CGPoint(x: 8, y: 9.5), control1: CGPoint(x: 8.048, y: 9.759), control2: CGPoint(x: 8, y: 9.641))
        p.addLine(to: CGPoint(x: 8, y: 2))
        p.addCurve(to: CGPoint(x: 7.707, y: 1.293), control1: CGPoint(x: 8, y: 1.724), control2: CGPoint(x: 7.902, y: 1.488))
        p.addCurve(to: CGPoint(x: 7, y: 1), control1: CGPoint(x: 7.512, y: 1.098), control2: CGPoint(x: 7.276, y: 1))
        p.addLine(to: CGPoint(x: 3, y: 1))
        p.addCurve(to: CGPoint(x: 2.293, y: 1.293), control1: CGPoint(x: 2.724, y: 1), control2: CGPoint(x: 2.488, y: 1.098))
        p.addCurve(to: CGPoint(x: 2, y: 2), control1: CGPoint(x: 2.098, y: 1.488), control2: CGPoint(x: 2, y: 1.724))
        p.addLine(to: CGPoint(x: 2, y: 12))
        p.addCurve(to: CGPoint(x: 2.293, y: 12.707), control1: CGPoint(x: 2, y: 12.276), control2: CGPoint(x: 2.098, y: 12.512))
        p.addCurve(to: CGPoint(x: 3, y: 13), control1: CGPoint(x: 2.488, y: 12.902), control2: CGPoint(x: 2.724, y: 13))
        p.addLine(to: CGPoint(x: 7, y: 13))
        p.addCurve(to: CGPoint(x: 7.567, y: 12.824), control1: CGPoint(x: 7.207, y: 13), control2: CGPoint(x: 7.396, y: 12.941))
        p.addCurve(to: CGPoint(x: 7.941, y: 12.744), control1: CGPoint(x: 7.68, y: 12.746), control2: CGPoint(x: 7.805, y: 12.719))
        p.addCurve(to: CGPoint(x: 8.262, y: 12.953), control1: CGPoint(x: 8.077, y: 12.769), control2: CGPoint(x: 8.184, y: 12.839))
        p.addCurve(to: CGPoint(x: 8.345, y: 13.328), control1: CGPoint(x: 8.342, y: 13.069), control2: CGPoint(x: 8.369, y: 13.194))
        p.addCurve(to: CGPoint(x: 8.133, y: 13.648), control1: CGPoint(x: 8.32, y: 13.461), control2: CGPoint(x: 8.249, y: 13.568))
        p.addCurve(to: CGPoint(x: 7, y: 14), control1: CGPoint(x: 7.792, y: 13.883), control2: CGPoint(x: 7.414, y: 14))
        p.addLine(to: CGPoint(x: 3, y: 14))
        p.addCurve(to: CGPoint(x: 2.264, y: 13.86), control1: CGPoint(x: 2.746, y: 14), control2: CGPoint(x: 2.5, y: 13.953))
        p.addCurve(to: CGPoint(x: 1.586, y: 13.414), control1: CGPoint(x: 2.007, y: 13.758), control2: CGPoint(x: 1.781, y: 13.609))
        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: 5.707, y: 10.293))
        p.addCurve(to: CGPoint(x: 6, y: 11), control1: CGPoint(x: 5.902, y: 10.488), control2: CGPoint(x: 6, y: 10.724))
        p.addCurve(to: CGPoint(x: 5.707, y: 11.707), control1: CGPoint(x: 6, y: 11.276), control2: CGPoint(x: 5.902, y: 11.512))
        p.addCurve(to: CGPoint(x: 5, y: 12), control1: CGPoint(x: 5.512, y: 11.902), control2: CGPoint(x: 5.276, y: 12))
        p.addCurve(to: CGPoint(x: 4.293, y: 11.707), control1: CGPoint(x: 4.724, y: 12), control2: CGPoint(x: 4.488, y: 11.902))
        p.addCurve(to: CGPoint(x: 4, y: 11), control1: CGPoint(x: 4.098, y: 11.512), control2: CGPoint(x: 4, y: 11.276))
        p.addCurve(to: CGPoint(x: 4.293, y: 10.293), control1: CGPoint(x: 4, y: 10.724), control2: CGPoint(x: 4.098, y: 10.488))
        p.addCurve(to: CGPoint(x: 5, y: 10), control1: CGPoint(x: 4.488, y: 10.098), control2: CGPoint(x: 4.724, y: 10))
        p.addCurve(to: CGPoint(x: 5.707, y: 10.293), control1: CGPoint(x: 5.276, y: 10), control2: CGPoint(x: 5.512, y: 10.098))
        p.closeSubpath()
        return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
    }
}

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

### Compose

```kotlin
// Gentleface "smartphone-sparkle" (line-round), MIT. https://gentleface.com/icons/smartphone-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 SmartphoneSparkleIcon: ImageVector by lazy {
    ImageVector.Builder(
        name = "smartphone-sparkle", defaultWidth = 16.dp, defaultHeight = 16.dp,
        viewportWidth = 16f, viewportHeight = 16f,
    ).addPath(
        pathData = addPathNodes("M1.586 13.414C1.391 13.219 1.242 12.993 1.14 12.736C1.047 12.5 1 12.254 1 12L1 2C1 1.746 1.047 1.5 1.14 1.264C1.242 1.007 1.391 0.781 1.586 0.586C1.781 0.391 2.007 0.242 2.264 0.14C2.5 0.047 2.746 0 3 0L7 0C7.254 0 7.5 0.047 7.736 0.14C7.993 0.242 8.219 0.391 8.414 0.586C8.609 0.781 8.758 1.007 8.86 1.264C8.953 1.5 9 1.746 9 2L9 9.5C9 9.641 8.952 9.759 8.856 9.856C8.759 9.952 8.641 10 8.5 10C8.359 10 8.241 9.952 8.144 9.856C8.048 9.759 8 9.641 8 9.5L8 2C8 1.724 7.902 1.488 7.707 1.293C7.512 1.098 7.276 1 7 1L3 1C2.724 1 2.488 1.098 2.293 1.293C2.098 1.488 2 1.724 2 2L2 12C2 12.276 2.098 12.512 2.293 12.707C2.488 12.902 2.724 13 3 13L7 13C7.207 13 7.396 12.941 7.567 12.824C7.68 12.746 7.805 12.719 7.941 12.744C8.077 12.769 8.184 12.839 8.262 12.953C8.342 13.069 8.369 13.194 8.345 13.328C8.32 13.461 8.249 13.568 8.133 13.648C7.792 13.883 7.414 14 7 14L3 14C2.746 14 2.5 13.953 2.264 13.86C2.007 13.758 1.781 13.609 1.586 13.414ZM11.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 16ZM5.707 10.293C5.902 10.488 6 10.724 6 11C6 11.276 5.902 11.512 5.707 11.707C5.512 11.902 5.276 12 5 12C4.724 12 4.488 11.902 4.293 11.707C4.098 11.512 4 11.276 4 11C4 10.724 4.098 10.488 4.293 10.293C4.488 10.098 4.724 10 5 10C5.276 10 5.512 10.098 5.707 10.293Z"),
        fill = SolidColor(Color.Black),
    ).build()
}

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

### Android XML

```xml
<!-- res/drawable/ic_smartphone_sparkle.xml · Gentleface "smartphone-sparkle" (line-round), MIT. https://gentleface.com/icons/smartphone-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="M1.586 13.414C1.391 13.219 1.242 12.993 1.14 12.736C1.047 12.5 1 12.254 1 12L1 2C1 1.746 1.047 1.5 1.14 1.264C1.242 1.007 1.391 0.781 1.586 0.586C1.781 0.391 2.007 0.242 2.264 0.14C2.5 0.047 2.746 0 3 0L7 0C7.254 0 7.5 0.047 7.736 0.14C7.993 0.242 8.219 0.391 8.414 0.586C8.609 0.781 8.758 1.007 8.86 1.264C8.953 1.5 9 1.746 9 2L9 9.5C9 9.641 8.952 9.759 8.856 9.856C8.759 9.952 8.641 10 8.5 10C8.359 10 8.241 9.952 8.144 9.856C8.048 9.759 8 9.641 8 9.5L8 2C8 1.724 7.902 1.488 7.707 1.293C7.512 1.098 7.276 1 7 1L3 1C2.724 1 2.488 1.098 2.293 1.293C2.098 1.488 2 1.724 2 2L2 12C2 12.276 2.098 12.512 2.293 12.707C2.488 12.902 2.724 13 3 13L7 13C7.207 13 7.396 12.941 7.567 12.824C7.68 12.746 7.805 12.719 7.941 12.744C8.077 12.769 8.184 12.839 8.262 12.953C8.342 13.069 8.369 13.194 8.345 13.328C8.32 13.461 8.249 13.568 8.133 13.648C7.792 13.883 7.414 14 7 14L3 14C2.746 14 2.5 13.953 2.264 13.86C2.007 13.758 1.781 13.609 1.586 13.414ZM11.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 16ZM5.707 10.293C5.902 10.488 6 10.724 6 11C6 11.276 5.902 11.512 5.707 11.707C5.512 11.902 5.276 12 5 12C4.724 12 4.488 11.902 4.293 11.707C4.098 11.512 4 11.276 4 11C4 10.724 4.098 10.488 4.293 10.293C4.488 10.098 4.724 10 5 10C5.276 10 5.512 10.098 5.707 10.293Z"/>
</vector>
```

### Flutter

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

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

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

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

  @override
  void paint(Canvas canvas, Size size) {
    canvas.scale(size.width / 16, size.height / 16);
    final p = Path()
      ..moveTo(1.586, 13.414)
      ..cubicTo(1.391, 13.219, 1.242, 12.993, 1.14, 12.736)
      ..cubicTo(1.047, 12.5, 1, 12.254, 1, 12)
      ..lineTo(1, 2)
      ..cubicTo(1, 1.746, 1.047, 1.5, 1.14, 1.264)
      ..cubicTo(1.242, 1.007, 1.391, 0.781, 1.586, 0.586)
      ..cubicTo(1.781, 0.391, 2.007, 0.242, 2.264, 0.14)
      ..cubicTo(2.5, 0.047, 2.746, 0, 3, 0)
      ..lineTo(7, 0)
      ..cubicTo(7.254, 0, 7.5, 0.047, 7.736, 0.14)
      ..cubicTo(7.993, 0.242, 8.219, 0.391, 8.414, 0.586)
      ..cubicTo(8.609, 0.781, 8.758, 1.007, 8.86, 1.264)
      ..cubicTo(8.953, 1.5, 9, 1.746, 9, 2)
      ..lineTo(9, 9.5)
      ..cubicTo(9, 9.641, 8.952, 9.759, 8.856, 9.856)
      ..cubicTo(8.759, 9.952, 8.641, 10, 8.5, 10)
      ..cubicTo(8.359, 10, 8.241, 9.952, 8.144, 9.856)
      ..cubicTo(8.048, 9.759, 8, 9.641, 8, 9.5)
      ..lineTo(8, 2)
      ..cubicTo(8, 1.724, 7.902, 1.488, 7.707, 1.293)
      ..cubicTo(7.512, 1.098, 7.276, 1, 7, 1)
      ..lineTo(3, 1)
      ..cubicTo(2.724, 1, 2.488, 1.098, 2.293, 1.293)
      ..cubicTo(2.098, 1.488, 2, 1.724, 2, 2)
      ..lineTo(2, 12)
      ..cubicTo(2, 12.276, 2.098, 12.512, 2.293, 12.707)
      ..cubicTo(2.488, 12.902, 2.724, 13, 3, 13)
      ..lineTo(7, 13)
      ..cubicTo(7.207, 13, 7.396, 12.941, 7.567, 12.824)
      ..cubicTo(7.68, 12.746, 7.805, 12.719, 7.941, 12.744)
      ..cubicTo(8.077, 12.769, 8.184, 12.839, 8.262, 12.953)
      ..cubicTo(8.342, 13.069, 8.369, 13.194, 8.345, 13.328)
      ..cubicTo(8.32, 13.461, 8.249, 13.568, 8.133, 13.648)
      ..cubicTo(7.792, 13.883, 7.414, 14, 7, 14)
      ..lineTo(3, 14)
      ..cubicTo(2.746, 14, 2.5, 13.953, 2.264, 13.86)
      ..cubicTo(2.007, 13.758, 1.781, 13.609, 1.586, 13.414)
      ..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(5.707, 10.293)
      ..cubicTo(5.902, 10.488, 6, 10.724, 6, 11)
      ..cubicTo(6, 11.276, 5.902, 11.512, 5.707, 11.707)
      ..cubicTo(5.512, 11.902, 5.276, 12, 5, 12)
      ..cubicTo(4.724, 12, 4.488, 11.902, 4.293, 11.707)
      ..cubicTo(4.098, 11.512, 4, 11.276, 4, 11)
      ..cubicTo(4, 10.724, 4.098, 10.488, 4.293, 10.293)
      ..cubicTo(4.488, 10.098, 4.724, 10, 5, 10)
      ..cubicTo(5.276, 10, 5.512, 10.098, 5.707, 10.293)
      ..close();
    canvas.drawPath(p, Paint()..color = color);
  }

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