Gentleface › Devices & hardware › monitor-speaker

monitor-speaker icon

Monitor speaker: computer audio, system sound, desktop speakers. 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="M6.293 9.707C6.098 9.512 6 9.276 6 9L6 2C6 1.724 6.098 1.488 6.293 1.293C6.488 1.098 6.724 1 7 1L14 1C14.276 1 14.512 1.098 14.707 1.293C14.902 1.488 15 1.724 15 2L15 9C15 9.276 14.902 9.512 14.707 9.707C14.512 9.902 14.276 10 14 10L7 10C6.724 10 6.488 9.902 6.293 9.707ZM14.018 11C14.053 11.037 14.083 11.08 14.107 11.129C14.167 11.253 14.175 11.381 14.13 11.511C14.085 11.642 14.001 11.737 13.876 11.798C13.6 11.933 13.308 12 13 12L10 12L10 14L11.5 14C11.641 14 11.759 14.048 11.856 14.144C11.952 14.241 12 14.359 12 14.5C12 14.641 11.952 14.759 11.856 14.856C11.759 14.952 11.641 15 11.5 15L4.5 15C4.359 15 4.241 14.952 4.144 14.856C4.048 14.759 4 14.641 4 14.5C4 14.359 4.048 14.241 4.144 14.144C4.241 14.048 4.359 14 4.5 14L6 14L6 12L3 12C2.746 12 2.5 11.953 2.264 11.86C2.007 11.758 1.781 11.609 1.586 11.414C1.391 11.219 1.242 10.993 1.14 10.736C1.047 10.5 1 10.254 1 10L1 4C1 3.746 1.047 3.5 1.14 3.264C1.242 3.007 1.391 2.781 1.586 2.586C1.781 2.391 2.007 2.242 2.264 2.14C2.5 2.047 2.746 2 3 2L3.5 2C3.641 2 3.759 2.048 3.856 2.144C3.952 2.241 4 2.359 4 2.5C4 2.641 3.952 2.759 3.856 2.856C3.759 2.952 3.641 3 3.5 3L3 3C2.724 3 2.488 3.098 2.293 3.293C2.098 3.488 2 3.724 2 4L2 10C2 10.276 2.098 10.512 2.293 10.707C2.488 10.902 2.724 11 3 11L14.018 11ZM7 2L7 9L14 9L14 2L7 2ZM8.732 3.732C8.976 3.488 9.259 3.303 9.58 3.176C9.875 3.059 10.182 3 10.5 3C10.818 3 11.125 3.059 11.42 3.176C11.741 3.303 12.024 3.488 12.268 3.732C12.512 3.976 12.697 4.259 12.824 4.58C12.941 4.875 13 5.182 13 5.5C13 5.818 12.941 6.125 12.824 6.42C12.697 6.741 12.512 7.024 12.268 7.268C12.024 7.512 11.741 7.697 11.42 7.824C11.125 7.941 10.818 8 10.5 8C10.182 8 9.875 7.941 9.58 7.824C9.259 7.697 8.976 7.512 8.732 7.268C8.488 7.024 8.303 6.741 8.176 6.42C8.059 6.125 8 5.818 8 5.5C8 5.182 8.059 4.875 8.176 4.58C8.303 4.259 8.488 3.976 8.732 3.732ZM9.439 6.561C9.586 6.707 9.755 6.818 9.948 6.895C10.125 6.965 10.309 7 10.5 7C10.691 7 10.875 6.965 11.052 6.895C11.245 6.818 11.414 6.707 11.561 6.561C11.707 6.414 11.818 6.245 11.895 6.052C11.965 5.875 12 5.691 12 5.5C12 5.309 11.965 5.125 11.895 4.948C11.818 4.755 11.707 4.586 11.561 4.439C11.414 4.293 11.245 4.182 11.052 4.105C10.875 4.035 10.691 4 10.5 4C10.309 4 10.125 4.035 9.948 4.105C9.755 4.182 9.586 4.293 9.439 4.439C9.293 4.586 9.182 4.755 9.105 4.948C9.035 5.125 9 5.309 9 5.5C9 5.691 9.035 5.875 9.105 6.052C9.182 6.245 9.293 6.414 9.439 6.561ZM7 14L9 14L9 12L7 12L7 14Z"/></svg>

React

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

export function MonitorSpeakerIcon(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="M6.293 9.707C6.098 9.512 6 9.276 6 9L6 2C6 1.724 6.098 1.488 6.293 1.293C6.488 1.098 6.724 1 7 1L14 1C14.276 1 14.512 1.098 14.707 1.293C14.902 1.488 15 1.724 15 2L15 9C15 9.276 14.902 9.512 14.707 9.707C14.512 9.902 14.276 10 14 10L7 10C6.724 10 6.488 9.902 6.293 9.707ZM14.018 11C14.053 11.037 14.083 11.08 14.107 11.129C14.167 11.253 14.175 11.381 14.13 11.511C14.085 11.642 14.001 11.737 13.876 11.798C13.6 11.933 13.308 12 13 12L10 12L10 14L11.5 14C11.641 14 11.759 14.048 11.856 14.144C11.952 14.241 12 14.359 12 14.5C12 14.641 11.952 14.759 11.856 14.856C11.759 14.952 11.641 15 11.5 15L4.5 15C4.359 15 4.241 14.952 4.144 14.856C4.048 14.759 4 14.641 4 14.5C4 14.359 4.048 14.241 4.144 14.144C4.241 14.048 4.359 14 4.5 14L6 14L6 12L3 12C2.746 12 2.5 11.953 2.264 11.86C2.007 11.758 1.781 11.609 1.586 11.414C1.391 11.219 1.242 10.993 1.14 10.736C1.047 10.5 1 10.254 1 10L1 4C1 3.746 1.047 3.5 1.14 3.264C1.242 3.007 1.391 2.781 1.586 2.586C1.781 2.391 2.007 2.242 2.264 2.14C2.5 2.047 2.746 2 3 2L3.5 2C3.641 2 3.759 2.048 3.856 2.144C3.952 2.241 4 2.359 4 2.5C4 2.641 3.952 2.759 3.856 2.856C3.759 2.952 3.641 3 3.5 3L3 3C2.724 3 2.488 3.098 2.293 3.293C2.098 3.488 2 3.724 2 4L2 10C2 10.276 2.098 10.512 2.293 10.707C2.488 10.902 2.724 11 3 11L14.018 11ZM7 2L7 9L14 9L14 2L7 2ZM8.732 3.732C8.976 3.488 9.259 3.303 9.58 3.176C9.875 3.059 10.182 3 10.5 3C10.818 3 11.125 3.059 11.42 3.176C11.741 3.303 12.024 3.488 12.268 3.732C12.512 3.976 12.697 4.259 12.824 4.58C12.941 4.875 13 5.182 13 5.5C13 5.818 12.941 6.125 12.824 6.42C12.697 6.741 12.512 7.024 12.268 7.268C12.024 7.512 11.741 7.697 11.42 7.824C11.125 7.941 10.818 8 10.5 8C10.182 8 9.875 7.941 9.58 7.824C9.259 7.697 8.976 7.512 8.732 7.268C8.488 7.024 8.303 6.741 8.176 6.42C8.059 6.125 8 5.818 8 5.5C8 5.182 8.059 4.875 8.176 4.58C8.303 4.259 8.488 3.976 8.732 3.732ZM9.439 6.561C9.586 6.707 9.755 6.818 9.948 6.895C10.125 6.965 10.309 7 10.5 7C10.691 7 10.875 6.965 11.052 6.895C11.245 6.818 11.414 6.707 11.561 6.561C11.707 6.414 11.818 6.245 11.895 6.052C11.965 5.875 12 5.691 12 5.5C12 5.309 11.965 5.125 11.895 4.948C11.818 4.755 11.707 4.586 11.561 4.439C11.414 4.293 11.245 4.182 11.052 4.105C10.875 4.035 10.691 4 10.5 4C10.309 4 10.125 4.035 9.948 4.105C9.755 4.182 9.586 4.293 9.439 4.439C9.293 4.586 9.182 4.755 9.105 4.948C9.035 5.125 9 5.309 9 5.5C9 5.691 9.035 5.875 9.105 6.052C9.182 6.245 9.293 6.414 9.439 6.561ZM7 14L9 14L9 12L7 12L7 14Z" />
    </svg>
  );
}

Vue

Vue: see /icons/monitor-speaker.md

Svelte

Svelte: see /icons/monitor-speaker.md

HTML img

HTML img: see /icons/monitor-speaker.md

CSS

CSS: see /icons/monitor-speaker.md

Data URL

Data URL: see /icons/monitor-speaker.md

Sprite

Sprite: see /icons/monitor-speaker.md

SwiftUI

SwiftUI: see /icons/monitor-speaker.md

Compose

Compose: see /icons/monitor-speaker.md

Android XML

Android XML: see /icons/monitor-speaker.md

Flutter

Flutter: see /icons/monitor-speaker.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.

With npm: import { MonitorSpeakerIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

computer audio, system sound, desktop speakers

Tags

computer, monitor, speaker, audio, sound, desktop, pc, output, speakers, system-sound

Category

Devices & hardware

Component name

MonitorSpeakerIcon

History

2026-10-29 released in 0.2.0
2026-10-30 added

Since

version 0.2.0

More devices & hardware icons

backspace battery battery-alert battery-charging battery-check battery-full battery-low battery-medium battery-saver cable caps-lock charger circuit-board cpu cpu-sparkle desktop-tower · all devices & hardware icons

For agents

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

monitor-speaker icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp

Code line-round

Meaning

More devices & hardware icons

For agents

monitor-speaker icon