gentleface

Gentleface › Connectivity › wifi-low

wifi-low icon

Wifi low: weak wifi, low wifi, poor wifi. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M7.5 10C7.972 10 8.419 10.106 8.842 10.317C9.264 10.528 9.617 10.822 9.9 11.2C9.983 11.31 10.014 11.434 9.995 11.571C9.975 11.707 9.91 11.817 9.8 11.9C9.69 11.983 9.566 12.014 9.429 11.995C9.293 11.975 9.183 11.91 9.1 11.8C8.911 11.548 8.676 11.352 8.394 11.211C8.113 11.07 7.815 11 7.5 11C7.185 11 6.887 11.07 6.606 11.211C6.324 11.352 6.089 11.548 5.9 11.8C5.815 11.913 5.706 11.979 5.571 11.998C5.436 12.017 5.313 11.985 5.2 11.9C5.09 11.817 5.025 11.707 5.005 11.571C4.985 11.434 5.017 11.31 5.1 11.2C5.383 10.822 5.736 10.528 6.158 10.317C6.581 10.106 7.028 10 7.5 10ZM6.793 12.293C6.988 12.098 7.224 12 7.5 12C7.776 12 8.012 12.098 8.207 12.293C8.402 12.488 8.5 12.724 8.5 13C8.5 13.276 8.402 13.512 8.207 13.707C8.012 13.902 7.776 14 7.5 14C7.224 14 6.988 13.902 6.793 13.707C6.598 13.512 6.5 13.276 6.5 13C6.5 12.724 6.598 12.488 6.793 12.293Z"/></svg>
React
// Gentleface "wifi-low" (line-round), MIT. https://gentleface.com/icons/wifi-low
import type { SVGProps } from 'react';

export function WifiLowIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M7.5 10C7.972 10 8.419 10.106 8.842 10.317C9.264 10.528 9.617 10.822 9.9 11.2C9.983 11.31 10.014 11.434 9.995 11.571C9.975 11.707 9.91 11.817 9.8 11.9C9.69 11.983 9.566 12.014 9.429 11.995C9.293 11.975 9.183 11.91 9.1 11.8C8.911 11.548 8.676 11.352 8.394 11.211C8.113 11.07 7.815 11 7.5 11C7.185 11 6.887 11.07 6.606 11.211C6.324 11.352 6.089 11.548 5.9 11.8C5.815 11.913 5.706 11.979 5.571 11.998C5.436 12.017 5.313 11.985 5.2 11.9C5.09 11.817 5.025 11.707 5.005 11.571C4.985 11.434 5.017 11.31 5.1 11.2C5.383 10.822 5.736 10.528 6.158 10.317C6.581 10.106 7.028 10 7.5 10ZM6.793 12.293C6.988 12.098 7.224 12 7.5 12C7.776 12 8.012 12.098 8.207 12.293C8.402 12.488 8.5 12.724 8.5 13C8.5 13.276 8.402 13.512 8.207 13.707C8.012 13.902 7.776 14 7.5 14C7.224 14 6.988 13.902 6.793 13.707C6.598 13.512 6.5 13.276 6.5 13C6.5 12.724 6.598 12.488 6.793 12.293Z" />
    </svg>
  );
}
Vue
Vue: see /icons/wifi-low.md
Svelte
Svelte: see /icons/wifi-low.md
HTML img
HTML img: see /icons/wifi-low.md
CSS
CSS: see /icons/wifi-low.md
Data URL
Data URL: see /icons/wifi-low.md
Sprite
Sprite: see /icons/wifi-low.md
SwiftUI
SwiftUI: see /icons/wifi-low.md
Compose
Compose: see /icons/wifi-low.md
Android XML
Android XML: see /icons/wifi-low.md
Flutter
Flutter: see /icons/wifi-low.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

Meaning

Use it for
weak wifi, low wifi, poor wifi
Tags
wifi, weak, low, signal, wireless, connection
Category
Connectivity
Component name
WifiLowIcon
History
  • added

Family 8

More connectivity icons

For agents

Metadata: /icons/wifi-low.json · Markdown: /icons/wifi-low.md · SVG: https://gentleface.com/svg/{style}/16/wifi-low.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/wifi-low.png

Feedback