Window Shield icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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="M6.25 3C4.45507 3 3 4.45507 3 6.25V17.75C3 19.5449 4.45507 21 6.25 21H13.854C13.3977 20.5424 13.0228 20.04 12.7324 19.5H6.25C5.2835 19.5 4.5 18.7165 4.5 17.75V8.5H19.5V11.1854C19.9204 11.4957 20.433 11.7979 21 11.9759V6.25C21 4.45507 19.5449 3 17.75 3H6.25ZM19.5 7H4.5V6.25C4.5 5.2835 5.2835 4.5 6.25 4.5H17.75C18.7165 4.5 19.5 5.2835 19.5 6.25V7ZM17.9896 11.1945C18.6423 11.8454 19.8965 12.8805 21.439 13.0928C21.7466 13.1352 22 13.3779 22 13.6817V16.5203C22 20.3363 18.4206 21.7212 17.6467 21.9761C17.5498 22.008 17.4509 22.008 17.354 21.9761C16.5801 21.7213 13.0003 20.3363 13.0003 16.5203L13 13.6818C13 13.378 13.2534 13.1352 13.561 13.0928C15.1032 12.8804 16.3575 11.8454 17.0103 11.1945C17.2704 10.9351 17.7295 10.9352 17.9896 11.1945Z" 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/window_shield_24_regular.svg";

Details

Keywords

rectangleshapewebappwindowui