Eigene Icons in HomeAssistant hinzufügen

AZDelivery MB 102 Breadboard Kit - 830 Breadboard, Netzteil Adapter 3,3V 5V, 65Stk Steckbrücken kompatibel mit Arduino inklusive Ebook!
AZDelivery MB 102 Breadboard Kit - 830 Breadboard, Netzteil Adapter 3,3V 5V, 65Stk Steckbrücken kompatibel mit Arduino inklusive Ebook!
8,99 €

Als erstes benötigen wir die Fontawesome-Integration von Thomas Loven. Diese ist gannz einfach aus HACS heraus zu installieren.

( HACS -> Integrationen -> Suche nach “Fontawesome” und installiere es. )

Nach der Installation dieser Integration will Home Assistant neugestartet werden.

Gehe dann zu HA Configuration -> Integration und klicke auf das + Zeichen (Add new integration) und suche nach fontawesome und installieren es.

Öffne nach der Installation die Einstellungen für die neue FontAwesome-Integration. Klicken auf das Zahnrad Optionen (oben rechts) und wähle aus, welche Symbolsätze geladen werden sollen.

Es stehen einige Icon-Sets zur Verfügung – eine Übersicht welche Icons verwendet werdet werden können, finden wir in der “Gallerie


Wenn wir nun andere SVG-Symbole verwenden möchten, können wir dies tun, indem wir die jeweiligen .svg-Dateien in /custom_icons/ platzieren. Vorab müssen wir dieses Verzeichnis allerdings noch selbst erstellen.

Um unsere neuen Symbole dann verwenden zu können, benötigen wir das Präfix fapro: Z.B. fapro:nano-shsy erhält das Symbol in der Datei /custom_icons/nano-shsy.svg.


Mit einem Bildbearbeitungsprogramm können wir uns unsere neuen Symbole im Handumdrehen selbst erstellen. Oder wird greifen auf fertige *.svg-Dateien zurück. In der Regel sollte die einfach in /custom_icons/ eingefügt werden können.

Alternativ haben wir sonst noch die Möglichkeit einen “svg-path-editor” zu Hilfe zu nehmen. Beispielsweise den SvgPathEditor von Yqnn

Haben wir also unsere *.svg-Datei vorliegen und öffnen diese mit einem Editor, wird uns ein Code angezeigt.

Hier kopieren wir uns jede Zeile, die eine “path_class” enthält.