Shield Question icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_shield_question_24_regular.svg" width="24" height="24" alt="Shield 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="M3 5.75C3 5.33579 3.33579 5 3.75 5C6.41341 5 9.00797 4.05652 11.55 2.15C11.8167 1.95 12.1833 1.95 12.45 2.15C14.992 4.05652 17.5866 5 20.25 5C20.6642 5 21 5.33579 21 5.75V11C21 16.0012 18.0424 19.6757 12.2749 21.9478C12.0982 22.0174 11.9018 22.0174 11.7251 21.9478C5.95756 19.6757 3 16.0012 3 11V5.75ZM4.5 6.47793V11C4.5 15.2556 6.95337 18.3789 12 20.4419C17.0466 18.3789 19.5 15.2556 19.5 11V6.47793C16.9227 6.32585 14.4192 5.38829 12 3.67782C9.58084 5.38829 7.07735 6.32585 4.5 6.47793ZM13 16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16C11 15.4477 11.4477 15 12 15C12.5523 15 13 15.4477 13 16ZM10.75 9.75C10.75 9.05964 11.3096 8.5 12 8.5C12.6904 8.5 13.25 9.05964 13.25 9.75C13.25 10.197 13.002 10.4869 12.4702 11.0177L12.4226 11.0651C11.9521 11.5333 11.25 12.232 11.25 13.35C11.25 13.7642 11.5858 14.1 12 14.1C12.4142 14.1 12.75 13.7642 12.75 13.35C12.75 12.9006 12.9988 12.6093 13.5298 12.0794L13.5789 12.0304C14.0487 11.5631 14.75 10.8653 14.75 9.75C14.75 8.23122 13.5188 7 12 7C10.4812 7 9.25 8.23122 9.25 9.75C9.25 10.1642 9.58579 10.5 10 10.5C10.4142 10.5 10.75 10.1642 10.75 9.75Z" 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/shield_question_24_regular.svg";

Details

Keywords

securityprotectionsafetyquestionmark