Fluent Icons

Keyboard Dock icon

Used to represent docking keyboard scenarios. The Keyboard Dock 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_keyboard_dock_24_regular.svg

Keyboard Dock icon in React

npm install @fluentui/react-icons

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

export function Example() {
  return <KeyboardDock24Regular aria-label="Keyboard Dock" />;
}

Keyboard Dock icon in SVG

npm install @fluentui/svg-icons

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

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

Keyboard Dock icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Keyboard Dock icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.keyboard_dock_24_regular)

Keyboard Dock 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="&#xF4BA;" FontSize="24" />

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

Keyboard Dock 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_keyboard_dock_24_regular"></i>

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

Keyboard Dock icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_keyboard_dock_24_regular

Keyboard Dock icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .keyboardDock24Regular)

Keyboard Dock 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 Keyboard Dock 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 { KeyboardDock24Regular, KeyboardDock24Filled } from "@fluentui/react-icons";

export function Example() {
  return <KeyboardDock24Regular aria-label="Keyboard Dock" />;
}

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_keyboard_dock_24_regular.svg" width="24" height="24" alt="Keyboard Dock">

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="M17.2523 12H6.75232L6.65055 12.0068C6.28447 12.0565 6.00232 12.3703 6.00232 12.75C6.00232 13.1642 6.33811 13.5 6.75232 13.5H17.2523L17.3541 13.4932C17.7202 13.4435 18.0023 13.1297 18.0023 12.75C18.0023 12.3358 17.6665 12 17.2523 12ZM17.5023 9.5C17.5023 8.94772 17.0546 8.5 16.5023 8.5C15.95 8.5 15.5023 8.94772 15.5023 9.5C15.5023 10.0523 15.95 10.5 16.5023 10.5C17.0546 10.5 17.5023 10.0523 17.5023 9.5ZM11.5072 9.5C11.5072 8.94772 11.0595 8.5 10.5072 8.5C9.95491 8.5 9.50719 8.94772 9.50719 9.5C9.50719 10.0523 9.95491 10.5 10.5072 10.5C11.0595 10.5 11.5072 10.0523 11.5072 9.5ZM8.50719 9.5C8.50719 8.94772 8.05948 8.5 7.50719 8.5C6.95491 8.5 6.50719 8.94772 6.50719 9.5C6.50719 10.0523 6.95491 10.5 7.50719 10.5C8.05948 10.5 8.50719 10.0523 8.50719 9.5ZM14.5072 9.5C14.5072 8.94772 14.0595 8.5 13.5072 8.5C12.9549 8.5 12.5072 8.94772 12.5072 9.5C12.5072 10.0523 12.9549 10.5 13.5072 10.5C14.0595 10.5 14.5072 10.0523 14.5072 9.5ZM7.00232 6.5C7.00232 5.94772 6.5546 5.5 6.00232 5.5C5.45003 5.5 5.00232 5.94772 5.00232 6.5C5.00232 7.05228 5.45003 7.5 6.00232 7.5C6.5546 7.5 7.00232 7.05228 7.00232 6.5ZM9.99744 6.5C9.99744 5.94772 9.54973 5.5 8.99744 5.5C8.44516 5.5 7.99744 5.94772 7.99744 6.5C7.99744 7.05228 8.44516 7.5 8.99744 7.5C9.54973 7.5 9.99744 7.05228 9.99744 6.5ZM12.9974 6.5C12.9974 5.94772 12.5497 5.5 11.9974 5.5C11.4452 5.5 10.9974 5.94772 10.9974 6.5C10.9974 7.05228 11.4452 7.5 11.9974 7.5C12.5497 7.5 12.9974 7.05228 12.9974 6.5ZM15.9974 6.5C15.9974 5.94772 15.5497 5.5 14.9974 5.5C14.4452 5.5 13.9974 5.94772 13.9974 6.5C13.9974 7.05228 14.4452 7.5 14.9974 7.5C15.5497 7.5 15.9974 7.05228 15.9974 6.5ZM18.9974 6.5C18.9974 5.94772 18.5497 5.5 17.9974 5.5C17.4452 5.5 16.9974 5.94772 16.9974 6.5C16.9974 7.05228 17.4452 7.5 17.9974 7.5C18.5497 7.5 18.9974 7.05228 18.9974 6.5ZM21.9977 4.75C21.9977 3.50736 20.9903 2.5 19.7477 2.5H4.25232C3.00968 2.5 2.00232 3.50736 2.00232 4.75V14.2546C2.00232 15.4972 3.00968 16.5046 4.25232 16.5046H11.25V18H11.2525L11.2526 19.4392L10.4113 18.5984L10.3272 18.5257C10.0336 18.3079 9.61694 18.3321 9.35067 18.5984C9.05778 18.8912 9.05778 19.3661 9.35067 19.659L11.472 21.7803L11.5561 21.8529C11.6736 21.9401 11.8107 21.9885 11.95 21.9982H12.0546L12.1584 21.9837C12.2956 21.9546 12.4261 21.8868 12.5326 21.7803L14.654 19.659L14.7266 19.5749C14.9444 19.2813 14.9202 18.8646 14.654 18.5984L14.5699 18.5257C14.2762 18.3079 13.8596 18.3321 13.5933 18.5984L12.7526 19.4392L12.7523 16.5046H19.7477C20.9903 16.5046 21.9977 15.4972 21.9977 14.2546V4.75ZM12.75 15.0046V15H11.25V15.0046H4.25232C3.83811 15.0046 3.50232 14.6688 3.50232 14.2546V4.75C3.50232 4.33579 3.83811 4 4.25232 4H19.7477C20.1619 4 20.4977 4.33579 20.4977 4.75V14.2546C20.4977 14.6688 20.1619 15.0046 19.7477 15.0046H12.75Z" fill="currentColor"/></svg>

Details

NameKeyboard Dock
StylesRegular (outlined), Filled
Sizes20 px, 24 px
Regular (outlined) fileic_fluent_keyboard_dock_24_regular.svg
Filled fileic_fluent_keyboard_dock_24_filled.svg
React (Regular)KeyboardDock20Regular, KeyboardDock24Regular
React (Filled)KeyboardDock20Filled, KeyboardDock24Filled
LicenseMIT (© Microsoft Corporation)

Keywords

keyboardtypekeydeviceanalog

Related icons

KeyboardKeyboard 123Keyboard Layout One Handed LeftKeyboard Layout SplitKeyboard ShiftKeyboard Shift UppercaseKeyboard TabKeyboard Layout FloatKeyboard Layout ResizeSpacebarDockKeyboard Mouse