Error Circle Hint icon

Use the Error 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 { ErrorCircleHint24Regular, ErrorCircleHint24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_error_circle_hint_24_regular.svg" width="24" height="24" alt="Error 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.6543 20.3398C14.0305 20.2657 14.4187 20.4504 14.5654 20.8047C14.7367 21.2186 14.5134 21.6926 14.0752 21.7852C13.4064 21.9261 12.7127 22 12.002 22C11.2901 22 10.5956 21.9256 9.92578 21.7842C9.48744 21.6916 9.2641 21.2176 9.43555 20.8037C9.58238 20.4495 9.97048 20.2646 10.3467 20.3389C10.8821 20.4445 11.4355 20.5 12.002 20.5C12.5673 20.5 13.1198 20.4451 13.6543 20.3398ZM19.0674 16.7266C19.2807 16.4082 19.686 16.2646 20.04 16.4111C20.454 16.5826 20.6311 17.0757 20.3867 17.4512C19.6243 18.6214 18.6234 19.6224 17.4531 20.3848C17.0776 20.6293 16.5846 20.4521 16.4131 20.0381C16.2666 19.684 16.4102 19.2798 16.7285 19.0664C17.6526 18.4471 18.448 17.6506 19.0674 16.7266ZM3.96289 16.4102C4.31701 16.2635 4.72215 16.4062 4.93555 16.7246C5.55455 17.6486 6.34982 18.445 7.27344 19.0645C7.59155 19.278 7.73451 19.6831 7.58789 20.0371C7.41618 20.4509 6.92319 20.6274 6.54785 20.3828C5.37842 19.6204 4.37808 18.62 3.61621 17.4502C3.37168 17.0747 3.54891 16.5816 3.96289 16.4102ZM11.999 14.502C12.5504 14.5021 12.9971 14.9496 12.9971 15.501C12.997 16.0524 12.5504 16.4998 11.999 16.5C11.4475 16.5 11 16.0525 11 15.501C11 14.9494 11.4475 14.502 11.999 14.502ZM20.8057 9.43262C21.2195 9.26133 21.6936 9.48557 21.7861 9.92383C21.9276 10.5936 22.0019 11.2881 22.002 12C22.002 12.7108 21.9281 13.4044 21.7871 14.0732C21.6947 14.5116 21.2206 14.7348 20.8066 14.5635C20.4525 14.4168 20.2679 14.0294 20.3418 13.6533C20.4472 13.1187 20.502 12.5655 20.502 12C20.5019 11.4334 20.4466 10.8793 20.3408 10.3438C20.2668 9.96762 20.4515 9.57933 20.8057 9.43262ZM2.21777 9.9248C2.31054 9.48674 2.78445 9.26317 3.19824 9.43457C3.55237 9.58136 3.73721 9.96958 3.66309 10.3457C3.55754 10.8808 3.50196 11.434 3.50195 12C3.50195 12.565 3.55695 13.1172 3.66211 13.6514C3.73611 14.0274 3.55132 14.4148 3.19727 14.5615C2.78322 14.733 2.30918 14.5098 2.2168 14.0713C2.07605 13.403 2.00195 12.7101 2.00195 12C2.00196 11.2886 2.07655 10.5941 2.21777 9.9248ZM11.9941 7C12.3738 6.9997 12.6883 7.2815 12.7383 7.64746L12.7451 7.74902L12.749 12.251C12.7494 12.6652 12.4132 13.0016 11.999 13.002C11.6194 13.0021 11.3058 12.7195 11.2559 12.3535L11.249 12.252L11.2451 7.75098C11.2448 7.33687 11.5801 7.00051 11.9941 7ZM6.54883 3.61621C6.92432 3.37153 7.41735 3.54882 7.58887 3.96289C7.73554 4.31698 7.59275 4.7221 7.27441 4.93555C6.35126 5.55454 5.55549 6.34928 4.93652 7.27246C4.72313 7.59056 4.31878 7.73426 3.96484 7.58789C3.55075 7.41637 3.37343 6.92237 3.61816 6.54688C4.38006 5.37793 5.37988 4.3781 6.54883 3.61621ZM16.4121 3.96094C16.5836 3.54699 17.0767 3.36975 17.4521 3.61426C18.6219 4.37607 19.6223 5.37658 20.3848 6.5459C20.6293 6.92136 20.4521 7.41444 20.0381 7.58594C19.6842 7.73237 19.2799 7.5894 19.0664 7.27148C18.4471 6.34813 17.6512 5.55251 16.7275 4.93359C16.409 4.72021 16.2654 4.31512 16.4121 3.96094ZM12.002 2C12.7121 2 13.405 2.07409 14.0732 2.21484C14.5117 2.3072 14.7358 2.78131 14.5645 3.19531C14.4177 3.54952 14.0295 3.73422 13.6533 3.66016C13.1191 3.55499 12.567 3.5 12.002 3.5C11.4359 3.5 10.8828 3.55558 10.3477 3.66113C9.97148 3.73534 9.58334 3.55047 9.43652 3.19629C9.2651 2.78243 9.48855 2.30848 9.92676 2.21582C10.5962 2.07457 11.2905 2 12.002 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/error_circle_hint_24_regular.svg";

Details