A Home Assistant Lovelace custom card to search and browse all your installed icon packs with live search, pagination, and one-click copy to clipboard.
- 🔍 Live Search — Instantly filter icons as you type
- 📄 Pagination — Loads icons in chunks, no browser freeze
- 📋 One-Click Copy — Click any icon to copy its name (
mdi:home,si:github, etc.) to your clipboard - 🎨 Multi-Pack Support — Configure which icon packs to include
- ⚡ Smart Caching — 24h localStorage cache for instant reloads
- ⚙️ Fully Configurable — Columns, size, names, page size
- Open HACS in Home Assistant
- Go to Frontend → Custom repositories
- Add:
https://github.com/steuerlexi/icon-explorer-card - Select category: Lovelace
- Install the card
- Hard refresh your browser (
Ctrl+F5/Cmd+Shift+R)
- Copy
icon-explorer-card.jsto/config/www/ - Add to your Lovelace resources:
url: /local/icon-explorer-card.js type: module
- Refresh your browser
The card can load metadata from any icon pack hosted on GitHub. By default it loads all available packs.
| Prefix | Pack | Source |
|---|---|---|
mdi: |
Material Design Icons | Templarian/MaterialDesign |
si: |
Simple Icons | simple-icons/simple-icons |
hue: |
Hass Hue Icons | arallsopp/hass-hue-icons |
phu: |
Custom Brand Icons | elax46/custom-brand-icons |
fluent: |
Fluent UI System Icons | microsoft/fluentui-system-icons |
icon-park: |
IconPark | bytedance/IconPark |
logos: |
SVG Logos | gilbarbara/logos |
wi: |
Weather Icons | erikflowers/weather-icons |
Add the card to your dashboard:
type: custom:icon-explorer-card
title: "Icon Explorer"
columns: 6
icon_size: 32
show_names: true
page_size: 200| Name | Type | Default | Description |
|---|---|---|---|
title |
string | "Icon Explorer" |
Card title |
columns |
number | 6 |
Grid columns |
icon_size |
number | 32 |
Icon size in px |
show_names |
boolean | true |
Show icon names |
page_size |
number | 200 |
Icons per page |
packs |
list | all | Which packs to load (see below) |
extra_icons |
list | [] |
Additional custom icons |
If you only want specific packs:
type: custom:icon-explorer-card
title: "My Icons"
packs:
- mdi
- siAvailable pack keys: mdi, si, hue, phu, fluent, icon-park, logos, wi
type: custom:icon-explorer-card
extra_icons:
- custom:my-icon
- fas:fa-starThe card fetches icon metadata directly from each pack's GitHub repository on first load, then caches it in your browser's localStorage for 24 hours.
Using the card: Type in the search box to filter icons, then click any icon to copy its full name (e.g. mdi:home, si:github) directly to your clipboard. A small toast notification confirms the copy.
No data is stored on any server — everything happens client-side.
| Problem | Solution |
|---|---|
| Icons don't load | Check browser console for network errors. The card needs internet on first load. |
| Browser freezes | Reduce page_size to 100 or 50. |
| Stale icons | Run localStorage.removeItem('icon_explorer_v4') in browser console, then refresh. |
| Custom icons not rendering | Make sure the icon pack is installed and loaded in Home Assistant. |
Using your own SVG icons:
If you want to add completely custom SVG icons to Home Assistant, check out custom_icons by Thomas Lovren. It lets you drop any .svg file into your config and use it as an icon everywhere in HA.
MIT