glyphfox
devices

Wifi off icon

Wifi off is an original glyphfox icon from the devices set, drawn on the 24 by 24 grid with 6 shapes. It is an open line drawing, so the solid style keeps the outline look. It belongs to a hand tuned morph pair, shown below. Tags: offline, disconnected, no signal.

Customize in the icon browser

Sizes, weights and styles

Every glyphfox icon renders along three axes. The stroke grows a little below 24 px so small icons keep their presence.

Sizes

16 px
20 px
24 px
32 px
48 px

Weights

weight 1
weight 1.5
weight 2
weight 2.5
weight 3

Styles

Outline
sharp corners

Copy the code

Pick a format. Each snippet uses the package entry point for that stack; the props work the same everywhere.

Code formats
App.jsx
import { WifiOffIcon } from 'glyphfox/react';

<WifiOffIcon />
App.vue
<script setup>
import { WifiOffIcon } from 'glyphfox/vue';
</script>

<template>
  <WifiOffIcon />
</template>
App.svelte
<script>
  import { WifiOffIcon } from 'glyphfox/svelte';
</script>

<WifiOffIcon />
app.component
import { GlyphFoxIcon, provideGlyphFox } from 'glyphfox-angular';

<gf-icon name="wifi-off"></gf-icon>
index.html
<glyph-fox name="wifi-off"></glyph-fox>
index.html
<script src="https://cdn.jsdelivr.net/npm/glyphfox@1"></script>

<glyph-fox name="wifi-off"></glyph-fox>
index.html
<span class="gf-wifi-off" aria-hidden="true"></span>
wifi-off.svg
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="glyphfox glyphfox-wifi-off" aria-hidden="true"><path d="M8.82 15.32A4.5 4.5 0 0 1 9.27 14.93"/><path d="M5.99 12.49A8.5 8.5 0 0 1 6.43 12.08"/><path d="M3.16 9.66A12.5 12.5 0 0 1 3.59 9.25"/><path d="M11.66 6A12.5 12.5 0 0 1 20.84 9.66"/><path d="M12 18.5h.01"/><path d="M3 3l18 18"/></svg>
data URI
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='glyphfox glyphfox-wifi-off' aria-hidden='true'%3E%3Cpath d='M8.82 15.32A4.5 4.5 0 0 1 9.27 14.93'/%3E%3Cpath d='M5.99 12.49A8.5 8.5 0 0 1 6.43 12.08'/%3E%3Cpath d='M3.16 9.66A12.5 12.5 0 0 1 3.59 9.25'/%3E%3Cpath d='M11.66 6A12.5 12.5 0 0 1 20.84 9.66'/%3E%3Cpath d='M12 18.5h.01'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E
index.html
<!-- copy node_modules/glyphfox/dist/sprite.svg to your public folder -->
<svg width="24" height="24" aria-hidden="true">
  <use href="/sprite.svg#gf-wifi-off"></use>
</svg>
index.html
<!-- main.js: import 'glyphfox/runtime'; -->
<i data-glyph="wifi-off"></i>
icon.js
import { renderToString } from 'glyphfox/core';
import iconWifiOff from 'glyphfox/icons/wifi-off';

const svg = renderToString(iconWifiOff, { size: 24 });

// or, with every icon registered by name:
// import { toSvg } from 'glyphfox';
// toSvg('wifi-off', { size: 24 });

Details

Namewifi-off
React, Vue and Svelte componentWifiOffIcon
Icon data exporticonWifiOff
Categoriesdevices, communication
Tagsoffline disconnected no signal
StylesOutline
Shapes6
LicenseMIT

Morph pair

glyphfox morphs any icon into any other. These pairs are tuned by hand. Hover the preview to play the CSS only morph that toSvg returns with morphTo.

wifi to wifi-off wifi

With a modifier badge

Add a badge in any corner with modifier or the name syntax. The icon is cut around the badge, so the result still passes the icon rules.

wifi-off+check
wifi-off+plus
wifi-off+x
wifi-off+alert

Use it in your stack

Guides with the install, the props and the pitfalls for each stack: