WiFi Lock icon

Use the WiFi 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 { WifiLock24Regular, WifiLock24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_wifi_lock_24_regular.svg" width="24" height="24" alt="WiFi 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="M17.7445 10.7506C18.3352 11.3414 18.8467 12.058 19.2364 12.8199C19.425 13.1886 19.279 13.6405 18.9102 13.8291C18.5414 14.0177 18.0896 13.8717 17.9009 13.5029C17.5806 12.8766 17.1603 12.2878 16.6838 11.8112C14.6192 9.74661 11.5211 9.34536 9.05476 10.6075C8.67061 10.1974 8.18887 9.87988 7.64658 9.69194C10.7722 7.65421 15.001 8.00709 17.7445 10.7506ZM15.6426 13.8194C16.0902 14.267 16.4584 14.8167 16.7147 15.4016C16.881 15.781 16.7082 16.2233 16.3288 16.3895C15.9494 16.5558 15.5071 16.383 15.3408 16.0036C15.1577 15.5858 14.8941 15.1922 14.5819 14.8801C13.7186 14.0167 12.5251 13.6847 11.4078 13.8841C11.0519 13.4643 10.5599 13.1635 10 13.0498V12.9998C10 12.9184 9.99722 12.8376 9.99175 12.7575C11.8575 11.9376 14.1148 12.2916 15.6426 13.8194ZM20.4476 8.27868C20.9567 8.78773 21.4373 9.3693 21.8557 9.97556C22.091 10.3165 22.0054 10.7836 21.6645 11.0188C21.3236 11.2541 20.8565 11.1685 20.6212 10.8276C20.2532 10.2944 19.8303 9.78273 19.3869 9.33934C15.3069 5.25928 8.69182 5.25928 4.61177 9.33934C4.18989 9.76121 3.77147 10.2728 3.38974 10.8231C3.15363 11.1634 2.68634 11.2479 2.346 11.0118C2.00567 10.7757 1.92117 10.3084 2.15727 9.9681C2.58743 9.34803 3.06185 8.76794 3.5511 8.27868C8.21695 3.61284 15.7818 3.61284 20.4476 8.27868ZM13.0601 16.4391C13.646 17.0249 13.646 17.9748 13.0601 18.5607C12.7674 18.8534 12.3837 18.9999 12 19.0001V15.9997C12.3837 15.9998 12.7674 16.1463 13.0601 16.4391ZM4 13.9998V12.9998C4 11.6191 5.11929 10.4998 6.5 10.4998C7.88071 10.4998 9 11.6191 9 12.9998V13.9998H9.5C10.3284 13.9998 11 14.6714 11 15.4998V20.4998C11 21.3282 10.3284 21.9998 9.5 21.9998H3.5C2.67157 21.9998 2 21.3282 2 20.4998V15.4998C2 14.6714 2.67157 13.9998 3.5 13.9998H4ZM5.5 12.9998V13.9998H7.5V12.9998C7.5 12.4475 7.05228 11.9998 6.5 11.9998C5.94772 11.9998 5.5 12.4475 5.5 12.9998ZM7.5 17.9998C7.5 17.4475 7.05228 16.9998 6.5 16.9998C5.94772 16.9998 5.5 17.4475 5.5 17.9998C5.5 18.5521 5.94772 18.9998 6.5 18.9998C7.05228 18.9998 7.5 18.5521 7.5 17.9998Z" 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/wifi_lock_24_regular.svg";

Details

Keywords

wirelessfidelityconnectinternetwebconnection