Circle Hint icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_circle_hint_24_regular.svg" width="24" height="24" alt="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="M7.58935 3.96267C7.41783 3.54858 6.92433 3.37159 6.54883 3.61633C5.37984 4.37825 4.38005 5.37805 3.61815 6.54706C3.37342 6.92256 3.55041 7.41605 3.9645 7.58757C4.3186 7.73424 4.72346 7.5908 4.9369 7.27246C5.55589 6.34924 6.35105 5.55408 7.27425 4.93507C7.59258 4.72163 7.73602 4.31677 7.58935 3.96267ZM10.3476 3.66095C9.97133 3.73517 9.58334 3.55033 9.43658 3.19603C9.26512 2.78209 9.48862 2.3081 9.92702 2.21559C10.5964 2.07434 11.2905 2.00005 12.002 2.00005C12.7122 2.00005 13.4051 2.07408 14.0734 2.21486C14.512 2.30724 14.7356 2.78133 14.5641 3.19538C14.4174 3.54958 14.0295 3.73443 13.6534 3.66036C13.1192 3.55518 12.567 3.50005 12.002 3.50005C11.4359 3.50005 10.8827 3.55538 10.3476 3.66095ZM20.0384 7.58609C19.6844 7.73275 19.2796 7.58937 19.0661 7.27111C18.4467 6.34764 17.651 5.55234 16.7271 4.93339C16.4087 4.72 16.2651 4.31504 16.4118 3.96086C16.5833 3.54686 17.0766 3.36984 17.4521 3.61439C18.6218 4.3762 19.6223 5.37615 20.3847 6.54546C20.6296 6.92096 20.4526 7.41455 20.0384 7.58609ZM20.8063 14.5637C20.4521 14.4169 20.2672 14.029 20.3414 13.6528C20.4467 13.1182 20.502 12.5656 20.502 12C20.502 11.4334 20.4465 10.8798 20.3408 10.3442C20.2665 9.96793 20.4513 9.57986 20.8056 9.43309C21.2195 9.26165 21.6935 9.48507 21.786 9.9234C21.9275 10.5933 22.002 11.288 22.002 12C22.002 12.7108 21.9278 13.4043 21.7868 14.0731C21.6944 14.5116 21.2203 14.7352 20.8063 14.5637ZM16.413 20.0385C16.2663 19.6843 16.4098 19.2794 16.7282 19.066C17.6524 18.4466 18.4484 17.6506 19.0678 16.7264C19.2812 16.408 19.6862 16.2645 20.0403 16.4112C20.4543 16.5827 20.6313 17.0761 20.3867 17.4516C19.6243 18.6218 18.6236 19.6225 17.4533 20.3849C17.0778 20.6295 16.5845 20.4525 16.413 20.0385ZM9.43524 20.8038C9.58201 20.4494 9.97007 20.2646 10.3463 20.3389C10.8818 20.4446 11.4354 20.5 12.002 20.5C12.5674 20.5 13.12 20.4448 13.6546 20.3395C14.0308 20.2654 14.4187 20.4502 14.5654 20.8044C14.7369 21.2184 14.5133 21.6925 14.0749 21.7849C13.4061 21.9259 12.7127 22 12.002 22C11.29 22 10.5954 21.9256 9.92557 21.7842C9.48723 21.6916 9.26379 21.2177 9.43524 20.8038ZM3.96263 16.4097C4.31682 16.263 4.72179 16.4066 4.93517 16.7251C5.55418 17.649 6.34959 18.4448 7.2732 19.0643C7.59147 19.2778 7.73486 19.6826 7.58821 20.0367C7.41666 20.4508 6.92309 20.6278 6.54759 20.383C5.37811 19.6205 4.37803 18.6199 3.61615 17.45C3.37162 17.0745 3.54865 16.5812 3.96263 16.4097ZM3.19791 9.43482C3.55221 9.58157 3.73704 9.96956 3.66283 10.3458C3.55728 10.8809 3.50195 11.434 3.50195 12C3.50195 12.565 3.55707 13.1171 3.66223 13.6513C3.73628 14.0274 3.55143 14.4152 3.19723 14.5619C2.78318 14.7335 2.30908 14.5098 2.21671 14.0712C2.07597 13.403 2.00195 12.7102 2.00195 12C2.00195 11.2887 2.07624 10.5946 2.21747 9.92526C2.30997 9.48686 2.78396 9.26336 3.19791 9.43482Z" 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_24_regular.svg";

Details

Keywords

circleroundshapedashdashes