Desk Checkmark icon
The Desk Checkmark icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
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" />;
}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>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/desk_checkmark_24_regular.svg";Details
| Name | Desk Checkmark |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_desk_checkmark_24_regular.svg |
| Filled file | ic_fluent_desk_checkmark_24_filled.svg |
| React components | DeskCheckmark24Regular, DeskCheckmark24Filled |
| License | MIT (© Microsoft Corporation) |