Lock Shield icon
Used in generic access, security, or safety scenarios. The Lock Shield icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Lock 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 { LockShield24Regular, LockShield24Filled } from "@fluentui/react-icons";
export function Example() {
return <LockShield24Regular aria-label="Lock Shield" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_lock_shield_24_regular.svg" width="24" height="24" alt="Lock 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="M18.0107 12.1943C18.2708 11.9354 18.7292 11.9353 18.9893 12.1943C19.642 12.8452 20.897 13.8804 22.4395 14.0928C22.7468 14.1353 22.9999 14.378 23 14.6816V17.5205C22.9998 21.3364 19.4203 22.7208 18.6465 22.9756C18.5496 23.0075 18.4504 23.0075 18.3535 22.9756C17.5785 22.7203 14.0002 21.3355 14 17.5205V14.6816C14.0001 14.378 14.2532 14.1353 14.5605 14.0928C16.1027 13.8804 17.3579 12.8452 18.0107 12.1943ZM12 1C14.7614 1 17 3.23858 17 6V8.00977C18.6781 8.13743 20 9.5392 20 11.25V11.7764C19.8832 11.6724 19.7785 11.5754 19.6904 11.4873C19.3618 11.1589 18.9203 10.9963 18.4805 11C18.3591 10.1521 17.6315 9.5 16.75 9.5H7.25C6.2835 9.5 5.5 10.2835 5.5 11.25V18.75C5.5 19.7165 6.2835 20.5 7.25 20.5H13.7334C14.0241 21.0405 14.4005 21.542 14.8574 22H7.25C5.45507 22 4 20.5449 4 18.75V11.25C4 9.5392 5.3219 8.13743 7 8.00977V6C7 3.23858 9.23858 1 12 1ZM12 13.75C12.4371 13.75 12.8215 13.9746 13.0449 14.3145C13.0165 14.4311 13 14.5549 13 14.6855V15.7471C12.772 16.0517 12.4098 16.25 12 16.25C11.3096 16.25 10.75 15.6904 10.75 15C10.75 14.3096 11.3096 13.75 12 13.75ZM12 2.5C10.067 2.5 8.5 4.067 8.5 6V8H15.5V6C15.5 4.067 13.933 2.5 12 2.5Z" 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/lock_shield_24_regular.svg";Details
| Name | Lock Shield |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_lock_shield_24_regular.svg |
| Filled file | ic_fluent_lock_shield_24_filled.svg |
| React components | LockShield24Regular, LockShield24Filled |
| License | MIT (© Microsoft Corporation) |
Keywords
securityaccessprotectedsafetypermissionprotectioninformationprotection