Shield Prohibited icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_shield_prohibited_24_regular.svg" width="24" height="24" alt="Shield Prohibited">

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.75 5C3.33579 5 3 5.33579 3 5.75V11C3 16.0012 5.95756 19.6757 11.7251 21.9478C11.9018 22.0174 12.0982 22.0174 12.2749 21.9478C12.4188 21.8911 12.561 21.8335 12.7014 21.7751C12.0422 21.2996 11.4758 20.7036 11.0343 20.0194C6.6401 17.9615 4.5 14.9746 4.5 11V6.47793C7.07735 6.32585 9.58084 5.38829 12 3.67782C14.4192 5.38829 16.9227 6.32585 19.5 6.47793V10.7322C20.0407 11.014 20.5368 11.3696 20.975 11.7857C20.9917 11.5275 21 11.2656 21 11V5.75C21 5.33579 20.6642 5 20.25 5C17.5866 5 14.992 4.05652 12.45 2.15C12.1833 1.95 11.8167 1.95 11.55 2.15C9.00797 4.05652 6.41341 5 3.75 5ZM16.5 22C19.5376 22 22 19.5376 22 16.5C22 13.4624 19.5376 11 16.5 11C13.4624 11 11 13.4624 11 16.5C11 19.5376 13.4624 22 16.5 22ZM13.1911 18.7482C12.755 18.1075 12.5 17.3335 12.5 16.5C12.5 14.2909 14.2909 12.5 16.5 12.5C17.3335 12.5 18.1075 12.755 18.7482 13.1911L13.1911 18.7482ZM14.2518 19.8089L19.8089 14.2518C20.245 14.8925 20.5 15.6665 20.5 16.5C20.5 18.7091 18.7091 20.5 16.5 20.5C15.6665 20.5 14.8925 20.245 14.2518 19.8089Z" 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_prohibited_24_regular.svg";

Details

Keywords

securityprotectionsafety