# wifi-low icon Wifi low. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/wifi-low - Category: Connectivity - Use it for: weak wifi, low wifi, poor wifi - Tags: wifi, weak, low, signal, wireless, connection - Family: wifi, wifi-alert, wifi-gear, wifi-lock, wifi-off, wifi-plus, wifi-search, wifi-sync - Component name: WifiLowIcon - Added: 2026-10-15 ## Files 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. - line-round: https://gentleface.com/svg/line-round/16/wifi-low.svg · PNG https://gentleface.com/png/line-round/16/wifi-low.png · https://gentleface.com/png/line-round/32/wifi-low.png · https://gentleface.com/png/line-round/48/wifi-low.png - line-soft: https://gentleface.com/svg/line-soft/16/wifi-low.svg · PNG https://gentleface.com/png/line-soft/16/wifi-low.png · https://gentleface.com/png/line-soft/32/wifi-low.png · https://gentleface.com/png/line-soft/48/wifi-low.png - line-sharp: https://gentleface.com/svg/line-sharp/16/wifi-low.svg · PNG https://gentleface.com/png/line-sharp/16/wifi-low.png · https://gentleface.com/png/line-sharp/32/wifi-low.png · https://gentleface.com/png/line-sharp/48/wifi-low.png - solid-round: https://gentleface.com/svg/solid-round/16/wifi-low.svg · PNG https://gentleface.com/png/solid-round/16/wifi-low.png · https://gentleface.com/png/solid-round/32/wifi-low.png · https://gentleface.com/png/solid-round/48/wifi-low.png - solid-soft: https://gentleface.com/svg/solid-soft/16/wifi-low.svg · PNG https://gentleface.com/png/solid-soft/16/wifi-low.png · https://gentleface.com/png/solid-soft/32/wifi-low.png · https://gentleface.com/png/solid-soft/48/wifi-low.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/wifi-low.svg · PNG https://gentleface.com/png/solid-sharp/16/wifi-low.png · https://gentleface.com/png/solid-sharp/32/wifi-low.png · https://gentleface.com/png/solid-sharp/48/wifi-low.png The SVG of every style: https://gentleface.com/icons/wifi-low.json (`svg`). ## Code (line-round) 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. For another style, take its SVG from the JSON and swap the path `d`. ### SVG ```svg ``` ### React ```tsx // Gentleface "wifi-low" (line-round), MIT. https://gentleface.com/icons/wifi-low import type { SVGProps } from 'react'; export function WifiLowIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "wifi-low" (line-round), MIT. https://gentleface.com/icons/wifi-low. Takes the text color. */ .icon-wifi-low { display: inline-block; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E") center / 16px 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E") center / 16px 16px no-repeat; } ``` ### Data URL ```text data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "wifi-low" (line-round), MIT. https://gentleface.com/icons/wifi-low import SwiftUI struct WifiLowIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 7.5, y: 10)) p.addCurve(to: CGPoint(x: 8.842, y: 10.317), control1: CGPoint(x: 7.972, y: 10), control2: CGPoint(x: 8.419, y: 10.106)) p.addCurve(to: CGPoint(x: 9.9, y: 11.2), control1: CGPoint(x: 9.264, y: 10.528), control2: CGPoint(x: 9.617, y: 10.822)) p.addCurve(to: CGPoint(x: 9.995, y: 11.571), control1: CGPoint(x: 9.983, y: 11.31), control2: CGPoint(x: 10.014, y: 11.434)) p.addCurve(to: CGPoint(x: 9.8, y: 11.9), control1: CGPoint(x: 9.975, y: 11.707), control2: CGPoint(x: 9.91, y: 11.817)) p.addCurve(to: CGPoint(x: 9.429, y: 11.995), control1: CGPoint(x: 9.69, y: 11.983), control2: CGPoint(x: 9.566, y: 12.014)) p.addCurve(to: CGPoint(x: 9.1, y: 11.8), control1: CGPoint(x: 9.293, y: 11.975), control2: CGPoint(x: 9.183, y: 11.91)) p.addCurve(to: CGPoint(x: 8.394, y: 11.211), control1: CGPoint(x: 8.911, y: 11.548), control2: CGPoint(x: 8.676, y: 11.352)) p.addCurve(to: CGPoint(x: 7.5, y: 11), control1: CGPoint(x: 8.113, y: 11.07), control2: CGPoint(x: 7.815, y: 11)) p.addCurve(to: CGPoint(x: 6.606, y: 11.211), control1: CGPoint(x: 7.185, y: 11), control2: CGPoint(x: 6.887, y: 11.07)) p.addCurve(to: CGPoint(x: 5.9, y: 11.8), control1: CGPoint(x: 6.324, y: 11.352), control2: CGPoint(x: 6.089, y: 11.548)) p.addCurve(to: CGPoint(x: 5.571, y: 11.998), control1: CGPoint(x: 5.815, y: 11.913), control2: CGPoint(x: 5.706, y: 11.979)) p.addCurve(to: CGPoint(x: 5.2, y: 11.9), control1: CGPoint(x: 5.436, y: 12.017), control2: CGPoint(x: 5.313, y: 11.985)) p.addCurve(to: CGPoint(x: 5.005, y: 11.571), control1: CGPoint(x: 5.09, y: 11.817), control2: CGPoint(x: 5.025, y: 11.707)) p.addCurve(to: CGPoint(x: 5.1, y: 11.2), control1: CGPoint(x: 4.985, y: 11.434), control2: CGPoint(x: 5.017, y: 11.31)) p.addCurve(to: CGPoint(x: 6.158, y: 10.317), control1: CGPoint(x: 5.383, y: 10.822), control2: CGPoint(x: 5.736, y: 10.528)) p.addCurve(to: CGPoint(x: 7.5, y: 10), control1: CGPoint(x: 6.581, y: 10.106), control2: CGPoint(x: 7.028, y: 10)) p.closeSubpath() p.move(to: CGPoint(x: 6.793, y: 12.293)) p.addCurve(to: CGPoint(x: 7.5, y: 12), control1: CGPoint(x: 6.988, y: 12.098), control2: CGPoint(x: 7.224, y: 12)) p.addCurve(to: CGPoint(x: 8.207, y: 12.293), control1: CGPoint(x: 7.776, y: 12), control2: CGPoint(x: 8.012, y: 12.098)) p.addCurve(to: CGPoint(x: 8.5, y: 13), control1: CGPoint(x: 8.402, y: 12.488), control2: CGPoint(x: 8.5, y: 12.724)) p.addCurve(to: CGPoint(x: 8.207, y: 13.707), control1: CGPoint(x: 8.5, y: 13.276), control2: CGPoint(x: 8.402, y: 13.512)) p.addCurve(to: CGPoint(x: 7.5, y: 14), control1: CGPoint(x: 8.012, y: 13.902), control2: CGPoint(x: 7.776, y: 14)) p.addCurve(to: CGPoint(x: 6.793, y: 13.707), control1: CGPoint(x: 7.224, y: 14), control2: CGPoint(x: 6.988, y: 13.902)) p.addCurve(to: CGPoint(x: 6.5, y: 13), control1: CGPoint(x: 6.598, y: 13.512), control2: CGPoint(x: 6.5, y: 13.276)) p.addCurve(to: CGPoint(x: 6.793, y: 12.293), control1: CGPoint(x: 6.5, y: 12.724), control2: CGPoint(x: 6.598, y: 12.488)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // WifiLowIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "wifi-low" (line-round), MIT. https://gentleface.com/icons/wifi-low import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.graphics.vector.addPathNodes import androidx.compose.ui.unit.dp val WifiLowIcon: ImageVector by lazy { ImageVector.Builder( name = "wifi-low", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("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"), fill = SolidColor(Color.Black), ).build() } // Icon(WifiLowIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "wifi-low" (line-round), MIT. https://gentleface.com/icons/wifi-low import 'package:flutter/widgets.dart'; class WifiLowIcon extends StatelessWidget { const WifiLowIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _WifiLowIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _WifiLowIconPainter extends CustomPainter { _WifiLowIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(7.5, 10) ..cubicTo(7.972, 10, 8.419, 10.106, 8.842, 10.317) ..cubicTo(9.264, 10.528, 9.617, 10.822, 9.9, 11.2) ..cubicTo(9.983, 11.31, 10.014, 11.434, 9.995, 11.571) ..cubicTo(9.975, 11.707, 9.91, 11.817, 9.8, 11.9) ..cubicTo(9.69, 11.983, 9.566, 12.014, 9.429, 11.995) ..cubicTo(9.293, 11.975, 9.183, 11.91, 9.1, 11.8) ..cubicTo(8.911, 11.548, 8.676, 11.352, 8.394, 11.211) ..cubicTo(8.113, 11.07, 7.815, 11, 7.5, 11) ..cubicTo(7.185, 11, 6.887, 11.07, 6.606, 11.211) ..cubicTo(6.324, 11.352, 6.089, 11.548, 5.9, 11.8) ..cubicTo(5.815, 11.913, 5.706, 11.979, 5.571, 11.998) ..cubicTo(5.436, 12.017, 5.313, 11.985, 5.2, 11.9) ..cubicTo(5.09, 11.817, 5.025, 11.707, 5.005, 11.571) ..cubicTo(4.985, 11.434, 5.017, 11.31, 5.1, 11.2) ..cubicTo(5.383, 10.822, 5.736, 10.528, 6.158, 10.317) ..cubicTo(6.581, 10.106, 7.028, 10, 7.5, 10) ..close() ..moveTo(6.793, 12.293) ..cubicTo(6.988, 12.098, 7.224, 12, 7.5, 12) ..cubicTo(7.776, 12, 8.012, 12.098, 8.207, 12.293) ..cubicTo(8.402, 12.488, 8.5, 12.724, 8.5, 13) ..cubicTo(8.5, 13.276, 8.402, 13.512, 8.207, 13.707) ..cubicTo(8.012, 13.902, 7.776, 14, 7.5, 14) ..cubicTo(7.224, 14, 6.988, 13.902, 6.793, 13.707) ..cubicTo(6.598, 13.512, 6.5, 13.276, 6.5, 13) ..cubicTo(6.5, 12.724, 6.598, 12.488, 6.793, 12.293) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_WifiLowIconPainter old) => old.color != color; } ```