Chat Cursor icon
Used to represent cursor chat within canvas experiences. The Chat Cursor 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 Chat Cursor 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 { ChatCursor24Regular, ChatCursor24Filled } from "@fluentui/react-icons";
export function Example() {
return <ChatCursor24Regular aria-label="Chat Cursor" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_chat_cursor_24_regular.svg" width="24" height="24" alt="Chat Cursor"> 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 11C12 10.176 12.9404 9.70596 13.5996 10.2002L21.5996 16.2002C22.3684 16.7768 21.961 18 21 18H16.5996C16.2305 18.0001 15.8915 18.2036 15.7178 18.5293L13.8828 21.9707C13.3929 22.8893 12 22.541 12 21.5V11ZM10 1C14.4183 1 18 4.58172 18 9C18 10.006 17.8116 10.9676 17.4727 11.8545L16.2139 10.9102C16.3993 10.3061 16.5 9.66484 16.5 9C16.5 5.41015 13.5899 2.5 10 2.5C6.41015 2.5 3.5 5.41015 3.5 9C3.5 10.1554 3.80236 11.2383 4.33008 12.1777C4.4237 12.3446 4.44966 12.541 4.40332 12.7266L3.78027 15.2188L6.27246 14.5957L6.41309 14.5742C6.55439 14.5665 6.6962 14.5987 6.82129 14.6689C7.76111 15.1971 8.84433 15.5 10 15.5C10.3401 15.5 10.674 15.4732 11 15.4229V16.9355C10.6723 16.9764 10.3388 17 10 17C8.68751 17 7.44887 16.6811 6.35547 16.1201L2.93164 16.9775C2.67617 17.0413 2.40596 16.9664 2.21973 16.7803C2.0335 16.594 1.95867 16.3239 2.02246 16.0684L2.87793 12.6426C2.31773 11.5496 2 10.3114 2 9C2 4.58172 5.58172 1 10 1Z" 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_cursor_24_regular.svg";Details
| Name | Chat Cursor |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_chat_cursor_24_regular.svg |
| Filled file | ic_fluent_chat_cursor_24_filled.svg |
| React components | ChatCursor24Regular, ChatCursor24Filled |
| License | MIT (© Microsoft Corporation) |