Chat Hint Half icon

Use the Chat Hint Half 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 { ChatHintHalf24Regular, ChatHintHalf24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ChatHintHalf24Regular aria-label="Chat Hint Half" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_chat_hint_half_24_regular.svg" width="24" height="24" alt="Chat Hint Half">

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="M3.5752 6.61802C3.7977 6.26906 4.26111 6.16638 4.61035 6.38853C4.95942 6.61096 5.0629 7.0744 4.84082 7.42369C3.97323 8.78673 3.50003 10.3728 3.5 11.9999C3.5 13.4694 3.87303 14.8835 4.57324 16.1376L4.72363 16.4071L3.61133 20.3915L7.59766 19.2792L7.86719 19.4295C9.12012 20.1281 10.5322 20.4999 12 20.4999C13.5722 20.4999 15.1413 20.0545 16.4795 19.2284C16.8319 19.0109 17.2941 19.1201 17.5117 19.4725C17.7282 19.8246 17.6192 20.2863 17.2676 20.5038C15.7292 21.4536 13.9322 21.9999 12 21.9999C10.3817 21.9999 8.81804 21.6141 7.41309 20.8876L3.58691 21.9549C2.9221 22.1406 2.23266 21.7525 2.04688 21.0877C1.98547 20.8678 1.98544 20.6347 2.04688 20.4149L3.11426 16.5917C2.38621 15.1856 2 13.6199 2 11.9999C2.00003 10.0937 2.56087 8.21165 3.5752 6.61802ZM20.2812 13.9461C20.377 13.5435 20.7818 13.2941 21.1846 13.3895C21.5873 13.4852 21.8366 13.89 21.7412 14.2928C21.6138 14.8306 21.4396 15.3654 21.2178 15.8905C20.996 16.4154 20.7342 16.9127 20.4375 17.3788C20.2151 17.7275 19.7515 17.8309 19.4023 17.6092C19.0531 17.3869 18.9499 16.9225 19.1719 16.5731C19.4238 16.1773 19.6468 15.7541 19.8359 15.3065C20.0251 14.8587 20.173 14.4029 20.2812 13.9461ZM19.4795 6.49302C19.8316 6.27596 20.293 6.38548 20.5107 6.73716C21.101 7.69323 21.5282 8.74471 21.7715 9.84166C21.8605 10.2455 21.6059 10.6453 21.2021 10.7352C20.798 10.8248 20.3976 10.5698 20.3076 10.1659C20.1007 9.23289 19.7374 8.33842 19.2354 7.52525C19.0181 7.17293 19.1274 6.7106 19.4795 6.49302ZM13.3975 2.82017C13.4931 2.41734 13.8979 2.1681 14.3008 2.26353C14.8385 2.39091 15.3724 2.56515 15.8975 2.78697C16.4225 3.00879 16.9196 3.27052 17.3857 3.56724C17.735 3.78966 17.8384 4.25306 17.6162 4.6024C17.3938 4.95145 16.9303 5.05482 16.5811 4.83287C16.1852 4.58087 15.7621 4.35796 15.3145 4.1688C14.8666 3.97959 14.411 3.8317 13.9541 3.72349C13.5515 3.62782 13.3023 3.22294 13.3975 2.82017ZM9.84961 2.23326C10.2535 2.14415 10.6533 2.39879 10.7432 2.80259C10.8326 3.20685 10.5771 3.60748 10.1729 3.69712C9.23992 3.90408 8.34632 4.26736 7.5332 4.76939C7.18097 4.98653 6.71861 4.87718 6.50098 4.52525C6.28392 4.17312 6.39345 3.71171 6.74512 3.494C7.70123 2.90367 8.75259 2.47654 9.84961 2.23326Z" 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/chat_hint_half_24_regular.svg";

Details