Serial Port Off icon

Use the Serial Port 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 { SerialPortOff24Regular, SerialPortOff24Filled } from "@fluentui/react-icons";

export function Example() {
  return <SerialPortOff24Regular aria-label="Serial Port Off" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_serial_port_off_24_regular.svg" width="24" height="24" alt="Serial Port 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.21973 2.21973C2.51262 1.92684 2.98738 1.92684 3.28028 2.21973L21.7803 20.7197C22.073 21.0126 22.0729 21.4874 21.7803 21.7803C21.4874 22.0731 21.0126 22.073 20.7197 21.7803L15.9404 17.001H5.97852C4.7052 17.0009 3.59867 16.1264 3.30371 14.8877L2.23242 10.3867C1.82108 8.65872 3.13094 7 4.90723 7H5.93945L2.21973 3.28028C1.92684 2.98738 1.92684 2.51262 2.21973 2.21973ZM19.0918 7C20.8685 7.00018 22.1789 8.65946 21.7666 10.3877L20.6924 14.8897C20.537 15.5405 20.1555 16.0885 19.6455 16.4639L18.5576 15.376C18.8887 15.2168 19.1437 14.9167 19.2334 14.541L20.3076 10.04C20.4951 9.2545 19.8994 8.50018 19.0918 8.5H11.6816L10.1816 7H19.0918ZM4.90723 8.5C4.09983 8.5 3.50443 9.25361 3.69141 10.0391L4.7627 14.54C4.89677 15.103 5.39979 15.5009 5.97852 15.501H14.4404L10.1152 11.1758C9.97988 11.371 9.75556 11.4999 9.5 11.5C9.08588 11.4999 8.75003 11.1641 8.75 10.75C8.75006 10.4946 8.87718 10.2683 9.07227 10.1328L7.43946 8.5H4.90723ZM8.25 12.5C8.66406 12.5001 8.9999 12.8359 9 13.25C8.99997 13.6641 8.6641 13.9999 8.25 14C7.83588 13.9999 7.50003 13.6641 7.5 13.25C7.5001 12.8359 7.83592 12.5001 8.25 12.5ZM10.75 12.5C11.1641 12.5001 11.4999 12.8359 11.5 13.25C11.5 13.6641 11.1641 13.9999 10.75 14C10.3359 13.9999 10 13.6641 10 13.25C10.0001 12.8359 10.3359 12.5001 10.75 12.5ZM7 10C7.41406 10.0001 7.7499 10.3359 7.75 10.75C7.74997 11.1641 7.4141 11.4999 7 11.5C6.58588 11.4999 6.25003 11.1641 6.25 10.75C6.2501 10.3359 6.58592 10.0001 7 10ZM17 10C17.4141 10.0001 17.7499 10.3359 17.75 10.75C17.75 11.1641 17.4141 11.4999 17 11.5C16.5859 11.4999 16.25 11.1641 16.25 10.75C16.2501 10.3359 16.5859 10.0001 17 10ZM14.5 10C14.9141 10.0001 15.2499 10.3359 15.25 10.75C15.25 11.1081 14.9987 11.4069 14.6631 11.4814L13.7686 10.5869C13.8431 10.2513 14.142 10.0001 14.5 10Z" 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/serial_port_off_24_regular.svg";

Details