Circle Hint Dismiss icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_circle_hint_dismiss_24_regular.svg" width="24" height="24" alt="Circle Hint Dismiss">

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.96266C7.41588 3.54856 6.92238 3.37157 6.54688 3.61631C5.37788 4.37823 4.3781 5.37803 3.61619 6.54705C3.37146 6.92254 3.54846 7.41603 3.96255 7.58755C4.31664 7.73423 4.72151 7.59078 4.93495 7.27244C5.55394 6.34923 6.3491 5.55406 7.2723 4.93505C7.59063 4.72161 7.73407 4.31675 7.5874 3.96266ZM10.3456 3.66093C9.96938 3.73515 9.58139 3.55032 9.43463 3.19602C9.26317 2.78207 9.48666 2.30809 9.92506 2.21558C10.5945 2.07433 11.2886 2.00003 12 2.00003C12.7102 2.00003 13.4031 2.07407 14.0715 2.21485C14.51 2.30722 14.7336 2.78131 14.5621 3.19536C14.4154 3.54957 14.0276 3.73442 13.6514 3.66035C13.1172 3.55517 12.565 3.50003 12 3.50003C11.4339 3.50003 10.8807 3.55537 10.3456 3.66093ZM20.0365 7.58608C19.6824 7.73273 19.2776 7.58935 19.0641 7.27109C18.4447 6.34762 17.649 5.55232 16.7252 4.93337C16.4067 4.71999 16.2631 4.31503 16.4099 3.96084C16.5813 3.54685 17.0747 3.36983 17.4501 3.61437C18.6199 4.37619 19.6203 5.37613 20.3828 6.54545C20.6276 6.92095 20.4506 7.41453 20.0365 7.58608ZM12.781 21.97C12.3659 21.5319 12.0111 21.0361 11.73 20.4958C11.2574 20.4811 10.7945 20.4278 10.3444 20.3389C9.96811 20.2646 9.58006 20.4494 9.43328 20.8038C9.26184 21.2177 9.48527 21.6916 9.92361 21.7842C10.5935 21.9256 11.288 22 12 22C12.2628 22 12.5233 21.9899 12.781 21.97ZM20.4958 11.73C21.0361 12.0111 21.5319 12.3658 21.97 12.7809C21.9899 12.5232 22 12.2628 22 12C22 11.288 21.9256 10.5933 21.7841 9.92338C21.6915 9.48506 21.2176 9.26163 20.8037 9.43307C20.4493 9.57985 20.2645 9.96792 20.3388 10.3442C20.4277 10.7944 20.481 11.2573 20.4958 11.73ZM3.96068 16.4097C4.31487 16.263 4.71984 16.4065 4.93322 16.725C5.55223 17.649 6.34764 18.4448 7.27125 19.0643C7.58952 19.2778 7.73291 19.6826 7.58625 20.0366C7.41471 20.4508 6.92114 20.6278 6.54564 20.3829C5.37615 19.6205 4.37608 18.6199 3.6142 17.45C3.36967 17.0745 3.54669 16.5812 3.96068 16.4097ZM3.19596 9.43481C3.55025 9.58156 3.73509 9.96955 3.66088 10.3458C3.55533 10.8809 3.5 11.434 3.5 12C3.5 12.565 3.55512 13.1171 3.66028 13.6512C3.73433 14.0274 3.54948 14.4152 3.19528 14.5619C2.78122 14.7334 2.30713 14.5098 2.21476 14.0712C2.07402 13.403 2 12.7102 2 12C2 11.2886 2.07428 10.5946 2.21552 9.92525C2.30802 9.48684 2.78201 9.26334 3.19596 9.43481ZM23 17.5C23 20.5376 20.5376 23 17.5 23C14.4624 23 12 20.5376 12 17.5C12 14.4624 14.4624 12 17.5 12C20.5376 12 23 14.4624 23 17.5ZM15.8536 15.1464C15.6583 14.9512 15.3417 14.9512 15.1464 15.1464C14.9512 15.3417 14.9512 15.6583 15.1464 15.8535L16.7929 17.5L15.1464 19.1464C14.9512 19.3417 14.9512 19.6583 15.1464 19.8535C15.3417 20.0488 15.6583 20.0488 15.8536 19.8535L17.5 18.2071L19.1464 19.8535C19.3417 20.0488 19.6583 20.0488 19.8536 19.8535C20.0488 19.6583 20.0488 19.3417 19.8536 19.1464L18.2071 17.5L19.8536 15.8535C20.0488 15.6583 20.0488 15.3417 19.8536 15.1464C19.6583 14.9512 19.3417 14.9512 19.1464 15.1464L17.5 16.7929L15.8536 15.1464Z" 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_dismiss_24_regular.svg";

Details