Speaker USB icon
Used in volume & various audio setting scenarios. The Speaker USB icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Speaker USB 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 { SpeakerUsb24Regular, SpeakerUsb24Filled } from "@fluentui/react-icons";
export function Example() {
return <SpeakerUsb24Regular aria-label="Speaker USB" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_speaker_usb_24_regular.svg" width="24" height="24" alt="Speaker USB"> 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="M15 4.24807C15 3.95238 14.8952 3.66625 14.7041 3.44054C14.2582 2.91358 13.4694 2.84794 12.9425 3.29393L7.97522 7.4979H4.25C3.00736 7.4979 2 8.50526 2 9.7479V14.2479C2 15.4905 3.00736 16.4979 4.25 16.4979H7.97513L12.9423 20.7037C13.168 20.8948 13.4542 20.9997 13.75 20.9997C14.4404 20.9997 15 20.4401 15 19.7497V4.24807ZM8.52478 8.9979L13.5 4.78718V19.2104L8.52487 14.9979H4.25C3.83579 14.9979 3.5 14.6621 3.5 14.2479V9.7479C3.5 9.33369 3.83579 8.9979 4.25 8.9979H8.52478ZM16.163 13.9547L17.5 15.9995V17.9995C17.5 18.5518 17.9477 18.9995 18.5 18.9995H20.5C21.0523 18.9995 21.5 18.5518 21.5 17.9995V15.9995L22.8329 13.9937C22.9419 13.8296 23 13.6371 23 13.4402V9.99951C23 9.44723 22.5523 8.99951 22 8.99951V6.99951C22 6.44723 21.5523 5.99951 21 5.99951H18C17.4477 5.99951 17 6.44723 17 6.99951V8.99951C16.4477 8.99951 16 9.44723 16 9.99951V13.4075C16 13.6019 16.0567 13.792 16.163 13.9547ZM18.5 7.49951H20.5V8.99951H18.5V7.49951Z" 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_usb_24_regular.svg";Details
| Name | Speaker USB |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_speaker_usb_24_regular.svg |
| Filled file | ic_fluent_speaker_usb_24_filled.svg |
| React components | SpeakerUsb24Regular, SpeakerUsb24Filled |
| License | MIT (© Microsoft Corporation) |