/ha-custom-icons

Several custom made and legacy icons, and icons collected all over the internet in 1 set, UI selectable.

Primary LanguageJavaScript

Custom icon library

hacs_badge GH-release GH-downloads GH-last-commit GH-code-size

Several custom made and legacy icons, and icons collected all over the internet in 1 set, UI selectable.

Upon each Material Design icons update to HA, icons tend to be deprecated, and every now and then I'd love to keep using some. Branded icons, or legacy models. In many Pr's to the main MDI library, icon designs get rejected, while still very useable. Some of these are added in this library. Several icons by the Frontend magician Matt8707 are listed, and I've also found use for the finer grained Shutter icons by g-kiss, but needed them in another format.

Structure of the file copied from the great and appreciated Hass Hue Icon repo by @arallsopp who should recieve all the credits and without whom the HA interface would not be the same ;-)

Thanks to all!

Installation

On Hacs, install as custom repository. For manual installation, add:

- url: /local/lovelace/resources/custom-icons/custom-icons.js?v=0.1.4
  type: module

to your resources file (adapt path to your own folder structure), or click

Open your Home Assistant instance and show your Lovelace resources.

Usage

  • In your entity editor, specify an icon as cil:icon-name, to indicate the icon to be from this Custom Icon Libary.
  • If you set state_color: true in your card, you'll see the icons get colorised based upon the current theme settings.

Example:

    - type: entities
      title: Custom icons
      state_color: true
      show_header_toggle: false
      entities:
        - entity: switch.tester
          name: Switch Light
          icon: cil:light-switch
        - entity: device_tracker.mijn_mobiel
          name: My Phone
          icon: cil:cellphone-iphone
        - entity: light.alarm
          name: Ceiling light
          icon: cil:ikea-death-star
        - type: section
          label: Set icon via Custom-ui/customize
        - light.bureau_left
        - light.bureau_right

Of course, you can also get crafty, using Custom-ui, and set your icons in a template:

homeassistant:
  customize:
    light.bureau_left:
      templates:
        icon: >
          return (state === 'on') ? 'cil:desklamp-on' : 'mdi:desk-lamp';

custom-icons

Icons

Custom made and legacy

custom-icons includes legacy Mdi icons, and several special purpose icons made on request.

Icon finder

Andy created an Icon Library Cheat Sheet so you can quickly see and search which icons are available. Thanks!

Listed with icon author:

Icon Name Author
cil:android-messages android-messages Mdi
cil:apple-homepod apple-homepod arallsopp
cil:apple-homepod-mini apple-homepod-mini arallsopp
cil:cellphone-iphone cellphone-iphone Mdi
cil:cooker-hood cooker-hood arallsopp
cil:cooker-hood-curve cooker-hood-curve arallsopp
cil:cooker-hood-trapezoid cooker-hood-trapezoid arallsopp
cil:delete-alert delete-alert idevo89
cil:delete-alert-outline delete-alert-outline idevo89
cil:desklamp-on desklamp-on Mdi
cil:desktop-mac desktop-mac Mdi
cil:desktop-mac-dashboard desktop-mac-dashboard Mdi
cil:dishwasher-silverware dishwasher-silverware MrGrigri
cil:docker-watchtower docker-watchtower Matt8707
cil:earth-alert earth-alert MrGrigri
cil:earth-vibrate earth-vibrate MrGrigri
cil:eq-calibrate eq-calibrate Matt8707
cil:google-home google-home Mdi
cil:google-home-alt google-home-alt Mdi
cil:google-home-alt-off google-home-alt-off Mdi
cil:google-home-off google-home-off Mdi
cil:hdmi-source hdmi-source Matt8707
cil:home-broken home-broken MrGrigri
cil:home-broken-outline home-broken-outline MrGrigri
cil:home-climate home-climate arallsopp
cil:home-climate-outline home-climate-outline arallsopp
cil:home-export-no-roof-outline home-export-no-roof-outline goyney
cil:home-import-no-roof-outline home-import-no-roof-outline goyney
cil:home-pulse home-pulse MrGrigri
cil:hue hue Matt8707
cil:ikea-death-star ikea-death-star arallsopp
cil:imac-alternative imac-alternative Matt8707
cil:imac-ssd imac-ssd Matt8707
cil:iphone-modern iphone-modern Matt8707
cil:laptop-chromebook laptop-chromebook Mdi
cil:laptop-mac laptop-mac Mdi
cil:laptop-windows laptop-windows Mdi
cil:light-switch light-switch arallsopp
cil:lock lock Matt8707
cil:lutron-pico lutron-pico arallsopp
cil:lutron-pico-b1 lutron-pico-b1 arallsopp
cil:lutron-pico-b2 lutron-pico-b2 arallsopp
cil:lutron-pico-b3 lutron-pico-b3 arallsopp
cil:lutron-pico-b4 lutron-pico-b4 arallsopp
cil:lutron-pico-b5 lutron-pico-b5 arallsopp
cil:pedestal-fan pedestal-fan Matt8707
cil:roborock-filter roborock-filter Matt8707
cil:roborock-mainbrush roborock-mainbrush Matt8707
cil:roborock-sensor roborock-sensor Matt8707
cil:roborock-sidebrush roborock-sidebrush Matt8707
cil:roborock-vacuum roborock-vacuum Matt8707
cil:roborock-vacuum-map roborock-vacuum-map Matt8707
cil:shutter-0 shutter-0 g-kiss
cil:shutter-1 shutter-1 g-kiss
cil:shutter-2 shutter-2 g-kiss
cil:shutter-3 shutter-3 g-kiss
cil:shutter-4 shutter-4 g-kiss
cil:studio-monitor studio-monitor Matt8707
cil:sun-angle sun-angle goyney
cil:sun-angle-variant sun-angle-variant goyney
cil:synology-nas synology-nas Matt8707
cil:table-cylinder-lamp table-cylinder-lamp GunterAV
cil:tablet-android tablet-android Mdi
cil:tablet-ipad-legacy tablet-ipad-legacy Mdi
cil:thermometer-empty thermometer-empty goyney
cil:thermometer-full thermometer-full goyney
cil:tv tv Matt8707
cil:uplighter uplighter GunterAV
cil:uplighter-2-way uplighter-2-way GunterAV

Icon authors

Mdi arallsopp MrGrigri idevo89 goyney g-kiss GunterAV Matt8707 tgrelka boehan

Want to join and add an icon?

Please feel free to add an icon request, and open a discussion for that, preferably with the .svg in attachment. Of course, you can also open a Pr.