Checkmark Circle Hint icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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="M13.6523 20.3398C14.0285 20.2657 14.4167 20.4504 14.5635 20.8047C14.7347 21.2186 14.5115 21.6926 14.0732 21.7852C13.4045 21.9261 12.7107 22 12 22C11.2881 22 10.5936 21.9256 9.92383 21.7842C9.48549 21.6916 9.26215 21.2176 9.43359 20.8037C9.58041 20.4495 9.9685 20.2646 10.3447 20.3389C10.8801 20.4445 11.4336 20.5 12 20.5C12.5653 20.5 13.1179 20.4451 13.6523 20.3398ZM19.0654 16.7266C19.2788 16.4082 19.684 16.2646 20.0381 16.4111C20.452 16.5826 20.6292 17.0757 20.3848 17.4512C19.6224 18.6214 18.6214 19.6224 17.4512 20.3848C17.0757 20.6293 16.5826 20.4521 16.4111 20.0381C16.2646 19.684 16.4082 19.2798 16.7266 19.0664C17.6507 18.4471 18.446 17.6506 19.0654 16.7266ZM3.96094 16.4092C4.315 16.2627 4.72027 16.4063 4.93359 16.7246C5.5526 17.6486 6.34787 18.445 7.27148 19.0645C7.58949 19.2779 7.73235 19.6822 7.58594 20.0361C7.41442 20.4502 6.92138 20.6275 6.5459 20.3828C5.37649 19.6204 4.37612 18.62 3.61426 17.4502C3.36973 17.0747 3.54695 16.5807 3.96094 16.4092ZM15.2197 8.96973C15.5126 8.67683 15.9874 8.67683 16.2803 8.96973C16.5732 9.26262 16.5732 9.73738 16.2803 10.0303L11.2803 15.0303C11.1396 15.1709 10.9489 15.25 10.75 15.25C10.5511 15.25 10.3604 15.1709 10.2197 15.0303L7.71973 12.5303L7.66797 12.4727C7.42794 12.1781 7.4452 11.7432 7.71973 11.4688C7.99441 11.1944 8.42916 11.1776 8.72363 11.418L8.78027 11.4697L10.75 13.4395L15.2197 8.96973ZM20.8037 9.43262C21.2176 9.26131 21.6916 9.48556 21.7842 9.92383C21.9256 10.5936 22 11.2881 22 12C22 12.7108 21.9262 13.4044 21.7852 14.0732C21.6927 14.5116 21.2186 14.7348 20.8047 14.5635C20.4504 14.4167 20.2657 14.0285 20.3398 13.6523C20.4451 13.1179 20.5 12.5653 20.5 12C20.5 11.4334 20.4446 10.8793 20.3389 10.3438C20.2648 9.9676 20.4495 9.57934 20.8037 9.43262ZM2.21582 9.9248C2.30856 9.4867 2.78248 9.26317 3.19629 9.43457C3.55042 9.58138 3.73528 9.96957 3.66113 10.3457C3.55559 10.8808 3.5 11.434 3.5 12C3.5 12.565 3.555 13.1172 3.66016 13.6514C3.73413 14.0274 3.54936 14.4148 3.19531 14.5615C2.78129 14.733 2.30726 14.5098 2.21484 14.0713C2.0741 13.403 2 12.7101 2 12C2 11.2886 2.07459 10.5942 2.21582 9.9248ZM6.54688 3.61621C6.92237 3.3715 7.41539 3.54881 7.58691 3.96289C7.7335 4.31685 7.59055 4.72108 7.27246 4.93457C6.34926 5.55358 5.55356 6.34925 4.93457 7.27246C4.72118 7.59053 4.31681 7.73424 3.96289 7.58789C3.5488 7.41637 3.37148 6.92237 3.61621 6.54688C4.37811 5.37791 5.37791 4.37811 6.54688 3.61621ZM16.4102 3.96094C16.5816 3.54695 17.0747 3.36972 17.4502 3.61426C18.6199 4.37607 19.6204 5.37658 20.3828 6.5459C20.6273 6.92135 20.4501 7.41445 20.0361 7.58594C19.6823 7.73235 19.2779 7.58936 19.0645 7.27148C18.4451 6.34814 17.6492 5.5525 16.7256 4.93359C16.4071 4.72021 16.2634 4.31512 16.4102 3.96094ZM12 2C12.7102 2 13.403 2.07409 14.0713 2.21484C14.5098 2.30721 14.7339 2.7813 14.5625 3.19531C14.4158 3.54952 14.0275 3.73422 13.6514 3.66016C13.1172 3.55498 12.565 3.5 12 3.5C11.4339 3.5 10.8808 3.55558 10.3457 3.66113C9.96955 3.73534 9.5814 3.55043 9.43457 3.19629C9.26315 2.78244 9.48661 2.30848 9.9248 2.21582C10.5942 2.07457 11.2886 2 12 2Z" 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/checkmark_circle_hint_24_regular.svg";

Details