A powerful tool for browsing, searching, and customizing UniFi device icons. Available as a Chrome Extension (recommended) or a standalone HTML file.
As a UniFi admin, I grew frustrated with scrolling through THOUSANDS of device icons in a box the size of a postage stamp, looking for the right icon (or at least a close match).
The UniFi portal does have a search box, but it doesn't allow partial name matches - searching "iPhone" shows 0 results, but "Apple iPhone" does.
This tool solves that problem and adds the ability to use custom icons for devices that don't have official UniFi fingerprints!
- 🔍 Smart Search - Search devices by partial name matches instantly
- 📦 Pre-loaded Database - ~5,500 device icons ready to browse immediately
- 🌐 Works Everywhere - Supports UniFi Cloud Portal and local/self-hosted controllers
- 📋 Easy Copy - One-click copy of device names, IDs, or image URLs
- 🎨 Replace Device Icons - Use any image URL for devices without official icons
- 📝 Override Device Info - Customize Manufacturer, Model, and OS in the side panel
- 📊 Vendor Column Updates - Your custom manufacturer appears in the device list
- 💾 Import/Export - Share custom icon configurations with others
The Chrome Extension is the most powerful and convenient way to use UniFi Icon Browser.
- Download this repository (Code → Download ZIP) or clone it
- Extract the ZIP file if downloaded
- Open Chrome and navigate to
chrome://extensions/ - Enable Developer mode (toggle in the top right)
- Click Load unpacked
- Select the
chrome-extensionfolder - The extension icon should appear in your toolbar
The extension comes pre-loaded with ~5,500 device names - just install and start searching!
- Click the extension icon in your toolbar
- Type a device name to search, or browse the grid
- Click any icon to copy the device name
- Right-click for more options (copy ID, URL, or open image)
Replace icons for devices that use generic "donor" fingerprints:
- Click the ⚙️ gear icon in the popup to open Settings
- Navigate to Custom Icons section
- Enter the Donor Device ID (the fingerprint ID assigned in UniFi)
- Enter a Custom Icon URL (direct link to PNG/SVG image)
- Optionally fill in Device Info Overrides (Manufacturer, Model, OS)
- Click Add Custom Icon Mapping
Finding the Donor Device ID:
- In the UniFi portal, click on your device
- Open the icon picker (Change Icon)
- Select any device as a "donor" - this assigns that device's fingerprint ID
- The fingerprint ID is visible in the icon URL, or use the extension's Icon Browser
To get the latest devices when new UniFi products are released:
- Navigate to any UniFi portal and log in
- Open the icon picker modal (Change Icon on any device)
- The extension automatically captures the complete device list
- The database is replaced with fresh official data
| Popup Interface | Custom Icons Tab | Settings Page |
|---|---|---|
| Browse & search all devices | View your custom mappings | Manage custom icon overrides |
For users who prefer a simple, portable solution without installing an extension.
- Download
unifi-icon-browser.htmlto your computer - Open it in any modern web browser
- Follow the on-page instructions to set up the bookmarklet
- Open
unifi-icon-browser.htmlin your browser - Drag the "Extract Devices from UniFi Portal" link to your bookmarks bar
- Open a new tab and navigate to your UniFi portal
- Log in to your UniFi dashboard (both local and *.ui.com methods work)
- Click on any client device
- Click on the device's icon to open the icon selection modal
- While the icon selection modal is open, click the bookmarklet
- You'll see a success message with the number of device IDs extracted
- The JSON data is automatically copied to your clipboard
- Return to the UniFi Icon Browser page
- Click the "📋 Paste Import" button
- Your device names are now imported and searchable!
- Type in the search box to filter devices by name or ID
- Click any icon to copy its device name to clipboard
- Use the action buttons to copy device ID or image URL
| Main Interface | Search Results |
|---|---|
 |
 |
The extension uses multiple methods to collect and display device data:
- React Fiber Traversal - Extracts device data directly from UniFi's React components
- Fetch Interception - Hooks into API calls to transform responses with custom device info
- DOM Replacement - Watches for fingerprint images and replaces them with custom icons
- Mutation Observer - Monitors dynamically loaded content for real-time updates
- Bookmarklet Extraction - Traverses React's internal component tree to find device data
- LocalStorage Persistence - Your data stays on your device across sessions
- No External Dependencies - Pure vanilla JavaScript, 100% client-side
- ✅ Chrome 88+ (Manifest V3)
- ✅ Microsoft Edge 88+
- ✅ Other Chromium-based browsers (Brave, Opera, Vivaldi)
- ✅ Chrome/Edge (Chromium)
- ✅ Firefox
- ✅ Safari
- ✅ Opera
- ✅ UniFi Cloud Portal (unifi.ui.com)
- ✅ UniFi Network Application (local)
- ✅ UniFi Dream Machine / Dream Router
- ✅ UniFi Cloud Key
- ✅ Self-hosted UniFi controllers
- 100% Local - All data stays on your device
- No Tracking - No analytics, no external requests (except loading icons from static.ui.com)
- No Authentication - No login required
- Open Source - Review the code yourself
- Minimal Permissions - Only requests what's necessary
UniFi-Icon-Browser/
├── unifi-icon-browser.html # Standalone HTML version
├── chrome-extension/ # Chrome Extension
│ ├── manifest.json # Extension configuration (Manifest V3)
│ ├── data/
│ │ └── fingerprint-database.json # Pre-loaded device database
│ ├── icons/ # Extension icons
│ ├── popup/ # Extension popup UI
│ ├── options/ # Settings page
│ └── scripts/ # Background, content, and injected scripts
├── LICENSE
└── README.md
| Issue | Solution |
|---|---|
| "Not on a UniFi page" | Make sure you're on a UniFi controller page with "unifi", "/network", or "/protect" in the URL |
| "UniFi page detected - not activated" | Click the Activate button to enable collection |
| No devices found | Open the device icon selection modal to trigger database capture |
| Custom icons not appearing | Verify the Donor Device ID matches, check icon URL accessibility, refresh page |
| Vendor column not updating | Ensure the Manufacturer field is filled in your custom mapping |
| Issue | Solution |
|---|---|
| Bookmarklet not working | Make sure the icon selection modal is open when you click it |
| "0 devices found" | Try scrolling through the icon list first to trigger loading |
| Data not persisting | Check that your browser allows localStorage |
- NEW: Custom Icon Overrides - Replace device icons with custom images
- NEW: Device Info Overrides - Customize Manufacturer, Model, and OS
- NEW: Vendor Column Replacement - Custom manufacturer in device list
- NEW: Custom Icons Tab in popup
- NEW: Full Options/Settings page
- NEW: Import/Export for custom mappings
- Flash prevention for smooth transitions
- Improved security with HTML escaping
- NEW: Pre-loaded database with ~5,500 device names
- Works offline immediately after installation
- Initial release with bookmarklet extraction
- Search and browse functionality
- Import/Export support
Detailed documentation is available in the docs/ folder:
| Document | Description |
|---|---|
| User Guide | Complete guide for using the extension |
| Architecture | Technical architecture and diagrams |
| API Reference | Internal APIs and data structures |
| Contributing | How to contribute to the project |
Contributions are welcome! See the Contributing Guide for details.
- 🐛 Report bugs
- 💡 Suggest new features
- 📝 Improve documentation
- 🔧 Submit pull requests
This project is licensed under the MIT License - see the LICENSE file for details.
This tool is not affiliated with or endorsed by Ubiquiti Inc. It is an independent, community-driven project. Device icons are loaded from Ubiquiti's static CDN (static.ui.com). Use at your own discretion.
Made with ❤️ for the UniFi community
If you find this tool useful, please consider giving it a ⭐ on GitHub!