Serial Port icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_serial_port_24_regular.svg" width="24" height="24" alt="Serial Port">

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="M7.00047 11.4997C7.41469 11.4997 7.75047 11.1639 7.75047 10.7497C7.75047 10.3355 7.41469 9.99969 7.00047 9.99969C6.58626 9.99969 6.25047 10.3355 6.25047 10.7497C6.25047 11.1639 6.58626 11.4997 7.00047 11.4997ZM10.2505 10.7497C10.2505 11.1639 9.91469 11.4997 9.50047 11.4997C9.08626 11.4997 8.75047 11.1639 8.75047 10.7497C8.75047 10.3355 9.08626 9.99969 9.50047 9.99969C9.91469 9.99969 10.2505 10.3355 10.2505 10.7497ZM8.25047 13.9997C8.66469 13.9997 9.00047 13.6639 9.00047 13.2497C9.00047 12.8355 8.66469 12.4997 8.25047 12.4997C7.83626 12.4997 7.50047 12.8355 7.50047 13.2497C7.50047 13.6639 7.83626 13.9997 8.25047 13.9997ZM11.5005 13.2497C11.5005 13.6639 11.1647 13.9997 10.7505 13.9997C10.3363 13.9997 10.0005 13.6639 10.0005 13.2497C10.0005 12.8355 10.3363 12.4997 10.7505 12.4997C11.1647 12.4997 11.5005 12.8355 11.5005 13.2497ZM13.2505 13.9997C13.6647 13.9997 14.0005 13.6639 14.0005 13.2497C14.0005 12.8355 13.6647 12.4997 13.2505 12.4997C12.8363 12.4997 12.5005 12.8355 12.5005 13.2497C12.5005 13.6639 12.8363 13.9997 13.2505 13.9997ZM16.5005 13.2497C16.5005 13.6639 16.1647 13.9997 15.7505 13.9997C15.3363 13.9997 15.0005 13.6639 15.0005 13.2497C15.0005 12.8355 15.3363 12.4997 15.7505 12.4997C16.1647 12.4997 16.5005 12.8355 16.5005 13.2497ZM12.0005 11.4997C12.4147 11.4997 12.7505 11.1639 12.7505 10.7497C12.7505 10.3355 12.4147 9.99969 12.0005 9.99969C11.5863 9.99969 11.2505 10.3355 11.2505 10.7497C11.2505 11.1639 11.5863 11.4997 12.0005 11.4997ZM15.2505 10.7497C15.2505 11.1639 14.9147 11.4997 14.5005 11.4997C14.0863 11.4997 13.7505 11.1639 13.7505 10.7497C13.7505 10.3355 14.0863 9.99969 14.5005 9.99969C14.9147 9.99969 15.2505 10.3355 15.2505 10.7497ZM17.0005 11.4997C17.4147 11.4997 17.7505 11.1639 17.7505 10.7497C17.7505 10.3355 17.4147 9.99969 17.0005 9.99969C16.5863 9.99969 16.2505 10.3355 16.2505 10.7497C16.2505 11.1639 16.5863 11.4997 17.0005 11.4997ZM4.9075 6.99902C3.13122 6.99902 1.82091 8.65786 2.23225 10.3859L3.30378 14.8872C3.59868 16.126 4.70556 17.0003 5.97903 17.0003H18.0177C19.2906 17.0003 20.3971 16.1268 20.6926 14.8887L21.7669 10.3874C22.1794 8.65901 20.869 6.99902 19.092 6.99902H4.9075ZM3.69148 10.0385C3.5045 9.25304 4.1001 8.49902 4.9075 8.49902H19.092C19.8997 8.49902 20.4954 9.25356 20.3079 10.0392L19.2336 14.5405C19.0993 15.1033 18.5963 15.5003 18.0177 15.5003H5.97903C5.40018 15.5003 4.89705 15.1029 4.76301 14.5398L3.69148 10.0385Z" 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_24_regular.svg";

Details

Keywords

analogplugportcorddevice