Bluetooth icon

Use the 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 { Bluetooth24Regular, Bluetooth24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Bluetooth24Regular aria-label="Bluetooth" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_bluetooth_24_regular.svg" width="24" height="24" alt="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="M11.463 2.05709C11.7433 1.941 12.0658 2.00517 12.2803 2.21967L17.2803 7.21967C17.4284 7.36777 17.5079 7.57105 17.4994 7.78033C17.4909 7.9896 17.3953 8.1858 17.2358 8.32145L12.9081 12L17.2358 15.6785C17.3953 15.8142 17.4909 16.0104 17.4994 16.2197C17.5079 16.4289 17.4284 16.6322 17.2803 16.7803L12.2803 21.7803C12.0658 21.9948 11.7433 22.059 11.463 21.9429C11.1827 21.8268 11 21.5533 11 21.25V13.6218L7.23575 16.8215C6.92015 17.0897 6.44683 17.0513 6.17856 16.7357C5.9103 16.4201 5.94867 15.9468 6.26428 15.6785L10.592 12L6.26428 8.32145C5.94867 8.05319 5.9103 7.57987 6.17856 7.26426C6.44683 6.94866 6.92015 6.91028 7.23575 7.17854L11 10.3782V2.75C11 2.44665 11.1827 2.17318 11.463 2.05709ZM12.5 13.6218V19.4393L15.6446 16.2947L12.5 13.6218ZM12.5 10.3782L15.6446 7.70526L12.5 4.56066V10.3782Z" 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/bluetooth_24_regular.svg";

Details

Keywords

deviceconnection