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. 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 (more to be listed below, for the full set, check the .js file please)

Icon Name Author Icon Name Author
cil:apple-homepod-mini apple-homepod-mini @arallsopp cil:apple-homepod apple-homepod @arallsopp
cil:cellphone-iphone cellphone-iphone Mdi legacy cil:desklamp-on desklamp-on Mdi legacy
cil:laptop-mac laptop-mac Mdi legacy cil:light-switch light-switch Mdi legacy
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:ikea-death-star ikea-death-star @arallsopp
cil-table-cylinder-lamp table-cylinder-lamp @GunterAv cil-uplighter uplighter @GunterAv
cil-2-way-uplighter 2-way-uplighter @GunterAv
cil:sun-angle sun-angle @goyney
cil:sun-angle-variant sun-angle-variant @goyney

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.

GitHub

View Github