Circle Hint Cursor icon

Use the Circle Hint 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 { CircleHintCursor24Regular, CircleHintCursor24Filled } from "@fluentui/react-icons";

export function Example() {
  return <CircleHintCursor24Regular aria-label="Circle Hint Cursor" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_circle_hint_cursor_24_regular.svg" width="24" height="24" alt="Circle Hint 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="M7.5874 3.96269C7.41588 3.54859 6.92238 3.3716 6.54688 3.61634C5.37788 4.37826 4.3781 5.37806 3.61619 6.54708C3.37146 6.92257 3.54846 7.41606 3.96255 7.58758C4.31664 7.73426 4.72151 7.59081 4.93495 7.27247C5.55394 6.34926 6.3491 5.55409 7.2723 4.93508C7.59063 4.72164 7.73407 4.31678 7.5874 3.96269ZM10.3456 3.66096C9.96938 3.73518 9.58139 3.55035 9.43463 3.19605C9.26317 2.7821 9.48666 2.30812 9.92506 2.21561C10.5945 2.07436 11.2886 2.00006 12 2.00006C12.7102 2.00006 13.4031 2.0741 14.0715 2.21488C14.51 2.30725 14.7336 2.78134 14.5621 3.19539C14.4154 3.5496 14.0276 3.73445 13.6514 3.66038C13.1172 3.5552 12.565 3.50006 12 3.50006C11.4339 3.50006 10.8807 3.5554 10.3456 3.66096ZM20.0365 7.58611C19.6824 7.73276 19.2776 7.58938 19.0641 7.27113C18.4447 6.34765 17.649 5.55235 16.7252 4.9334C16.4067 4.72002 16.2631 4.31506 16.4099 3.96087C16.5813 3.54688 17.0747 3.36986 17.4501 3.6144C18.6199 4.37622 19.6203 5.37616 20.3828 6.54548C20.6276 6.92098 20.4506 7.41456 20.0365 7.58611ZM20.8044 14.5637C20.4501 14.417 20.2653 14.0291 20.3394 13.6529C20.4448 13.1182 20.5 12.5656 20.5 12.0001C20.5 11.4335 20.4446 10.8798 20.3388 10.3442C20.2645 9.96795 20.4493 9.57988 20.8037 9.4331C21.2176 9.26166 21.6915 9.48509 21.7841 9.92342C21.9256 10.5933 22 11.288 22 12.0001C22 12.7108 21.9258 13.4043 21.7848 14.0731C21.6924 14.5116 21.2184 14.7352 20.8044 14.5637ZM9.43328 20.8038C9.58006 20.4495 9.96811 20.2646 10.3444 20.3389C10.8799 20.4446 11.4335 20.5001 12 20.5001C12.3386 20.5001 12.6726 20.4803 13.0009 20.4418L13.0001 21.9507C12.6712 21.9833 12.3376 22.0001 12 22.0001C11.288 22.0001 10.5935 21.9257 9.92361 21.7842C9.48527 21.6916 9.26184 21.2177 9.43328 20.8038ZM3.96068 16.4097C4.31487 16.263 4.71984 16.4066 4.93322 16.7251C5.55223 17.649 6.34764 18.4449 7.27125 19.0643C7.58952 19.2778 7.73291 19.6826 7.58625 20.0367C7.41471 20.4508 6.92114 20.6278 6.54564 20.383C5.37615 19.6205 4.37608 18.6199 3.6142 17.45C3.36967 17.0745 3.54669 16.5812 3.96068 16.4097ZM3.19596 9.43484C3.55025 9.58159 3.73509 9.96958 3.66088 10.3458C3.55533 10.8809 3.5 11.434 3.5 12.0001C3.5 12.565 3.55512 13.1171 3.66028 13.6513C3.73433 14.0274 3.54948 14.4152 3.19528 14.562C2.78122 14.7335 2.30713 14.5098 2.21476 14.0713C2.07402 13.403 2 12.7102 2 12.0001C2 11.2887 2.07428 10.5946 2.21552 9.92528C2.30802 9.48687 2.78201 9.26337 3.19596 9.43484ZM14.4858 12.0499C14.7755 11.9386 15.1038 12.0173 15.3116 12.2477L21.6766 19.3052C21.8974 19.5501 21.9324 19.9104 21.7628 20.1932C21.5932 20.476 21.2589 20.6149 20.9389 20.5354L17.4023 19.6572L15.3721 22.6715C15.1878 22.9452 14.8463 23.0662 14.5308 22.9698C14.2153 22.8734 13.9998 22.5821 14 22.2522L14.0047 12.7497C14.0048 12.4393 14.1961 12.1612 14.4858 12.0499Z" 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/circle_hint_cursor_24_regular.svg";

Details