Gentleface › Audio & video › volume-low

volume-low icon

Volume low: low volume, volume down, decrease volume, lower volume. 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 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

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

Svelte

Svelte: see /icons/volume-low.md

HTML img

HTML img: see /icons/volume-low.md

CSS

CSS: see /icons/volume-low.md

Data URL

Data URL: see /icons/volume-low.md

Sprite

Sprite: see /icons/volume-low.md

SwiftUI

SwiftUI: see /icons/volume-low.md

Compose

Compose: see /icons/volume-low.md

Android XML

Android XML: see /icons/volume-low.md

Flutter

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

low volume, volume down, decrease volume, lower volume, quieter

Don’t confuse with

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

Also fits

volume: turn the volume down (volume-down)

Tags

speaker, audio, sound, quiet, low, volume-down

Category

Audio & video

Component name

VolumeLowIcon

History

2026-10-15 added

Family 3

volume volume-gear 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-low.json · Markdown: /icons/volume-low.md · SVG: https://gentleface.com/svg/{style}/16/volume-low.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/volume-low.png

volume-low icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp