Implement some custom icons I've created?

Configuration
22

Yes, I’ll do that. I’ll definitely have more than 5 once I’ve made the ones I currently want :+1:t3:

23

Great. I have some icon ideas myself and can probably create them pretty easily.
Just need to get the right tool. What software are you using? I would prefer free/cheap if possible :slight_smile:

1 Like
24

I’m using Adobe Illustrator, but it isn’t cheap I’m afraid :neutral_face:

25

Yeah, I know :slight_smile:

26

Shameless self promotion of my thread with an icon index I hacked together:

1 Like
27

Just tried with inkscape. Its a bit rough round the edges, but perfectly adequate for icon work.
I really want to use you fireplace and desk lamp so let us know when you’re ready to share :slight_smile:

28

Just saw that philips release a bunch of hue related icons - here:

https://developers.meethue.com/documentation/icon-pack

You need to register to be able to download them.
Here is an example:

hue icons.png961×619 41.6 KB

I’m pretty sure these are not permitted to be added to MDI though :frowning:

1 Like
29

I haven’t had time to make any more yet, so you might as well have what I have so far :slight_smile:

4 Likes
30

Nice. Thanks.
BTW I submitted some icons to MDI over the weekend. Its easy to do - just need to raise an issue on their github with your icon vector files attached.

31

Thanks, I’ll do the same once I’ve made some more :+1:

32

Where these icons uploaded to mdi? I cannot download them using the link (account limit reached)

33

No, I’ve been busy with work lately.

I’ll get them finished and submitted in the next few days :+1:

34

…OK, I’ve finally submitted these to MDI

mdi icons
mdi icons864×576 15.5 KB

Fingers crossed they get approved

9 Likes
35

Loving the new icons but can you help with where to put the files. Quite new to HA but learning by example. I am using Hassio and samba share to access the config files. Can I create a file in the config directory for my icons and if so what would the directory path be for the icon.

1 Like
36

Create a folder called www (if there isn’t already one there), and put the icons in there.

Then in your configuration.yaml, under customize it would look something like this:

customize:
  switch.my_light_switch:
    friendly_name: "My Light"
    entity_picture: /local/my_light_icon.png
37

I can here for the icon discussion… but then noticed you have Plex, netflix, and amazon video automations (or scripts)… Do these turn on a smart tv and launch that app? I looked awhile back at doing that and didn’t think it was possible (on my tv at least). Can you share that code? :slight_smile:

38

I have a Harmony Hub, and use this with scripts to turn on the TV, change channels, switch to Apple TV, start Plex etc.

I don’t know about controlling a smart TV directly (without a Harmony or Broadlink Hub), I guess you’d have to see if there was a component that can control your TV, or buy a hub to control it :slightly_smiling_face:

1 Like
39

Hey.
I just got linked this topic.

Here’s an example of a small custom iconset made from svgs. https://github.com/hulkhaugen/hass-bha-icons

5 Likes
40

Thanks @thomasloven

41

Hi all,
Earlier in this thread, it was mentioned that there was an Icon pack from Philips for their Hue.
A few of them looked interesting enough with my existing Philips Hue devices that I wanted to see if it was possible to incorporate them into my Home Assistant (Lovelace). Thanks to @thomasloven who had done work making fontawesome available to Home Assistant, I managed to borrow/tweak some of his work to do the same for these Philips Hue Icons.
I stripped any fill pre-defines so that the icon’s color is driven by HA and I stripped any stroke definitions so hopefully the Icon will still render nicely. I’ve only tried this on a few icons so I can’t say that all will work.

Here is what I did:

  1. Establish a developer account at Philips Hue in order to get the Hue Icon Pack. These are located at: https://developers.meethue.com/develop/application-design-guidance/icon-pack/
    Note the “Note” at the bottom of the page for allowed usage.
    Download the zip file and unzip into the directory HueIconPack2019.

  2. Make a temporary directory and place the svg files you like from the HueIconPack2019 into that directory. You can view an svg file from your browser to see what the icon looks like. I didn’t want all the Icons, and I didn’t want a large html file (see below), so I selectively choose only a few svg files of interest.

  3. Copy the generate.py file below into that same temporary directory with the selected svg files and simply run it as a python script (ex $ python3 generate.py).
    This will read those svg files and should generate a file hass-HueIconPack.html

  4. Place hass-HueIconPack.html somewhere under your <ha-config>/www/ folder. (ex. <ha-config>/www/icons/hass-HueIconPack.html )

  5. Within your configuration.yaml add the url pointing to your hass-HueIconPack.html to the frontend.

Example:

frontend:
  extra_html_url:
    - /local/icons/philips_hue/hass-HueIconPack.html

After rebooting HA, you can reference the icons as:
phu:<svgfilename> (without the .svg extension).
Example: phu:heroesBloom which was derived from heroesBloom.svg .

Here is the python code generate.py:

import os

ICON_SIZE = 1024

def make_file(directory, name, out):
    out.write('<ha-iconset-svg name="{}" size="{}"><svg><defs>\n'.format(name, ICON_SIZE))
    for f in os.listdir(directory):
        if not f.endswith('.svg'):
            continue
        with open(os.path.join(directory, f), 'r') as fp:
            name = os.path.splitext(f)[0]
            data = fp.read()
            size_start = data.find('viewBox="')+len('viewBox="')
            size_end = data[size_start:].find('"')
            size = data[size_start:size_start+size_end].split(' ')
            width = float(size[2])
            height = float(size[3])
            scale = max(width, height)/ICON_SIZE
            start = data.find('<path')
            end = data.find('</path')
            out.write('<g id="{0}" transform="scale({1} {1})">'.format(name, 1/scale) + data[start:end+8] + '</g>\n')
    out.write('</defs></svg></ha-iconset-svg>')


with open("hass-HueIconPack.html", 'w') as out:
    make_file('.', 'phu', out)

Hope you enjoy.

7 Likes