WiFi Off icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_wifi_off_24_regular.svg" width="24" height="24" alt="WiFi Off">

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.28034 2.21968C2.98745 1.92678 2.51257 1.92677 2.21968 2.21966C1.92678 2.51255 1.92677 2.98743 2.21966 3.28032L5.58402 6.64475C4.8631 7.10444 4.18071 7.64908 3.5511 8.27869C3.06185 8.76794 2.58743 9.34804 2.15727 9.9681C1.92117 10.3084 2.00567 10.7757 2.346 11.0118C2.68634 11.2479 3.15363 11.1634 3.38974 10.8231C3.77147 10.2728 4.18989 9.76122 4.61177 9.33935C5.24464 8.70647 5.93852 8.17176 6.67447 7.73522L8.26593 9.32671C7.57451 9.69363 6.92526 10.1682 6.34294 10.7506C5.73234 11.3612 5.2343 12.0505 4.8515 12.8073C4.66454 13.1769 4.81261 13.6281 5.18224 13.8151C5.55186 14.0021 6.00305 13.854 6.19001 13.4844C6.50137 12.8688 6.90578 12.3091 7.4036 11.8112C7.9936 11.2212 8.668 10.7671 9.38794 10.4487L11.3185 12.3794C10.2659 12.5297 9.25126 13.0097 8.44151 13.8194C7.9946 14.2663 7.63821 14.8009 7.38076 15.3893C7.21472 15.7688 7.38774 16.211 7.76722 16.3771C8.14669 16.5431 8.58892 16.3701 8.75497 15.9906C8.93955 15.5688 9.19165 15.1906 9.50217 14.8801C10.4134 13.9689 11.6924 13.6496 12.8613 13.9222L20.7194 21.7805C21.0123 22.0734 21.4872 22.0734 21.7801 21.7805C22.073 21.4876 22.073 21.0127 21.7801 20.7198L3.28034 2.21968ZM11.5842 8.40227L13.1676 9.98565C14.4554 10.2084 15.6894 10.8169 16.6838 11.8112C17.1603 12.2878 17.5806 12.8766 17.9009 13.5029C18.0896 13.8717 18.5414 14.0177 18.9102 13.8291C19.279 13.6405 19.425 13.1887 19.2364 12.8199C18.8467 12.058 18.3352 11.3414 17.7445 10.7506C16.0533 9.05945 13.7978 8.27668 11.5842 8.40227ZM8.48684 5.30481L9.71316 6.53115C13.0869 5.77801 16.7617 6.71408 19.3869 9.33935C19.8303 9.78274 20.2532 10.2944 20.6212 10.8276C20.8565 11.1685 21.3236 11.2541 21.6645 11.0188C22.0054 10.7836 22.091 10.3165 21.8557 9.97557C21.4373 9.36931 20.9567 8.78773 20.4476 8.27869C17.2106 5.04172 12.5784 4.05043 8.48684 5.30481ZM13.0601 16.4391C13.646 17.0249 13.646 17.9748 13.0601 18.5607C12.4743 19.1465 11.5244 19.1465 10.9386 18.5607C10.3527 17.9748 10.3527 17.0249 10.9386 16.4391C11.5244 15.8532 12.4743 15.8532 13.0601 16.4391Z" 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_off_24_regular.svg";

Details

Keywords

wirelessfidelityconnectinternetwebconnection