Accessibility Question Mark icon

Use the Accessibility Question Mark 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 { AccessibilityQuestionMark24Regular, AccessibilityQuestionMark24Filled } from "@fluentui/react-icons";

export function Example() {
  return <AccessibilityQuestionMark24Regular aria-label="Accessibility Question Mark" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_accessibility_question_mark_24_regular.svg" width="24" height="24" alt="Accessibility Question Mark">

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="M11.4684 6.403C10.9025 6.18838 10.5002 5.64117 10.5002 5C10.5002 4.17157 11.1718 3.5 12.0002 3.5C12.8286 3.5 13.5002 4.17157 13.5002 5C13.5002 5.64127 13.0978 6.18855 12.5317 6.4031C12.1824 6.48801 11.8177 6.48797 11.4684 6.403ZM9.0002 5C9.0002 5.1352 9.00914 5.2683 9.02647 5.39876L6.15015 4.17784C5.00701 3.6926 3.68228 4.2222 3.1887 5.36177C2.69342 6.50526 3.22266 7.82908 4.36975 8.31599L8.00271 9.85809V13.5595L6.12373 19.0165C5.71917 20.1914 6.34368 21.4719 7.51862 21.8764C8.69356 22.281 9.974 21.6565 10.3786 20.4815L10.5237 20.0599C10.1868 19.2743 10.0002 18.4089 10.0002 17.5C10.0002 17.2947 10.0098 17.0917 10.0284 16.8912L8.96029 19.9932C8.82543 20.3848 8.39862 20.593 8.00697 20.4581C7.61533 20.3233 7.40716 19.8965 7.54201 19.5048L9.43461 14.0083C9.4797 13.8774 9.50271 13.7399 9.50271 13.6014V9.69262C9.50271 9.19101 9.20286 8.73798 8.74113 8.54199L4.95584 6.93523C4.57528 6.77369 4.40082 6.33732 4.56514 5.95794C4.73116 5.57464 5.17954 5.39538 5.56405 5.55859L10.535 7.66865C10.6943 7.73627 10.8571 7.79238 11.0223 7.83699C11.3288 7.94264 11.6578 8 12.0002 8C12.3424 8 12.6712 7.9427 12.9776 7.83718C13.143 7.79254 13.306 7.73636 13.4655 7.66865L18.4365 5.55859C18.821 5.39538 19.2694 5.57464 19.4354 5.95794C19.5997 6.33732 19.4253 6.77369 19.0447 6.93523L15.2643 8.53992C14.8026 8.73591 14.5027 9.18894 14.5027 9.69055V11.3127C14.9809 11.1584 15.4833 11.0581 16.0027 11.0188V9.85602L19.6308 8.31599C20.7779 7.82908 21.3071 6.50526 20.8118 5.36177C20.3183 4.2222 18.9935 3.6926 17.8504 4.17784L14.9739 5.39883C14.9913 5.26835 15.0002 5.13522 15.0002 5C15.0002 3.34315 13.6571 2 12.0002 2C10.3433 2 9.0002 3.34315 9.0002 5ZM11.0002 17.5C11.0002 14.4624 13.4627 12 16.5002 12C19.5378 12 22.0002 14.4624 22.0002 17.5C22.0002 20.5376 19.5378 23 16.5002 23C13.4627 23 11.0002 20.5376 11.0002 17.5ZM15.7502 20.75C15.7502 21.1642 16.086 21.5 16.5002 21.5C16.9145 21.5 17.2502 21.1642 17.2502 20.75C17.2502 20.3358 16.9145 20 16.5002 20C16.086 20 15.7502 20.3358 15.7502 20.75ZM14.5002 16C14.5002 16.2761 14.7241 16.5 15.0002 16.5C15.2764 16.5 15.5002 16.2761 15.5002 16C15.5002 15.4477 15.948 15 16.5002 15C17.0525 15 17.5002 15.4477 17.5002 16C17.5002 16.3706 17.4177 16.5793 17.1342 16.8975L17.0183 17.0225L16.7542 17.2921C16.212 17.8603 16.0002 18.2695 16.0002 19C16.0002 19.2761 16.2241 19.5 16.5002 19.5C16.7764 19.5 17.0002 19.2761 17.0002 19C17.0002 18.6294 17.0828 18.4207 17.3663 18.1025L17.4822 17.9775L17.7463 17.7079C18.2885 17.1397 18.5002 16.7305 18.5002 16C18.5002 14.8954 17.6048 14 16.5002 14C15.3957 14 14.5002 14.8954 14.5002 16Z" 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/accessibility_question_mark_24_regular.svg";

Details

Keywords

personinclusivequestionunknown