# wifi-off icon Wifi off. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/wifi-off - Category: Connectivity - Use it for: offline, no connection, no internet, wifi disabled, connection lost - Example: Offline indicator in a status bar - Built from: wifi + slash - Tags: wireless, network, signal, internet, connection, hotspot, slash - Family: wifi, wifi-alert, wifi-gear, wifi-lock, wifi-low, wifi-plus, wifi-search, wifi-sync - Component name: WifiOffIcon - Added: 2026-10-14 ## Alternatives - `cloud-off`: cloud storage unreachable (cloud-unavailable) - `network-off`: a wired network disconnected (network-disconnected) - `signal-off`: cellular switched off (cellular-off) ## Also fits - cloud unavailable: no network at all (offline) - network disconnected: this device is offline (offline) - connection problem: offline, no connection at all (offline) - router offline: this device is offline (offline) - unplug: no network connection (offline) - internet off: offline or no connection - airplane mode off: offline or no connection ## Not for - downloaded (use `download-check`): wifi-off means offline status (no connection), not content kept for offline use ## 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-off.svg · PNG https://gentleface.com/png/line-round/16/wifi-off.png · https://gentleface.com/png/line-round/32/wifi-off.png · https://gentleface.com/png/line-round/48/wifi-off.png - line-soft: https://gentleface.com/svg/line-soft/16/wifi-off.svg · PNG https://gentleface.com/png/line-soft/16/wifi-off.png · https://gentleface.com/png/line-soft/32/wifi-off.png · https://gentleface.com/png/line-soft/48/wifi-off.png - line-sharp: https://gentleface.com/svg/line-sharp/16/wifi-off.svg · PNG https://gentleface.com/png/line-sharp/16/wifi-off.png · https://gentleface.com/png/line-sharp/32/wifi-off.png · https://gentleface.com/png/line-sharp/48/wifi-off.png - solid-round: https://gentleface.com/svg/solid-round/16/wifi-off.svg · PNG https://gentleface.com/png/solid-round/16/wifi-off.png · https://gentleface.com/png/solid-round/32/wifi-off.png · https://gentleface.com/png/solid-round/48/wifi-off.png - solid-soft: https://gentleface.com/svg/solid-soft/16/wifi-off.svg · PNG https://gentleface.com/png/solid-soft/16/wifi-off.png · https://gentleface.com/png/solid-soft/32/wifi-off.png · https://gentleface.com/png/solid-soft/48/wifi-off.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/wifi-off.svg · PNG https://gentleface.com/png/solid-sharp/16/wifi-off.png · https://gentleface.com/png/solid-sharp/32/wifi-off.png · https://gentleface.com/png/solid-sharp/48/wifi-off.png The SVG of every style: https://gentleface.com/icons/wifi-off.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-off" (line-round), MIT. https://gentleface.com/icons/wifi-off import type { SVGProps } from 'react'; export function WifiOffIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "wifi-off" (line-round), MIT. https://gentleface.com/icons/wifi-off. Takes the text color. */ .icon-wifi-off { 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='M15.003 14.5C15.003 14.636 14.953 14.754 14.854 14.854C14.754 14.953 14.636 15.003 14.5 15.003C14.364 15.003 14.246 14.953 14.146 14.854L8.258 8.965C7.449 8.837 6.661 8.927 5.893 9.234C5.079 9.559 4.417 10.078 3.906 10.791C3.826 10.903 3.718 10.971 3.582 10.993C3.445 11.016 3.321 10.987 3.209 10.906C3.097 10.826 3.029 10.718 3.007 10.582C2.984 10.445 3.013 10.321 3.094 10.209C3.393 9.791 3.744 9.423 4.146 9.103C4.566 8.77 5.025 8.504 5.522 8.305C6.02 8.106 6.535 7.982 7.069 7.934C7.118 7.93 7.167 7.926 7.216 7.923L5.366 6.073C4.711 6.309 4.103 6.637 3.543 7.057C2.902 7.537 2.36 8.111 1.916 8.777C1.838 8.894 1.732 8.966 1.599 8.993C1.466 9.02 1.34 8.994 1.223 8.916C1.108 8.84 1.037 8.734 1.01 8.598C0.983 8.463 1.007 8.338 1.084 8.223C1.591 7.461 2.211 6.806 2.943 6.257C3.458 5.87 4.009 5.552 4.595 5.302L1.146 1.854C1.047 1.754 0.997 1.636 0.997 1.5C0.997 1.364 1.047 1.246 1.146 1.146C1.246 1.047 1.364 0.997 1.5 0.997C1.636 0.997 1.754 1.047 1.854 1.146L14.854 14.146C14.953 14.246 15.003 14.364 15.003 14.5ZM13.904 8.205C13.985 8.316 14.015 8.44 13.994 8.577C13.973 8.713 13.907 8.822 13.795 8.904C13.684 8.985 13.56 9.015 13.423 8.994C13.287 8.973 13.178 8.907 13.096 8.795C12.539 8.033 11.856 7.409 11.046 6.923C10.237 6.437 9.364 6.128 8.43 5.995C8.293 5.976 8.183 5.911 8.1 5.8C8.017 5.69 7.986 5.566 8.005 5.43C8.024 5.293 8.089 5.183 8.2 5.1C8.31 5.017 8.434 4.986 8.57 5.005C9.639 5.157 10.635 5.51 11.561 6.065C12.486 6.621 13.267 7.334 13.904 8.205ZM7.5 11C7.972 11 8.419 11.106 8.842 11.317C9.264 11.528 9.617 11.822 9.9 12.2C9.983 12.31 10.014 12.434 9.995 12.571C9.975 12.707 9.91 12.817 9.8 12.9C9.69 12.983 9.566 13.014 9.429 12.995C9.293 12.975 9.183 12.91 9.1 12.8C8.911 12.548 8.676 12.352 8.394 12.211C8.113 12.07 7.815 12 7.5 12C7.185 12 6.887 12.07 6.606 12.211C6.324 12.352 6.089 12.548 5.9 12.8C5.815 12.913 5.706 12.979 5.571 12.998C5.436 13.017 5.313 12.985 5.2 12.9C5.087 12.815 5.021 12.706 5.002 12.571C4.983 12.436 5.015 12.313 5.1 12.2C5.383 11.822 5.736 11.528 6.158 11.317C6.581 11.106 7.028 11 7.5 11ZM6.793 13.293C6.988 13.098 7.224 13 7.5 13C7.776 13 8.012 13.098 8.207 13.293C8.402 13.488 8.5 13.724 8.5 14C8.5 14.276 8.402 14.512 8.207 14.707C8.012 14.902 7.776 15 7.5 15C7.224 15 6.988 14.902 6.793 14.707C6.598 14.512 6.5 14.276 6.5 14C6.5 13.724 6.598 13.488 6.793 13.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='M15.003 14.5C15.003 14.636 14.953 14.754 14.854 14.854C14.754 14.953 14.636 15.003 14.5 15.003C14.364 15.003 14.246 14.953 14.146 14.854L8.258 8.965C7.449 8.837 6.661 8.927 5.893 9.234C5.079 9.559 4.417 10.078 3.906 10.791C3.826 10.903 3.718 10.971 3.582 10.993C3.445 11.016 3.321 10.987 3.209 10.906C3.097 10.826 3.029 10.718 3.007 10.582C2.984 10.445 3.013 10.321 3.094 10.209C3.393 9.791 3.744 9.423 4.146 9.103C4.566 8.77 5.025 8.504 5.522 8.305C6.02 8.106 6.535 7.982 7.069 7.934C7.118 7.93 7.167 7.926 7.216 7.923L5.366 6.073C4.711 6.309 4.103 6.637 3.543 7.057C2.902 7.537 2.36 8.111 1.916 8.777C1.838 8.894 1.732 8.966 1.599 8.993C1.466 9.02 1.34 8.994 1.223 8.916C1.108 8.84 1.037 8.734 1.01 8.598C0.983 8.463 1.007 8.338 1.084 8.223C1.591 7.461 2.211 6.806 2.943 6.257C3.458 5.87 4.009 5.552 4.595 5.302L1.146 1.854C1.047 1.754 0.997 1.636 0.997 1.5C0.997 1.364 1.047 1.246 1.146 1.146C1.246 1.047 1.364 0.997 1.5 0.997C1.636 0.997 1.754 1.047 1.854 1.146L14.854 14.146C14.953 14.246 15.003 14.364 15.003 14.5ZM13.904 8.205C13.985 8.316 14.015 8.44 13.994 8.577C13.973 8.713 13.907 8.822 13.795 8.904C13.684 8.985 13.56 9.015 13.423 8.994C13.287 8.973 13.178 8.907 13.096 8.795C12.539 8.033 11.856 7.409 11.046 6.923C10.237 6.437 9.364 6.128 8.43 5.995C8.293 5.976 8.183 5.911 8.1 5.8C8.017 5.69 7.986 5.566 8.005 5.43C8.024 5.293 8.089 5.183 8.2 5.1C8.31 5.017 8.434 4.986 8.57 5.005C9.639 5.157 10.635 5.51 11.561 6.065C12.486 6.621 13.267 7.334 13.904 8.205ZM7.5 11C7.972 11 8.419 11.106 8.842 11.317C9.264 11.528 9.617 11.822 9.9 12.2C9.983 12.31 10.014 12.434 9.995 12.571C9.975 12.707 9.91 12.817 9.8 12.9C9.69 12.983 9.566 13.014 9.429 12.995C9.293 12.975 9.183 12.91 9.1 12.8C8.911 12.548 8.676 12.352 8.394 12.211C8.113 12.07 7.815 12 7.5 12C7.185 12 6.887 12.07 6.606 12.211C6.324 12.352 6.089 12.548 5.9 12.8C5.815 12.913 5.706 12.979 5.571 12.998C5.436 13.017 5.313 12.985 5.2 12.9C5.087 12.815 5.021 12.706 5.002 12.571C4.983 12.436 5.015 12.313 5.1 12.2C5.383 11.822 5.736 11.528 6.158 11.317C6.581 11.106 7.028 11 7.5 11ZM6.793 13.293C6.988 13.098 7.224 13 7.5 13C7.776 13 8.012 13.098 8.207 13.293C8.402 13.488 8.5 13.724 8.5 14C8.5 14.276 8.402 14.512 8.207 14.707C8.012 14.902 7.776 15 7.5 15C7.224 15 6.988 14.902 6.793 14.707C6.598 14.512 6.5 14.276 6.5 14C6.5 13.724 6.598 13.488 6.793 13.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='M15.003 14.5C15.003 14.636 14.953 14.754 14.854 14.854C14.754 14.953 14.636 15.003 14.5 15.003C14.364 15.003 14.246 14.953 14.146 14.854L8.258 8.965C7.449 8.837 6.661 8.927 5.893 9.234C5.079 9.559 4.417 10.078 3.906 10.791C3.826 10.903 3.718 10.971 3.582 10.993C3.445 11.016 3.321 10.987 3.209 10.906C3.097 10.826 3.029 10.718 3.007 10.582C2.984 10.445 3.013 10.321 3.094 10.209C3.393 9.791 3.744 9.423 4.146 9.103C4.566 8.77 5.025 8.504 5.522 8.305C6.02 8.106 6.535 7.982 7.069 7.934C7.118 7.93 7.167 7.926 7.216 7.923L5.366 6.073C4.711 6.309 4.103 6.637 3.543 7.057C2.902 7.537 2.36 8.111 1.916 8.777C1.838 8.894 1.732 8.966 1.599 8.993C1.466 9.02 1.34 8.994 1.223 8.916C1.108 8.84 1.037 8.734 1.01 8.598C0.983 8.463 1.007 8.338 1.084 8.223C1.591 7.461 2.211 6.806 2.943 6.257C3.458 5.87 4.009 5.552 4.595 5.302L1.146 1.854C1.047 1.754 0.997 1.636 0.997 1.5C0.997 1.364 1.047 1.246 1.146 1.146C1.246 1.047 1.364 0.997 1.5 0.997C1.636 0.997 1.754 1.047 1.854 1.146L14.854 14.146C14.953 14.246 15.003 14.364 15.003 14.5ZM13.904 8.205C13.985 8.316 14.015 8.44 13.994 8.577C13.973 8.713 13.907 8.822 13.795 8.904C13.684 8.985 13.56 9.015 13.423 8.994C13.287 8.973 13.178 8.907 13.096 8.795C12.539 8.033 11.856 7.409 11.046 6.923C10.237 6.437 9.364 6.128 8.43 5.995C8.293 5.976 8.183 5.911 8.1 5.8C8.017 5.69 7.986 5.566 8.005 5.43C8.024 5.293 8.089 5.183 8.2 5.1C8.31 5.017 8.434 4.986 8.57 5.005C9.639 5.157 10.635 5.51 11.561 6.065C12.486 6.621 13.267 7.334 13.904 8.205ZM7.5 11C7.972 11 8.419 11.106 8.842 11.317C9.264 11.528 9.617 11.822 9.9 12.2C9.983 12.31 10.014 12.434 9.995 12.571C9.975 12.707 9.91 12.817 9.8 12.9C9.69 12.983 9.566 13.014 9.429 12.995C9.293 12.975 9.183 12.91 9.1 12.8C8.911 12.548 8.676 12.352 8.394 12.211C8.113 12.07 7.815 12 7.5 12C7.185 12 6.887 12.07 6.606 12.211C6.324 12.352 6.089 12.548 5.9 12.8C5.815 12.913 5.706 12.979 5.571 12.998C5.436 13.017 5.313 12.985 5.2 12.9C5.087 12.815 5.021 12.706 5.002 12.571C4.983 12.436 5.015 12.313 5.1 12.2C5.383 11.822 5.736 11.528 6.158 11.317C6.581 11.106 7.028 11 7.5 11ZM6.793 13.293C6.988 13.098 7.224 13 7.5 13C7.776 13 8.012 13.098 8.207 13.293C8.402 13.488 8.5 13.724 8.5 14C8.5 14.276 8.402 14.512 8.207 14.707C8.012 14.902 7.776 15 7.5 15C7.224 15 6.988 14.902 6.793 14.707C6.598 14.512 6.5 14.276 6.5 14C6.5 13.724 6.598 13.488 6.793 13.293Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "wifi-off" (line-round), MIT. https://gentleface.com/icons/wifi-off import SwiftUI struct WifiOffIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 15.003, y: 14.5)) p.addCurve(to: CGPoint(x: 14.854, y: 14.854), control1: CGPoint(x: 15.003, y: 14.636), control2: CGPoint(x: 14.953, y: 14.754)) p.addCurve(to: CGPoint(x: 14.5, y: 15.003), control1: CGPoint(x: 14.754, y: 14.953), control2: CGPoint(x: 14.636, y: 15.003)) p.addCurve(to: CGPoint(x: 14.146, y: 14.854), control1: CGPoint(x: 14.364, y: 15.003), control2: CGPoint(x: 14.246, y: 14.953)) p.addLine(to: CGPoint(x: 8.258, y: 8.965)) p.addCurve(to: CGPoint(x: 5.893, y: 9.234), control1: CGPoint(x: 7.449, y: 8.837), control2: CGPoint(x: 6.661, y: 8.927)) p.addCurve(to: CGPoint(x: 3.906, y: 10.791), control1: CGPoint(x: 5.079, y: 9.559), control2: CGPoint(x: 4.417, y: 10.078)) p.addCurve(to: CGPoint(x: 3.582, y: 10.993), control1: CGPoint(x: 3.826, y: 10.903), control2: CGPoint(x: 3.718, y: 10.971)) p.addCurve(to: CGPoint(x: 3.209, y: 10.906), control1: CGPoint(x: 3.445, y: 11.016), control2: CGPoint(x: 3.321, y: 10.987)) p.addCurve(to: CGPoint(x: 3.007, y: 10.582), control1: CGPoint(x: 3.097, y: 10.826), control2: CGPoint(x: 3.029, y: 10.718)) p.addCurve(to: CGPoint(x: 3.094, y: 10.209), control1: CGPoint(x: 2.984, y: 10.445), control2: CGPoint(x: 3.013, y: 10.321)) p.addCurve(to: CGPoint(x: 4.146, y: 9.103), control1: CGPoint(x: 3.393, y: 9.791), control2: CGPoint(x: 3.744, y: 9.423)) p.addCurve(to: CGPoint(x: 5.522, y: 8.305), control1: CGPoint(x: 4.566, y: 8.77), control2: CGPoint(x: 5.025, y: 8.504)) p.addCurve(to: CGPoint(x: 7.069, y: 7.934), control1: CGPoint(x: 6.02, y: 8.106), control2: CGPoint(x: 6.535, y: 7.982)) p.addCurve(to: CGPoint(x: 7.216, y: 7.923), control1: CGPoint(x: 7.118, y: 7.93), control2: CGPoint(x: 7.167, y: 7.926)) p.addLine(to: CGPoint(x: 5.366, y: 6.073)) p.addCurve(to: CGPoint(x: 3.543, y: 7.057), control1: CGPoint(x: 4.711, y: 6.309), control2: CGPoint(x: 4.103, y: 6.637)) p.addCurve(to: CGPoint(x: 1.916, y: 8.777), control1: CGPoint(x: 2.902, y: 7.537), control2: CGPoint(x: 2.36, y: 8.111)) p.addCurve(to: CGPoint(x: 1.599, y: 8.993), control1: CGPoint(x: 1.838, y: 8.894), control2: CGPoint(x: 1.732, y: 8.966)) p.addCurve(to: CGPoint(x: 1.223, y: 8.916), control1: CGPoint(x: 1.466, y: 9.02), control2: CGPoint(x: 1.34, y: 8.994)) p.addCurve(to: CGPoint(x: 1.01, y: 8.598), control1: CGPoint(x: 1.108, y: 8.84), control2: CGPoint(x: 1.037, y: 8.734)) p.addCurve(to: CGPoint(x: 1.084, y: 8.223), control1: CGPoint(x: 0.983, y: 8.463), control2: CGPoint(x: 1.007, y: 8.338)) p.addCurve(to: CGPoint(x: 2.943, y: 6.257), control1: CGPoint(x: 1.591, y: 7.461), control2: CGPoint(x: 2.211, y: 6.806)) p.addCurve(to: CGPoint(x: 4.595, y: 5.302), control1: CGPoint(x: 3.458, y: 5.87), control2: CGPoint(x: 4.009, y: 5.552)) p.addLine(to: CGPoint(x: 1.146, y: 1.854)) p.addCurve(to: CGPoint(x: 0.997, y: 1.5), control1: CGPoint(x: 1.047, y: 1.754), control2: CGPoint(x: 0.997, y: 1.636)) p.addCurve(to: CGPoint(x: 1.146, y: 1.146), control1: CGPoint(x: 0.997, y: 1.364), control2: CGPoint(x: 1.047, y: 1.246)) p.addCurve(to: CGPoint(x: 1.5, y: 0.997), control1: CGPoint(x: 1.246, y: 1.047), control2: CGPoint(x: 1.364, y: 0.997)) p.addCurve(to: CGPoint(x: 1.854, y: 1.146), control1: CGPoint(x: 1.636, y: 0.997), control2: CGPoint(x: 1.754, y: 1.047)) p.addLine(to: CGPoint(x: 14.854, y: 14.146)) p.addCurve(to: CGPoint(x: 15.003, y: 14.5), control1: CGPoint(x: 14.953, y: 14.246), control2: CGPoint(x: 15.003, y: 14.364)) p.closeSubpath() p.move(to: CGPoint(x: 13.904, y: 8.205)) p.addCurve(to: CGPoint(x: 13.994, y: 8.577), control1: CGPoint(x: 13.985, y: 8.316), control2: CGPoint(x: 14.015, y: 8.44)) p.addCurve(to: CGPoint(x: 13.795, y: 8.904), control1: CGPoint(x: 13.973, y: 8.713), control2: CGPoint(x: 13.907, y: 8.822)) p.addCurve(to: CGPoint(x: 13.423, y: 8.994), control1: CGPoint(x: 13.684, y: 8.985), control2: CGPoint(x: 13.56, y: 9.015)) p.addCurve(to: CGPoint(x: 13.096, y: 8.795), control1: CGPoint(x: 13.287, y: 8.973), control2: CGPoint(x: 13.178, y: 8.907)) p.addCurve(to: CGPoint(x: 11.046, y: 6.923), control1: CGPoint(x: 12.539, y: 8.033), control2: CGPoint(x: 11.856, y: 7.409)) p.addCurve(to: CGPoint(x: 8.43, y: 5.995), control1: CGPoint(x: 10.237, y: 6.437), control2: CGPoint(x: 9.364, y: 6.128)) p.addCurve(to: CGPoint(x: 8.1, y: 5.8), control1: CGPoint(x: 8.293, y: 5.976), control2: CGPoint(x: 8.183, y: 5.911)) p.addCurve(to: CGPoint(x: 8.005, y: 5.43), control1: CGPoint(x: 8.017, y: 5.69), control2: CGPoint(x: 7.986, y: 5.566)) p.addCurve(to: CGPoint(x: 8.2, y: 5.1), control1: CGPoint(x: 8.024, y: 5.293), control2: CGPoint(x: 8.089, y: 5.183)) p.addCurve(to: CGPoint(x: 8.57, y: 5.005), control1: CGPoint(x: 8.31, y: 5.017), control2: CGPoint(x: 8.434, y: 4.986)) p.addCurve(to: CGPoint(x: 11.561, y: 6.065), control1: CGPoint(x: 9.639, y: 5.157), control2: CGPoint(x: 10.635, y: 5.51)) p.addCurve(to: CGPoint(x: 13.904, y: 8.205), control1: CGPoint(x: 12.486, y: 6.621), control2: CGPoint(x: 13.267, y: 7.334)) p.closeSubpath() p.move(to: CGPoint(x: 7.5, y: 11)) p.addCurve(to: CGPoint(x: 8.842, y: 11.317), control1: CGPoint(x: 7.972, y: 11), control2: CGPoint(x: 8.419, y: 11.106)) p.addCurve(to: CGPoint(x: 9.9, y: 12.2), control1: CGPoint(x: 9.264, y: 11.528), control2: CGPoint(x: 9.617, y: 11.822)) p.addCurve(to: CGPoint(x: 9.995, y: 12.571), control1: CGPoint(x: 9.983, y: 12.31), control2: CGPoint(x: 10.014, y: 12.434)) p.addCurve(to: CGPoint(x: 9.8, y: 12.9), control1: CGPoint(x: 9.975, y: 12.707), control2: CGPoint(x: 9.91, y: 12.817)) p.addCurve(to: CGPoint(x: 9.429, y: 12.995), control1: CGPoint(x: 9.69, y: 12.983), control2: CGPoint(x: 9.566, y: 13.014)) p.addCurve(to: CGPoint(x: 9.1, y: 12.8), control1: CGPoint(x: 9.293, y: 12.975), control2: CGPoint(x: 9.183, y: 12.91)) p.addCurve(to: CGPoint(x: 8.394, y: 12.211), control1: CGPoint(x: 8.911, y: 12.548), control2: CGPoint(x: 8.676, y: 12.352)) p.addCurve(to: CGPoint(x: 7.5, y: 12), control1: CGPoint(x: 8.113, y: 12.07), control2: CGPoint(x: 7.815, y: 12)) p.addCurve(to: CGPoint(x: 6.606, y: 12.211), control1: CGPoint(x: 7.185, y: 12), control2: CGPoint(x: 6.887, y: 12.07)) p.addCurve(to: CGPoint(x: 5.9, y: 12.8), control1: CGPoint(x: 6.324, y: 12.352), control2: CGPoint(x: 6.089, y: 12.548)) p.addCurve(to: CGPoint(x: 5.571, y: 12.998), control1: CGPoint(x: 5.815, y: 12.913), control2: CGPoint(x: 5.706, y: 12.979)) p.addCurve(to: CGPoint(x: 5.2, y: 12.9), control1: CGPoint(x: 5.436, y: 13.017), control2: CGPoint(x: 5.313, y: 12.985)) p.addCurve(to: CGPoint(x: 5.002, y: 12.571), control1: CGPoint(x: 5.087, y: 12.815), control2: CGPoint(x: 5.021, y: 12.706)) p.addCurve(to: CGPoint(x: 5.1, y: 12.2), control1: CGPoint(x: 4.983, y: 12.436), control2: CGPoint(x: 5.015, y: 12.313)) p.addCurve(to: CGPoint(x: 6.158, y: 11.317), control1: CGPoint(x: 5.383, y: 11.822), control2: CGPoint(x: 5.736, y: 11.528)) p.addCurve(to: CGPoint(x: 7.5, y: 11), control1: CGPoint(x: 6.581, y: 11.106), control2: CGPoint(x: 7.028, y: 11)) p.closeSubpath() p.move(to: CGPoint(x: 6.793, y: 13.293)) p.addCurve(to: CGPoint(x: 7.5, y: 13), control1: CGPoint(x: 6.988, y: 13.098), control2: CGPoint(x: 7.224, y: 13)) p.addCurve(to: CGPoint(x: 8.207, y: 13.293), control1: CGPoint(x: 7.776, y: 13), control2: CGPoint(x: 8.012, y: 13.098)) p.addCurve(to: CGPoint(x: 8.5, y: 14), control1: CGPoint(x: 8.402, y: 13.488), control2: CGPoint(x: 8.5, y: 13.724)) p.addCurve(to: CGPoint(x: 8.207, y: 14.707), control1: CGPoint(x: 8.5, y: 14.276), control2: CGPoint(x: 8.402, y: 14.512)) p.addCurve(to: CGPoint(x: 7.5, y: 15), control1: CGPoint(x: 8.012, y: 14.902), control2: CGPoint(x: 7.776, y: 15)) p.addCurve(to: CGPoint(x: 6.793, y: 14.707), control1: CGPoint(x: 7.224, y: 15), control2: CGPoint(x: 6.988, y: 14.902)) p.addCurve(to: CGPoint(x: 6.5, y: 14), control1: CGPoint(x: 6.598, y: 14.512), control2: CGPoint(x: 6.5, y: 14.276)) p.addCurve(to: CGPoint(x: 6.793, y: 13.293), control1: CGPoint(x: 6.5, y: 13.724), control2: CGPoint(x: 6.598, y: 13.488)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // WifiOffIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "wifi-off" (line-round), MIT. https://gentleface.com/icons/wifi-off 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 WifiOffIcon: ImageVector by lazy { ImageVector.Builder( name = "wifi-off", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M15.003 14.5C15.003 14.636 14.953 14.754 14.854 14.854C14.754 14.953 14.636 15.003 14.5 15.003C14.364 15.003 14.246 14.953 14.146 14.854L8.258 8.965C7.449 8.837 6.661 8.927 5.893 9.234C5.079 9.559 4.417 10.078 3.906 10.791C3.826 10.903 3.718 10.971 3.582 10.993C3.445 11.016 3.321 10.987 3.209 10.906C3.097 10.826 3.029 10.718 3.007 10.582C2.984 10.445 3.013 10.321 3.094 10.209C3.393 9.791 3.744 9.423 4.146 9.103C4.566 8.77 5.025 8.504 5.522 8.305C6.02 8.106 6.535 7.982 7.069 7.934C7.118 7.93 7.167 7.926 7.216 7.923L5.366 6.073C4.711 6.309 4.103 6.637 3.543 7.057C2.902 7.537 2.36 8.111 1.916 8.777C1.838 8.894 1.732 8.966 1.599 8.993C1.466 9.02 1.34 8.994 1.223 8.916C1.108 8.84 1.037 8.734 1.01 8.598C0.983 8.463 1.007 8.338 1.084 8.223C1.591 7.461 2.211 6.806 2.943 6.257C3.458 5.87 4.009 5.552 4.595 5.302L1.146 1.854C1.047 1.754 0.997 1.636 0.997 1.5C0.997 1.364 1.047 1.246 1.146 1.146C1.246 1.047 1.364 0.997 1.5 0.997C1.636 0.997 1.754 1.047 1.854 1.146L14.854 14.146C14.953 14.246 15.003 14.364 15.003 14.5ZM13.904 8.205C13.985 8.316 14.015 8.44 13.994 8.577C13.973 8.713 13.907 8.822 13.795 8.904C13.684 8.985 13.56 9.015 13.423 8.994C13.287 8.973 13.178 8.907 13.096 8.795C12.539 8.033 11.856 7.409 11.046 6.923C10.237 6.437 9.364 6.128 8.43 5.995C8.293 5.976 8.183 5.911 8.1 5.8C8.017 5.69 7.986 5.566 8.005 5.43C8.024 5.293 8.089 5.183 8.2 5.1C8.31 5.017 8.434 4.986 8.57 5.005C9.639 5.157 10.635 5.51 11.561 6.065C12.486 6.621 13.267 7.334 13.904 8.205ZM7.5 11C7.972 11 8.419 11.106 8.842 11.317C9.264 11.528 9.617 11.822 9.9 12.2C9.983 12.31 10.014 12.434 9.995 12.571C9.975 12.707 9.91 12.817 9.8 12.9C9.69 12.983 9.566 13.014 9.429 12.995C9.293 12.975 9.183 12.91 9.1 12.8C8.911 12.548 8.676 12.352 8.394 12.211C8.113 12.07 7.815 12 7.5 12C7.185 12 6.887 12.07 6.606 12.211C6.324 12.352 6.089 12.548 5.9 12.8C5.815 12.913 5.706 12.979 5.571 12.998C5.436 13.017 5.313 12.985 5.2 12.9C5.087 12.815 5.021 12.706 5.002 12.571C4.983 12.436 5.015 12.313 5.1 12.2C5.383 11.822 5.736 11.528 6.158 11.317C6.581 11.106 7.028 11 7.5 11ZM6.793 13.293C6.988 13.098 7.224 13 7.5 13C7.776 13 8.012 13.098 8.207 13.293C8.402 13.488 8.5 13.724 8.5 14C8.5 14.276 8.402 14.512 8.207 14.707C8.012 14.902 7.776 15 7.5 15C7.224 15 6.988 14.902 6.793 14.707C6.598 14.512 6.5 14.276 6.5 14C6.5 13.724 6.598 13.488 6.793 13.293Z"), fill = SolidColor(Color.Black), ).build() } // Icon(WifiOffIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "wifi-off" (line-round), MIT. https://gentleface.com/icons/wifi-off import 'package:flutter/widgets.dart'; class WifiOffIcon extends StatelessWidget { const WifiOffIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _WifiOffIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _WifiOffIconPainter extends CustomPainter { _WifiOffIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(15.003, 14.5) ..cubicTo(15.003, 14.636, 14.953, 14.754, 14.854, 14.854) ..cubicTo(14.754, 14.953, 14.636, 15.003, 14.5, 15.003) ..cubicTo(14.364, 15.003, 14.246, 14.953, 14.146, 14.854) ..lineTo(8.258, 8.965) ..cubicTo(7.449, 8.837, 6.661, 8.927, 5.893, 9.234) ..cubicTo(5.079, 9.559, 4.417, 10.078, 3.906, 10.791) ..cubicTo(3.826, 10.903, 3.718, 10.971, 3.582, 10.993) ..cubicTo(3.445, 11.016, 3.321, 10.987, 3.209, 10.906) ..cubicTo(3.097, 10.826, 3.029, 10.718, 3.007, 10.582) ..cubicTo(2.984, 10.445, 3.013, 10.321, 3.094, 10.209) ..cubicTo(3.393, 9.791, 3.744, 9.423, 4.146, 9.103) ..cubicTo(4.566, 8.77, 5.025, 8.504, 5.522, 8.305) ..cubicTo(6.02, 8.106, 6.535, 7.982, 7.069, 7.934) ..cubicTo(7.118, 7.93, 7.167, 7.926, 7.216, 7.923) ..lineTo(5.366, 6.073) ..cubicTo(4.711, 6.309, 4.103, 6.637, 3.543, 7.057) ..cubicTo(2.902, 7.537, 2.36, 8.111, 1.916, 8.777) ..cubicTo(1.838, 8.894, 1.732, 8.966, 1.599, 8.993) ..cubicTo(1.466, 9.02, 1.34, 8.994, 1.223, 8.916) ..cubicTo(1.108, 8.84, 1.037, 8.734, 1.01, 8.598) ..cubicTo(0.983, 8.463, 1.007, 8.338, 1.084, 8.223) ..cubicTo(1.591, 7.461, 2.211, 6.806, 2.943, 6.257) ..cubicTo(3.458, 5.87, 4.009, 5.552, 4.595, 5.302) ..lineTo(1.146, 1.854) ..cubicTo(1.047, 1.754, 0.997, 1.636, 0.997, 1.5) ..cubicTo(0.997, 1.364, 1.047, 1.246, 1.146, 1.146) ..cubicTo(1.246, 1.047, 1.364, 0.997, 1.5, 0.997) ..cubicTo(1.636, 0.997, 1.754, 1.047, 1.854, 1.146) ..lineTo(14.854, 14.146) ..cubicTo(14.953, 14.246, 15.003, 14.364, 15.003, 14.5) ..close() ..moveTo(13.904, 8.205) ..cubicTo(13.985, 8.316, 14.015, 8.44, 13.994, 8.577) ..cubicTo(13.973, 8.713, 13.907, 8.822, 13.795, 8.904) ..cubicTo(13.684, 8.985, 13.56, 9.015, 13.423, 8.994) ..cubicTo(13.287, 8.973, 13.178, 8.907, 13.096, 8.795) ..cubicTo(12.539, 8.033, 11.856, 7.409, 11.046, 6.923) ..cubicTo(10.237, 6.437, 9.364, 6.128, 8.43, 5.995) ..cubicTo(8.293, 5.976, 8.183, 5.911, 8.1, 5.8) ..cubicTo(8.017, 5.69, 7.986, 5.566, 8.005, 5.43) ..cubicTo(8.024, 5.293, 8.089, 5.183, 8.2, 5.1) ..cubicTo(8.31, 5.017, 8.434, 4.986, 8.57, 5.005) ..cubicTo(9.639, 5.157, 10.635, 5.51, 11.561, 6.065) ..cubicTo(12.486, 6.621, 13.267, 7.334, 13.904, 8.205) ..close() ..moveTo(7.5, 11) ..cubicTo(7.972, 11, 8.419, 11.106, 8.842, 11.317) ..cubicTo(9.264, 11.528, 9.617, 11.822, 9.9, 12.2) ..cubicTo(9.983, 12.31, 10.014, 12.434, 9.995, 12.571) ..cubicTo(9.975, 12.707, 9.91, 12.817, 9.8, 12.9) ..cubicTo(9.69, 12.983, 9.566, 13.014, 9.429, 12.995) ..cubicTo(9.293, 12.975, 9.183, 12.91, 9.1, 12.8) ..cubicTo(8.911, 12.548, 8.676, 12.352, 8.394, 12.211) ..cubicTo(8.113, 12.07, 7.815, 12, 7.5, 12) ..cubicTo(7.185, 12, 6.887, 12.07, 6.606, 12.211) ..cubicTo(6.324, 12.352, 6.089, 12.548, 5.9, 12.8) ..cubicTo(5.815, 12.913, 5.706, 12.979, 5.571, 12.998) ..cubicTo(5.436, 13.017, 5.313, 12.985, 5.2, 12.9) ..cubicTo(5.087, 12.815, 5.021, 12.706, 5.002, 12.571) ..cubicTo(4.983, 12.436, 5.015, 12.313, 5.1, 12.2) ..cubicTo(5.383, 11.822, 5.736, 11.528, 6.158, 11.317) ..cubicTo(6.581, 11.106, 7.028, 11, 7.5, 11) ..close() ..moveTo(6.793, 13.293) ..cubicTo(6.988, 13.098, 7.224, 13, 7.5, 13) ..cubicTo(7.776, 13, 8.012, 13.098, 8.207, 13.293) ..cubicTo(8.402, 13.488, 8.5, 13.724, 8.5, 14) ..cubicTo(8.5, 14.276, 8.402, 14.512, 8.207, 14.707) ..cubicTo(8.012, 14.902, 7.776, 15, 7.5, 15) ..cubicTo(7.224, 15, 6.988, 14.902, 6.793, 14.707) ..cubicTo(6.598, 14.512, 6.5, 14.276, 6.5, 14) ..cubicTo(6.5, 13.724, 6.598, 13.488, 6.793, 13.293) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_WifiOffIconPainter old) => old.color != color; } ```