Circle Multiple Hint Checkmark icon

Use the Circle Multiple Hint Checkmark 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 { CircleMultipleHintCheckmark24Regular, CircleMultipleHintCheckmark24Filled } from "@fluentui/react-icons";

export function Example() {
  return <CircleMultipleHintCheckmark24Regular aria-label="Circle Multiple Hint Checkmark" />;
}

Use it in HTML

Reference the SVG file directly:

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

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="M2.09208 10C1.60525 10 1.23897 10.4479 1.39524 10.909C1.60786 11.5362 1.90122 12.1263 2.26295 12.6667C2.51011 13.0359 3.02919 13.0566 3.34338 12.7424C3.61723 12.4686 3.63591 12.0349 3.42858 11.7078C3.20308 11.352 3.01399 10.9709 2.86654 10.5697C2.74534 10.2399 2.44344 10 2.09208 10ZM5.29224 3.42859C4.96514 3.63592 4.53144 3.61724 4.25759 3.3434C3.9434 3.0292 3.96412 2.51013 4.33337 2.26296C5.03022 1.79652 5.80958 1.44375 6.64495 1.23121C7.09207 1.11744 7.50001 1.47604 7.50001 1.93741C7.50001 2.31004 7.22899 2.623 6.87031 2.724C6.30621 2.88284 5.77581 3.12209 5.29224 3.42859ZM3.1121 5.85681C3.26982 5.53592 3.22993 5.14416 2.9771 4.89133C2.63826 4.55249 2.07261 4.60322 1.85044 5.0278C1.4997 5.69812 1.24735 6.42805 1.11255 7.19841C1.03719 7.6291 1.38687 8.00001 1.8241 8.00001C2.21767 8.00001 2.54027 7.69661 2.61786 7.31076C2.72064 6.79961 2.88838 6.31197 3.1121 5.85681ZM5.8568 13.8879C5.53591 13.7302 5.14415 13.7701 4.89132 14.0229C4.55248 14.3618 4.60321 14.9274 5.0278 15.1496C5.92675 15.62 6.9329 15.9134 8.00002 15.9836C8.00104 15.473 8.04991 14.9735 8.14239 14.4895C7.32591 14.4415 6.55332 14.2303 5.8568 13.8879ZM15.1496 5.02782C15.6199 5.92676 15.9134 6.93291 15.9836 8.00002C15.4729 8.00104 14.9735 8.04992 14.4895 8.14239C14.4415 7.32592 14.2303 6.55334 13.8879 5.85681C13.7302 5.53593 13.7701 5.14417 14.0229 4.89134C14.3618 4.5525 14.9274 4.60323 15.1496 5.02782ZM12.7424 3.3434C13.0566 3.02921 13.0359 2.51013 12.6667 2.26297C11.9698 1.79652 11.1904 1.44375 10.3551 1.23121C9.90794 1.11744 9.50001 1.47604 9.50001 1.93741C9.50001 2.31004 9.77102 2.623 10.1297 2.724C10.6938 2.88284 11.2242 3.12209 11.7078 3.4286C12.0349 3.63593 12.4686 3.61725 12.7424 3.3434ZM19.7803 13.9697C20.0732 14.2626 20.0732 14.7374 19.7803 15.0303L16.0303 18.7803C15.8897 18.921 15.6989 19 15.5 19C15.3011 19 15.1103 18.921 14.9697 18.7803L12.7197 16.5303C12.4268 16.2374 12.4268 15.7626 12.7197 15.4697C13.0126 15.1768 13.4874 15.1768 13.7803 15.4697L15.5 17.1893L18.7197 13.9697C19.0126 13.6768 19.4874 13.6768 19.7803 13.9697ZM16 23C19.866 23 23 19.866 23 16C23 12.134 19.866 9 16 9C12.134 9 9 12.134 9 16C9 19.866 12.134 23 16 23ZM16 21.5C12.9624 21.5 10.5 19.0376 10.5 16C10.5 12.9624 12.9624 10.5 16 10.5C19.0376 10.5 21.5 12.9624 21.5 16C21.5 19.0376 19.0376 21.5 16 21.5Z" 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_multiple_hint_checkmark_24_regular.svg";

Details