Speaker Bluetooth icon
Used in volume & various audio setting scenarios. The Speaker Bluetooth 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 Bluetooth 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 { SpeakerBluetooth24Regular, SpeakerBluetooth24Filled } from "@fluentui/react-icons";
export function Example() {
return <SpeakerBluetooth24Regular aria-label="Speaker Bluetooth" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_speaker_bluetooth_24_regular.svg" width="24" height="24" alt="Speaker Bluetooth"> 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="M14.7041 3.4425C14.8952 3.66821 15 3.95433 15 4.25003V19.7517C15 20.442 14.4404 21.0017 13.75 21.0017C13.4542 21.0017 13.168 20.8968 12.9423 20.7056L7.97513 16.4999H4.25C3.00736 16.4999 2 15.4925 2 14.2499V9.74985C2 8.50721 3.00736 7.49985 4.25 7.49985H7.97522L12.9425 3.29588C13.4694 2.84989 14.2582 2.91554 14.7041 3.4425ZM13.5 4.78913L8.52478 8.99985H4.25C3.83579 8.99985 3.5 9.33564 3.5 9.74985V14.2499C3.5 14.6641 3.83579 14.9999 4.25 14.9999H8.52487L13.5 19.2124V4.78913ZM17.5 9.89557V6.74985C17.5 6.10305 18.2521 5.77494 18.725 6.16876L18.8011 6.24114L21.8011 9.49114C22.0679 9.78022 22.063 10.2201 21.8063 10.503L21.7301 10.5761L20.0221 11.9991L21.7304 13.4239C22.0323 13.6757 22.0846 14.1123 21.8672 14.4261L21.8012 14.5084L18.8012 17.7599C18.3626 18.2353 17.5872 17.9663 17.5068 17.3561L17.5 17.2513V14.1005L17.2334 14.3226C16.9152 14.5877 16.4423 14.5447 16.1771 14.2265C15.9361 13.9372 15.9497 13.52 16.1933 13.2474L16.2732 13.1702L17.5 12.1481V11.8488L16.2729 10.8254C15.9549 10.5601 15.9121 10.0871 16.1774 9.76905C16.4186 9.47987 16.8313 9.41822 17.1434 9.60872L17.2337 9.67347L17.5 9.89557V6.74985V9.89557ZM19 13.0999V15.3325L20.1641 14.0708L19 13.0999ZM19 8.66809V10.8983L20.1637 9.92875L19 8.66809Z" 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_bluetooth_24_regular.svg";Details
| Name | Speaker Bluetooth |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_speaker_bluetooth_24_regular.svg |
| Filled file | ic_fluent_speaker_bluetooth_24_filled.svg |
| React components | SpeakerBluetooth24Regular, SpeakerBluetooth24Filled |
| License | MIT (© Microsoft Corporation) |