volume icon

Volume: volume, sound, sound on, unmute. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

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

// 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: see /icons/volume.md

Svelte

Svelte: see /icons/volume.md

HTML img

HTML img: see /icons/volume.md

CSS

CSS: see /icons/volume.md

Data URL

Data URL: see /icons/volume.md

Sprite

Sprite: see /icons/volume.md

SwiftUI

SwiftUI: see /icons/volume.md

Compose

Compose: see /icons/volume.md

Android XML

Android XML: see /icons/volume.md

Flutter

Flutter: see /icons/volume.md

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. 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. More in how to use.

Meaning

Use it for

volume, sound, sound on, unmute, volume up, volume high, unmute sound

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

Tags

speaker, audio, sound, loud

Category

Audio & video

Component name

VolumeIcon

History

2026-10-14 added

Family 3

volume-gear volume-low volume-off

More audio & video icons

album aspect-ratio audio-lines cassette clapperboard disc eject explicit fast-forward film guitar hd headphones headphones-off headset headset-off · all audio & video icons

For agents

Metadata: /icons/volume.json · Markdown: /icons/volume.md · SVG: https://gentleface.com/svg/{style}/16/volume.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/volume.png

volume icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp