Cursor Hover icon

Use the Cursor Hover 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 { CursorHover24Regular, CursorHover24Filled } from "@fluentui/react-icons";

export function Example() {
  return <CursorHover24Regular aria-label="Cursor Hover" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_cursor_hover_24_regular.svg" width="24" height="24" alt="Cursor Hover">

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="M19.5 5.5H4.5C3.94772 5.5 3.5 5.94772 3.5 6.5V15.5C3.5 16.0523 3.94772 16.5 4.5 16.5H9V18H4.5C3.11929 18 2 16.8807 2 15.5V6.5C2 5.11929 3.11929 4 4.5 4H19.5C20.8807 4 22 5.11929 22 6.5V15.5C22 16.7183 21.1285 17.7331 19.975 17.9549C19.9 17.5176 19.6598 17.1137 19.2849 16.8388L18.9461 16.5H19.5C20.0523 16.5 20.5 16.0523 20.5 15.5V6.5C20.5 5.94772 20.0523 5.5 19.5 5.5ZM11.2803 10.2197C11.0658 10.0052 10.7432 9.94103 10.463 10.0571C10.1827 10.1732 10 10.4467 10 10.75V21.25C10 21.5785 10.2138 21.8688 10.5275 21.9663C10.8413 22.0637 11.1819 21.9456 11.368 21.6749L13.8348 18.0869L18.0955 18.9839C18.4203 19.0523 18.7514 18.8991 18.9095 18.6073C19.0675 18.3154 19.015 17.9544 18.7803 17.7197L11.2803 10.2197ZM11.5 18.8353V12.5607L15.9357 16.9964L13.6545 16.5161C13.3582 16.4537 13.0535 16.5756 12.882 16.8251L11.5 18.8353Z" 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_hover_24_regular.svg";

Details

Keywords

arrowinteractclick.usedinusercursorscenarios.