hass-dual-color-icons

Dual colors vector icons for Home Assistant. These icons are dual color counter fit of other home assistant icons set like Material Design Icons (MDI) or hass-hue-icons.

Installation

hass-dual-color-icons has been accepted into the Home Assistant Community Store (HACS).

HACS (Recommended):

This is the recommended way to install hass-dual-color-icons. To install:

• Open HACS (installation instructions are here).
• Go to "Frontend" section
• Click menu on the top right
• Click on custom repositories
• Add https://github.com/sisimomo/hass-dual-color-icons as an Lovelace
• Click button with "+" icon
• Search for "hass dual color icons" and install it.
• Add the following to your configuration.yaml, save and restart HA.

frontend:
  extra_module_url:
    - /hacsfiles/hass-dual-color-icons/hass-dual-color-icons.js

Manual:

• Copy dist/hass-dual-color-icons.js into your config/www folder.
• Go to Configuration -> Lovelace Dashboards -> Resources -> Add Resource
• set url as /local/hass-dual-color-icons.js and Resource Type as Javascript Module.
• Add the following to your configuration.yaml, save and restart HA.

frontend:
  extra_module_url:
    - /local/hass-dual-color-icons.js

• Save, restart Home Assistant.

Usage

• In your entity editor, specify an icon as dci:icon-name
• If you set state_color: true in your card, you'll see the icons get colorised based upon the current RGB setting.

Example:

title: My Room
state_color: true
type: entities
entities:
  - entity: light.my_ceiling_light
    name: My Ceiling Light
    icon: dci:hue_ceiling-still

Icon Requests?

Your dual color icon is not there? Let me know what's missing by raising a Custom Icon Request.

All Icons

Sample Dash

With view icons and state color applied.

The dashboard

title: Home
views:
  - path: default_view
    title: Home
    badges: []
    cards:
      - square: false
        type: grid
        cards:
          - type: tile
            entity: light.virtual_light_1
            icon: dci:mdi_ceiling-light
            card_mod:
              style:
                ha-tile-icon[data-state="on"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-secondary-color: rgb(158, 158, 158);
                  }
                ha-tile-icon[data-state="off"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-primary-color: rgb(158, 158, 158);
                    --icon-primary-opactity: 0.4;
                    --icon-secondary-color: currentcolor;
                    --icon-secondary-opactity: 1;
                  }
          - type: tile
            entity: light.virtual_light_1
            icon: dci:mdi_coach-lamp
            card_mod:
              style:
                ha-tile-icon[data-state="on"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-secondary-color: rgb(158, 158, 158);
                  }
                ha-tile-icon[data-state="off"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-primary-color: rgb(158, 158, 158);
                    --icon-primary-opactity: 0.4;
                    --icon-secondary-color: currentcolor;
                    --icon-secondary-opactity: 1;
                  }
          - type: tile
            entity: light.virtual_light_1
            icon: dci:mdi_doorbell
            card_mod:
              style:
                ha-tile-icon[data-state="on"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-secondary-color: rgb(158, 158, 158);
                  }
                ha-tile-icon[data-state="off"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-primary-color: rgb(158, 158, 158);
                    --icon-primary-opactity: 0.4;
                    --icon-secondary-color: currentcolor;
                    --icon-secondary-opactity: 1;
                  }
          - type: tile
            entity: light.virtual_light_2
            icon: dci:mdi_ceiling-light
            card_mod:
              style:
                ha-tile-icon[data-state="on"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-secondary-color: rgb(158, 158, 158);
                  }
                ha-tile-icon[data-state="off"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-primary-color: rgb(158, 158, 158);
                    --icon-primary-opactity: 0.4;
                    --icon-secondary-color: currentcolor;
                    --icon-secondary-opactity: 1;
                  }
          - type: tile
            entity: light.virtual_light_2
            icon: dci:mdi_coach-lamp
            card_mod:
              style:
                ha-tile-icon[data-state="on"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-secondary-color: rgb(158, 158, 158);
                  }
                ha-tile-icon[data-state="off"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-primary-color: rgb(158, 158, 158);
                    --icon-primary-opactity: 0.4;
                    --icon-secondary-color: currentcolor;
                    --icon-secondary-opactity: 1;
                  }
          - type: tile
            entity: light.virtual_light_2
            icon: dci:mdi_doorbell
            card_mod:
              style:
                ha-tile-icon[data-state="on"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-secondary-color: rgb(158, 158, 158);
                  }
                ha-tile-icon[data-state="off"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-primary-color: rgb(158, 158, 158);
                    --icon-primary-opactity: 0.4;
                    --icon-secondary-color: currentcolor;
                    --icon-secondary-opactity: 1;
                  }
        columns: 3
      - square: false
        type: grid
        cards:
          - type: tile
            entity: fan.virtual_fan_1
            icon: dci:mdi_fan
            color: white
            card_mod:
              style:
                ha-tile-icon[data-state="on"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-secondary-opactity: 1;
                    --icon-secondary-color: rgb(158, 158, 158);
                  }
                  svg{
                   animation: 2s linear 0s infinite normal none running rotating;
                  }
                  @keyframes rotating {
                    0% { 
                      transform: rotate(0); 
                    }
                    100% { 
                      transform: rotate(360deg);
                    }
                  }
                ha-tile-icon[data-state="off"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-primary-color: rgb(158, 158, 158);
                    --icon-primary-opactity: 0.4;
                    --icon-secondary-color: currentcolor;
                    --icon-secondary-opactity: 1;
                  }
          - type: tile
            entity: light.virtual_light_3
            icon: dci:mdi_floor-lamp
            card_mod:
              style:
                ha-tile-icon[data-state="on"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-secondary-color: rgb(158, 158, 158);
                  }
                ha-tile-icon[data-state="off"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-primary-color: rgb(158, 158, 158);
                    --icon-primary-opactity: 0.4;
                    --icon-secondary-color: currentcolor;
                    --icon-secondary-opactity: 1;
                  }
          - type: tile
            entity: light.virtual_light_3
            icon: dci:mdi_lamp
            card_mod:
              style:
                ha-tile-icon[data-state="on"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-secondary-color: rgb(158, 158, 158);
                  }
                ha-tile-icon[data-state="off"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-primary-color: rgb(158, 158, 158);
                    --icon-primary-opactity: 0.4;
                    --icon-secondary-color: currentcolor;
                    --icon-secondary-opactity: 1;
                  }
          - type: tile
            entity: fan.virtual_fan_2
            icon: dci:mdi_fan
            color: white
            card_mod:
              style:
                ha-tile-icon[data-state="on"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-secondary-opactity: 1;
                    --icon-secondary-color: rgb(158, 158, 158);
                  }
                  svg{
                   animation: 2s linear 0s infinite normal none running rotating;
                  }
                  @keyframes rotating {
                    0% { 
                      transform: rotate(0); 
                    }
                    100% { 
                      transform: rotate(360deg);
                    }
                  }
                ha-tile-icon[data-state="off"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-primary-color: rgb(158, 158, 158);
                    --icon-primary-opactity: 0.4;
                    --icon-secondary-color: currentcolor;
                    --icon-secondary-opactity: 1;
                  }
          - type: tile
            entity: light.virtual_light_2
            icon: dci:mdi_floor-lamp
            card_mod:
              style:
                ha-tile-icon[data-state="on"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-secondary-color: rgb(158, 158, 158);
                  }
                ha-tile-icon[data-state="off"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-primary-color: rgb(158, 158, 158);
                    --icon-primary-opactity: 0.4;
                    --icon-secondary-color: currentcolor;
                    --icon-secondary-opactity: 1;
                  }
          - type: tile
            entity: light.virtual_light_2
            icon: dci:mdi_lamp
            card_mod:
              style:
                ha-tile-icon[data-state="on"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-secondary-color: rgb(158, 158, 158);
                  }
                ha-tile-icon[data-state="off"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-primary-color: rgb(158, 158, 158);
                    --icon-primary-opactity: 0.4;
                    --icon-secondary-color: currentcolor;
                    --icon-secondary-opactity: 1;
                  }
        columns: 3
      - square: false
        type: grid
        cards:
          - type: tile
            entity: light.virtual_light_4
            icon: dci:mdi_mirror-rectangle
            card_mod:
              style:
                ha-tile-icon[data-state="on"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-secondary-color: rgb(158, 158, 158);
                  }
                ha-tile-icon[data-state="off"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-primary-color: rgb(158, 158, 158);
                    --icon-primary-opactity: 0.4;
                    --icon-secondary-color: currentcolor;
                    --icon-secondary-opactity: 1;
                  }
          - type: tile
            entity: light.virtual_light_4
            icon: dci:mdi_television
            card_mod:
              style:
                ha-tile-icon[data-state="on"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-secondary-color: rgb(158, 158, 158);
                  }
                ha-tile-icon[data-state="off"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-primary-color: rgb(158, 158, 158);
                    --icon-primary-opactity: 0.4;
                    --icon-secondary-color: currentcolor;
                    --icon-secondary-opactity: 1;
                  }
          - type: tile
            entity: light.virtual_light_4
            icon: dci:mdi_vanity-light
            card_mod:
              style:
                ha-tile-icon[data-state="on"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-secondary-color: rgb(158, 158, 158);
                  }
                ha-tile-icon[data-state="off"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-primary-color: rgb(158, 158, 158);
                    --icon-primary-opactity: 0.4;
                    --icon-secondary-color: currentcolor;
                    --icon-secondary-opactity: 1;
                  }
          - type: tile
            entity: light.virtual_light_2
            icon: dci:mdi_mirror-rectangle
            card_mod:
              style:
                ha-tile-icon[data-state="on"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-secondary-color: rgb(158, 158, 158);
                  }
                ha-tile-icon[data-state="off"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-primary-color: rgb(158, 158, 158);
                    --icon-primary-opactity: 0.4;
                    --icon-secondary-color: currentcolor;
                    --icon-secondary-opactity: 1;
                  }
          - type: tile
            entity: light.virtual_light_2
            icon: dci:mdi_television
            card_mod:
              style:
                ha-tile-icon[data-state="on"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-secondary-color: rgb(158, 158, 158);
                  }
                ha-tile-icon[data-state="off"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-primary-color: rgb(158, 158, 158);
                    --icon-primary-opactity: 0.4;
                    --icon-secondary-color: currentcolor;
                    --icon-secondary-opactity: 1;
                  }
          - type: tile
            entity: light.virtual_light_2
            icon: dci:mdi_vanity-light
            card_mod:
              style:
                ha-tile-icon[data-state="on"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-secondary-color: rgb(158, 158, 158);
                  }
                ha-tile-icon[data-state="off"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-primary-color: rgb(158, 158, 158);
                    --icon-primary-opactity: 0.4;
                    --icon-secondary-color: currentcolor;
                    --icon-secondary-opactity: 1;
                  }
        columns: 3
      - square: false
        type: grid
        cards:
          - type: tile
            entity: light.virtual_light_5
            icon: dci:hue_adore
            card_mod:
              style:
                ha-tile-icon[data-state="on"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-secondary-color: rgb(158, 158, 158);
                  }
                ha-tile-icon[data-state="off"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-primary-color: rgb(158, 158, 158);
                    --icon-primary-opactity: 0.4;
                    --icon-secondary-color: currentcolor;
                    --icon-secondary-opactity: 1;
                  }
          - type: tile
            entity: light.virtual_light_5
            icon: dci:hue_bulb-group-classic-4-alt
            card_mod:
              style:
                ha-tile-icon[data-state="on"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-secondary-color: rgb(158, 158, 158);
                  }
                ha-tile-icon[data-state="off"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-primary-color: rgb(158, 158, 158);
                    --icon-primary-opactity: 0.4;
                    --icon-secondary-color: currentcolor;
                    --icon-secondary-opactity: 1;
                  }
          - type: tile
            entity: light.virtual_light_5
            icon: dci:hue_ceiling-aurelle-circle
            card_mod:
              style:
                ha-tile-icon[data-state="on"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-secondary-color: rgb(158, 158, 158);
                  }
                ha-tile-icon[data-state="off"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-primary-color: rgb(158, 158, 158);
                    --icon-primary-opactity: 0.4;
                    --icon-secondary-color: currentcolor;
                    --icon-secondary-opactity: 1;
                  }
          - type: tile
            entity: light.virtual_light_2
            icon: dci:hue_adore
            card_mod:
              style:
                ha-tile-icon[data-state="on"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-secondary-color: rgb(158, 158, 158);
                  }
                ha-tile-icon[data-state="off"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-primary-color: rgb(158, 158, 158);
                    --icon-primary-opactity: 0.4;
                    --icon-secondary-color: currentcolor;
                    --icon-secondary-opactity: 1;
                  }
          - type: tile
            entity: light.virtual_light_2
            icon: dci:hue_bulb-group-classic-4-alt
            card_mod:
              style:
                ha-tile-icon[data-state="on"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-secondary-color: rgb(158, 158, 158);
                  }
                ha-tile-icon[data-state="off"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-primary-color: rgb(158, 158, 158);
                    --icon-primary-opactity: 0.4;
                    --icon-secondary-color: currentcolor;
                    --icon-secondary-opactity: 1;
                  }
          - type: tile
            entity: light.virtual_light_2
            icon: dci:hue_ceiling-aurelle-circle
            card_mod:
              style:
                ha-tile-icon[data-state="on"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-secondary-color: rgb(158, 158, 158);
                  }
                ha-tile-icon[data-state="off"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-primary-color: rgb(158, 158, 158);
                    --icon-primary-opactity: 0.4;
                    --icon-secondary-color: currentcolor;
                    --icon-secondary-opactity: 1;
                  }
        columns: 3
      - square: false
        type: grid
        cards:
          - type: tile
            entity: switch.virtual_switch_1
            icon: dci:hue_ceiling-still
            card_mod:
              style:
                ha-tile-icon[data-state="on"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-secondary-color: rgb(158, 158, 158);
                  }
                ha-tile-icon[data-state="off"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-primary-color: rgb(158, 158, 158);
                    --icon-primary-opactity: 0.4;
                    --icon-secondary-color: currentcolor;
                    --icon-secondary-opactity: 1;
                  }
          - type: tile
            entity: switch.virtual_switch_1
            icon: dci:hue_lightstrip-tv
            card_mod:
              style:
                ha-tile-icon[data-state="on"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-secondary-color: rgb(158, 158, 158);
                  }
                ha-tile-icon[data-state="off"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-primary-color: rgb(158, 158, 158);
                    --icon-primary-opactity: 0.4;
                    --icon-secondary-color: currentcolor;
                    --icon-secondary-opactity: 1;
                  }
          - type: tile
            entity: switch.virtual_switch_1
            icon: dci:hue_ceiling-still
            card_mod:
              style:
                ha-tile-icon[data-state="on"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-secondary-color: rgb(158, 158, 158);
                  }
                ha-tile-icon[data-state="off"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-primary-color: rgb(158, 158, 158);
                    --icon-primary-opactity: 0.4;
                    --icon-secondary-color: currentcolor;
                    --icon-secondary-opactity: 1;
                  }
          - type: tile
            entity: switch.virtual_switch_2
            icon: dci:hue_ceiling-still
            card_mod:
              style:
                ha-tile-icon[data-state="on"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-secondary-color: rgb(158, 158, 158);
                  }
                ha-tile-icon[data-state="off"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-primary-color: rgb(158, 158, 158);
                    --icon-primary-opactity: 0.4;
                    --icon-secondary-color: currentcolor;
                    --icon-secondary-opactity: 1;
                  }
          - type: tile
            entity: switch.virtual_switch_2
            icon: dci:hue_lightstrip-tv
            card_mod:
              style:
                ha-tile-icon[data-state="on"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-secondary-color: rgb(158, 158, 158);
                  }
                ha-tile-icon[data-state="off"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-primary-color: rgb(158, 158, 158);
                    --icon-primary-opactity: 0.4;
                    --icon-secondary-color: currentcolor;
                    --icon-secondary-opactity: 1;
                  }
          - type: tile
            entity: switch.virtual_switch_2
            icon: dci:hue_ceiling-still
            card_mod:
              style:
                ha-tile-icon[data-state="on"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-secondary-color: rgb(158, 158, 158);
                  }
                ha-tile-icon[data-state="off"]$ ha-icon$ ha-svg-icon$: |
                  svg path {
                    --icon-primary-color: rgb(158, 158, 158);
                    --icon-primary-opactity: 0.4;
                    --icon-secondary-color: currentcolor;
                    --icon-secondary-opactity: 1;
                  }
        columns: 3
      - show_name: false
        show_icon: true
        show_state: false
        type: glance
        entities:
          - entity: sensor.sun_next_dawn
            icon: dci:mdi_ceiling-light
          - entity: sensor.sun_next_dusk
            icon: dci:mdi_coach-lamp
          - entity: sensor.sun_next_midnight
            icon: dci:mdi_doorbell
          - entity: sensor.sun_next_noon
            icon: dci:mdi_fan
          - entity: sensor.sun_next_rising
            icon: dci:mdi_floor-lamp
          - entity: sensor.sun_next_setting
            icon: dci:mdi_floor-lamp
          - entity: input_button.test_1
            icon: dci:mdi_mirror-rectangle
          - entity: input_button.test_2
            icon: dci:mdi_television
          - entity: input_button.test_3
            icon: dci:mdi_vanity-light
          - entity: input_button.test_4
            icon: dci:hue_adore
          - entity: input_button.test_5
            icon: dci:hue_bulb-group-classic-4-alt
          - entity: input_button.test_6
            icon: dci:hue_ceiling-aurelle-circle
          - entity: input_button.test_7
            icon: dci:hue_ceiling-still
          - entity: input_button.test_8
            icon: dci:hue_lightstrip-tv
        columns: 7

Troubleshooting:

Can't ever see the icons?

If you cannot see the new icons, or you get an empty box where you're expecting an icon, flush your network cache.

Icons don't show on first load of the dash?

Did you add the frontend extra_module_url in your configuration.yaml? See the installation section for details.

Thanks and Props

• @arallsopp for the hass-hue-icons icon set.