Hand Point icon
Used to represent hand gestures - specifically tap. The Hand Point 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 Hand Point 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 { HandPoint24Regular, HandPoint24Filled } from "@fluentui/react-icons";
export function Example() {
return <HandPoint24Regular aria-label="Hand Point" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_hand_point_24_regular.svg" width="24" height="24" alt="Hand Point"> 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.4999 3.5C10.9476 3.5 10.4999 3.94771 10.4999 4.5V12.0021C10.4999 12.2492 10.3782 12.4804 10.1746 12.6203C9.9709 12.7602 9.7114 12.7908 9.48078 12.7021L6.96712 11.7357C5.78666 11.2819 4.47071 11.6661 3.71255 12.6312C9.20142 15.092 11.27 17.4412 12.1899 19.4638C12.5196 20.1888 13.1674 20.577 13.7683 20.4844L17.2238 19.9518C17.7217 19.8751 18.1248 19.507 18.2464 19.0182L19.3991 14.3851C19.8596 12.5339 18.6343 10.6861 16.7499 10.3899L13.1334 9.82132C12.7687 9.76398 12.4999 9.44967 12.4999 9.08042V4.5C12.4999 3.94772 12.0522 3.5 11.4999 3.5ZM8.99992 4.5C8.99992 3.11929 10.1192 2 11.4999 2C12.8806 2 13.9999 3.11929 13.9999 4.5V8.43912L16.9829 8.90806C19.737 9.34103 21.5278 12.0417 20.8547 14.7472L19.7021 19.3803C19.4345 20.4558 18.5476 21.2655 17.4523 21.4343L13.9968 21.9669C12.5545 22.1891 11.3505 21.2415 10.8244 20.0847C10.0892 18.468 8.2965 16.2514 2.63492 13.7953C2.08822 13.5582 1.82201 12.8903 2.12257 12.3317C3.15849 10.4061 5.4645 9.55097 7.50541 10.3356L8.99992 10.9102V4.5Z" 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/hand_point_24_regular.svg";Details
| Name | Hand Point |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_hand_point_24_regular.svg |
| Filled file | ic_fluent_hand_point_24_filled.svg |
| React components | HandPoint24Regular, HandPoint24Filled |
| License | MIT (© Microsoft Corporation) |