Welcome to Custom-icons Discussions!

[Mariusthvdb]

👋 Welcome!

We’re using Discussions as a place to connect with other members of our community. We hope that you:

• Ask questions you’re wondering about.
• Share ideas.
• Engage with other community members.
• Welcome others and are open-minded. Remember that this is a community we
  build together 💪.

To get started, comment below with an introduction of yourself and tell us about what you do with this community.

[arallsopp]

Howdo, collating a few of the recent comments into one place:

creating svgs from paths

Wrap the path with svg descriptors, and save as whatever.svg, eg:

path: "M14.2,11.2l0.1,11L9.9,23l-1.8-0.2V11.9l3.7-0.8l0,0l1.7-10L14.1,1l1.8,0.2L14.2,11.2z"

becomes:

<svg viewBox="0 0 24 24" height="24px" width="24px" fill="#44739e" xmlns="http://www.w3.org/2000/svg"><path d="M14.2,11.2l0.1,11L9.9,23l-1.8-0.2V11.9l3.7-0.8l0,0l1.7-10L14.1,1l1.8,0.2L14.2,11.2z"/></svg>

colouring icons

The reason I use the blue icons rather than black is that some users are running dark themes in github and/or HomeAssistant.

Just give your viewbox a non black fill, eg, start it with:

<svg viewBox="0 0 24 24" height="24px" width="24px" fill="#44739e"

The colour you choose is arbitrary. HomeAssistant will switch this fill colour with the bulb colour if you have 'colour icons based on state' enabled in the dash.

[Mariusthvdb]

thanks Andy, I got the svg creation working now, check the shutter-icons.

Will see what to do with the colorings, you have a valid point

[arallsopp]

There's a pull request for you which sorts the 4 black ones you have. :)

[Mariusthvdb]

just to be clear on what I set on the svg icons, and keep them all nicely visible in any preview, I take out the height and width properties, and use only:

viewBox="0 0 24 24" fill="#44739e"