hand draw icon
hand-draw-20-filled from Fluent UI System Icons by Microsoft Corporation · 20 Filled · MIT Free for personal and commercial use.
- Name
- hand-draw-20-filled
- Set
- Fluent UI System Icons
- Style
- 20 Filled
- Viewbox
- 20×20
- License
- MIT
10 other variants in Fluent UI System Icons
The same icon in other sets
Related icons in Fluent UI System Icons
Use the hand draw icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M17 3c0-.613-.368-1.036-.844-1.303c-.458-.257-1.07-.408-1.738-.504C13.08 1 11.303 1 9.532 1H9.5a.5.5 0 0 0 0 1c1.809 0 3.517.001 4.775.182q.95.139 1.391.387c.276.155.334.294.334.431c0 .15-.062.288-.314.437q-.409.244-1.293.381C13.22 3.998 11.639 4 10 4h-.032c-1.601 0-3.256 0-4.513.193c-.629.097-1.213.25-1.652.51C3.343 4.976 3 5.399 3 6c0 .792.646 1.267 1.322 1.525c.704.268 1.647.393 2.678.393v-1c-.97 0-1.776-.12-2.322-.328C4.104 6.372 4 6.138 4 6c0-.15.063-.288.314-.437q.409-.244 1.293-.381C6.78 5.002 8.361 5 10 5h.032c1.601 0 3.256 0 4.513-.193c.629-.097 1.213-.25 1.652-.51c.46-.273.803-.696.803-1.297M9.5 5.999a1.5 1.5 0 0 0-1.5 1.5v4.242l-1.345-.58a1.937 1.937 0 0 0-2.616 1.206a.86.86 0 0 0 .382.994l3.967 2.355l.02.01c.523.28.827.683 1.007 1.062c.168.353.438.681.774.907c.337.228.768.368 1.23.279l2.002-.385a1.5 1.5 0 0 0 1.171-1.11l.832-3.327a2.5 2.5 0 0 0-1.93-3.057L11 9.591V7.499a1.5 1.5 0 0 0-1.5-1.5"/></svg>
React
import type { SVGProps } from "react";
export function FluentHandDraw20Filled(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M17 3c0-.613-.368-1.036-.844-1.303c-.458-.257-1.07-.408-1.738-.504C13.08 1 11.303 1 9.532 1H9.5a.5.5 0 0 0 0 1c1.809 0 3.517.001 4.775.182q.95.139 1.391.387c.276.155.334.294.334.431c0 .15-.062.288-.314.437q-.409.244-1.293.381C13.22 3.998 11.639 4 10 4h-.032c-1.601 0-3.256 0-4.513.193c-.629.097-1.213.25-1.652.51C3.343 4.976 3 5.399 3 6c0 .792.646 1.267 1.322 1.525c.704.268 1.647.393 2.678.393v-1c-.97 0-1.776-.12-2.322-.328C4.104 6.372 4 6.138 4 6c0-.15.063-.288.314-.437q.409-.244 1.293-.381C6.78 5.002 8.361 5 10 5h.032c1.601 0 3.256 0 4.513-.193c.629-.097 1.213-.25 1.652-.51c.46-.273.803-.696.803-1.297M9.5 5.999a1.5 1.5 0 0 0-1.5 1.5v4.242l-1.345-.58a1.937 1.937 0 0 0-2.616 1.206a.86.86 0 0 0 .382.994l3.967 2.355l.02.01c.523.28.827.683 1.007 1.062c.168.353.438.681.774.907c.337.228.768.368 1.23.279l2.002-.385a1.5 1.5 0 0 0 1.171-1.11l.832-3.327a2.5 2.5 0 0 0-1.93-3.057L11 9.591V7.499a1.5 1.5 0 0 0-1.5-1.5"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M17 3c0-.613-.368-1.036-.844-1.303c-.458-.257-1.07-.408-1.738-.504C13.08 1 11.303 1 9.532 1H9.5a.5.5 0 0 0 0 1c1.809 0 3.517.001 4.775.182q.95.139 1.391.387c.276.155.334.294.334.431c0 .15-.062.288-.314.437q-.409.244-1.293.381C13.22 3.998 11.639 4 10 4h-.032c-1.601 0-3.256 0-4.513.193c-.629.097-1.213.25-1.652.51C3.343 4.976 3 5.399 3 6c0 .792.646 1.267 1.322 1.525c.704.268 1.647.393 2.678.393v-1c-.97 0-1.776-.12-2.322-.328C4.104 6.372 4 6.138 4 6c0-.15.063-.288.314-.437q.409-.244 1.293-.381C6.78 5.002 8.361 5 10 5h.032c1.601 0 3.256 0 4.513-.193c.629-.097 1.213-.25 1.652-.51c.46-.273.803-.696.803-1.297M9.5 5.999a1.5 1.5 0 0 0-1.5 1.5v4.242l-1.345-.58a1.937 1.937 0 0 0-2.616 1.206a.86.86 0 0 0 .382.994l3.967 2.355l.02.01c.523.28.827.683 1.007 1.062c.168.353.438.681.774.907c.337.228.768.368 1.23.279l2.002-.385a1.5 1.5 0 0 0 1.171-1.11l.832-3.327a2.5 2.5 0 0 0-1.93-3.057L11 9.591V7.499a1.5 1.5 0 0 0-1.5-1.5"/></svg> </template>
CSS
.icon-hand-draw-20-filled {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M17%203c0-.613-.368-1.036-.844-1.303c-.458-.257-1.07-.408-1.738-.504C13.08%201%2011.303%201%209.532%201H9.5a.5.5%200%200%200%200%201c1.809%200%203.517.001%204.775.182q.95.139%201.391.387c.276.155.334.294.334.431c0%20.15-.062.288-.314.437q-.409.244-1.293.381C13.22%203.998%2011.639%204%2010%204h-.032c-1.601%200-3.256%200-4.513.193c-.629.097-1.213.25-1.652.51C3.343%204.976%203%205.399%203%206c0%20.792.646%201.267%201.322%201.525c.704.268%201.647.393%202.678.393v-1c-.97%200-1.776-.12-2.322-.328C4.104%206.372%204%206.138%204%206c0-.15.063-.288.314-.437q.409-.244%201.293-.381C6.78%205.002%208.361%205%2010%205h.032c1.601%200%203.256%200%204.513-.193c.629-.097%201.213-.25%201.652-.51c.46-.273.803-.696.803-1.297M9.5%205.999a1.5%201.5%200%200%200-1.5%201.5v4.242l-1.345-.58a1.937%201.937%200%200%200-2.616%201.206a.86.86%200%200%200%20.382.994l3.967%202.355l.02.01c.523.28.827.683%201.007%201.062c.168.353.438.681.774.907c.337.228.768.368%201.23.279l2.002-.385a1.5%201.5%200%200%200%201.171-1.11l.832-3.327a2.5%202.5%200%200%200-1.93-3.057L11%209.591V7.499a1.5%201.5%200%200%200-1.5-1.5%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M17%203c0-.613-.368-1.036-.844-1.303c-.458-.257-1.07-.408-1.738-.504C13.08%201%2011.303%201%209.532%201H9.5a.5.5%200%200%200%200%201c1.809%200%203.517.001%204.775.182q.95.139%201.391.387c.276.155.334.294.334.431c0%20.15-.062.288-.314.437q-.409.244-1.293.381C13.22%203.998%2011.639%204%2010%204h-.032c-1.601%200-3.256%200-4.513.193c-.629.097-1.213.25-1.652.51C3.343%204.976%203%205.399%203%206c0%20.792.646%201.267%201.322%201.525c.704.268%201.647.393%202.678.393v-1c-.97%200-1.776-.12-2.322-.328C4.104%206.372%204%206.138%204%206c0-.15.063-.288.314-.437q.409-.244%201.293-.381C6.78%205.002%208.361%205%2010%205h.032c1.601%200%203.256%200%204.513-.193c.629-.097%201.213-.25%201.652-.51c.46-.273.803-.696.803-1.297M9.5%205.999a1.5%201.5%200%200%200-1.5%201.5v4.242l-1.345-.58a1.937%201.937%200%200%200-2.616%201.206a.86.86%200%200%200%20.382.994l3.967%202.355l.02.01c.523.28.827.683%201.007%201.062c.168.353.438.681.774.907c.337.228.768.368%201.23.279l2.002-.385a1.5%201.5%200%200%200%201.171-1.11l.832-3.327a2.5%202.5%200%200%200-1.93-3.057L11%209.591V7.499a1.5%201.5%200%200%200-1.5-1.5%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/hand-draw-20-filled.svg?color=%231a73e8&size=48
