# volume-low icon

Volume low. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/volume-low

- Category: Audio & video
- Use it for: low volume, volume down, decrease volume, lower volume, quieter
- Tags: speaker, audio, sound, quiet, low, volume-down
- Family: volume, volume-gear, volume-off
- Component name: VolumeLowIcon
- Added: 2026-10-15

## Don't confuse with

- `volume-off`: mute silences the sound completely (mute)

## Also fits

- volume: turn the volume down (volume-down)

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

The SVG of every style: https://gentleface.com/icons/volume-low.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="M7.5 2C7.638 2 7.756 2.049 7.854 2.146C7.951 2.244 8 2.362 8 2.5L8 13.5C8 13.641 7.952 13.759 7.856 13.856C7.759 13.952 7.641 14 7.5 14C7.362 14 7.244 13.951 7.146 13.854L4.854 11.561C4.674 11.381 4.467 11.243 4.233 11.146C3.998 11.049 3.754 11 3.5 11L3 11C2.746 11 2.5 10.953 2.264 10.86C2.007 10.758 1.781 10.609 1.586 10.414C1.391 10.219 1.242 9.993 1.14 9.736C1.047 9.5 1 9.254 1 9L1 7C1 6.746 1.047 6.5 1.14 6.264C1.242 6.007 1.391 5.781 1.586 5.586C1.781 5.391 2.007 5.242 2.264 5.14C2.5 5.047 2.746 5 3 5L3.5 5C3.754 5 3.998 4.951 4.233 4.854C4.467 4.757 4.674 4.619 4.854 4.439L7.146 2.146C7.244 2.049 7.362 2 7.5 2ZM2.293 9.707C2.488 9.902 2.724 10 3 10L3.5 10C3.886 10 4.258 10.074 4.615 10.222C4.972 10.37 5.287 10.58 5.561 10.854L7 12.293L7 3.707L5.561 5.146C5.287 5.42 4.972 5.63 4.615 5.778C4.258 5.926 3.886 6 3.5 6L3 6C2.724 6 2.488 6.098 2.293 6.293C2.098 6.488 2 6.724 2 7L2 9C2 9.276 2.098 9.512 2.293 9.707ZM10.696 6.469C10.899 6.959 11 7.47 11 8C11 8.53 10.899 9.041 10.696 9.531C10.493 10.021 10.204 10.453 9.828 10.828C9.729 10.928 9.611 10.978 9.475 10.978C9.339 10.978 9.221 10.928 9.121 10.828C9.022 10.729 8.972 10.611 8.972 10.475C8.972 10.339 9.022 10.221 9.121 10.121C9.403 9.84 9.619 9.516 9.772 9.148C9.924 8.781 10 8.398 10 8C10 7.602 9.924 7.219 9.772 6.852C9.619 6.484 9.403 6.16 9.121 5.879C9.022 5.779 8.972 5.661 8.972 5.525C8.972 5.389 9.022 5.271 9.121 5.172C9.219 5.074 9.337 5.025 9.475 5.025C9.613 5.025 9.731 5.074 9.828 5.172C10.204 5.547 10.493 5.979 10.696 6.469Z"/></svg>
```

### React

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

export function VolumeLowIcon(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="M7.5 2C7.638 2 7.756 2.049 7.854 2.146C7.951 2.244 8 2.362 8 2.5L8 13.5C8 13.641 7.952 13.759 7.856 13.856C7.759 13.952 7.641 14 7.5 14C7.362 14 7.244 13.951 7.146 13.854L4.854 11.561C4.674 11.381 4.467 11.243 4.233 11.146C3.998 11.049 3.754 11 3.5 11L3 11C2.746 11 2.5 10.953 2.264 10.86C2.007 10.758 1.781 10.609 1.586 10.414C1.391 10.219 1.242 9.993 1.14 9.736C1.047 9.5 1 9.254 1 9L1 7C1 6.746 1.047 6.5 1.14 6.264C1.242 6.007 1.391 5.781 1.586 5.586C1.781 5.391 2.007 5.242 2.264 5.14C2.5 5.047 2.746 5 3 5L3.5 5C3.754 5 3.998 4.951 4.233 4.854C4.467 4.757 4.674 4.619 4.854 4.439L7.146 2.146C7.244 2.049 7.362 2 7.5 2ZM2.293 9.707C2.488 9.902 2.724 10 3 10L3.5 10C3.886 10 4.258 10.074 4.615 10.222C4.972 10.37 5.287 10.58 5.561 10.854L7 12.293L7 3.707L5.561 5.146C5.287 5.42 4.972 5.63 4.615 5.778C4.258 5.926 3.886 6 3.5 6L3 6C2.724 6 2.488 6.098 2.293 6.293C2.098 6.488 2 6.724 2 7L2 9C2 9.276 2.098 9.512 2.293 9.707ZM10.696 6.469C10.899 6.959 11 7.47 11 8C11 8.53 10.899 9.041 10.696 9.531C10.493 10.021 10.204 10.453 9.828 10.828C9.729 10.928 9.611 10.978 9.475 10.978C9.339 10.978 9.221 10.928 9.121 10.828C9.022 10.729 8.972 10.611 8.972 10.475C8.972 10.339 9.022 10.221 9.121 10.121C9.403 9.84 9.619 9.516 9.772 9.148C9.924 8.781 10 8.398 10 8C10 7.602 9.924 7.219 9.772 6.852C9.619 6.484 9.403 6.16 9.121 5.879C9.022 5.779 8.972 5.661 8.972 5.525C8.972 5.389 9.022 5.271 9.121 5.172C9.219 5.074 9.337 5.025 9.475 5.025C9.613 5.025 9.731 5.074 9.828 5.172C10.204 5.547 10.493 5.979 10.696 6.469Z" />
    </svg>
  );
}
```

### Vue

```vue
<!-- Gentleface "volume-low" (line-round), MIT. https://gentleface.com/icons/volume-low -->
<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="M7.5 2C7.638 2 7.756 2.049 7.854 2.146C7.951 2.244 8 2.362 8 2.5L8 13.5C8 13.641 7.952 13.759 7.856 13.856C7.759 13.952 7.641 14 7.5 14C7.362 14 7.244 13.951 7.146 13.854L4.854 11.561C4.674 11.381 4.467 11.243 4.233 11.146C3.998 11.049 3.754 11 3.5 11L3 11C2.746 11 2.5 10.953 2.264 10.86C2.007 10.758 1.781 10.609 1.586 10.414C1.391 10.219 1.242 9.993 1.14 9.736C1.047 9.5 1 9.254 1 9L1 7C1 6.746 1.047 6.5 1.14 6.264C1.242 6.007 1.391 5.781 1.586 5.586C1.781 5.391 2.007 5.242 2.264 5.14C2.5 5.047 2.746 5 3 5L3.5 5C3.754 5 3.998 4.951 4.233 4.854C4.467 4.757 4.674 4.619 4.854 4.439L7.146 2.146C7.244 2.049 7.362 2 7.5 2ZM2.293 9.707C2.488 9.902 2.724 10 3 10L3.5 10C3.886 10 4.258 10.074 4.615 10.222C4.972 10.37 5.287 10.58 5.561 10.854L7 12.293L7 3.707L5.561 5.146C5.287 5.42 4.972 5.63 4.615 5.778C4.258 5.926 3.886 6 3.5 6L3 6C2.724 6 2.488 6.098 2.293 6.293C2.098 6.488 2 6.724 2 7L2 9C2 9.276 2.098 9.512 2.293 9.707ZM10.696 6.469C10.899 6.959 11 7.47 11 8C11 8.53 10.899 9.041 10.696 9.531C10.493 10.021 10.204 10.453 9.828 10.828C9.729 10.928 9.611 10.978 9.475 10.978C9.339 10.978 9.221 10.928 9.121 10.828C9.022 10.729 8.972 10.611 8.972 10.475C8.972 10.339 9.022 10.221 9.121 10.121C9.403 9.84 9.619 9.516 9.772 9.148C9.924 8.781 10 8.398 10 8C10 7.602 9.924 7.219 9.772 6.852C9.619 6.484 9.403 6.16 9.121 5.879C9.022 5.779 8.972 5.661 8.972 5.525C8.972 5.389 9.022 5.271 9.121 5.172C9.219 5.074 9.337 5.025 9.475 5.025C9.613 5.025 9.731 5.074 9.828 5.172C10.204 5.547 10.493 5.979 10.696 6.469Z" />
  </svg>
</template>
```

### Svelte

```svelte
<!-- Gentleface "volume-low" (line-round), MIT. https://gentleface.com/icons/volume-low -->
<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="M7.5 2C7.638 2 7.756 2.049 7.854 2.146C7.951 2.244 8 2.362 8 2.5L8 13.5C8 13.641 7.952 13.759 7.856 13.856C7.759 13.952 7.641 14 7.5 14C7.362 14 7.244 13.951 7.146 13.854L4.854 11.561C4.674 11.381 4.467 11.243 4.233 11.146C3.998 11.049 3.754 11 3.5 11L3 11C2.746 11 2.5 10.953 2.264 10.86C2.007 10.758 1.781 10.609 1.586 10.414C1.391 10.219 1.242 9.993 1.14 9.736C1.047 9.5 1 9.254 1 9L1 7C1 6.746 1.047 6.5 1.14 6.264C1.242 6.007 1.391 5.781 1.586 5.586C1.781 5.391 2.007 5.242 2.264 5.14C2.5 5.047 2.746 5 3 5L3.5 5C3.754 5 3.998 4.951 4.233 4.854C4.467 4.757 4.674 4.619 4.854 4.439L7.146 2.146C7.244 2.049 7.362 2 7.5 2ZM2.293 9.707C2.488 9.902 2.724 10 3 10L3.5 10C3.886 10 4.258 10.074 4.615 10.222C4.972 10.37 5.287 10.58 5.561 10.854L7 12.293L7 3.707L5.561 5.146C5.287 5.42 4.972 5.63 4.615 5.778C4.258 5.926 3.886 6 3.5 6L3 6C2.724 6 2.488 6.098 2.293 6.293C2.098 6.488 2 6.724 2 7L2 9C2 9.276 2.098 9.512 2.293 9.707ZM10.696 6.469C10.899 6.959 11 7.47 11 8C11 8.53 10.899 9.041 10.696 9.531C10.493 10.021 10.204 10.453 9.828 10.828C9.729 10.928 9.611 10.978 9.475 10.978C9.339 10.978 9.221 10.928 9.121 10.828C9.022 10.729 8.972 10.611 8.972 10.475C8.972 10.339 9.022 10.221 9.121 10.121C9.403 9.84 9.619 9.516 9.772 9.148C9.924 8.781 10 8.398 10 8C10 7.602 9.924 7.219 9.772 6.852C9.619 6.484 9.403 6.16 9.121 5.879C9.022 5.779 8.972 5.661 8.972 5.525C8.972 5.389 9.022 5.271 9.121 5.172C9.219 5.074 9.337 5.025 9.475 5.025C9.613 5.025 9.731 5.074 9.828 5.172C10.204 5.547 10.493 5.979 10.696 6.469Z" />
</svg>
```

### HTML img

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

### CSS

```css
/* Gentleface "volume-low" (line-round), MIT. https://gentleface.com/icons/volume-low. Takes the text color. */
.icon-volume-low {
  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='M7.5 2C7.638 2 7.756 2.049 7.854 2.146C7.951 2.244 8 2.362 8 2.5L8 13.5C8 13.641 7.952 13.759 7.856 13.856C7.759 13.952 7.641 14 7.5 14C7.362 14 7.244 13.951 7.146 13.854L4.854 11.561C4.674 11.381 4.467 11.243 4.233 11.146C3.998 11.049 3.754 11 3.5 11L3 11C2.746 11 2.5 10.953 2.264 10.86C2.007 10.758 1.781 10.609 1.586 10.414C1.391 10.219 1.242 9.993 1.14 9.736C1.047 9.5 1 9.254 1 9L1 7C1 6.746 1.047 6.5 1.14 6.264C1.242 6.007 1.391 5.781 1.586 5.586C1.781 5.391 2.007 5.242 2.264 5.14C2.5 5.047 2.746 5 3 5L3.5 5C3.754 5 3.998 4.951 4.233 4.854C4.467 4.757 4.674 4.619 4.854 4.439L7.146 2.146C7.244 2.049 7.362 2 7.5 2ZM2.293 9.707C2.488 9.902 2.724 10 3 10L3.5 10C3.886 10 4.258 10.074 4.615 10.222C4.972 10.37 5.287 10.58 5.561 10.854L7 12.293L7 3.707L5.561 5.146C5.287 5.42 4.972 5.63 4.615 5.778C4.258 5.926 3.886 6 3.5 6L3 6C2.724 6 2.488 6.098 2.293 6.293C2.098 6.488 2 6.724 2 7L2 9C2 9.276 2.098 9.512 2.293 9.707ZM10.696 6.469C10.899 6.959 11 7.47 11 8C11 8.53 10.899 9.041 10.696 9.531C10.493 10.021 10.204 10.453 9.828 10.828C9.729 10.928 9.611 10.978 9.475 10.978C9.339 10.978 9.221 10.928 9.121 10.828C9.022 10.729 8.972 10.611 8.972 10.475C8.972 10.339 9.022 10.221 9.121 10.121C9.403 9.84 9.619 9.516 9.772 9.148C9.924 8.781 10 8.398 10 8C10 7.602 9.924 7.219 9.772 6.852C9.619 6.484 9.403 6.16 9.121 5.879C9.022 5.779 8.972 5.661 8.972 5.525C8.972 5.389 9.022 5.271 9.121 5.172C9.219 5.074 9.337 5.025 9.475 5.025C9.613 5.025 9.731 5.074 9.828 5.172C10.204 5.547 10.493 5.979 10.696 6.469Z'/%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='M7.5 2C7.638 2 7.756 2.049 7.854 2.146C7.951 2.244 8 2.362 8 2.5L8 13.5C8 13.641 7.952 13.759 7.856 13.856C7.759 13.952 7.641 14 7.5 14C7.362 14 7.244 13.951 7.146 13.854L4.854 11.561C4.674 11.381 4.467 11.243 4.233 11.146C3.998 11.049 3.754 11 3.5 11L3 11C2.746 11 2.5 10.953 2.264 10.86C2.007 10.758 1.781 10.609 1.586 10.414C1.391 10.219 1.242 9.993 1.14 9.736C1.047 9.5 1 9.254 1 9L1 7C1 6.746 1.047 6.5 1.14 6.264C1.242 6.007 1.391 5.781 1.586 5.586C1.781 5.391 2.007 5.242 2.264 5.14C2.5 5.047 2.746 5 3 5L3.5 5C3.754 5 3.998 4.951 4.233 4.854C4.467 4.757 4.674 4.619 4.854 4.439L7.146 2.146C7.244 2.049 7.362 2 7.5 2ZM2.293 9.707C2.488 9.902 2.724 10 3 10L3.5 10C3.886 10 4.258 10.074 4.615 10.222C4.972 10.37 5.287 10.58 5.561 10.854L7 12.293L7 3.707L5.561 5.146C5.287 5.42 4.972 5.63 4.615 5.778C4.258 5.926 3.886 6 3.5 6L3 6C2.724 6 2.488 6.098 2.293 6.293C2.098 6.488 2 6.724 2 7L2 9C2 9.276 2.098 9.512 2.293 9.707ZM10.696 6.469C10.899 6.959 11 7.47 11 8C11 8.53 10.899 9.041 10.696 9.531C10.493 10.021 10.204 10.453 9.828 10.828C9.729 10.928 9.611 10.978 9.475 10.978C9.339 10.978 9.221 10.928 9.121 10.828C9.022 10.729 8.972 10.611 8.972 10.475C8.972 10.339 9.022 10.221 9.121 10.121C9.403 9.84 9.619 9.516 9.772 9.148C9.924 8.781 10 8.398 10 8C10 7.602 9.924 7.219 9.772 6.852C9.619 6.484 9.403 6.16 9.121 5.879C9.022 5.779 8.972 5.661 8.972 5.525C8.972 5.389 9.022 5.271 9.121 5.172C9.219 5.074 9.337 5.025 9.475 5.025C9.613 5.025 9.731 5.074 9.828 5.172C10.204 5.547 10.493 5.979 10.696 6.469Z'/%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='M7.5 2C7.638 2 7.756 2.049 7.854 2.146C7.951 2.244 8 2.362 8 2.5L8 13.5C8 13.641 7.952 13.759 7.856 13.856C7.759 13.952 7.641 14 7.5 14C7.362 14 7.244 13.951 7.146 13.854L4.854 11.561C4.674 11.381 4.467 11.243 4.233 11.146C3.998 11.049 3.754 11 3.5 11L3 11C2.746 11 2.5 10.953 2.264 10.86C2.007 10.758 1.781 10.609 1.586 10.414C1.391 10.219 1.242 9.993 1.14 9.736C1.047 9.5 1 9.254 1 9L1 7C1 6.746 1.047 6.5 1.14 6.264C1.242 6.007 1.391 5.781 1.586 5.586C1.781 5.391 2.007 5.242 2.264 5.14C2.5 5.047 2.746 5 3 5L3.5 5C3.754 5 3.998 4.951 4.233 4.854C4.467 4.757 4.674 4.619 4.854 4.439L7.146 2.146C7.244 2.049 7.362 2 7.5 2ZM2.293 9.707C2.488 9.902 2.724 10 3 10L3.5 10C3.886 10 4.258 10.074 4.615 10.222C4.972 10.37 5.287 10.58 5.561 10.854L7 12.293L7 3.707L5.561 5.146C5.287 5.42 4.972 5.63 4.615 5.778C4.258 5.926 3.886 6 3.5 6L3 6C2.724 6 2.488 6.098 2.293 6.293C2.098 6.488 2 6.724 2 7L2 9C2 9.276 2.098 9.512 2.293 9.707ZM10.696 6.469C10.899 6.959 11 7.47 11 8C11 8.53 10.899 9.041 10.696 9.531C10.493 10.021 10.204 10.453 9.828 10.828C9.729 10.928 9.611 10.978 9.475 10.978C9.339 10.978 9.221 10.928 9.121 10.828C9.022 10.729 8.972 10.611 8.972 10.475C8.972 10.339 9.022 10.221 9.121 10.121C9.403 9.84 9.619 9.516 9.772 9.148C9.924 8.781 10 8.398 10 8C10 7.602 9.924 7.219 9.772 6.852C9.619 6.484 9.403 6.16 9.121 5.879C9.022 5.779 8.972 5.661 8.972 5.525C8.972 5.389 9.022 5.271 9.121 5.172C9.219 5.074 9.337 5.025 9.475 5.025C9.613 5.025 9.731 5.074 9.828 5.172C10.204 5.547 10.493 5.979 10.696 6.469Z'/%3E%3C/svg%3E
```

### Sprite

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

### SwiftUI

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

struct VolumeLowIcon: Shape {
    func path(in rect: CGRect) -> Path {
        var p = Path()
        p.move(to: CGPoint(x: 7.5, y: 2))
        p.addCurve(to: CGPoint(x: 7.854, y: 2.146), control1: CGPoint(x: 7.638, y: 2), control2: CGPoint(x: 7.756, y: 2.049))
        p.addCurve(to: CGPoint(x: 8, y: 2.5), control1: CGPoint(x: 7.951, y: 2.244), control2: CGPoint(x: 8, y: 2.362))
        p.addLine(to: CGPoint(x: 8, y: 13.5))
        p.addCurve(to: CGPoint(x: 7.856, y: 13.856), control1: CGPoint(x: 8, y: 13.641), control2: CGPoint(x: 7.952, y: 13.759))
        p.addCurve(to: CGPoint(x: 7.5, y: 14), control1: CGPoint(x: 7.759, y: 13.952), control2: CGPoint(x: 7.641, y: 14))
        p.addCurve(to: CGPoint(x: 7.146, y: 13.854), control1: CGPoint(x: 7.362, y: 14), control2: CGPoint(x: 7.244, y: 13.951))
        p.addLine(to: CGPoint(x: 4.854, y: 11.561))
        p.addCurve(to: CGPoint(x: 4.233, y: 11.146), control1: CGPoint(x: 4.674, y: 11.381), control2: CGPoint(x: 4.467, y: 11.243))
        p.addCurve(to: CGPoint(x: 3.5, y: 11), control1: CGPoint(x: 3.998, y: 11.049), control2: CGPoint(x: 3.754, y: 11))
        p.addLine(to: CGPoint(x: 3, y: 11))
        p.addCurve(to: CGPoint(x: 2.264, y: 10.86), control1: CGPoint(x: 2.746, y: 11), control2: CGPoint(x: 2.5, y: 10.953))
        p.addCurve(to: CGPoint(x: 1.586, y: 10.414), control1: CGPoint(x: 2.007, y: 10.758), control2: CGPoint(x: 1.781, y: 10.609))
        p.addCurve(to: CGPoint(x: 1.14, y: 9.736), control1: CGPoint(x: 1.391, y: 10.219), control2: CGPoint(x: 1.242, y: 9.993))
        p.addCurve(to: CGPoint(x: 1, y: 9), control1: CGPoint(x: 1.047, y: 9.5), control2: CGPoint(x: 1, y: 9.254))
        p.addLine(to: CGPoint(x: 1, y: 7))
        p.addCurve(to: CGPoint(x: 1.14, y: 6.264), control1: CGPoint(x: 1, y: 6.746), control2: CGPoint(x: 1.047, y: 6.5))
        p.addCurve(to: CGPoint(x: 1.586, y: 5.586), control1: CGPoint(x: 1.242, y: 6.007), control2: CGPoint(x: 1.391, y: 5.781))
        p.addCurve(to: CGPoint(x: 2.264, y: 5.14), control1: CGPoint(x: 1.781, y: 5.391), control2: CGPoint(x: 2.007, y: 5.242))
        p.addCurve(to: CGPoint(x: 3, y: 5), control1: CGPoint(x: 2.5, y: 5.047), control2: CGPoint(x: 2.746, y: 5))
        p.addLine(to: CGPoint(x: 3.5, y: 5))
        p.addCurve(to: CGPoint(x: 4.233, y: 4.854), control1: CGPoint(x: 3.754, y: 5), control2: CGPoint(x: 3.998, y: 4.951))
        p.addCurve(to: CGPoint(x: 4.854, y: 4.439), control1: CGPoint(x: 4.467, y: 4.757), control2: CGPoint(x: 4.674, y: 4.619))
        p.addLine(to: CGPoint(x: 7.146, y: 2.146))
        p.addCurve(to: CGPoint(x: 7.5, y: 2), control1: CGPoint(x: 7.244, y: 2.049), control2: CGPoint(x: 7.362, y: 2))
        p.closeSubpath()
        p.move(to: CGPoint(x: 2.293, y: 9.707))
        p.addCurve(to: CGPoint(x: 3, y: 10), control1: CGPoint(x: 2.488, y: 9.902), control2: CGPoint(x: 2.724, y: 10))
        p.addLine(to: CGPoint(x: 3.5, y: 10))
        p.addCurve(to: CGPoint(x: 4.615, y: 10.222), control1: CGPoint(x: 3.886, y: 10), control2: CGPoint(x: 4.258, y: 10.074))
        p.addCurve(to: CGPoint(x: 5.561, y: 10.854), control1: CGPoint(x: 4.972, y: 10.37), control2: CGPoint(x: 5.287, y: 10.58))
        p.addLine(to: CGPoint(x: 7, y: 12.293))
        p.addLine(to: CGPoint(x: 7, y: 3.707))
        p.addLine(to: CGPoint(x: 5.561, y: 5.146))
        p.addCurve(to: CGPoint(x: 4.615, y: 5.778), control1: CGPoint(x: 5.287, y: 5.42), control2: CGPoint(x: 4.972, y: 5.63))
        p.addCurve(to: CGPoint(x: 3.5, y: 6), control1: CGPoint(x: 4.258, y: 5.926), control2: CGPoint(x: 3.886, y: 6))
        p.addLine(to: CGPoint(x: 3, y: 6))
        p.addCurve(to: CGPoint(x: 2.293, y: 6.293), control1: CGPoint(x: 2.724, y: 6), control2: CGPoint(x: 2.488, y: 6.098))
        p.addCurve(to: CGPoint(x: 2, y: 7), control1: CGPoint(x: 2.098, y: 6.488), control2: CGPoint(x: 2, y: 6.724))
        p.addLine(to: CGPoint(x: 2, y: 9))
        p.addCurve(to: CGPoint(x: 2.293, y: 9.707), control1: CGPoint(x: 2, y: 9.276), control2: CGPoint(x: 2.098, y: 9.512))
        p.closeSubpath()
        p.move(to: CGPoint(x: 10.696, y: 6.469))
        p.addCurve(to: CGPoint(x: 11, y: 8), control1: CGPoint(x: 10.899, y: 6.959), control2: CGPoint(x: 11, y: 7.47))
        p.addCurve(to: CGPoint(x: 10.696, y: 9.531), control1: CGPoint(x: 11, y: 8.53), control2: CGPoint(x: 10.899, y: 9.041))
        p.addCurve(to: CGPoint(x: 9.828, y: 10.828), control1: CGPoint(x: 10.493, y: 10.021), control2: CGPoint(x: 10.204, y: 10.453))
        p.addCurve(to: CGPoint(x: 9.475, y: 10.978), control1: CGPoint(x: 9.729, y: 10.928), control2: CGPoint(x: 9.611, y: 10.978))
        p.addCurve(to: CGPoint(x: 9.121, y: 10.828), control1: CGPoint(x: 9.339, y: 10.978), control2: CGPoint(x: 9.221, y: 10.928))
        p.addCurve(to: CGPoint(x: 8.972, y: 10.475), control1: CGPoint(x: 9.022, y: 10.729), control2: CGPoint(x: 8.972, y: 10.611))
        p.addCurve(to: CGPoint(x: 9.121, y: 10.121), control1: CGPoint(x: 8.972, y: 10.339), control2: CGPoint(x: 9.022, y: 10.221))
        p.addCurve(to: CGPoint(x: 9.772, y: 9.148), control1: CGPoint(x: 9.403, y: 9.84), control2: CGPoint(x: 9.619, y: 9.516))
        p.addCurve(to: CGPoint(x: 10, y: 8), control1: CGPoint(x: 9.924, y: 8.781), control2: CGPoint(x: 10, y: 8.398))
        p.addCurve(to: CGPoint(x: 9.772, y: 6.852), control1: CGPoint(x: 10, y: 7.602), control2: CGPoint(x: 9.924, y: 7.219))
        p.addCurve(to: CGPoint(x: 9.121, y: 5.879), control1: CGPoint(x: 9.619, y: 6.484), control2: CGPoint(x: 9.403, y: 6.16))
        p.addCurve(to: CGPoint(x: 8.972, y: 5.525), control1: CGPoint(x: 9.022, y: 5.779), control2: CGPoint(x: 8.972, y: 5.661))
        p.addCurve(to: CGPoint(x: 9.121, y: 5.172), control1: CGPoint(x: 8.972, y: 5.389), control2: CGPoint(x: 9.022, y: 5.271))
        p.addCurve(to: CGPoint(x: 9.475, y: 5.025), control1: CGPoint(x: 9.219, y: 5.074), control2: CGPoint(x: 9.337, y: 5.025))
        p.addCurve(to: CGPoint(x: 9.828, y: 5.172), control1: CGPoint(x: 9.613, y: 5.025), control2: CGPoint(x: 9.731, y: 5.074))
        p.addCurve(to: CGPoint(x: 10.696, y: 6.469), control1: CGPoint(x: 10.204, y: 5.547), control2: CGPoint(x: 10.493, y: 5.979))
        p.closeSubpath()
        return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
    }
}

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

### Compose

```kotlin
// Gentleface "volume-low" (line-round), MIT. https://gentleface.com/icons/volume-low
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 VolumeLowIcon: ImageVector by lazy {
    ImageVector.Builder(
        name = "volume-low", defaultWidth = 16.dp, defaultHeight = 16.dp,
        viewportWidth = 16f, viewportHeight = 16f,
    ).addPath(
        pathData = addPathNodes("M7.5 2C7.638 2 7.756 2.049 7.854 2.146C7.951 2.244 8 2.362 8 2.5L8 13.5C8 13.641 7.952 13.759 7.856 13.856C7.759 13.952 7.641 14 7.5 14C7.362 14 7.244 13.951 7.146 13.854L4.854 11.561C4.674 11.381 4.467 11.243 4.233 11.146C3.998 11.049 3.754 11 3.5 11L3 11C2.746 11 2.5 10.953 2.264 10.86C2.007 10.758 1.781 10.609 1.586 10.414C1.391 10.219 1.242 9.993 1.14 9.736C1.047 9.5 1 9.254 1 9L1 7C1 6.746 1.047 6.5 1.14 6.264C1.242 6.007 1.391 5.781 1.586 5.586C1.781 5.391 2.007 5.242 2.264 5.14C2.5 5.047 2.746 5 3 5L3.5 5C3.754 5 3.998 4.951 4.233 4.854C4.467 4.757 4.674 4.619 4.854 4.439L7.146 2.146C7.244 2.049 7.362 2 7.5 2ZM2.293 9.707C2.488 9.902 2.724 10 3 10L3.5 10C3.886 10 4.258 10.074 4.615 10.222C4.972 10.37 5.287 10.58 5.561 10.854L7 12.293L7 3.707L5.561 5.146C5.287 5.42 4.972 5.63 4.615 5.778C4.258 5.926 3.886 6 3.5 6L3 6C2.724 6 2.488 6.098 2.293 6.293C2.098 6.488 2 6.724 2 7L2 9C2 9.276 2.098 9.512 2.293 9.707ZM10.696 6.469C10.899 6.959 11 7.47 11 8C11 8.53 10.899 9.041 10.696 9.531C10.493 10.021 10.204 10.453 9.828 10.828C9.729 10.928 9.611 10.978 9.475 10.978C9.339 10.978 9.221 10.928 9.121 10.828C9.022 10.729 8.972 10.611 8.972 10.475C8.972 10.339 9.022 10.221 9.121 10.121C9.403 9.84 9.619 9.516 9.772 9.148C9.924 8.781 10 8.398 10 8C10 7.602 9.924 7.219 9.772 6.852C9.619 6.484 9.403 6.16 9.121 5.879C9.022 5.779 8.972 5.661 8.972 5.525C8.972 5.389 9.022 5.271 9.121 5.172C9.219 5.074 9.337 5.025 9.475 5.025C9.613 5.025 9.731 5.074 9.828 5.172C10.204 5.547 10.493 5.979 10.696 6.469Z"),
        fill = SolidColor(Color.Black),
    ).build()
}

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

### Android XML

```xml
<!-- res/drawable/ic_volume_low.xml · Gentleface "volume-low" (line-round), MIT. https://gentleface.com/icons/volume-low -->
<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="M7.5 2C7.638 2 7.756 2.049 7.854 2.146C7.951 2.244 8 2.362 8 2.5L8 13.5C8 13.641 7.952 13.759 7.856 13.856C7.759 13.952 7.641 14 7.5 14C7.362 14 7.244 13.951 7.146 13.854L4.854 11.561C4.674 11.381 4.467 11.243 4.233 11.146C3.998 11.049 3.754 11 3.5 11L3 11C2.746 11 2.5 10.953 2.264 10.86C2.007 10.758 1.781 10.609 1.586 10.414C1.391 10.219 1.242 9.993 1.14 9.736C1.047 9.5 1 9.254 1 9L1 7C1 6.746 1.047 6.5 1.14 6.264C1.242 6.007 1.391 5.781 1.586 5.586C1.781 5.391 2.007 5.242 2.264 5.14C2.5 5.047 2.746 5 3 5L3.5 5C3.754 5 3.998 4.951 4.233 4.854C4.467 4.757 4.674 4.619 4.854 4.439L7.146 2.146C7.244 2.049 7.362 2 7.5 2ZM2.293 9.707C2.488 9.902 2.724 10 3 10L3.5 10C3.886 10 4.258 10.074 4.615 10.222C4.972 10.37 5.287 10.58 5.561 10.854L7 12.293L7 3.707L5.561 5.146C5.287 5.42 4.972 5.63 4.615 5.778C4.258 5.926 3.886 6 3.5 6L3 6C2.724 6 2.488 6.098 2.293 6.293C2.098 6.488 2 6.724 2 7L2 9C2 9.276 2.098 9.512 2.293 9.707ZM10.696 6.469C10.899 6.959 11 7.47 11 8C11 8.53 10.899 9.041 10.696 9.531C10.493 10.021 10.204 10.453 9.828 10.828C9.729 10.928 9.611 10.978 9.475 10.978C9.339 10.978 9.221 10.928 9.121 10.828C9.022 10.729 8.972 10.611 8.972 10.475C8.972 10.339 9.022 10.221 9.121 10.121C9.403 9.84 9.619 9.516 9.772 9.148C9.924 8.781 10 8.398 10 8C10 7.602 9.924 7.219 9.772 6.852C9.619 6.484 9.403 6.16 9.121 5.879C9.022 5.779 8.972 5.661 8.972 5.525C8.972 5.389 9.022 5.271 9.121 5.172C9.219 5.074 9.337 5.025 9.475 5.025C9.613 5.025 9.731 5.074 9.828 5.172C10.204 5.547 10.493 5.979 10.696 6.469Z"/>
</vector>
```

### Flutter

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

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

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

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

  @override
  void paint(Canvas canvas, Size size) {
    canvas.scale(size.width / 16, size.height / 16);
    final p = Path()
      ..moveTo(7.5, 2)
      ..cubicTo(7.638, 2, 7.756, 2.049, 7.854, 2.146)
      ..cubicTo(7.951, 2.244, 8, 2.362, 8, 2.5)
      ..lineTo(8, 13.5)
      ..cubicTo(8, 13.641, 7.952, 13.759, 7.856, 13.856)
      ..cubicTo(7.759, 13.952, 7.641, 14, 7.5, 14)
      ..cubicTo(7.362, 14, 7.244, 13.951, 7.146, 13.854)
      ..lineTo(4.854, 11.561)
      ..cubicTo(4.674, 11.381, 4.467, 11.243, 4.233, 11.146)
      ..cubicTo(3.998, 11.049, 3.754, 11, 3.5, 11)
      ..lineTo(3, 11)
      ..cubicTo(2.746, 11, 2.5, 10.953, 2.264, 10.86)
      ..cubicTo(2.007, 10.758, 1.781, 10.609, 1.586, 10.414)
      ..cubicTo(1.391, 10.219, 1.242, 9.993, 1.14, 9.736)
      ..cubicTo(1.047, 9.5, 1, 9.254, 1, 9)
      ..lineTo(1, 7)
      ..cubicTo(1, 6.746, 1.047, 6.5, 1.14, 6.264)
      ..cubicTo(1.242, 6.007, 1.391, 5.781, 1.586, 5.586)
      ..cubicTo(1.781, 5.391, 2.007, 5.242, 2.264, 5.14)
      ..cubicTo(2.5, 5.047, 2.746, 5, 3, 5)
      ..lineTo(3.5, 5)
      ..cubicTo(3.754, 5, 3.998, 4.951, 4.233, 4.854)
      ..cubicTo(4.467, 4.757, 4.674, 4.619, 4.854, 4.439)
      ..lineTo(7.146, 2.146)
      ..cubicTo(7.244, 2.049, 7.362, 2, 7.5, 2)
      ..close()
      ..moveTo(2.293, 9.707)
      ..cubicTo(2.488, 9.902, 2.724, 10, 3, 10)
      ..lineTo(3.5, 10)
      ..cubicTo(3.886, 10, 4.258, 10.074, 4.615, 10.222)
      ..cubicTo(4.972, 10.37, 5.287, 10.58, 5.561, 10.854)
      ..lineTo(7, 12.293)
      ..lineTo(7, 3.707)
      ..lineTo(5.561, 5.146)
      ..cubicTo(5.287, 5.42, 4.972, 5.63, 4.615, 5.778)
      ..cubicTo(4.258, 5.926, 3.886, 6, 3.5, 6)
      ..lineTo(3, 6)
      ..cubicTo(2.724, 6, 2.488, 6.098, 2.293, 6.293)
      ..cubicTo(2.098, 6.488, 2, 6.724, 2, 7)
      ..lineTo(2, 9)
      ..cubicTo(2, 9.276, 2.098, 9.512, 2.293, 9.707)
      ..close()
      ..moveTo(10.696, 6.469)
      ..cubicTo(10.899, 6.959, 11, 7.47, 11, 8)
      ..cubicTo(11, 8.53, 10.899, 9.041, 10.696, 9.531)
      ..cubicTo(10.493, 10.021, 10.204, 10.453, 9.828, 10.828)
      ..cubicTo(9.729, 10.928, 9.611, 10.978, 9.475, 10.978)
      ..cubicTo(9.339, 10.978, 9.221, 10.928, 9.121, 10.828)
      ..cubicTo(9.022, 10.729, 8.972, 10.611, 8.972, 10.475)
      ..cubicTo(8.972, 10.339, 9.022, 10.221, 9.121, 10.121)
      ..cubicTo(9.403, 9.84, 9.619, 9.516, 9.772, 9.148)
      ..cubicTo(9.924, 8.781, 10, 8.398, 10, 8)
      ..cubicTo(10, 7.602, 9.924, 7.219, 9.772, 6.852)
      ..cubicTo(9.619, 6.484, 9.403, 6.16, 9.121, 5.879)
      ..cubicTo(9.022, 5.779, 8.972, 5.661, 8.972, 5.525)
      ..cubicTo(8.972, 5.389, 9.022, 5.271, 9.121, 5.172)
      ..cubicTo(9.219, 5.074, 9.337, 5.025, 9.475, 5.025)
      ..cubicTo(9.613, 5.025, 9.731, 5.074, 9.828, 5.172)
      ..cubicTo(10.204, 5.547, 10.493, 5.979, 10.696, 6.469)
      ..close();
    canvas.drawPath(p, Paint()..color = color);
  }

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