USB Off icon

Use the USB Off 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 { UsbOff24Regular, UsbOff24Filled } from "@fluentui/react-icons";

export function Example() {
  return <UsbOff24Regular aria-label="USB Off" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_usb_off_24_regular.svg" width="24" height="24" alt="USB Off">

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="M2.21967 2.21971C2.51256 1.92686 2.98733 1.92683 3.28022 2.21971L21.7802 20.7197C22.0729 21.0126 22.0729 21.4874 21.7802 21.7803C21.4874 22.0731 21.0126 22.073 20.7197 21.7803L13.6513 14.7119L13.2929 15.0537C12.9462 15.3839 12.75 15.8425 12.7499 16.3213V18.1465C13.4826 18.4433 13.9999 19.1609 13.9999 20C13.9999 21.1046 13.1045 22 11.9999 22C10.8954 22 9.99995 21.1046 9.99995 20C10 19.1641 10.513 18.4483 11.2412 18.1494C11.2001 17.734 11.0119 17.3442 10.707 17.0537L7.00873 13.5322C6.36474 12.9188 5.99998 12.0681 5.99994 11.1787V10.3291C5.40926 10.048 4.99994 9.44769 4.99994 8.74999C5.00001 8.02302 5.44311 7.3991 6.07416 7.13476L2.21967 3.28026C1.92678 2.98737 1.92678 2.51261 2.21967 2.21971ZM8.36323 9.42382C8.19639 9.82123 7.88805 10.1444 7.49994 10.3291V11.1787C7.49998 11.6575 7.69619 12.116 8.04291 12.4463L11.2499 15.5V12.3105L8.36323 9.42382ZM18.25 4.99999C18.6641 5.00002 18.9999 5.33587 19 5.74999V7.74999C19 8.16419 18.6641 8.49996 18.25 8.49999H18V9.1787C17.9999 10.0681 17.6351 10.9188 16.9912 11.5322L15.8242 12.6426L14.7636 11.582L15.957 10.4463C16.3037 10.116 16.4999 9.65754 16.5 9.1787V8.49999H16.25C15.8357 8.49999 15.5 8.16421 15.5 7.74999V5.74999C15.5 5.33585 15.8358 4.99999 16.25 4.99999H18.25ZM11.3642 1.85253C11.6581 1.38375 12.3417 1.38384 12.6357 1.85253L13.8847 3.84765C14.197 4.34705 13.8381 4.99497 13.249 4.99511H12.7499V9.56835L11.2499 8.06835V4.99511H10.7509C10.1617 4.99495 9.8026 4.34708 10.1152 3.84765L11.3642 1.85253Z" 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/usb_off_24_regular.svg";

Details