Port HDMI icon
Used to represent physical connection ports in devices. The Port HDMI icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Port HDMI 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 { PortHdmi24Regular, PortHdmi24Filled } from "@fluentui/react-icons";
export function Example() {
return <PortHdmi24Regular aria-label="Port HDMI" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_port_hdmi_24_regular.svg" width="24" height="24" alt="Port HDMI"> 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="M21.4142 11.4142L18.5858 8.58575C18.2107 8.2107 17.702 8 17.1716 8H6.82843C6.29799 8 5.78928 8.2107 5.41418 8.58575L2.58582 11.4142C2.40008 11.5999 2.25275 11.8204 2.15224 12.063C2.05172 12.3057 1.99999 12.5658 2 12.8284V14C2 14.5304 2.21071 15.0391 2.58579 15.4142C2.96086 15.7893 3.46957 16 4 16H20C20.5304 16 21.0391 15.7893 21.4142 15.4142C21.7893 15.0391 22 14.5304 22 14V12.8284C22 12.5658 21.9483 12.3057 21.8478 12.063C21.7472 11.8204 21.5999 11.5999 21.4142 11.4142V11.4142ZM20.5 14C20.4998 14.1326 20.4471 14.2597 20.3534 14.3534C20.2597 14.4471 20.1326 14.4998 20 14.5H4C3.86744 14.4998 3.74035 14.4471 3.64661 14.3534C3.55288 14.2597 3.50015 14.1326 3.5 14V12.8284C3.49982 12.7627 3.51268 12.6977 3.53782 12.637C3.56297 12.5763 3.5999 12.5212 3.64648 12.4748L6.47473 9.64655C6.52107 9.59995 6.57619 9.563 6.6369 9.53784C6.69761 9.51269 6.76271 9.49982 6.82843 9.5H17.1716C17.2373 9.49982 17.3023 9.51267 17.363 9.5378C17.4237 9.56293 17.4788 9.59985 17.5252 9.64642L20.3536 12.475C20.4002 12.5213 20.4371 12.5764 20.4622 12.6371C20.4873 12.6977 20.5002 12.7628 20.5 12.8285V14ZM16.25 11.25H7.75C7.55109 11.25 7.36032 11.329 7.21967 11.4697C7.07902 11.6103 7 11.8011 7 12C7 12.1989 7.07902 12.3897 7.21967 12.5303C7.36032 12.671 7.55109 12.75 7.75 12.75H16.25C16.4489 12.75 16.6397 12.671 16.7803 12.5303C16.921 12.3897 17 12.1989 17 12C17 11.8011 16.921 11.6103 16.7803 11.4697C16.6397 11.329 16.4489 11.25 16.25 11.25Z" 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_hdmi_24_regular.svg";Details
| Name | Port HDMI |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_port_hdmi_24_regular.svg |
| Filled file | ic_fluent_port_hdmi_24_filled.svg |
| React components | PortHdmi24Regular, PortHdmi24Filled |
| License | MIT (© Microsoft Corporation) |