# volume icon

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

- Category: Audio & video
- Use it for: volume, sound, sound on, unmute, volume up, volume high, unmute sound
- Tags: speaker, audio, sound, loud
- Family: volume-gear, volume-low, volume-off
- Component name: VolumeIcon
- Added: 2026-10-14

## Alternatives

- `volume-low`: turn the volume down (volume-down)
- `speaker`: the speaker device or audio output (speaker)
- `mic`: unmute your microphone in a call (microphone)

## Not for

- hearing (use `ear`): volume means sound level, not hearing
- speaker (use `speaker`): the volume sign means sound and its level (volume), not the device

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

The SVG of every style: https://gentleface.com/icons/volume.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 2ZM11.95 3.05C12.606 3.707 13.112 4.464 13.467 5.321C13.822 6.179 14 7.072 14 8C14 8.928 13.822 9.821 13.467 10.679C13.112 11.536 12.606 12.293 11.95 12.95C11.85 13.049 11.732 13.099 11.596 13.099C11.46 13.099 11.342 13.049 11.243 12.95C11.143 12.85 11.093 12.732 11.093 12.596C11.093 12.46 11.143 12.342 11.243 12.243C11.805 11.68 12.239 11.031 12.543 10.296C12.848 9.561 13 8.796 13 8C13 7.204 12.848 6.439 12.543 5.704C12.239 4.969 11.805 4.32 11.243 3.757C11.145 3.66 11.096 3.542 11.096 3.404C11.096 3.266 11.145 3.148 11.243 3.05C11.342 2.951 11.46 2.901 11.596 2.901C11.732 2.901 11.85 2.951 11.95 3.05ZM2.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.707ZM11 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.469C10.899 6.959 11 7.47 11 8Z"/></svg>
```

### React

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

export function VolumeIcon(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 2ZM11.95 3.05C12.606 3.707 13.112 4.464 13.467 5.321C13.822 6.179 14 7.072 14 8C14 8.928 13.822 9.821 13.467 10.679C13.112 11.536 12.606 12.293 11.95 12.95C11.85 13.049 11.732 13.099 11.596 13.099C11.46 13.099 11.342 13.049 11.243 12.95C11.143 12.85 11.093 12.732 11.093 12.596C11.093 12.46 11.143 12.342 11.243 12.243C11.805 11.68 12.239 11.031 12.543 10.296C12.848 9.561 13 8.796 13 8C13 7.204 12.848 6.439 12.543 5.704C12.239 4.969 11.805 4.32 11.243 3.757C11.145 3.66 11.096 3.542 11.096 3.404C11.096 3.266 11.145 3.148 11.243 3.05C11.342 2.951 11.46 2.901 11.596 2.901C11.732 2.901 11.85 2.951 11.95 3.05ZM2.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.707ZM11 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.469C10.899 6.959 11 7.47 11 8Z" />
    </svg>
  );
}
```

### Vue

```vue
<!-- Gentleface "volume" (line-round), MIT. https://gentleface.com/icons/volume -->
<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 2ZM11.95 3.05C12.606 3.707 13.112 4.464 13.467 5.321C13.822 6.179 14 7.072 14 8C14 8.928 13.822 9.821 13.467 10.679C13.112 11.536 12.606 12.293 11.95 12.95C11.85 13.049 11.732 13.099 11.596 13.099C11.46 13.099 11.342 13.049 11.243 12.95C11.143 12.85 11.093 12.732 11.093 12.596C11.093 12.46 11.143 12.342 11.243 12.243C11.805 11.68 12.239 11.031 12.543 10.296C12.848 9.561 13 8.796 13 8C13 7.204 12.848 6.439 12.543 5.704C12.239 4.969 11.805 4.32 11.243 3.757C11.145 3.66 11.096 3.542 11.096 3.404C11.096 3.266 11.145 3.148 11.243 3.05C11.342 2.951 11.46 2.901 11.596 2.901C11.732 2.901 11.85 2.951 11.95 3.05ZM2.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.707ZM11 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.469C10.899 6.959 11 7.47 11 8Z" />
  </svg>
</template>
```

### Svelte

```svelte
<!-- Gentleface "volume" (line-round), MIT. https://gentleface.com/icons/volume -->
<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 2ZM11.95 3.05C12.606 3.707 13.112 4.464 13.467 5.321C13.822 6.179 14 7.072 14 8C14 8.928 13.822 9.821 13.467 10.679C13.112 11.536 12.606 12.293 11.95 12.95C11.85 13.049 11.732 13.099 11.596 13.099C11.46 13.099 11.342 13.049 11.243 12.95C11.143 12.85 11.093 12.732 11.093 12.596C11.093 12.46 11.143 12.342 11.243 12.243C11.805 11.68 12.239 11.031 12.543 10.296C12.848 9.561 13 8.796 13 8C13 7.204 12.848 6.439 12.543 5.704C12.239 4.969 11.805 4.32 11.243 3.757C11.145 3.66 11.096 3.542 11.096 3.404C11.096 3.266 11.145 3.148 11.243 3.05C11.342 2.951 11.46 2.901 11.596 2.901C11.732 2.901 11.85 2.951 11.95 3.05ZM2.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.707ZM11 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.469C10.899 6.959 11 7.47 11 8Z" />
</svg>
```

### HTML img

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

### CSS

```css
/* Gentleface "volume" (line-round), MIT. https://gentleface.com/icons/volume. Takes the text color. */
.icon-volume {
  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 2ZM11.95 3.05C12.606 3.707 13.112 4.464 13.467 5.321C13.822 6.179 14 7.072 14 8C14 8.928 13.822 9.821 13.467 10.679C13.112 11.536 12.606 12.293 11.95 12.95C11.85 13.049 11.732 13.099 11.596 13.099C11.46 13.099 11.342 13.049 11.243 12.95C11.143 12.85 11.093 12.732 11.093 12.596C11.093 12.46 11.143 12.342 11.243 12.243C11.805 11.68 12.239 11.031 12.543 10.296C12.848 9.561 13 8.796 13 8C13 7.204 12.848 6.439 12.543 5.704C12.239 4.969 11.805 4.32 11.243 3.757C11.145 3.66 11.096 3.542 11.096 3.404C11.096 3.266 11.145 3.148 11.243 3.05C11.342 2.951 11.46 2.901 11.596 2.901C11.732 2.901 11.85 2.951 11.95 3.05ZM2.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.707ZM11 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.469C10.899 6.959 11 7.47 11 8Z'/%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 2ZM11.95 3.05C12.606 3.707 13.112 4.464 13.467 5.321C13.822 6.179 14 7.072 14 8C14 8.928 13.822 9.821 13.467 10.679C13.112 11.536 12.606 12.293 11.95 12.95C11.85 13.049 11.732 13.099 11.596 13.099C11.46 13.099 11.342 13.049 11.243 12.95C11.143 12.85 11.093 12.732 11.093 12.596C11.093 12.46 11.143 12.342 11.243 12.243C11.805 11.68 12.239 11.031 12.543 10.296C12.848 9.561 13 8.796 13 8C13 7.204 12.848 6.439 12.543 5.704C12.239 4.969 11.805 4.32 11.243 3.757C11.145 3.66 11.096 3.542 11.096 3.404C11.096 3.266 11.145 3.148 11.243 3.05C11.342 2.951 11.46 2.901 11.596 2.901C11.732 2.901 11.85 2.951 11.95 3.05ZM2.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.707ZM11 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.469C10.899 6.959 11 7.47 11 8Z'/%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 2ZM11.95 3.05C12.606 3.707 13.112 4.464 13.467 5.321C13.822 6.179 14 7.072 14 8C14 8.928 13.822 9.821 13.467 10.679C13.112 11.536 12.606 12.293 11.95 12.95C11.85 13.049 11.732 13.099 11.596 13.099C11.46 13.099 11.342 13.049 11.243 12.95C11.143 12.85 11.093 12.732 11.093 12.596C11.093 12.46 11.143 12.342 11.243 12.243C11.805 11.68 12.239 11.031 12.543 10.296C12.848 9.561 13 8.796 13 8C13 7.204 12.848 6.439 12.543 5.704C12.239 4.969 11.805 4.32 11.243 3.757C11.145 3.66 11.096 3.542 11.096 3.404C11.096 3.266 11.145 3.148 11.243 3.05C11.342 2.951 11.46 2.901 11.596 2.901C11.732 2.901 11.85 2.951 11.95 3.05ZM2.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.707ZM11 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.469C10.899 6.959 11 7.47 11 8Z'/%3E%3C/svg%3E
```

### Sprite

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

### SwiftUI

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

struct VolumeIcon: 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: 11.95, y: 3.05))
        p.addCurve(to: CGPoint(x: 13.467, y: 5.321), control1: CGPoint(x: 12.606, y: 3.707), control2: CGPoint(x: 13.112, y: 4.464))
        p.addCurve(to: CGPoint(x: 14, y: 8), control1: CGPoint(x: 13.822, y: 6.179), control2: CGPoint(x: 14, y: 7.072))
        p.addCurve(to: CGPoint(x: 13.467, y: 10.679), control1: CGPoint(x: 14, y: 8.928), control2: CGPoint(x: 13.822, y: 9.821))
        p.addCurve(to: CGPoint(x: 11.95, y: 12.95), control1: CGPoint(x: 13.112, y: 11.536), control2: CGPoint(x: 12.606, y: 12.293))
        p.addCurve(to: CGPoint(x: 11.596, y: 13.099), control1: CGPoint(x: 11.85, y: 13.049), control2: CGPoint(x: 11.732, y: 13.099))
        p.addCurve(to: CGPoint(x: 11.243, y: 12.95), control1: CGPoint(x: 11.46, y: 13.099), control2: CGPoint(x: 11.342, y: 13.049))
        p.addCurve(to: CGPoint(x: 11.093, y: 12.596), control1: CGPoint(x: 11.143, y: 12.85), control2: CGPoint(x: 11.093, y: 12.732))
        p.addCurve(to: CGPoint(x: 11.243, y: 12.243), control1: CGPoint(x: 11.093, y: 12.46), control2: CGPoint(x: 11.143, y: 12.342))
        p.addCurve(to: CGPoint(x: 12.543, y: 10.296), control1: CGPoint(x: 11.805, y: 11.68), control2: CGPoint(x: 12.239, y: 11.031))
        p.addCurve(to: CGPoint(x: 13, y: 8), control1: CGPoint(x: 12.848, y: 9.561), control2: CGPoint(x: 13, y: 8.796))
        p.addCurve(to: CGPoint(x: 12.543, y: 5.704), control1: CGPoint(x: 13, y: 7.204), control2: CGPoint(x: 12.848, y: 6.439))
        p.addCurve(to: CGPoint(x: 11.243, y: 3.757), control1: CGPoint(x: 12.239, y: 4.969), control2: CGPoint(x: 11.805, y: 4.32))
        p.addCurve(to: CGPoint(x: 11.096, y: 3.404), control1: CGPoint(x: 11.145, y: 3.66), control2: CGPoint(x: 11.096, y: 3.542))
        p.addCurve(to: CGPoint(x: 11.243, y: 3.05), control1: CGPoint(x: 11.096, y: 3.266), control2: CGPoint(x: 11.145, y: 3.148))
        p.addCurve(to: CGPoint(x: 11.596, y: 2.901), control1: CGPoint(x: 11.342, y: 2.951), control2: CGPoint(x: 11.46, y: 2.901))
        p.addCurve(to: CGPoint(x: 11.95, y: 3.05), control1: CGPoint(x: 11.732, y: 2.901), control2: CGPoint(x: 11.85, y: 2.951))
        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: 11, y: 8))
        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.addCurve(to: CGPoint(x: 11, y: 8), control1: CGPoint(x: 10.899, y: 6.959), control2: CGPoint(x: 11, y: 7.47))
        p.closeSubpath()
        return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
    }
}

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

### Compose

```kotlin
// Gentleface "volume" (line-round), MIT. https://gentleface.com/icons/volume
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 VolumeIcon: ImageVector by lazy {
    ImageVector.Builder(
        name = "volume", 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 2ZM11.95 3.05C12.606 3.707 13.112 4.464 13.467 5.321C13.822 6.179 14 7.072 14 8C14 8.928 13.822 9.821 13.467 10.679C13.112 11.536 12.606 12.293 11.95 12.95C11.85 13.049 11.732 13.099 11.596 13.099C11.46 13.099 11.342 13.049 11.243 12.95C11.143 12.85 11.093 12.732 11.093 12.596C11.093 12.46 11.143 12.342 11.243 12.243C11.805 11.68 12.239 11.031 12.543 10.296C12.848 9.561 13 8.796 13 8C13 7.204 12.848 6.439 12.543 5.704C12.239 4.969 11.805 4.32 11.243 3.757C11.145 3.66 11.096 3.542 11.096 3.404C11.096 3.266 11.145 3.148 11.243 3.05C11.342 2.951 11.46 2.901 11.596 2.901C11.732 2.901 11.85 2.951 11.95 3.05ZM2.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.707ZM11 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.469C10.899 6.959 11 7.47 11 8Z"),
        fill = SolidColor(Color.Black),
    ).build()
}

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

### Android XML

```xml
<!-- res/drawable/ic_volume.xml · Gentleface "volume" (line-round), MIT. https://gentleface.com/icons/volume -->
<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 2ZM11.95 3.05C12.606 3.707 13.112 4.464 13.467 5.321C13.822 6.179 14 7.072 14 8C14 8.928 13.822 9.821 13.467 10.679C13.112 11.536 12.606 12.293 11.95 12.95C11.85 13.049 11.732 13.099 11.596 13.099C11.46 13.099 11.342 13.049 11.243 12.95C11.143 12.85 11.093 12.732 11.093 12.596C11.093 12.46 11.143 12.342 11.243 12.243C11.805 11.68 12.239 11.031 12.543 10.296C12.848 9.561 13 8.796 13 8C13 7.204 12.848 6.439 12.543 5.704C12.239 4.969 11.805 4.32 11.243 3.757C11.145 3.66 11.096 3.542 11.096 3.404C11.096 3.266 11.145 3.148 11.243 3.05C11.342 2.951 11.46 2.901 11.596 2.901C11.732 2.901 11.85 2.951 11.95 3.05ZM2.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.707ZM11 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.469C10.899 6.959 11 7.47 11 8Z"/>
</vector>
```

### Flutter

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

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

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

class _VolumeIconPainter extends CustomPainter {
  _VolumeIconPainter(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(11.95, 3.05)
      ..cubicTo(12.606, 3.707, 13.112, 4.464, 13.467, 5.321)
      ..cubicTo(13.822, 6.179, 14, 7.072, 14, 8)
      ..cubicTo(14, 8.928, 13.822, 9.821, 13.467, 10.679)
      ..cubicTo(13.112, 11.536, 12.606, 12.293, 11.95, 12.95)
      ..cubicTo(11.85, 13.049, 11.732, 13.099, 11.596, 13.099)
      ..cubicTo(11.46, 13.099, 11.342, 13.049, 11.243, 12.95)
      ..cubicTo(11.143, 12.85, 11.093, 12.732, 11.093, 12.596)
      ..cubicTo(11.093, 12.46, 11.143, 12.342, 11.243, 12.243)
      ..cubicTo(11.805, 11.68, 12.239, 11.031, 12.543, 10.296)
      ..cubicTo(12.848, 9.561, 13, 8.796, 13, 8)
      ..cubicTo(13, 7.204, 12.848, 6.439, 12.543, 5.704)
      ..cubicTo(12.239, 4.969, 11.805, 4.32, 11.243, 3.757)
      ..cubicTo(11.145, 3.66, 11.096, 3.542, 11.096, 3.404)
      ..cubicTo(11.096, 3.266, 11.145, 3.148, 11.243, 3.05)
      ..cubicTo(11.342, 2.951, 11.46, 2.901, 11.596, 2.901)
      ..cubicTo(11.732, 2.901, 11.85, 2.951, 11.95, 3.05)
      ..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(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)
      ..cubicTo(10.899, 6.959, 11, 7.47, 11, 8)
      ..close();
    canvas.drawPath(p, Paint()..color = color);
  }

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