Hand Left Chat icon

Use the Hand Left Chat 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 { HandLeftChat24Regular, HandLeftChat24Filled } from "@fluentui/react-icons";

export function Example() {
  return <HandLeftChat24Regular aria-label="Hand Left Chat" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_hand_left_chat_24_regular.svg" width="24" height="24" alt="Hand Left Chat">

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.99277 9.5 5.25223V12.7506C9.5 13.0583 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.5889C10.9355 19.9439 11.2309 20.2159 11.583 20.3669L11.1447 21.8062C10.4051 21.5337 9.78062 20.9882 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.2486C10.2247 3.24985 10.4256 3.28259 10.6128 3.34162C10.8753 2.58324 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.06635C17.1487 5.02463 17.3199 5.00223 17.4988 5.00223C18.6682 5.00223 19.5 5.96113 19.5 7.00186V11.3139C19.0214 11.1593 18.5188 11.0586 18 11.019V7.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.7132 16.9079 10.9046 16.7664 11.041C16.4864 11.0725 16.2118 11.1218 15.9438 11.1876C15.6801 11.0715 15.4959 10.8078 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.72672 12.7879 3.4999 12.5014 3.49968C12.211 3.49946 12.0019 3.72263 12.0019 3.99933ZM17.9708 12.0198C19.1166 12.1166 20.1623 12.5646 21 13.2558C22.2228 14.2648 23.0023 15.792 23.0023 17.5012C23.0023 20.5395 20.5393 23.0024 17.5011 23.0024C16.5335 23.0024 15.6242 22.7526 14.8343 22.3139L12.6471 22.9795C12.2644 23.0959 11.9066 22.7381 12.0231 22.3553L12.6889 20.1688C12.25 19.3787 12 18.4692 12 17.5012C12 14.463 14.4629 12 17.5011 12C17.6593 12 17.816 12.0067 17.9708 12.0198ZM15.0008 16.501C15.0008 16.7772 15.2247 17.0011 15.5009 17.0011H19.5015C19.7777 17.0011 20.0016 16.7772 20.0016 16.501C20.0016 16.2248 19.7777 16.0009 19.5015 16.0009H15.5009C15.2247 16.0009 15.0008 16.2248 15.0008 16.501ZM15.5009 19.0015H17.5011C17.7773 19.0015 18.0012 18.7776 18.0012 18.5014C18.0012 18.2252 17.7773 18.0013 17.5011 18.0013H15.5009C15.2247 18.0013 15.0008 18.2252 15.0008 18.5014C15.0008 18.7776 15.2247 19.0015 15.5009 19.0015Z" 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_chat_24_regular.svg";

Details

Keywords

handsignlanguagefeature