Shield Lock icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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 11.1813 20.9961 11.3609 20.9883 11.5387C20.5804 11.1263 20.0707 10.8148 19.5 10.6449V6.47793C16.9227 6.32585 14.4192 5.38829 12 3.67782C9.58084 5.38829 7.07735 6.32585 4.5 6.47793V11C4.5 15.2556 6.95337 18.3789 12 20.4419C12.3455 20.3007 12.6788 20.1545 13 20.0033V21.5C13 21.5492 13.0014 21.598 13.0042 21.6465C12.7663 21.7496 12.5232 21.85 12.2749 21.9478C12.0982 22.0174 11.9018 22.0174 11.7251 21.9478C5.95756 19.6757 3 16.0012 3 11V5.75ZM16 15V14C16 12.6193 17.1193 11.5 18.5 11.5C19.8807 11.5 21 12.6193 21 14V15H21.5C22.3284 15 23 15.6716 23 16.5V21.5C23 22.3284 22.3284 23 21.5 23H15.5C14.6716 23 14 22.3284 14 21.5V16.5C14 15.6716 14.6716 15 15.5 15H16ZM17.5 14V15H19.5V14C19.5 13.4477 19.0523 13 18.5 13C17.9477 13 17.5 13.4477 17.5 14ZM19.5 19C19.5 18.4477 19.0523 18 18.5 18C17.9477 18 17.5 18.4477 17.5 19C17.5 19.5523 17.9477 20 18.5 20C19.0523 20 19.5 19.5523 19.5 19Z" 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_lock_24_regular.svg";

Details

Keywords

securityprotectionsafety