Fluent Icons

Hand Draw icon

Used to represent gesture drawing. The Hand Draw icon is part of Microsoft's Fluent UI System Icons, available here in regular, filled and light styles in 5 sizes from 16 to 32 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_hand_draw_24_regular.svg

Hand Draw icon in React

npm install @fluentui/react-icons

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

export function Example() {
  return <HandDraw24Regular aria-label="Hand Draw" />;
}

Hand Draw icon in SVG

npm install @fluentui/svg-icons

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

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

Hand Draw icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Hand Draw icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.hand_draw_24_regular)

Hand Draw 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="&#xE6D8;" FontSize="24" />

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

Hand Draw 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_hand_draw_24_regular"></i>

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

Hand Draw icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_hand_draw_24_regular

Hand Draw icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .handDraw24Regular)

Hand Draw 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 Hand Draw 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 { HandDraw24Regular, HandDraw24Filled } from "@fluentui/react-icons";

export function Example() {
  return <HandDraw24Regular aria-label="Hand Draw" />;
}

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_hand_draw_24_regular.svg" width="24" height="24" alt="Hand Draw">

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.4046 2.59778C19.7206 2.85061 20 3.23393 20 3.74999C20 4.53438 19.5008 5.04553 18.9323 5.34361C18.3872 5.62939 17.6737 5.78612 16.9222 5.88112C15.4712 6.06452 13.5774 6.04889 11.7372 6.0337L11.494 6.03171C9.53841 6.01598 7.66508 6.01058 6.28157 6.21514C5.58436 6.31822 5.09174 6.46457 4.79206 6.63824C4.52367 6.79376 4.50026 6.9082 4.5 6.99901L4.50096 7.00092C4.50573 7.01 4.52386 7.03932 4.5756 7.08438C4.68677 7.1812 4.89038 7.29686 5.21185 7.41092C5.85037 7.63747 6.74581 7.78694 7.69765 7.87905C7.79846 7.8888 7.89934 7.89787 8 7.90628V9.41121C7.85174 9.39953 7.70252 9.38653 7.55317 9.37207C6.5673 9.27668 5.52504 9.11365 4.71028 8.82457C4.30511 8.68082 3.90319 8.48788 3.59048 8.21555C3.26484 7.93196 3 7.52579 3 7.00055C3 6.21661 3.46222 5.67521 4.03997 5.3404C4.58795 5.02286 5.30627 4.84303 6.06218 4.73127C7.58492 4.50612 9.58659 4.51632 11.506 4.53176L11.6881 4.53324C13.5815 4.54866 15.386 4.56335 16.7341 4.39296C17.4357 4.30428 17.9331 4.1738 18.2357 4.01514C18.4299 3.91333 18.4818 3.83854 18.4954 3.79293C18.4884 3.78642 18.4793 3.77846 18.4675 3.76904C18.37 3.69101 18.1811 3.59148 17.8702 3.49253C17.2551 3.29675 16.3792 3.16904 15.4094 3.09209C13.8153 2.9656 12.1224 2.9857 11.2123 2.9965C11.0208 2.99877 10.864 3.00063 10.75 3.00063C10.3358 3.00063 9.99999 2.66484 10 2.25062C10 1.83641 10.3358 1.50063 10.75 1.50063C10.8486 1.50063 10.9907 1.4989 11.1684 1.49672C12.0616 1.4858 13.8532 1.4639 15.5281 1.59679C16.5271 1.67605 17.5418 1.81387 18.3251 2.06318C18.7135 2.18678 19.1008 2.3547 19.4046 2.59778ZM13.995 9.32949C13.9282 7.96966 13.098 7.00055 11.7494 7.00055C10.3421 7.00055 9.49939 8.05576 9.49939 9.50903V13.6768L9.24018 13.5973C8.04902 13.2495 7.11582 13.2297 6.41398 13.5806C5.46054 14.0573 4.97044 14.9127 4.99502 16.0213C5.0012 16.2998 5.16131 16.552 5.41079 16.6761L7.7737 17.8516L7.8711 17.9039L7.96499 17.9623L9.84872 19.2182L10.0421 19.3569C10.4812 19.6954 10.8337 20.1351 11.0685 20.6399L11.0976 20.7024L11.1769 20.8572C11.629 21.6611 12.5326 22.1133 13.4572 21.9806L15.8755 21.6336L16.0407 21.6036C16.8567 21.4238 17.5116 20.8034 17.7296 19.9872L18.7778 16.0641L18.8204 15.8846C19.1692 14.2087 18.1511 12.5326 16.4768 12.0853C16.3915 12.0625 16.3054 12.0432 16.2186 12.0275L13.9994 11.6245V9.50903L13.995 9.32949ZM11.0033 9.36691C11.037 8.77549 11.2894 8.50055 11.7494 8.50055C12.2447 8.50055 12.4994 8.81941 12.4994 9.50903V12.2506L12.507 12.3576C12.5522 12.6728 12.7944 12.9302 13.1154 12.9885L16.0204 13.5175L16.0896 13.5345C17.0234 13.784 17.5781 14.7431 17.3286 15.6769L16.2805 19.6L16.2438 19.7052C16.1413 19.9415 15.9226 20.1115 15.6624 20.1488L13.2442 20.4958L13.1356 20.5035C12.8479 20.5028 12.5816 20.3364 12.4576 20.0698L12.4285 20.0072L12.3066 19.763C11.9215 19.0416 11.3635 18.4252 10.6808 17.9701L8.79704 16.7143L8.62267 16.6058L8.4418 16.5086L6.53655 15.5608L6.575 15.4413C6.66458 15.2132 6.83079 15.0493 7.0848 14.9223C7.52208 14.7036 8.50287 14.8442 9.9635 15.4464C10.4572 15.65 10.9994 15.2871 10.9994 14.7531V9.50903L11.0033 9.36691Z" fill="currentColor"/></svg>

Details

NameHand Draw
StylesRegular (outlined), Filled, Light
Sizes16 px, 20 px, 24 px, 28 px, 32 px
Regular (outlined) fileic_fluent_hand_draw_24_regular.svg
Filled fileic_fluent_hand_draw_24_filled.svg
React (Regular)HandDraw16Regular, HandDraw20Regular, HandDraw24Regular, HandDraw28Regular, HandDraw32Regular
React (Filled)HandDraw16Filled, HandDraw20Filled, HandDraw24Filled, HandDraw28Filled, HandDraw32Filled
React (Light)HandDraw32Light
LicenseMIT (© Microsoft Corporation)

Keywords

gesture

Related icons

Hand LeftHand PointHand RightHand Right OffHand WaveDraw ImageDraw ShapeDraw TextEmoji HandHand Left ChatHand MultipleHand Multiple Stack