hand icon

hand from Phosphor by Phosphor Icons · Regular · MIT Free for personal and commercial use.

Name: hand
Set: Phosphor
Style: Regular
Viewbox: 256×256
License: MIT

5 other variants in Phosphor

hand-bold hand-duotone hand-fill hand-light hand-thin

The same icon in other sets

handAkar Icons handBoxIcons v2 Solid handFont Awesome 6 Regular handFont Awesome 6 Solid handHuge Icons handLucide handMajesticons hand-fillMingCute Icon handPixelarticons handRadix Icons handRemix Icon

Related icons in Phosphor

hand-arrow-down hand-arrow-up hand-coins hand-deposit hand-eye hand-fist hand-grabbing hand-heart hand-palm hand-peace hand-pointing hand-soap hand-swipe-left hand-swipe-right hand-tap hand-waving hand-withdraw

Use the hand icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M188 48a27.75 27.75 0 0 0-12 2.71V44a28 28 0 0 0-54.65-8.6A28 28 0 0 0 80 60v64l-3.82-6.13a28 28 0 0 0-48.6 27.82c16 33.77 28.93 57.72 43.72 72.69C86.24 233.54 103.2 240 128 240a88.1 88.1 0 0 0 88-88V76a28 28 0 0 0-28-28m12 104a72.08 72.08 0 0 1-72 72c-20.38 0-33.51-4.88-45.33-16.85C69.44 193.74 57.26 171 41.9 138.58a6 6 0 0 0-.3-.58a12 12 0 0 1 20.79-12a2 2 0 0 0 .14.23l18.67 30A8 8 0 0 0 96 152V60a12 12 0 0 1 24 0v60a8 8 0 0 0 16 0V44a12 12 0 0 1 24 0v76a8 8 0 0 0 16 0V76a12 12 0 0 1 24 0Z"/></svg>

React

import type { SVGProps } from "react";

export function PhHand(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M188 48a27.75 27.75 0 0 0-12 2.71V44a28 28 0 0 0-54.65-8.6A28 28 0 0 0 80 60v64l-3.82-6.13a28 28 0 0 0-48.6 27.82c16 33.77 28.93 57.72 43.72 72.69C86.24 233.54 103.2 240 128 240a88.1 88.1 0 0 0 88-88V76a28 28 0 0 0-28-28m12 104a72.08 72.08 0 0 1-72 72c-20.38 0-33.51-4.88-45.33-16.85C69.44 193.74 57.26 171 41.9 138.58a6 6 0 0 0-.3-.58a12 12 0 0 1 20.79-12a2 2 0 0 0 .14.23l18.67 30A8 8 0 0 0 96 152V60a12 12 0 0 1 24 0v60a8 8 0 0 0 16 0V44a12 12 0 0 1 24 0v76a8 8 0 0 0 16 0V76a12 12 0 0 1 24 0Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M188 48a27.75 27.75 0 0 0-12 2.71V44a28 28 0 0 0-54.65-8.6A28 28 0 0 0 80 60v64l-3.82-6.13a28 28 0 0 0-48.6 27.82c16 33.77 28.93 57.72 43.72 72.69C86.24 233.54 103.2 240 128 240a88.1 88.1 0 0 0 88-88V76a28 28 0 0 0-28-28m12 104a72.08 72.08 0 0 1-72 72c-20.38 0-33.51-4.88-45.33-16.85C69.44 193.74 57.26 171 41.9 138.58a6 6 0 0 0-.3-.58a12 12 0 0 1 20.79-12a2 2 0 0 0 .14.23l18.67 30A8 8 0 0 0 96 152V60a12 12 0 0 1 24 0v60a8 8 0 0 0 16 0V44a12 12 0 0 1 24 0v76a8 8 0 0 0 16 0V76a12 12 0 0 1 24 0Z"/></svg>
</template>

CSS

.icon-hand {
  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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M188%2048a27.75%2027.75%200%200%200-12%202.71V44a28%2028%200%200%200-54.65-8.6A28%2028%200%200%200%2080%2060v64l-3.82-6.13a28%2028%200%200%200-48.6%2027.82c16%2033.77%2028.93%2057.72%2043.72%2072.69C86.24%20233.54%20103.2%20240%20128%20240a88.1%2088.1%200%200%200%2088-88V76a28%2028%200%200%200-28-28m12%20104a72.08%2072.08%200%200%201-72%2072c-20.38%200-33.51-4.88-45.33-16.85C69.44%20193.74%2057.26%20171%2041.9%20138.58a6%206%200%200%200-.3-.58a12%2012%200%200%201%2020.79-12a2%202%200%200%200%20.14.23l18.67%2030A8%208%200%200%200%2096%20152V60a12%2012%200%200%201%2024%200v60a8%208%200%200%200%2016%200V44a12%2012%200%200%201%2024%200v76a8%208%200%200%200%2016%200V76a12%2012%200%200%201%2024%200Z%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M188%2048a27.75%2027.75%200%200%200-12%202.71V44a28%2028%200%200%200-54.65-8.6A28%2028%200%200%200%2080%2060v64l-3.82-6.13a28%2028%200%200%200-48.6%2027.82c16%2033.77%2028.93%2057.72%2043.72%2072.69C86.24%20233.54%20103.2%20240%20128%20240a88.1%2088.1%200%200%200%2088-88V76a28%2028%200%200%200-28-28m12%20104a72.08%2072.08%200%200%201-72%2072c-20.38%200-33.51-4.88-45.33-16.85C69.44%20193.74%2057.26%20171%2041.9%20138.58a6%206%200%200%200-.3-.58a12%2012%200%200%201%2020.79-12a2%202%200%200%200%20.14.23l18.67%2030A8%208%200%200%200%2096%20152V60a12%2012%200%200%201%2024%200v60a8%208%200%200%200%2016%200V44a12%2012%200%200%201%2024%200v76a8%208%200%200%200%2016%200V76a12%2012%200%200%201%2024%200Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/hand.svg?color=%231a73e8&size=48