Sound Source icon

Use the Sound Source 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 { SoundSource24Regular, SoundSource24Filled } from "@fluentui/react-icons";

export function Example() {
  return <SoundSource24Regular aria-label="Sound Source" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_sound_source_24_regular.svg" width="24" height="24" alt="Sound Source">

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 12C20.5 14.2167 19.6515 16.2352 18.2615 17.7484L19.2543 18.883C20.9559 17.0901 22 14.667 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 14.667 3.04406 17.0902 4.74576 18.8831L5.73853 17.7485C4.34854 16.2352 3.5 14.2167 3.5 12ZM19.25 12.125C19.25 13.9331 18.5765 15.5838 17.4667 16.8401L16.4686 15.6993C17.2692 14.7276 17.75 13.4824 17.75 12.125C17.75 9.0184 15.2316 6.5 12.125 6.5C9.0184 6.5 6.5 9.0184 6.5 12.125C6.5 13.4137 6.9334 14.6013 7.6624 15.5498L6.65936 16.6961C5.62355 15.4589 5 13.8648 5 12.125C5 8.18997 8.18997 5 12.125 5C16.06 5 19.25 8.18997 19.25 12.125ZM16.25 12C16.25 12.9395 15.9452 13.8078 15.429 14.5113L14.4028 13.3385C14.624 12.9424 14.75 12.4859 14.75 12C14.75 10.4812 13.5188 9.25 12 9.25C10.4812 9.25 9.25 10.4812 9.25 12C9.25 12.4859 9.37603 12.9424 9.59719 13.3386L8.571 14.5114C8.05484 13.8078 7.75 12.9395 7.75 12C7.75 9.65279 9.65279 7.75 12 7.75C14.3472 7.75 16.25 9.65279 16.25 12ZM12.5644 12.7561C12.422 12.5934 12.2163 12.5 12 12.5C11.7837 12.5 11.578 12.5934 11.4356 12.7561L4.43558 20.7561C4.24179 20.9776 4.19544 21.2919 4.31704 21.5599C4.43864 21.8279 4.70573 22 5.00001 22H19C19.2943 22 19.5614 21.8279 19.683 21.5599C19.8046 21.2919 19.7582 20.9776 19.5644 20.7561L12.5644 12.7561ZM17.3472 20.5H6.65284L12 14.3889L17.3472 20.5Z" 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/sound_source_24_regular.svg";

Details

Keywords

soundaudiowavedevicesettings