Warning Lock Open icon

Use the Warning Lock Open 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 { WarningLockOpen24Regular, WarningLockOpen24Filled } from "@fluentui/react-icons";

export function Example() {
  return <WarningLockOpen24Regular aria-label="Warning Lock Open" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_warning_lock_open_24_regular.svg" width="24" height="24" alt="Warning Lock Open">

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="M21.4998 11.5001C22.8805 11.5001 23.9998 12.6194 23.9998 14.0001C23.9997 14.4143 23.664 14.7501 23.2498 14.7501C22.8357 14.75 22.4999 14.4142 22.4998 14.0001C22.4998 13.4478 22.0521 13.0001 21.4998 13.0001C20.9476 13.0002 20.4998 13.4479 20.4998 14.0001V15.0001H21.4998C22.3282 15.0001 22.9998 15.6717 22.9998 16.5001V21.5001C22.9997 22.3285 22.3282 23.0001 21.4998 23.0001H15.4998C14.6715 23 13.9999 22.3284 13.9998 21.5001V16.5001C13.9998 15.6718 14.6715 15.0002 15.4998 15.0001H18.9998V14.0001C18.9998 12.6195 20.1192 11.5002 21.4998 11.5001ZM9.13847 3.70813C10.3664 1.43234 13.6315 1.43208 14.8592 3.70813L19.0584 11.4933C18.6426 11.8984 18.3272 12.4063 18.1531 12.9757L13.5389 4.42004C12.8778 3.19454 11.1191 3.19479 10.4578 4.42004L3.71464 16.922C3.08598 18.0878 3.93027 19.5027 5.25468 19.5031H13.0008V21.0031H5.25468C2.79485 21.0027 1.22681 18.3752 2.39433 16.2101L9.13847 3.70813ZM18.4998 18.0001C17.9476 18.0002 17.4998 18.4479 17.4998 19.0001C17.4999 19.5523 17.9476 20 18.4998 20.0001C19.052 20.0001 19.4997 19.5524 19.4998 19.0001C19.4998 18.4478 19.0521 18.0001 18.4998 18.0001ZM11.9998 15.0011C12.5517 15.0015 12.9998 15.4491 12.9998 16.0011C12.9995 16.5529 12.5515 17.0007 11.9998 17.0011C11.4478 17.001 11 16.5531 10.9998 16.0011C10.9998 15.4489 11.4476 15.0012 11.9998 15.0011ZM11.9998 7.5011C12.4136 7.50155 12.7498 7.83716 12.7498 8.2511V12.7511C12.7495 13.1648 12.4135 13.5007 11.9998 13.5011C11.5858 13.501 11.25 13.165 11.2498 12.7511V8.2511C11.2498 7.83696 11.5857 7.50122 11.9998 7.5011Z" 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/warning_lock_open_24_regular.svg";

Details

Keywords

alertexclamationtriangleissueprivacypubliccontentinfodata