The Heroicons signal icon visually represents a wireless signal or connection strength, commonly used to indicate network status or connectivity levels in user interfaces.
Common uses
- Displaying Wi-Fi or cellular signal strength.
- Indicating network connection status (connected/disconnected).
- Representing broadcast or transmission indicators.
Use it in React
Install
npm i @heroicons/reactImport & render
import { SignalIcon } from '@heroicons/react/24/outline';
<SignalIcon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<SignalIcon className="size-6" />24/solid
<SignalIcon className="size-6" />20/solid
<SignalIcon className="size-6" />16/solid
<SignalIcon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- signalwificonnectionnetworkbars
FAQ
- What is the signal icon used for?
- It's typically used to show the strength of a wireless signal, like Wi-Fi or cellular data, or to indicate a general connection or broadcast status.
- How do I use the signal icon in React?
- You can import and use it in React with: import { SignalIcon } from '@heroicons/react/24/outline'
- What is the license for Heroicons?
- Heroicons are distributed under the MIT license, allowing for free use in both personal and commercial projects.
Related icons
The same idea in other libraries, and near matches in Heroicons.
Looking for something else? Search Heroicons and 4 more libraries by description →
The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →