Hand Left icon
Used to wait in line to talk in video meetings. Contains directional variants. The Hand Left 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 Left 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 { HandLeft24Regular, HandLeft24Filled } from "@fluentui/react-icons";
export function Example() {
return <HandLeft24Regular aria-label="Hand Left" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_hand_left_24_regular.svg" width="24" height="24" alt="Hand Left"> 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="M12.0019 3.99933V10.2512C12.0019 10.6653 11.6661 11.001 11.2519 11.001C10.8377 11.001 10.5019 10.6653 10.5019 10.2512V5.22569C10.5019 4.98628 10.2977 4.74996 10.0041 4.74825C9.74165 4.74664 9.5 4.99276 9.5 5.25223V12.7506C9.5 13.0582 9.31208 13.3347 9.02598 13.4479C8.74066 13.5607 8.41543 13.4885 8.20483 13.2656L8.20406 13.2648L8.20145 13.2621C8.19741 13.2579 8.18995 13.2504 8.17923 13.2398C8.15775 13.2186 8.1234 13.1855 8.07738 13.144C7.98494 13.0605 7.84787 12.9451 7.67593 12.8234C7.32423 12.5744 6.86676 12.3279 6.37323 12.2415C5.83595 12.1473 5.32627 12.2048 4.98757 12.3797C4.77902 12.4874 4.61572 12.6446 4.54231 12.9079L6.20069 14.1545C6.22872 14.1755 6.25524 14.1985 6.28006 14.2233L8.4553 16.3959C9.38986 17.3293 10.1674 18.4075 10.758 19.5889C11.0372 20.1475 11.6082 20.5003 12.2328 20.5003H14.9606C15.5324 20.5003 16.0294 20.2276 16.2864 19.7874C17.0222 18.5274 18 16.5003 18 14.7538V7.00186C18 6.7335 17.7849 6.5019 17.4988 6.5019C17.2099 6.5019 16.9959 6.73256 16.9959 7.00186V10.5011C16.9959 10.9152 16.6601 11.251 16.2459 11.251C15.8317 11.251 15.4959 10.9152 15.4959 10.5011V5.25223C15.4959 4.97403 15.2815 4.74827 15 4.74827C14.7131 4.74827 14.5 4.9738 14.5 5.25224V10.2512C14.5 10.6653 14.1642 11.001 13.75 11.001C13.3358 11.001 13 10.6653 13 10.2512V3.99933C13 3.72671 12.7879 3.4999 12.5014 3.49968C12.211 3.49945 12.0019 3.72263 12.0019 3.99933ZM10.0134 3.2486C10.2247 3.24985 10.4256 3.28259 10.6128 3.34162L10.0134 3.2486ZM10.6128 3.34162C10.8753 2.58323 11.5824 1.99929 12.5026 2C13.4183 2.00071 14.1246 2.58584 14.388 3.34108C14.5781 3.28124 14.7831 3.24859 15 3.24859C16.1085 3.24859 16.8964 4.10405 16.9871 5.06634C17.1487 5.02463 17.3199 5.00222 17.4988 5.00222C18.6682 5.00222 19.5 5.96113 19.5 7.00186V14.7538C19.5 16.934 18.3286 19.2646 17.5818 20.5435C17.0254 21.4964 16.0022 22 14.9606 22H12.2328C11.0399 22 9.9495 21.3261 9.41624 20.2593C8.89792 19.2224 8.21544 18.2761 7.39518 17.4568L5.25721 15.3215L3.29931 13.8499C3.11086 13.7082 3 13.4862 3 13.2505C3 12.1891 3.53131 11.4438 4.2992 11.0473C5.01488 10.6777 5.88154 10.6328 6.63215 10.7643C7.15095 10.8552 7.61507 11.0477 8 11.2591V5.25223C8 4.19208 8.8882 3.24184 10.0134 3.2486" 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_left_24_regular.svg";Details
| Name | Hand Left |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_hand_left_24_regular.svg |
| Filled file | ic_fluent_hand_left_24_filled.svg |
| React components | HandLeft24Regular, HandLeft24Filled |
| License | MIT (© Microsoft Corporation) |