WiFi Warning icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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.7506C17.8429 10.849 17.9392 10.951 18.033 11.0561C17.4106 10.9234 16.7442 11.0262 16.1899 11.3645C13.6124 9.25841 9.80749 9.40733 7.4036 11.8112C6.90578 12.309 6.50137 12.8688 6.19001 13.4844C6.00305 13.854 5.55186 14.0021 5.18224 13.8151C4.81261 13.6281 4.66454 13.1769 4.8515 12.8073C5.2343 12.0505 5.73234 11.3612 6.34294 10.7506C9.49138 7.60212 14.596 7.60212 17.7445 10.7506ZM11.9571 18.9995L13.1732 16.5655C13.1383 16.5217 13.1006 16.4795 13.0601 16.4391C12.4743 15.8532 11.5244 15.8532 10.9386 16.4391C10.3527 17.0249 10.3527 17.9748 10.9386 18.5607C11.2208 18.8428 11.5874 18.9891 11.9571 18.9995ZM14.1863 14.5376L14.8643 13.1805C12.886 11.8605 10.1875 12.0734 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.7796 13.6027 12.7797 13.4885 14.1863 14.5376ZM20.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.27868ZM16.1571 12.8301L12.1602 20.8284C11.6615 21.8262 12.3874 23 13.5031 23H21.4969C22.6126 23 23.3385 21.8263 22.8398 20.8284L18.8429 12.8301C18.2899 11.7233 16.7102 11.7233 16.1571 12.8301ZM18.0004 15.4956V18.4974C18.0004 18.7737 17.7764 18.9976 17.5 18.9976C17.2237 18.9976 16.9996 18.7737 16.9996 18.4974V15.4956C16.9996 15.2193 17.2237 14.9954 17.5 14.9954C17.7764 14.9954 18.0004 15.2193 18.0004 15.4956ZM17.5 20.9988C17.2237 20.9988 16.9996 20.7748 16.9996 20.4985C16.9996 20.2222 17.2237 19.9982 17.5 19.9982C17.7764 19.9982 18.0004 20.2222 18.0004 20.4985C18.0004 20.7748 17.7764 20.9988 17.5 20.9988Z" 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_warning_24_regular.svg";

Details

Keywords

wirelessfidelityconnectinternetwebconnection