Cursor Click icon
The Cursor Click 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 Cursor Click 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 { CursorClick24Regular, CursorClick24Filled } from "@fluentui/react-icons";
export function Example() {
return <CursorClick24Regular aria-label="Cursor Click" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_cursor_click_24_regular.svg" width="24" height="24" alt="Cursor Click"> 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="M9.25 2C9.66421 2 10 2.33579 10 2.75V5.25C10 5.66421 9.66421 6 9.25 6C8.83579 6 8.5 5.66421 8.5 5.25V2.75C8.5 2.33579 8.83579 2 9.25 2ZM4.46965 3.96981C4.76253 3.67691 5.23741 3.67689 5.53031 3.96977L7.28031 5.71965C7.57322 6.01253 7.57323 6.48741 7.28035 6.78031C6.98747 7.07322 6.51259 7.07323 6.21969 6.78035L4.46969 5.03047C4.17678 4.73759 4.17677 4.26271 4.46965 3.96981ZM14.0303 3.96979C14.3232 4.26269 14.3232 4.73756 14.0303 5.03045L12.2803 6.78045C11.9874 7.07335 11.5126 7.07335 11.2197 6.78045C10.9268 6.48756 10.9268 6.01269 11.2197 5.71979L12.9697 3.96979C13.2626 3.6769 13.7374 3.6769 14.0303 3.96979ZM2.5 8.75C2.5 8.33579 2.83579 8 3.25 8H5.75C6.16421 8 6.5 8.33579 6.5 8.75C6.5 9.16421 6.16421 9.5 5.75 9.5H3.25C2.83579 9.5 2.5 9.16421 2.5 8.75ZM10.6773 8.48562C9.82176 7.75227 8.5 8.36019 8.5 9.48706V20.7608C8.5 21.9715 9.99462 22.5426 10.8019 21.6403L13.4165 18.7181C13.6918 18.4104 14.0801 18.2274 14.4927 18.2109L18.3327 18.0573C19.5304 18.0094 20.0484 16.518 19.1384 15.7379L10.6773 8.48562ZM10 20.287V9.88067L17.8123 16.5769L14.4327 16.7121C13.6146 16.7448 12.8446 17.1077 12.2986 17.7179L10 20.287Z" 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/cursor_click_24_regular.svg";Details
| Name | Cursor Click |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_cursor_click_24_regular.svg |
| Filled file | ic_fluent_cursor_click_24_filled.svg |
| React components | CursorClick24Regular, CursorClick24Filled |
| License | MIT (© Microsoft Corporation) |