# wave-sine icon

Wave sine. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/wave-sine

- Category: Audio & video
- Use it for: sine wave, sine
- Tags: sine-wave, sine, wave, waveform, signal, oscillator, synth, frequency, analog
- Component name: WaveSineIcon
- Added: 2026-11-06
- Since: version 0.4.0
- npm: `import { WaveSineIcon } from '@gentleface/react';` (@gentleface/react 0.6.0)

## Alternatives

- `waveform`: a recorded audio waveform (audio-waveform)

## Also fits

- audio waveform: a pure sine wave in a synth (sine-wave)

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

The SVG of every style: https://gentleface.com/icons/wave-sine.json (`svg`).

## Animated

`wave-sine-vibrate`: The wave is pulled a little higher and let go. It vibrates like a plucked string in its second harmonic, crest and trough trading places across the still middle point, and stops on its drawn shape.

File: https://gentleface.com/motion/wave-sine-vibrate.svg (line-round, 16 px). Native SVG animation that loops by itself. To play it once, run 0.3 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="M1.5 7.5L2.5 7.5L3.552 3.609C3.729 2.954 4.322 2.5 5 2.5C5.678 2.5 6.271 2.954 6.448 3.609L8.552 11.391C8.729 12.046 9.322 12.5 10 12.5C10.678 12.5 11.271 12.046 11.448 11.391L12.5 7.5L13.5 7.5"><animate attributeName="d" dur="2.6s" repeatCount="indefinite" keyTimes="0;0.115;0.192;0.288;0.385;0.481;0.577;1" values="M1.5 7.5L2.5 7.5L3.552 3.609C3.729 2.954 4.322 2.5 5 2.5C5.678 2.5 6.271 2.954 6.448 3.609L8.552 11.391C8.729 12.046 9.322 12.5 10 12.5C10.678 12.5 11.271 12.046 11.448 11.391L12.5 7.5L13.5 7.5;M1.5 7.5L2.5 7.5L3.552 3.609C3.729 2.954 4.322 2.5 5 2.5C5.678 2.5 6.271 2.954 6.448 3.609L8.552 11.391C8.729 12.046 9.322 12.5 10 12.5C10.678 12.5 11.271 12.046 11.448 11.391L12.5 7.5L13.5 7.5;M1.5 7.5L2.5 7.5L3.552 3.025C3.729 2.272 4.322 1.75 5 1.75C5.678 1.75 6.271 2.272 6.448 3.025L8.552 11.975C8.729 12.728 9.322 13.25 10 13.25C10.678 13.25 11.271 12.728 11.448 11.975L12.5 7.5L13.5 7.5;M1.5 7.5L2.5 7.5L3.552 11.78C3.729 12.501 4.322 13 5 13C5.678 13 6.271 12.501 6.448 11.78L8.552 3.22C8.729 2.499 9.322 2 10 2C10.678 2 11.271 2.499 11.448 3.22L12.5 7.5L13.5 7.5;M1.5 7.5L2.5 7.5L3.552 3.414C3.729 2.727 4.322 2.25 5 2.25C5.678 2.25 6.271 2.727 6.448 3.414L8.552 11.586C8.729 12.273 9.322 12.75 10 12.75C10.678 12.75 11.271 12.273 11.448 11.586L12.5 7.5L13.5 7.5;M1.5 7.5L2.5 7.5L3.552 11.391C3.729 12.046 4.322 12.5 5 12.5C5.678 12.5 6.271 12.046 6.448 11.391L8.552 3.609C8.729 2.954 9.322 2.5 10 2.5C10.678 2.5 11.271 2.954 11.448 3.609L12.5 7.5L13.5 7.5;M1.5 7.5L2.5 7.5L3.552 3.609C3.729 2.954 4.322 2.5 5 2.5C5.678 2.5 6.271 2.954 6.448 3.609L8.552 11.391C8.729 12.046 9.322 12.5 10 12.5C10.678 12.5 11.271 12.046 11.448 11.391L12.5 7.5L13.5 7.5;M1.5 7.5L2.5 7.5L3.552 3.609C3.729 2.954 4.322 2.5 5 2.5C5.678 2.5 6.271 2.954 6.448 3.609L8.552 11.391C8.729 12.046 9.322 12.5 10 12.5C10.678 12.5 11.271 12.046 11.448 11.391L12.5 7.5L13.5 7.5" calcMode="spline" keySplines="0 0 1 1;.37 0 .63 1;.37 0 .63 1;.37 0 .63 1;.37 0 .63 1;.37 0 .63 1;0 0 1 1"/></path></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="M3.069 3.478C3.187 3.042 3.426 2.687 3.784 2.412C4.143 2.137 4.548 2 5 2C5.452 2 5.857 2.137 6.216 2.412C6.574 2.687 6.813 3.042 6.931 3.478L9.035 11.261C9.094 11.479 9.213 11.657 9.392 11.794C9.571 11.931 9.774 12 10 12C10.226 12 10.429 11.931 10.608 11.794C10.787 11.657 10.906 11.479 10.965 11.261L12.017 7.37C12.047 7.259 12.106 7.17 12.195 7.102C12.284 7.034 12.386 7 12.5 7L13.5 7C13.641 7 13.759 7.048 13.856 7.144C13.952 7.241 14 7.359 14 7.5C14 7.641 13.952 7.759 13.856 7.856C13.759 7.952 13.641 8 13.5 8L12.883 8L11.931 11.522C11.813 11.958 11.574 12.313 11.216 12.588C10.857 12.863 10.452 13 10 13C9.548 13 9.143 12.863 8.784 12.588C8.426 12.313 8.187 11.958 8.069 11.522L5.965 3.739C5.906 3.521 5.787 3.343 5.608 3.206C5.429 3.069 5.226 3 5 3C4.774 3 4.571 3.069 4.392 3.206C4.213 3.343 4.094 3.521 4.035 3.739L2.983 7.63C2.953 7.741 2.894 7.83 2.805 7.898C2.716 7.966 2.614 8 2.5 8L1.5 8C1.359 8 1.241 7.952 1.144 7.856C1.048 7.759 1 7.641 1 7.5C1 7.359 1.048 7.241 1.144 7.144C1.241 7.048 1.359 7 1.5 7L2.117 7L3.069 3.478Z"/></svg>
```

### React

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

export function WaveSineIcon(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="M3.069 3.478C3.187 3.042 3.426 2.687 3.784 2.412C4.143 2.137 4.548 2 5 2C5.452 2 5.857 2.137 6.216 2.412C6.574 2.687 6.813 3.042 6.931 3.478L9.035 11.261C9.094 11.479 9.213 11.657 9.392 11.794C9.571 11.931 9.774 12 10 12C10.226 12 10.429 11.931 10.608 11.794C10.787 11.657 10.906 11.479 10.965 11.261L12.017 7.37C12.047 7.259 12.106 7.17 12.195 7.102C12.284 7.034 12.386 7 12.5 7L13.5 7C13.641 7 13.759 7.048 13.856 7.144C13.952 7.241 14 7.359 14 7.5C14 7.641 13.952 7.759 13.856 7.856C13.759 7.952 13.641 8 13.5 8L12.883 8L11.931 11.522C11.813 11.958 11.574 12.313 11.216 12.588C10.857 12.863 10.452 13 10 13C9.548 13 9.143 12.863 8.784 12.588C8.426 12.313 8.187 11.958 8.069 11.522L5.965 3.739C5.906 3.521 5.787 3.343 5.608 3.206C5.429 3.069 5.226 3 5 3C4.774 3 4.571 3.069 4.392 3.206C4.213 3.343 4.094 3.521 4.035 3.739L2.983 7.63C2.953 7.741 2.894 7.83 2.805 7.898C2.716 7.966 2.614 8 2.5 8L1.5 8C1.359 8 1.241 7.952 1.144 7.856C1.048 7.759 1 7.641 1 7.5C1 7.359 1.048 7.241 1.144 7.144C1.241 7.048 1.359 7 1.5 7L2.117 7L3.069 3.478Z" />
    </svg>
  );
}
```

### Vue

```vue
<!-- Gentleface "wave-sine" (line-round), MIT. https://gentleface.com/icons/wave-sine -->
<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="M3.069 3.478C3.187 3.042 3.426 2.687 3.784 2.412C4.143 2.137 4.548 2 5 2C5.452 2 5.857 2.137 6.216 2.412C6.574 2.687 6.813 3.042 6.931 3.478L9.035 11.261C9.094 11.479 9.213 11.657 9.392 11.794C9.571 11.931 9.774 12 10 12C10.226 12 10.429 11.931 10.608 11.794C10.787 11.657 10.906 11.479 10.965 11.261L12.017 7.37C12.047 7.259 12.106 7.17 12.195 7.102C12.284 7.034 12.386 7 12.5 7L13.5 7C13.641 7 13.759 7.048 13.856 7.144C13.952 7.241 14 7.359 14 7.5C14 7.641 13.952 7.759 13.856 7.856C13.759 7.952 13.641 8 13.5 8L12.883 8L11.931 11.522C11.813 11.958 11.574 12.313 11.216 12.588C10.857 12.863 10.452 13 10 13C9.548 13 9.143 12.863 8.784 12.588C8.426 12.313 8.187 11.958 8.069 11.522L5.965 3.739C5.906 3.521 5.787 3.343 5.608 3.206C5.429 3.069 5.226 3 5 3C4.774 3 4.571 3.069 4.392 3.206C4.213 3.343 4.094 3.521 4.035 3.739L2.983 7.63C2.953 7.741 2.894 7.83 2.805 7.898C2.716 7.966 2.614 8 2.5 8L1.5 8C1.359 8 1.241 7.952 1.144 7.856C1.048 7.759 1 7.641 1 7.5C1 7.359 1.048 7.241 1.144 7.144C1.241 7.048 1.359 7 1.5 7L2.117 7L3.069 3.478Z" />
  </svg>
</template>
```

### Svelte

```svelte
<!-- Gentleface "wave-sine" (line-round), MIT. https://gentleface.com/icons/wave-sine -->
<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="M3.069 3.478C3.187 3.042 3.426 2.687 3.784 2.412C4.143 2.137 4.548 2 5 2C5.452 2 5.857 2.137 6.216 2.412C6.574 2.687 6.813 3.042 6.931 3.478L9.035 11.261C9.094 11.479 9.213 11.657 9.392 11.794C9.571 11.931 9.774 12 10 12C10.226 12 10.429 11.931 10.608 11.794C10.787 11.657 10.906 11.479 10.965 11.261L12.017 7.37C12.047 7.259 12.106 7.17 12.195 7.102C12.284 7.034 12.386 7 12.5 7L13.5 7C13.641 7 13.759 7.048 13.856 7.144C13.952 7.241 14 7.359 14 7.5C14 7.641 13.952 7.759 13.856 7.856C13.759 7.952 13.641 8 13.5 8L12.883 8L11.931 11.522C11.813 11.958 11.574 12.313 11.216 12.588C10.857 12.863 10.452 13 10 13C9.548 13 9.143 12.863 8.784 12.588C8.426 12.313 8.187 11.958 8.069 11.522L5.965 3.739C5.906 3.521 5.787 3.343 5.608 3.206C5.429 3.069 5.226 3 5 3C4.774 3 4.571 3.069 4.392 3.206C4.213 3.343 4.094 3.521 4.035 3.739L2.983 7.63C2.953 7.741 2.894 7.83 2.805 7.898C2.716 7.966 2.614 8 2.5 8L1.5 8C1.359 8 1.241 7.952 1.144 7.856C1.048 7.759 1 7.641 1 7.5C1 7.359 1.048 7.241 1.144 7.144C1.241 7.048 1.359 7 1.5 7L2.117 7L3.069 3.478Z" />
</svg>
```

### HTML img

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

### CSS

```css
/* Gentleface "wave-sine" (line-round), MIT. https://gentleface.com/icons/wave-sine. Takes the text color. */
.icon-wave-sine {
  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='M3.069 3.478C3.187 3.042 3.426 2.687 3.784 2.412C4.143 2.137 4.548 2 5 2C5.452 2 5.857 2.137 6.216 2.412C6.574 2.687 6.813 3.042 6.931 3.478L9.035 11.261C9.094 11.479 9.213 11.657 9.392 11.794C9.571 11.931 9.774 12 10 12C10.226 12 10.429 11.931 10.608 11.794C10.787 11.657 10.906 11.479 10.965 11.261L12.017 7.37C12.047 7.259 12.106 7.17 12.195 7.102C12.284 7.034 12.386 7 12.5 7L13.5 7C13.641 7 13.759 7.048 13.856 7.144C13.952 7.241 14 7.359 14 7.5C14 7.641 13.952 7.759 13.856 7.856C13.759 7.952 13.641 8 13.5 8L12.883 8L11.931 11.522C11.813 11.958 11.574 12.313 11.216 12.588C10.857 12.863 10.452 13 10 13C9.548 13 9.143 12.863 8.784 12.588C8.426 12.313 8.187 11.958 8.069 11.522L5.965 3.739C5.906 3.521 5.787 3.343 5.608 3.206C5.429 3.069 5.226 3 5 3C4.774 3 4.571 3.069 4.392 3.206C4.213 3.343 4.094 3.521 4.035 3.739L2.983 7.63C2.953 7.741 2.894 7.83 2.805 7.898C2.716 7.966 2.614 8 2.5 8L1.5 8C1.359 8 1.241 7.952 1.144 7.856C1.048 7.759 1 7.641 1 7.5C1 7.359 1.048 7.241 1.144 7.144C1.241 7.048 1.359 7 1.5 7L2.117 7L3.069 3.478Z'/%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='M3.069 3.478C3.187 3.042 3.426 2.687 3.784 2.412C4.143 2.137 4.548 2 5 2C5.452 2 5.857 2.137 6.216 2.412C6.574 2.687 6.813 3.042 6.931 3.478L9.035 11.261C9.094 11.479 9.213 11.657 9.392 11.794C9.571 11.931 9.774 12 10 12C10.226 12 10.429 11.931 10.608 11.794C10.787 11.657 10.906 11.479 10.965 11.261L12.017 7.37C12.047 7.259 12.106 7.17 12.195 7.102C12.284 7.034 12.386 7 12.5 7L13.5 7C13.641 7 13.759 7.048 13.856 7.144C13.952 7.241 14 7.359 14 7.5C14 7.641 13.952 7.759 13.856 7.856C13.759 7.952 13.641 8 13.5 8L12.883 8L11.931 11.522C11.813 11.958 11.574 12.313 11.216 12.588C10.857 12.863 10.452 13 10 13C9.548 13 9.143 12.863 8.784 12.588C8.426 12.313 8.187 11.958 8.069 11.522L5.965 3.739C5.906 3.521 5.787 3.343 5.608 3.206C5.429 3.069 5.226 3 5 3C4.774 3 4.571 3.069 4.392 3.206C4.213 3.343 4.094 3.521 4.035 3.739L2.983 7.63C2.953 7.741 2.894 7.83 2.805 7.898C2.716 7.966 2.614 8 2.5 8L1.5 8C1.359 8 1.241 7.952 1.144 7.856C1.048 7.759 1 7.641 1 7.5C1 7.359 1.048 7.241 1.144 7.144C1.241 7.048 1.359 7 1.5 7L2.117 7L3.069 3.478Z'/%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='M3.069 3.478C3.187 3.042 3.426 2.687 3.784 2.412C4.143 2.137 4.548 2 5 2C5.452 2 5.857 2.137 6.216 2.412C6.574 2.687 6.813 3.042 6.931 3.478L9.035 11.261C9.094 11.479 9.213 11.657 9.392 11.794C9.571 11.931 9.774 12 10 12C10.226 12 10.429 11.931 10.608 11.794C10.787 11.657 10.906 11.479 10.965 11.261L12.017 7.37C12.047 7.259 12.106 7.17 12.195 7.102C12.284 7.034 12.386 7 12.5 7L13.5 7C13.641 7 13.759 7.048 13.856 7.144C13.952 7.241 14 7.359 14 7.5C14 7.641 13.952 7.759 13.856 7.856C13.759 7.952 13.641 8 13.5 8L12.883 8L11.931 11.522C11.813 11.958 11.574 12.313 11.216 12.588C10.857 12.863 10.452 13 10 13C9.548 13 9.143 12.863 8.784 12.588C8.426 12.313 8.187 11.958 8.069 11.522L5.965 3.739C5.906 3.521 5.787 3.343 5.608 3.206C5.429 3.069 5.226 3 5 3C4.774 3 4.571 3.069 4.392 3.206C4.213 3.343 4.094 3.521 4.035 3.739L2.983 7.63C2.953 7.741 2.894 7.83 2.805 7.898C2.716 7.966 2.614 8 2.5 8L1.5 8C1.359 8 1.241 7.952 1.144 7.856C1.048 7.759 1 7.641 1 7.5C1 7.359 1.048 7.241 1.144 7.144C1.241 7.048 1.359 7 1.5 7L2.117 7L3.069 3.478Z'/%3E%3C/svg%3E
```

### Sprite

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

### SwiftUI

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

struct WaveSineIcon: Shape {
    func path(in rect: CGRect) -> Path {
        var p = Path()
        p.move(to: CGPoint(x: 3.069, y: 3.478))
        p.addCurve(to: CGPoint(x: 3.784, y: 2.412), control1: CGPoint(x: 3.187, y: 3.042), control2: CGPoint(x: 3.426, y: 2.687))
        p.addCurve(to: CGPoint(x: 5, y: 2), control1: CGPoint(x: 4.143, y: 2.137), control2: CGPoint(x: 4.548, y: 2))
        p.addCurve(to: CGPoint(x: 6.216, y: 2.412), control1: CGPoint(x: 5.452, y: 2), control2: CGPoint(x: 5.857, y: 2.137))
        p.addCurve(to: CGPoint(x: 6.931, y: 3.478), control1: CGPoint(x: 6.574, y: 2.687), control2: CGPoint(x: 6.813, y: 3.042))
        p.addLine(to: CGPoint(x: 9.035, y: 11.261))
        p.addCurve(to: CGPoint(x: 9.392, y: 11.794), control1: CGPoint(x: 9.094, y: 11.479), control2: CGPoint(x: 9.213, y: 11.657))
        p.addCurve(to: CGPoint(x: 10, y: 12), control1: CGPoint(x: 9.571, y: 11.931), control2: CGPoint(x: 9.774, y: 12))
        p.addCurve(to: CGPoint(x: 10.608, y: 11.794), control1: CGPoint(x: 10.226, y: 12), control2: CGPoint(x: 10.429, y: 11.931))
        p.addCurve(to: CGPoint(x: 10.965, y: 11.261), control1: CGPoint(x: 10.787, y: 11.657), control2: CGPoint(x: 10.906, y: 11.479))
        p.addLine(to: CGPoint(x: 12.017, y: 7.37))
        p.addCurve(to: CGPoint(x: 12.195, y: 7.102), control1: CGPoint(x: 12.047, y: 7.259), control2: CGPoint(x: 12.106, y: 7.17))
        p.addCurve(to: CGPoint(x: 12.5, y: 7), control1: CGPoint(x: 12.284, y: 7.034), control2: CGPoint(x: 12.386, y: 7))
        p.addLine(to: CGPoint(x: 13.5, y: 7))
        p.addCurve(to: CGPoint(x: 13.856, y: 7.144), control1: CGPoint(x: 13.641, y: 7), control2: CGPoint(x: 13.759, y: 7.048))
        p.addCurve(to: CGPoint(x: 14, y: 7.5), control1: CGPoint(x: 13.952, y: 7.241), control2: CGPoint(x: 14, y: 7.359))
        p.addCurve(to: CGPoint(x: 13.856, y: 7.856), control1: CGPoint(x: 14, y: 7.641), control2: CGPoint(x: 13.952, y: 7.759))
        p.addCurve(to: CGPoint(x: 13.5, y: 8), control1: CGPoint(x: 13.759, y: 7.952), control2: CGPoint(x: 13.641, y: 8))
        p.addLine(to: CGPoint(x: 12.883, y: 8))
        p.addLine(to: CGPoint(x: 11.931, y: 11.522))
        p.addCurve(to: CGPoint(x: 11.216, y: 12.588), control1: CGPoint(x: 11.813, y: 11.958), control2: CGPoint(x: 11.574, y: 12.313))
        p.addCurve(to: CGPoint(x: 10, y: 13), control1: CGPoint(x: 10.857, y: 12.863), control2: CGPoint(x: 10.452, y: 13))
        p.addCurve(to: CGPoint(x: 8.784, y: 12.588), control1: CGPoint(x: 9.548, y: 13), control2: CGPoint(x: 9.143, y: 12.863))
        p.addCurve(to: CGPoint(x: 8.069, y: 11.522), control1: CGPoint(x: 8.426, y: 12.313), control2: CGPoint(x: 8.187, y: 11.958))
        p.addLine(to: CGPoint(x: 5.965, y: 3.739))
        p.addCurve(to: CGPoint(x: 5.608, y: 3.206), control1: CGPoint(x: 5.906, y: 3.521), control2: CGPoint(x: 5.787, y: 3.343))
        p.addCurve(to: CGPoint(x: 5, y: 3), control1: CGPoint(x: 5.429, y: 3.069), control2: CGPoint(x: 5.226, y: 3))
        p.addCurve(to: CGPoint(x: 4.392, y: 3.206), control1: CGPoint(x: 4.774, y: 3), control2: CGPoint(x: 4.571, y: 3.069))
        p.addCurve(to: CGPoint(x: 4.035, y: 3.739), control1: CGPoint(x: 4.213, y: 3.343), control2: CGPoint(x: 4.094, y: 3.521))
        p.addLine(to: CGPoint(x: 2.983, y: 7.63))
        p.addCurve(to: CGPoint(x: 2.805, y: 7.898), control1: CGPoint(x: 2.953, y: 7.741), control2: CGPoint(x: 2.894, y: 7.83))
        p.addCurve(to: CGPoint(x: 2.5, y: 8), control1: CGPoint(x: 2.716, y: 7.966), control2: CGPoint(x: 2.614, y: 8))
        p.addLine(to: CGPoint(x: 1.5, y: 8))
        p.addCurve(to: CGPoint(x: 1.144, y: 7.856), control1: CGPoint(x: 1.359, y: 8), control2: CGPoint(x: 1.241, y: 7.952))
        p.addCurve(to: CGPoint(x: 1, y: 7.5), control1: CGPoint(x: 1.048, y: 7.759), control2: CGPoint(x: 1, y: 7.641))
        p.addCurve(to: CGPoint(x: 1.144, y: 7.144), control1: CGPoint(x: 1, y: 7.359), control2: CGPoint(x: 1.048, y: 7.241))
        p.addCurve(to: CGPoint(x: 1.5, y: 7), control1: CGPoint(x: 1.241, y: 7.048), control2: CGPoint(x: 1.359, y: 7))
        p.addLine(to: CGPoint(x: 2.117, y: 7))
        p.addLine(to: CGPoint(x: 3.069, y: 3.478))
        p.closeSubpath()
        return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
    }
}

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

### Compose

```kotlin
// Gentleface "wave-sine" (line-round), MIT. https://gentleface.com/icons/wave-sine
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 WaveSineIcon: ImageVector by lazy {
    ImageVector.Builder(
        name = "wave-sine", defaultWidth = 16.dp, defaultHeight = 16.dp,
        viewportWidth = 16f, viewportHeight = 16f,
    ).addPath(
        pathData = addPathNodes("M3.069 3.478C3.187 3.042 3.426 2.687 3.784 2.412C4.143 2.137 4.548 2 5 2C5.452 2 5.857 2.137 6.216 2.412C6.574 2.687 6.813 3.042 6.931 3.478L9.035 11.261C9.094 11.479 9.213 11.657 9.392 11.794C9.571 11.931 9.774 12 10 12C10.226 12 10.429 11.931 10.608 11.794C10.787 11.657 10.906 11.479 10.965 11.261L12.017 7.37C12.047 7.259 12.106 7.17 12.195 7.102C12.284 7.034 12.386 7 12.5 7L13.5 7C13.641 7 13.759 7.048 13.856 7.144C13.952 7.241 14 7.359 14 7.5C14 7.641 13.952 7.759 13.856 7.856C13.759 7.952 13.641 8 13.5 8L12.883 8L11.931 11.522C11.813 11.958 11.574 12.313 11.216 12.588C10.857 12.863 10.452 13 10 13C9.548 13 9.143 12.863 8.784 12.588C8.426 12.313 8.187 11.958 8.069 11.522L5.965 3.739C5.906 3.521 5.787 3.343 5.608 3.206C5.429 3.069 5.226 3 5 3C4.774 3 4.571 3.069 4.392 3.206C4.213 3.343 4.094 3.521 4.035 3.739L2.983 7.63C2.953 7.741 2.894 7.83 2.805 7.898C2.716 7.966 2.614 8 2.5 8L1.5 8C1.359 8 1.241 7.952 1.144 7.856C1.048 7.759 1 7.641 1 7.5C1 7.359 1.048 7.241 1.144 7.144C1.241 7.048 1.359 7 1.5 7L2.117 7L3.069 3.478Z"),
        fill = SolidColor(Color.Black),
    ).build()
}

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

### Android XML

```xml
<!-- res/drawable/ic_wave_sine.xml · Gentleface "wave-sine" (line-round), MIT. https://gentleface.com/icons/wave-sine -->
<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="M3.069 3.478C3.187 3.042 3.426 2.687 3.784 2.412C4.143 2.137 4.548 2 5 2C5.452 2 5.857 2.137 6.216 2.412C6.574 2.687 6.813 3.042 6.931 3.478L9.035 11.261C9.094 11.479 9.213 11.657 9.392 11.794C9.571 11.931 9.774 12 10 12C10.226 12 10.429 11.931 10.608 11.794C10.787 11.657 10.906 11.479 10.965 11.261L12.017 7.37C12.047 7.259 12.106 7.17 12.195 7.102C12.284 7.034 12.386 7 12.5 7L13.5 7C13.641 7 13.759 7.048 13.856 7.144C13.952 7.241 14 7.359 14 7.5C14 7.641 13.952 7.759 13.856 7.856C13.759 7.952 13.641 8 13.5 8L12.883 8L11.931 11.522C11.813 11.958 11.574 12.313 11.216 12.588C10.857 12.863 10.452 13 10 13C9.548 13 9.143 12.863 8.784 12.588C8.426 12.313 8.187 11.958 8.069 11.522L5.965 3.739C5.906 3.521 5.787 3.343 5.608 3.206C5.429 3.069 5.226 3 5 3C4.774 3 4.571 3.069 4.392 3.206C4.213 3.343 4.094 3.521 4.035 3.739L2.983 7.63C2.953 7.741 2.894 7.83 2.805 7.898C2.716 7.966 2.614 8 2.5 8L1.5 8C1.359 8 1.241 7.952 1.144 7.856C1.048 7.759 1 7.641 1 7.5C1 7.359 1.048 7.241 1.144 7.144C1.241 7.048 1.359 7 1.5 7L2.117 7L3.069 3.478Z"/>
</vector>
```

### Flutter

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

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

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

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

  @override
  void paint(Canvas canvas, Size size) {
    canvas.scale(size.width / 16, size.height / 16);
    final p = Path()
      ..moveTo(3.069, 3.478)
      ..cubicTo(3.187, 3.042, 3.426, 2.687, 3.784, 2.412)
      ..cubicTo(4.143, 2.137, 4.548, 2, 5, 2)
      ..cubicTo(5.452, 2, 5.857, 2.137, 6.216, 2.412)
      ..cubicTo(6.574, 2.687, 6.813, 3.042, 6.931, 3.478)
      ..lineTo(9.035, 11.261)
      ..cubicTo(9.094, 11.479, 9.213, 11.657, 9.392, 11.794)
      ..cubicTo(9.571, 11.931, 9.774, 12, 10, 12)
      ..cubicTo(10.226, 12, 10.429, 11.931, 10.608, 11.794)
      ..cubicTo(10.787, 11.657, 10.906, 11.479, 10.965, 11.261)
      ..lineTo(12.017, 7.37)
      ..cubicTo(12.047, 7.259, 12.106, 7.17, 12.195, 7.102)
      ..cubicTo(12.284, 7.034, 12.386, 7, 12.5, 7)
      ..lineTo(13.5, 7)
      ..cubicTo(13.641, 7, 13.759, 7.048, 13.856, 7.144)
      ..cubicTo(13.952, 7.241, 14, 7.359, 14, 7.5)
      ..cubicTo(14, 7.641, 13.952, 7.759, 13.856, 7.856)
      ..cubicTo(13.759, 7.952, 13.641, 8, 13.5, 8)
      ..lineTo(12.883, 8)
      ..lineTo(11.931, 11.522)
      ..cubicTo(11.813, 11.958, 11.574, 12.313, 11.216, 12.588)
      ..cubicTo(10.857, 12.863, 10.452, 13, 10, 13)
      ..cubicTo(9.548, 13, 9.143, 12.863, 8.784, 12.588)
      ..cubicTo(8.426, 12.313, 8.187, 11.958, 8.069, 11.522)
      ..lineTo(5.965, 3.739)
      ..cubicTo(5.906, 3.521, 5.787, 3.343, 5.608, 3.206)
      ..cubicTo(5.429, 3.069, 5.226, 3, 5, 3)
      ..cubicTo(4.774, 3, 4.571, 3.069, 4.392, 3.206)
      ..cubicTo(4.213, 3.343, 4.094, 3.521, 4.035, 3.739)
      ..lineTo(2.983, 7.63)
      ..cubicTo(2.953, 7.741, 2.894, 7.83, 2.805, 7.898)
      ..cubicTo(2.716, 7.966, 2.614, 8, 2.5, 8)
      ..lineTo(1.5, 8)
      ..cubicTo(1.359, 8, 1.241, 7.952, 1.144, 7.856)
      ..cubicTo(1.048, 7.759, 1, 7.641, 1, 7.5)
      ..cubicTo(1, 7.359, 1.048, 7.241, 1.144, 7.144)
      ..cubicTo(1.241, 7.048, 1.359, 7, 1.5, 7)
      ..lineTo(2.117, 7)
      ..lineTo(3.069, 3.478)
      ..close();
    canvas.drawPath(p, Paint()..color = color);
  }

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