Question icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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="M12 4C9.23579 4 7 6.23579 7 9C7 9.41421 7.33579 9.75 7.75 9.75C8.16421 9.75 8.5 9.41421 8.5 9C8.5 7.06421 10.0642 5.5 12 5.5C13.9358 5.5 15.5 7.06421 15.5 9C15.5 9.85178 15.2785 10.4195 14.9711 10.8595C14.6472 11.3232 14.2043 11.6827 13.6694 12.0917C13.624 12.1264 13.578 12.1615 13.5313 12.1969C12.5209 12.9651 11.25 13.9312 11.25 16V16.25C11.25 16.6642 11.5858 17 12 17C12.4142 17 12.75 16.6642 12.75 16.25V16C12.75 14.6827 13.464 14.1369 14.5353 13.3179L14.5806 13.2833C15.1082 12.8798 15.7278 12.3955 16.2008 11.7186C16.6902 11.018 17 10.1482 17 9C17 6.23579 14.7642 4 12 4ZM12 21C12.5523 21 13 20.5523 13 20C13 19.4477 12.5523 19 12 19C11.4477 19 11 19.4477 11 20C11 20.5523 11.4477 21 12 21Z" 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/question_24_regular.svg";

Details

Keywords

helpunknowntexttypedidyouknow