Fluent Icons

Desk Checkmark icon

The Desk Checkmark icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 4 sizes from 16 to 28 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_desk_checkmark_24_regular.svg

Desk Checkmark icon in React

npm install @fluentui/react-icons

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

export function Example() {
  return <DeskCheckmark24Regular aria-label="Desk Checkmark" />;
}

Desk Checkmark icon in SVG

npm install @fluentui/svg-icons

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

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

Desk Checkmark icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Desk Checkmark 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="&#xF0C17;" FontSize="24" />

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

Desk Checkmark 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_desk_checkmark_24_regular"></i>

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

Desk Checkmark icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_desk_checkmark_24_regular

Desk Checkmark icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .deskCheckmark24Regular)

Desk Checkmark 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 Desk Checkmark 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 { DeskCheckmark24Regular, DeskCheckmark24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DeskCheckmark24Regular aria-label="Desk Checkmark" />;
}

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_desk_checkmark_24_regular.svg" width="24" height="24" alt="Desk Checkmark">

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="M11.499 4C11.3012 4.47423 11.158 4.97671 11.0771 5.5H4.25C3.83579 5.5 3.5 5.83579 3.5 6.25V8H11.1758C11.3424 8.70531 11.6244 9.36528 12 9.96094V17.25C12 18.7688 10.7688 20 9.25 20H4.75C3.23122 20 2 18.7688 2 17.25V6.25C2 5.00736 3.00736 4 4.25 4H11.499ZM22 19.25C22 19.6642 21.6642 20 21.25 20C20.8358 20 20.5 19.6642 20.5 19.25V12.2656C21.0513 11.9782 21.5556 11.6142 22 11.1875V19.25ZM3.5 17.25C3.5 17.9404 4.05964 18.5 4.75 18.5H9.25C9.94036 18.5 10.5 17.9404 10.5 17.25V9.5H3.5V17.25ZM8.25 11.5C8.66421 11.5 9 11.8358 9 12.25C9 12.6642 8.66421 13 8.25 13H5.75C5.33579 13 5 12.6642 5 12.25C5 11.8358 5.33579 11.5 5.75 11.5H8.25ZM17.5 1C20.5376 1 23 3.46243 23 6.5C23 9.53757 20.5376 12 17.5 12C14.4624 12 12 9.53757 12 6.5C12 3.46243 14.4624 1 17.5 1ZM20.8535 4.14648C20.6583 3.95122 20.3417 3.95122 20.1465 4.14648L16.5 7.79297L14.8535 6.14648C14.6583 5.95122 14.3417 5.95122 14.1465 6.14648C13.9512 6.34175 13.9512 6.65825 14.1465 6.85352L16.1465 8.85352C16.3417 9.04878 16.6583 9.04878 16.8535 8.85352L20.8535 4.85352C21.0488 4.65825 21.0488 4.34175 20.8535 4.14648Z" fill="currentColor"/></svg>

Details

NameDesk Checkmark
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px, 28 px
Regular (outlined) fileic_fluent_desk_checkmark_24_regular.svg
Filled fileic_fluent_desk_checkmark_24_filled.svg
React (Regular)DeskCheckmark16Regular, DeskCheckmark20Regular, DeskCheckmark24Regular, DeskCheckmark28Regular
React (Filled)DeskCheckmark16Filled, DeskCheckmark20Filled, DeskCheckmark24Filled, DeskCheckmark28Filled
LicenseMIT (© Microsoft Corporation)

Related icons

Desk Multiple CheckmarkAccessibility CheckmarkArrow Sync CheckmarkArrow Trending CheckmarkBattery CheckmarkBox CheckmarkBox Multiple CheckmarkBraces CheckmarkBuilding CheckmarkCalendar CheckmarkCalendar Checkmark CenterCalendar Checkmark Sparkle