Fluent Icons

Surface Hub icon

Used to represent specific Microsoft devices. The Surface Hub icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 2 sizes from 20 to 24 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG
Xceed Toolkit Plus for WPF logoXceed Toolkit Plus for WPFSponsorUpgrade Your WPF UI with Xceed Toolkit Plus

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_surface_hub_24_regular.svg

Surface Hub icon in React

npm install @fluentui/react-icons

import { SurfaceHub24Regular } from "@fluentui/react-icons";

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

Surface Hub icon in SVG

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/surface_hub_24_regular.svg";

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/surface_hub_24_regular.svg" width="24" height="24" alt="Surface Hub">

Surface Hub icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.SurfaceHub())" />

Surface Hub icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.surface_hub_24_regular)

Surface Hub icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xF73B;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xF73B;" FontSize="24" />

Surface Hub icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_surface_hub_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\f73b";
  font-size: 24px;
}

Surface Hub icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_surface_hub_24_regular" />

// Kotlin
R.drawable.ic_fluent_surface_hub_24_regular

Surface Hub icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .surfaceHub24Regular)

Surface Hub icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

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" />;
}

Coding agents can look up this component through the Fluent Icons MCP server.

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>

Details

NameSurface Hub
StylesRegular (outlined), Filled
Sizes20 px, 24 px
Regular (outlined) fileic_fluent_surface_hub_24_regular.svg
Filled fileic_fluent_surface_hub_24_filled.svg
React (Regular)SurfaceHub20Regular, SurfaceHub24Regular
React (Filled)SurfaceHub20Filled, SurfaceHub24Filled
LicenseMIT (© Microsoft Corporation)

Keywords

devicephysicalproductscreentouch screenpresentation

Related icons

Surface EarbudsGlobe SurfaceServer SurfaceServer Surface MultipleTabletTablet SpeakerTVTV Arrow RightTV USBHard DriveHard Drive CallHeadset VR