Speaker Box icon

Use the Speaker Box 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 { SpeakerBox24Regular, SpeakerBox24Filled } from "@fluentui/react-icons";

export function Example() {
  return <SpeakerBox24Regular aria-label="Speaker Box" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_speaker_box_24_regular.svg" width="24" height="24" alt="Speaker Box">

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="M4 5.25C4 3.45507 5.45507 2 7.25 2H16.75C18.5449 2 20 3.45507 20 5.25V18.75C20 20.5449 18.5449 22 16.75 22H7.25C5.45507 22 4 20.5449 4 18.75V5.25ZM7.25 3.5C6.2835 3.5 5.5 4.2835 5.5 5.25V18.75C5.5 19.7165 6.2835 20.5 7.25 20.5H16.75C17.7165 20.5 18.5 19.7165 18.5 18.75V5.25C18.5 4.2835 17.7165 3.5 16.75 3.5H7.25ZM12 12.5C10.8954 12.5 10 13.3954 10 14.5C10 15.6046 10.8954 16.5 12 16.5C13.1046 16.5 14 15.6046 14 14.5C14 13.3954 13.1046 12.5 12 12.5ZM8.5 14.5C8.5 12.567 10.067 11 12 11C13.933 11 15.5 12.567 15.5 14.5C15.5 16.433 13.933 18 12 18C10.067 18 8.5 16.433 8.5 14.5ZM12 9C12.8284 9 13.5 8.32843 13.5 7.5C13.5 6.67157 12.8284 6 12 6C11.1716 6 10.5 6.67157 10.5 7.5C10.5 8.32843 11.1716 9 12 9Z" 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/speaker_box_24_regular.svg";

Details

Keywords

musicsoundnoiselouddeviceset