Port USB C icon

Use the Port USB C 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 { PortUsbC24Regular, PortUsbC24Filled } from "@fluentui/react-icons";

export function Example() {
  return <PortUsbC24Regular aria-label="Port USB C" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_port_usb_c_24_regular.svg" width="24" height="24" alt="Port USB C">

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="M16 10.5C16.3978 10.5 16.7794 10.658 17.0607 10.9393C17.342 11.2206 17.5 11.6022 17.5 12C17.5 12.3978 17.342 12.7794 17.0607 13.0607C16.7794 13.342 16.3978 13.5 16 13.5H8C7.60218 13.5 7.22064 13.342 6.93934 13.0607C6.65804 12.7794 6.5 12.3978 6.5 12C6.5 11.6022 6.65804 11.2206 6.93934 10.9393C7.22064 10.658 7.60218 10.5 8 10.5H16ZM16 9H8C7.20435 9 6.44129 9.31607 5.87868 9.87868C5.31607 10.4413 5 11.2044 5 12C5 12.7956 5.31607 13.5587 5.87868 14.1213C6.44129 14.6839 7.20435 15 8 15H16C16.7956 15 17.5587 14.6839 18.1213 14.1213C18.6839 13.5587 19 12.7956 19 12C19 11.2044 18.6839 10.4413 18.1213 9.87868C17.5587 9.31607 16.7956 9 16 9Z" 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/port_usb_c_24_regular.svg";

Details

Keywords

analogplugportcord