Tab Desktop Image icon

Used in large screen browser tab scenarios. Contains option variants. The Tab Desktop Image icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 3 sizes from 16 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

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_tab_desktop_image_24_regular.svg

Tab Desktop Image icon in React

npm install @fluentui/react-icons

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

export function Example() {
  return <TabDesktopImage24Regular aria-label="Tab Desktop Image" />;
}

Tab Desktop Image icon in SVG

npm install @fluentui/svg-icons

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

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

Tab Desktop Image icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Tab Desktop Image icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.tab_desktop_image_24_regular)

Tab Desktop Image 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="&#xF74F;" FontSize="24" />

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

Tab Desktop Image 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_tab_desktop_image_24_regular"></i>

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

Tab Desktop Image icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_tab_desktop_image_24_regular

Tab Desktop Image icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .tabDesktopImage24Regular)

Tab Desktop Image 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 Tab Desktop Image 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 { TabDesktopImage24Regular, TabDesktopImage24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TabDesktopImage24Regular aria-label="Tab Desktop Image" />;
}

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_tab_desktop_image_24_regular.svg" width="24" height="24" alt="Tab Desktop Image">

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="M5.75 3C4.23122 3 3 4.23122 3 5.75V10.5351C3.45161 10.2739 3.95903 10.0984 4.5 10.0309V5.75C4.5 5.05964 5.05964 4.5 5.75 4.5H11V5.75C11 6.99264 12.0074 8 13.25 8H19.5V18.25C19.5 18.9404 18.9404 19.5 18.25 19.5H13.9691C13.9016 20.041 13.7261 20.5484 13.4649 21H18.25C19.7688 21 21 19.7688 21 18.25V5.75C21 4.23122 19.7688 3 18.25 3H5.75ZM19.5 6.5H13.25C12.8358 6.5 12.5 6.16421 12.5 5.75V4.5H18.25C18.9404 4.5 19.5 5.05964 19.5 5.75V6.5ZM5 11C3.34315 11 2 12.3431 2 14V19C2 19.5564 2.15145 20.0773 2.41536 20.524L5.90901 17.0303C6.78769 16.1516 8.21231 16.1517 9.09099 17.0303L12.5846 20.524C12.8486 20.0773 13 19.5564 13 19V14C13 12.3431 11.6569 11 10 11H5ZM5 22C4.44364 22 3.92266 21.8486 3.47602 21.5846L6.96967 18.091C7.26256 17.7981 7.73744 17.7981 8.03033 18.091L11.524 21.5846C11.0773 21.8486 10.5564 22 10 22H5ZM10 15C9.44772 15 9 14.5523 9 14C9 13.4477 9.44772 13 10 13C10.5523 13 11 13.4477 11 14C11 14.5523 10.5523 15 10 15Z" fill="currentColor"/></svg>

Details

NameTab Desktop Image
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px
Regular (outlined) fileic_fluent_tab_desktop_image_24_regular.svg
Filled fileic_fluent_tab_desktop_image_24_filled.svg
React (Regular)TabDesktopImage16Regular, TabDesktopImage20Regular, TabDesktopImage24Regular
React (Filled)TabDesktopImage16Filled, TabDesktopImage20Filled, TabDesktopImage24Filled
LicenseMIT (© Microsoft Corporation)

Keywords

tabmobilerectanglebrowser

Related icons