Surface Hub icon

Use the Surface Hub 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 { SurfaceHub24Regular, SurfaceHub24Filled } from "@fluentui/react-icons";

export function Example() {
  return <SurfaceHub24Regular aria-label="Surface Hub" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_surface_hub_24_regular.svg" width="24" height="24" alt="Surface Hub">

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="M19.2498 2C19.6608 2 19.9883 2.32863 19.9996 2.72749L19.9957 2.82851L18.9957 12.3285C18.9591 12.6755 18.6898 12.9466 18.3528 12.993L18.2498 13H17.521L18.9878 21.1182L18.9992 21.2196C19.0154 21.5887 18.7567 21.9221 18.3831 21.9896C18.0094 22.0571 17.6505 21.8352 17.5366 21.4838L17.5117 21.3848L16.9 18H14.103L13.4956 21.3842C13.4223 21.7919 13.0324 22.063 12.6247 21.9897C12.251 21.9225 11.9921 21.5893 12.008 21.2202L12.0193 21.1188L12.579 18H8.103L7.4956 21.3842C7.42231 21.7919 7.03242 22.063 6.62474 21.9897C6.25103 21.9225 5.99211 21.5893 6.00799 21.2202L6.01926 21.1188L7.478 13H4.74978C4.33876 13 4.01129 12.6714 4 12.2725L4.0039 12.1715L5.0039 2.67149C5.04043 2.32448 5.30977 2.05345 5.6468 2.00704L5.74978 2H19.2498ZM13.478 13H9.002L8.373 16.5H12.849L13.478 13ZM15.996 13H15.002L14.373 16.5H16.628L15.996 13ZM18.4168 3.5H6.42378L5.58178 11.5H17.5748L18.4168 3.5Z" 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/surface_hub_24_regular.svg";

Details

Keywords

devicephysicalproductscreentouchscreenpresentation