Headphones Sound Wave icon

Use the Headphones Sound Wave icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.

npm install @fluentui/react-icons

import { HeadphonesSoundWave24Regular, HeadphonesSoundWave24Filled } from "@fluentui/react-icons";

export function Example() {
  return <HeadphonesSoundWave24Regular aria-label="Headphones Sound Wave" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_headphones_sound_wave_24_regular.svg" width="24" height="24" alt="Headphones Sound Wave">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 12C3.5 7.30558 7.30558 3.5 12 3.5C16.6944 3.5 20.5 7.30558 20.5 12V14H18.25C17.8358 14 17.5 14.3358 17.5 14.75V21.25C17.5 21.6642 17.8358 22 18.25 22H19C20.6569 22 22 20.6569 22 19V12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12V19C2 20.6569 3.34315 22 5 22H5.75C6.16421 22 6.5 21.6642 6.5 21.25V14.75C6.5 14.3358 6.16421 14 5.75 14H3.5V12ZM20.5 15.5V19C20.5 19.8284 19.8284 20.5 19 20.5V15.5H20.5ZM3.5 19V15.5H5V20.5C4.17157 20.5 3.5 19.8284 3.5 19ZM12.75 11.75C12.75 11.3358 12.4142 11 12 11C11.5858 11 11.25 11.3358 11.25 11.75V22.25C11.25 22.6642 11.5858 23 12 23C12.4142 23 12.75 22.6642 12.75 22.25V11.75ZM8.75 13.9998C9.16421 13.9998 9.5 14.3355 9.5 14.7498V19.25C9.5 19.6642 9.16421 20 8.75 20C8.33579 20 8 19.6642 8 19.25V14.7498C8 14.3355 8.33579 13.9998 8.75 13.9998ZM16 14.75C16 14.3358 15.6642 14 15.25 14C14.8358 14 14.5 14.3358 14.5 14.75V19.2502C14.5 19.6644 14.8358 20.0002 15.25 20.0002C15.6642 20.0002 16 19.6644 16 19.2502V14.75Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/headphones_sound_wave_24_regular.svg";

Details

Keywords

audiosoundvolumedeviceanalog