A different take on designing a Lovelace UI

[svenschuldt]

Hi Marlo,

you seem to have the trick understood - I am playing for the last two hours with sag files. which I have downloaded from the Noun Project but I am not making a lot of progress:

1. I downloaded an icon in svg format
2. edited in Adobe Illustrator and saved it as svg
3. pushed it through nano and downloaded again and …
4. now I am a bit lost

If I look e.g. at the &icon_hue definition I see a wide range of definition as follows:

icon_hue: &icon_hue >
                [[[ const state = entity.state === 'on' ? 'animate' : null;
                return `<svg viewBox="0 0 50 50"><style>@keyframes animate{0%{transform: scale(0.85);}20%{transform: scale(1.1);}40%{transform: scale(0.95);}60%{transform: scale(1.03);}80%{transform: scale(0.97);}100%{transform: scale(1);}}.animate{animation: animate 0.8s; transform-origin: center;}</style>
                <path fill="#9da0a2" d="M27.4 47.3h-4.9s-.7.1-.7.8.4.9.7.9h4.9c.3 0 .7-.1.7-.9s-.7-.8-.7-.8zm3.3-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-3H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9s-.9-.8-.9-.8zm5.2-23.2c-3.3-5.3-7-5.6-10.9-5.6-3.8 0-8.4.4-10.9 5.6-.1.1-.1.3.1.7.4.8 3.3 7.2 3.2 18.8 0 1.1-.1 1.6 0 1.7 0 .1 0 .7 1.1.7h13c1 0 1-.5 1.1-.7v-1.7c-.1-11.6 2.8-18 3.2-18.8.1-.4.1-.5.1-.7"/>
                <path class="${state}" fill="var(--button-card-light-color-no-temperature)" d="M14.1 15.3c3.4-.3 7-.4 10.9-.4 3.8 0 7.5.2 10.9.4.4-.4.7-.8.9-1.1C39 8.5 38.9 6.5 38.9 6c-.2-4.4-8.4-5-12.1-5h0-3.4c-3.7 0-12 .5-12.1 5 0 .5-.1 2.5 2.1 8.2 0 .3.3.8.7 1.1z"/></svg>`; ]]]

If I am not mistaken, I see two icon definition areas,

• the one starts with “M27.4 …”
• and the next “M14.1 …”

The “transform code” above defines the size based on different percentages, right?

The code I have downloaded though from an icon I would like to use look as follows:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 612 792" xmlns:v="https://vecta.io/nano"><image width="767" height="756" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAv8AAAL0CAYAAACbPFjhAAAABHNCSVQICAgIfAhkiAAAAAFzUkdC AK7OHOkAAAAEZ0FNQQAAsY8L/GEFAAAACXBIWXMAAB2GAAAdhgFdohOBAAAXBklEQVR4Xu3dXail Y+PH8Wv/kZeRRA5mDoQyRwrD5AijZtpehsbBJNRoiu6yFxZ5O3AqIrK0Vy2NEHNAyHhnxoyUExpR XpqiNIk0SdFMed/PntVV/4Otnp5t7Hut9ft8Tvb1u9fBPv3uNddaMzU3rwAAABPv/+pPAABgwol/ AAAIIf4BACCE+AcAgBDiHwAAQoh/AAAIIf4BACCE+AcAgBDiHwAAQoh/AAAIIf4BACCE+AcAgBDi HwAAQoh/AAAIIf4BACCE+AcAgBDiHwAAQoh/AAAIIf4BACCE+AcAgBDiHwAAQoh/AAAIIf4BACCE +AcAgBDiHwAAQoh/AAAIIf4BACCE+AcAgBDiHwAAQoh/AAAIIf4BACCE+AcAgBDiHwAAQoh/AAAI If4BACCE+AcAgBDiHwAAQoh/AAAIIf4BACCE+AcAgBDiHwAAQoh/AAAIIf4BACCE+AcAgBDiHwAA Qoh/AAAIIf4BACCE+AcAgBDiHwAAQoh/AAAIIf4BACCE+AcAgBDiHwAAQoh/AAAIIf4BACCE+AcA gBDiHwAAQoh/AAAIIf4BACCE+AcAgBDiHwAAQoh/AAAIIf4BACCE+AcAgBDiHwAAQoh/AAAIIf4B ACCE+AcAgBDiHwAAQoh/AAAIIf4BACCE+AcAgBDiHwAAQoh/AAAIIf4BACCE+AcAgBDiHwAAQoh/ AAAIIf4BACCE+AcAgBDiHwAAQoh/AAAIIf4BACCE+AcAgBDiHwAAQkzNzatnGOp0OqXf79cFAPxT TdOUwWBQF7THO/8AABBC/AMAQAjxDwAAIcQ/AACEEP8AABBC/AMAQAjxDwAAIcQ/AACEEP8AABBC /AMAQAjxDwAAIcQ/AACEEP8AABBC/AMAQAjxDwAAIcQ/AACEEP8AABBC/AMAQAjxDwAAIcQ/AACE EP8AABBC/AMAQAjxDwAAIcQ/AACEEP8AABBC/AMAQAjxDwAAIcQ/AACEEP8AABBC/AMAQAjxDwAA IcQ/AACEmJqbV88w1Ol0Sr/fr6sd1157bbnnnnvqAoDFu++++8rTTz9dVzuapimDwaAuaI/4Z4FR iP+ZmZkyOztbFwAsXrfbLb1er652iH9GhWs/AAAQQvwDAEAI8Q8AACHEPwAAhBD/AAAQQvwDAEAI 8Q8AACHEPwAAhBD/AAAQQvwDAEAI8Q8AACHEPwAAhJiam1fPMNTpdEq/36+rHcuWLSvHH398XQCw eD/99FPZv39/Xe1omqYMBoO6oD3inwVGIf4BYJKIf0aFaz8AABBC/AMAQAjxDwAAIcQ/AACEEP8A ABBC/AMAQAjxDwAAIcQ/AACEEP8AABBC/AMAQAjxDwAAIcQ/AACEEP8AABBC/AMAQAjxDwAAIcQ/ AACEEP8AABBC/AMAQAjxDwAAIcQ/AACEEP8AABBC/AMAQAjxDwAAIcQ/AACEEP8AABBC/AMAQAjx DwAAIcQ/AACEEP8AABBC/AMAQAjxDwAAIabm5tUzDHU6ndLv9+tqx+WXX15uvPHGugBg8R577LGy bdu2utrRNE0ZDAZ1QXvEPwuMQvzPzMyU2dnZugBg8brdbun1enW1Q/wzKlz7AQCAEOIfAABCiH8A AAgh/gEAIIT4BwCAEOIfAABCiH8AAAgh/gEAIIT4BwCAEOIfAABCiH8AAAgh/gEAIMTU3Lx6hqFO p1P6/X5d7Vi+fHk57bTT6gKAxfv666/Ld999V1c7mqYpg8GgLmiP+GeBUYh/AJgk4p9R4doPAACE EP8AABBC/AMAQAjxDwAAIcQ/AACEEP8AABBC/AMAQAjxDwAAIcQ/AACEEP8AABBC/AMAQAjxDwAA IcQ/AACEEP8AABBC/AMAQAjxDwAAIcQ/AACEEP8AABBC/AMAQAjxDwAAIcQ/AACEEP8AABBC/AMA QAjxDwAAIcQ/AACEEP8AABBC/AMAQAjxDwAAIcQ/AACEEP8AABBC/AMAQIipuXn1DEOdTqf0+/26 2nHRRReVa665pi4AWLznnnuuvPPOO3W1o2maMhgM6oL2iH8WGIX4n5mZKbOzs3UBwOJ1u93S6/Xq aof4Z1S49gMAACHEPwAAhBD/AAAQQvwDAEAI8Q8AACHEPwAAhBD/AAAQQvwDAEAI8Q8AACHEPwAA hBD/AAAQQvwDAECIqbl59QxDnU6n9Pv9utqxcuXKsnr16roAYPE++uijsmfPnrra0TRNGQwGdUF7 xD8LjEL8A8AkEf+MCtd+AAAghPgHAIAQ4h8AAEKIfwAACCH+AQAghPgHAIAQ4h8AAEKIfwAACCH+ AQAghPgHAIAQ4h8AAEKIfwAACCH+AQAghPgHAIAQ4h8AAEKIfwAACCH+AQAghPgHAIAQ4h8AAEKI fwAACCH+AQAghPgHAIAQ4h8AAEKIfwAACCH+AQAghPgHAIAQ4h8AAEKIfwAACCH+AQAghPgHAIAQ 4h8AAEJMzc2rZxjqdDql3+/X1Y5zzz23TE9P1wUAi7djx47y4Ycf1tWOpmnKYDCoC9oj/llgFOJ/ ZmamzM7O1gUAi9ftdkuv16urHeKfUeHaDwAAhBD/AAAQQvwDAEAI8Q8AACHEPwAAhBD/AAAQQvwD AEAI8Q8AACHEPwAAhBD/AAAQQvwDAEAI8Q8AACGm5ubVMwx1Op3S7/fraseqVavKunXr6gKAxdu5 c2fZvXt3Xe1omqYMBoO6oD3inwVGIf4BYJKIf0aFaz8AABBC/AMAQAjxDwAAIcQ/AACEEP8AABBC /AMAQAjxDwAAIcQ/AACEEP8AABBC/AMAQAjxDwAAIcQ/AACEEP8AABBC/AMAQAjxDwAAIcQ/AACE EP8AABBC/AMAQAjxDwAAIcQ/AACEEP8AABBC/AMAQAjxDwAAIcQ/AACEEP8AABBC/AMAQAjxDwAA IcQ/AACEEP8AABBC/AMAQAjxDwAAIabm5tUzDHU6ndLv9+tqx8qVK8vq1avrAoDF++ijj8qePXvq akfTNGUwGNQF7RH/LDAK8T8zM1NmZ2frAoDF63a7pdfr1dUO8c+ocO0HAABCiH8AAAgh/gEAIIT4 BwCAEOIfAABCiH8AAAgh/gEAIIT4BwCAEOIfAABCiH8AAAgh/gEAIIT4BwCAEFNz8+oZhjqdTun3 +3W1Y82aNeWqq66qCwAW7/nnny+7du2qqx1N05TBYFAXtEf8s8AoxD8ATBLxz6hw7QcAAEKIfwAA CCH+AQAghPgHAIAQ4h8AAEKIfwAACCH+AQAghPgHAIAQ4h8AAEKIfwAACCH+AQAghPgHAIAQ4h8A AEKIfwAACCH+AQAghPgHAIAQ4h8AAEKIfwAACCH+AQAghPgHAIAQ4h8AAEKIfwAACCH+AQAghPgH AIAQ4h8AAEKIfwAACCH+AQAghPgHAIAQ4h8AAEKIfwAACCH+AQAgxNTcvHqGoU6nU/r9fl3tWLFi RTn99NPrAoDF++qrr8q3335bVzuapimDwaAuaI/4Z4FRiP+ZmZkyOztbFwAsXrfbLb1er652iH9G hWs/AAAQQvwDAEAI8Q8AACHEPwAAhBD/AAAQQvwDAEAI8Q8AACHEPwAAhBD/AAAQQvwDAEAI8Q8A ACHEPwAAhBD/AAAQYmpuXj3DUKfTKf1+v652nHTSSeXkk0+uCwAW75tvvin79u2rqx1N05TBYFAX tEf8s8AoxD8ATBLxz6hw7QcAAEKIfwAACCH+AQAghPgHAIAQ4h8AAEKIfwAACCH+AQAghPgHAIAQ 4h8AAEKIfwAACCH+AQAghPgHAIAQ4h8AAEKIfwAACCH+AQAghPgHAIAQ4h8AAEKIfwAACCH+AQAg hPgHAIAQ4h8AAEKIfwAACCH+AQAghPgHAIAQ4h8AAEKIfwAACCH+AQAghPgHAIAQ4h8AAEKIfwAA CCH+AQAgxNTcvHqGoU6nU/r9fl3tWLduXdm0aVNdALB4W7duLW+//XZd7WiapgwGg7qgPeKfBUYh /mdmZsrs7GxdALB43W639Hq9utoh/hkVrv0AAEAI8Q8AACHEPwAAhBD/AAAQQvwDAEAI8Q8AACHE PwAAhBD/AAAQQvwDAEAI8Q8AACHEPwAAhBD/AAAQQvwDAEAI8Q8AACGm5ubVMwx1Op3S7/frasfM zEyZnZ2tCzLt3r273H333XUtzr333lvOO++8uki1ffv28sADD9S10IMPPljOPvvsuiZPt9stvV6v rnY0TVMGg0Fd0B7xzwLiH0bDW2+9VS655JK6FufVV18t69evr4tUTz31VNm8eXNdC+3YsaOsXbu2 rskj/uH/ufYDAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8A AIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEP AAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8 AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ /wAAEEL8A8CE++OPP+rp7/3555/1BEw68Q8AE+j3338vzzzzTFmzZk1pmqY+/XuXX355ueyyy8q2 bdvKX3/9VZ8Ck0j8A8CEeeGFF8rpp59eNm3aVN57773/GvQH/1B44403ypVXXlnOPPPMsmvXrvoK MGnEPwBMiP3795err766bNy4sezdu7c+/d989tlnZe3ataXb7f7X60LA+BH/ADAB9u3bV84///zy 7LPP1ieLNzc3V3q9Xrn00kvLgQMH6lNgEoh/ABhzP//88/Dd+k8++aQ+OTR27NhRNmzYMLwWBEwG 8Q8AY+66664rn376aV2H1jvvvFNuv/32uoBxJ/4BYIw9+eSTw2/p+Tc9+uijZefOnXUB40z8A8CY OvgB37vvvruuf9ctt9zia0BhAoh/ABhTjz/++PCDvkvh888/L6+88kpdwLgS/wAwpg7G/1LasmVL PQHjSvwDwBj68ssvh+/GL6WDH/711Z8w3sQ/AIyh999/v56Wzm+//VY++OCDuoBxJP4BYAx98cUX 9bS02vq9wKEh/gFgDH3//ff1tLS+++67egLGkfgHgDH0yy+/1NPS+vXXX+sJGEfiHwDG0NFHH11P S6ut3wscGuIfAMbQ8uXL62lprVixop6AcST+AWAMnXHGGfW0tNr6vcChIf4BYAydf/759bR0jjrq qLJ69eq6gHEk/gFgDJ1yyinlrLPOqmtpTE9Pu/MPY078A8CYuuGGG+ppaVx//fX1BIwr8Q8AY2rz 5s1L9gHcs88+u1x22WV1AeNK/APAmDp4BeeBBx6o698zNTVVHnnkkeFPYLyJfwAYY9dee23ZuHFj Xf+O2267rVxwwQV1AeNM/APAmHviiSfKqlWr6jq0Lr744nL//ffXBYw78Q8AY+7YY48t27dvL+ec c059cmgc/HafF198sRx++OH1CTDuxD8ATIATTzyxvPfee8NrQP/Uwbv9B6/6vPbaa+WYY46pT4FJ IP4BYEIsW7asbN26tbz00kvltNNOq0//N2eeeWZ59913y0MPPeQdf5hA4h8AJsyGDRvKnj17hn8I XHTRReWwww6rr/y9I488sqxfv768/PLL5eOPPy4XXnhhfQWYNOIfACbQEUccMbwCtGvXrvLDDz+U N998szz88MPljjvuKDfffHO56667yqOPPjp8/ccffyyvvvpqueKKK3ydJ0w48Q8AE+74448ffmvP rbfeOvx/AXq93vAbfG666abhvwy41w85xD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8 AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ /wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAh xD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBA CPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAA EEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8A AIQQ/wAAEGJqbl49w1Cn0yn9fr+udpxwwgll+fLldUGm/fv3l71799a1OKeeemo57rjj6oJM3377 bfnhhx/qakfTNGUwGNQF7RH/LDAK8Q8Ak0T8MyrE/4g5cOBA+f333+tqx5133lm2bNlSFwDwT23e vLk8/PDDdbXjiCOOKMuWLauLVOJ/xKxdu7bs3LmzLgCAQ2N6erq89dZbdZHKB34BACCE+AcAgBDi HwAAQoh/AAAIIf4BACCE+AcAgBDiHwAAQoh/AAAIIf4BACCE+AcAgBDiHwAAQoh/AAAIIf4BACCE +AcAgBDiHwAAQoh/AAAIIf4BACCE+AcAgBDiHwAAQoh/AAAIIf4BACCE+AcAgBDiHwAAQoh/AAAI If4BACCE+AcAgBDiHwAAQoh/AAAIIf4BACCE+AcAgBDiHwAAQoh/AAAIIf4BACCE+AcAgBDiHwAA Qoh/AAAIIf4BACCE+AcAgBDiHwAAQoh/AAAIIf4BACCE+AcAgBDiHwAAQoh/AAAIIf4BACCE+AcA gBDiHwAAQoh/AAAIIf4BACCE+AcAgBDiHwAAQoh/AAAIIf4BACCE+AcAgBDiHwAAQoh/AAAIIf4B ACCE+AcAgBDiHwAAQoh/AAAIIf4BACCE+AcAgBDiHwAAQoh/AAAIMTU3r54ZAdPT02Xnzp11AQAc Ggcb4/XXX6+LVOIfAABCuPYDAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBA CPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAA EEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8A AIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEP AAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8 AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ /wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAh xD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBA CPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAA EEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8A AIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEP AAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8AwBACPEPAAAhxD8AAIQQ/wAAEEL8 AwBACPEPAAARSvkPI4z+Kotpk2QAAAAASUVORK5CYII=" transform="matrix(.1625 0 0 .1316 325 438)" overflow="visible"/></svg>

How have you done your logo, if I may ask and how did you insert which code?

Thanks!

[Mattias_Persson]

That’s not a svg. It’s a base64 encoded png… nevertheless any html works so you could just do

icon_hue:
  <svg xmlns="http://www.w3.org/2000/svg"...

The code you’re describing are two different shapes. The bulb and the fixture. The transform is the animation.

[svenschuldt]

Thanks!
But how do I get the svg code then? I actually followed the process described above and end up with the base64 code.
I guess I can not work with transform if I just use an html code, right?

[Mattias_Persson]

I don’t know. You can animate images but svg is way lighter. Post the noun link and I’ll help you out.

[svenschuldt]

Wow - that’s very kind of you. If you help me out on one icon, I am sure I will be able to cover other ones to adapt That is very kind!

This is the icon I kick it off with is a cube. I am assigning a process via a button on this.

By the way: you definitely have designed the best and most sleek interface I have seen so far on HA - just great, thanks for that work and that you share it!

[Mattias_Persson]

Download icon as SVG

If you paste that into button-card it will look like this.

Rather than fixing it in code we can have a consistent viewbox for all the icons we create or download.

• Create an empty svg

<svg viewBox="0 0 50 50"></svg>

• Open both icon and empty svg in illustrator

• Copy over the icon to the empty svg

• Resize the icon to fit artboard

Now, there’s a lot of paths so let’s make it into one with Compound Path with keyboard shortcut cmd + 8 (ctrl + 8)

So of course that didn’t work as you picked a complex icon

Undo that and select everything again and go Pathfinder > Exclude

Lets try Compound Path again, we got one path

Save as svg and upload to nano

Now we got an SVG file of the icon in:

• One single path
• In our viewbox
• A lot less code

You don’t have to make it into one shape, we can split it into more paths so you can color and animate separate parts.

In lovelace it looks like this, you can fine tune the size and position.

custom_fields:
  icon_cube3d: >
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M47.6 8.1v-.4h-.3L19.2 1c-.1 0-.3 0-.4.1L2.6 12.6l-.1.1v29c0 .2.2.5.4.5l28 6.7h.4l16.1-11.6a.76.76 0 0 0 .2-.4V8.1c0 .1 0 0 0 0zm-28.5-6h.4l12.4 3-7 5-5.4-1.3v-.1h-.4L12.3 7l6.8-4.9zm-2.7 29.6h0V37l-.9-.2-.2.8 1 .2v6.8L3.5 41.4V28.1l12.9 3.1v.5zm0-14.4h0v12.9L11 28.8h.4v-1.3h-.8v1.2L3.5 27V13.7l7.2 1.7v.3h.8v-.1l5 1.2v.5zm-5-2.7v-.1H11l-6.8-1.6 6.8-5h.4l7.3 1.7v.4h.8v-.2l4.3 1-4.3 3.1h-.8v.6l-1.9 1.4-5.4-1.3zm7.2 1.7l-.4-.1.2-.2.2.3zM30.4 35h0v12.9l-12.9-3.1V31.9l.3-.2-.1-.1 12.7 3v.4zm0-1.5L19 30.8l.1-.1.5.1.2-.8-.3-.1v-.3h-.8v.4l-.4.3.3.4-1.1-.3V17.5l.3-.2-.1-.1 1 .2v.4h.8v-.2l7.6 1.8 3.3.8v13.3zm.7-14.5l-.3.2L19 16.4l.1-.1.5.1.2-.8-.6-.2-.1.4-.2-.2 6.2-4.4 7.6 1.8v.3h.8v-.1l4.3 1-4.3 3.1h-.8v.6l-.9.6-.5-.1-.2.6zm7.4 23.2h0l-.1.3-6.9 5v-6.2l.5.1.2-.8-.7-.2v-5.3l.3-.2-.3-.5v-.1l.9-.6h.1v-.1l.4.5.5-.4-.2-.3h.4V33l5-3.6v12.8zm0-14.1l-6.7 4.8-.4-.1V20l.9-.6h.1v-.1l6.1-4.4v13.2zm-5-16V12H33l-6.8-1.6L33 5.5h.4l12.4 3-7 5-5.3-1.4zm13 24.3h0l-.1.3-6.9 5v-6.2l.5.1.2-.8-.7-.2v-6.1l7-5v12.9zm0-14.4h0l-.1.3-6.9 5v-6.2l.5.1.2-.8-.7-.2v-6.1l7-5V22zM34.9 34.4l-1.3-.3.2-.8 1.3.3-.2.8zm7.6 1.8l-1.3-.3.2-.8 1.3.3-.2.8zm2.6.7l-1.3-.3.2-.8 1.3.3-.2.8zm-18.9-5.4l1.3.3-.2.8-1.3-.3.2-.8zm3.6 1.7l-1.3-.3.2-.8 1.3.3-.2.8zm-6.2-2.3l1.3.3-.2.8-1.3-.3.2-.8zm-2.5-.6l1.3.3-.2.8-1.3-.3.2-.8zM37.4 35l-1.3-.3.2-.8 1.3.3-.2.8zM8.7 38.2l-.5-.6 1-.7.5.6-1 .7zm4.1-2.9l-.5-.6 1-.7.5.6-1 .7zM4.7 41l-.5-.6 1-.7.5.6-1 .7zm10.1-7.2l-.5-.6 1-.7.5.6-1 .7zm-8.1 5.8l-.4-.6 1-.7.5.6-1.1.7zM19.5 4.7h-.8V3.4h.8v1.3zm0 2.7h-.8V6h.8v1.4zM18.7 27h.8v1.3h-.8V27zm0-2.6h.8v1.3h-.8v-1.3zm.8-11.8h-.8v-1.3h.8v1.3zm-.8 6.5h.8v1.3h-.8v-1.3zm0 2.6h.8V23h-.8v-1.3zm8 16.9l-.4-.6 1-.7.5.6-1.1.7zM19.2 43l.5.6-1 .7-.5-.6 1-.7zm1.5-.1l-.5-.6 1-.7.5.6-1 .7zm2-1.4l-.5-.6 1-.7.5.6-1 .7zm6.1-4.3l-.5-.6 1-.7.5.6-1 .7zm4.7-13.4h-.8v-1.3h.8v1.3zm0-2.6h-.8v-1.3h.8v1.3zm0 5.2h-.8v-1.3h.8v1.3zm0 2.6h-.8v-1.3h.8V29zm0 2.6h-.8v-1.3h.8v1.3zm-.8-22.2h.8v1.3h-.8V9.4zm0-2.6h.8v1.3h-.8V6.8zm.8 9.1h-.8v-1.3h.8v1.3zM19.2 38.4l-1.3-.3.2-.8 1.3.3-.2.8zm2.5.6l-1.3-.3.2-.8 1.3.3-.2.8zm11.7 2l1.3.3-.3.7-1.3-.3.3-.7zm3.6 1.7l-1.3-.3.2-.8 1.3.3-.2.8zm-12.7-3.1l-1.3-.3.2-.8 1.3.3-.1.5.9-.7.4.6v-.1l1.3.3-.2.8-1.3-.3.1-.5-.9.7-.4-.6v.1zm5.1 1.2l-1.3-.3.2-.8 1.3.3-.2.8zM13 36.1l1.3.3-.2.8-1.3-.3.2-.8zm-2.4-24.3h.8v1.3h-.8v-1.3zm0 5.3h.8v1.3h-.8v-1.3zm0-7.9h.8v1.3h-.8V9.2zm.8 24.9h-.8v-1.3h.8v1.3zm-.8-9.2h.8v1.3h-.8v-1.3zm.8 6.6h-.8v-1.3h.8v1.3zm-.7 5.2l-.5-.6.3-.2v-.4h.7v.1l.2.2h.2v.2h-.1l-.1.5-.5-.1-.2.3zm10.4-20.8l1.3.3-.2.8-1.3-.3.2-.8zm2.5.6l1.3.3-.2.8-1.3-.3.2-.8zm21.5 6l-1.3-.3.2-.8 1.3.3-.2.8zm-2.6-.6l-1.3-.3.2-.8 1.3.3-.2.8zm-16.3-4.8l1.3.3-.2.8-1.3-.3.2-.8zm2.5.7l1.3.3-.2.8-1.3-.3.2-.8zm8.7 2.9l-1.3-.3.2-.8 1.3.3-.2.8zm-2.5-.7l-1.3-.3.2-.8 1.3.3-.2.8zm-20.1-.6l-.5-.6 1-.7.5.6-1 .7zm-7.5 4.5l.5.6-1 .7-.5-.6 1-.7zm2-1.5l.5.6-1 .7-.5-.6 1-.7zm-4 2.9l.5.6-1 .7-.6-.6 1.1-.7zm7.5-4.4l-.5-.6 1-.7.5.6-1 .7zm-1.5.1l.4.6-1 .7h.6v1.3h-.8v-1.3h.1l-.4-.6 1.1-.7h-.7v-1.3h.8l-.1 1.3z"/></svg>
styles:
  custom_fields:
    icon_cube3d:
      [fill: green, top: 7%, left: 10%, width: 3.5vw, position: absolute]

[svenschuldt]

Listen Mattias, this is soooo nice of you to spend all the effort and time to help a rookie like I am, really appreciated. It looks not only great but now I know how it works and that is most important!

Really, really appreciated and big help! Thanks a lot!

[Mattias_Persson]

We contribute and learn from each other.

[lucibuz (Lucian Buzatu)]

Hi Mattias,
I manage to customize icons doing the following:

1. download icons in .svg format
   

   

2. modify icon in Inkscape as need it and save it with a different name
   

   

3. open the original icon in a text editor and copy the viewBox=“0 0 24 24” and <path d=" …" and paste it in yaml
   

   

4. open the modified icon in a text editor and copy the viewBox=“0 0 24 24” and <path d=" …" and paste it in yaml
   

   

5. the modified yaml looks like this:

custom_fields:
              icon_ceiling_light: >
                [[[ const state = entity.state === 'on' ? 'animate' : null;
                return `<svg viewBox="0 0 24 24"><style>@keyframes animate{0%{transform: scale(0.85);}20%{transform: scale(1.1);}40%{transform: scale(0.95);}60%{transform: scale(1.03);}80%{transform: scale(0.97);}100%{transform: scale(1);}}.animate{animation: animate 0.8s; transform-origin: center;}</style>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8,9H11V4H13V9H16L20,17H4L8,9M14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18H14Z" /></svg>
                <path class="${state}" fill="var(--button-card-light-color-no-temperature)"  d="m 8,9 c 8,0 0.7559689,0 8,0 l 4,8 H 4 L 8,9"/></svg>`; ]]]

            styles:
              custom_fields:
                icon_ceiling_light:
                  [fill: grey, top: 7%, left: 4.5%, width: 4.5vw, position: absolute]

the new icon animates the same as the icon in your design

[fastender]

I will release some animated SVG today. Thanks for the great help.

Here is a little video of my Lovelace. Here the video: https://imgur.com/xnF4aJf

[Frank_Hagenbuch]

WOW, great. Do you share your complete Config?

[fastender]

Mattias certainly had a lot of influence on this design. I would like to thank him again at this point. I will therefore share as many of the codes as possible.

[Frank_Hagenbuch]

I know and I have had my Config only with Mattias help getting to work.

[klogg]

How do you blur the background behind the pop-ups?

[fastender]

Look Post#2

A different take on designing a Lovelace UI?

[enong]

fire hd 10 + fully kiosk browser without blur effect

[Mattias_Persson]

Fully uses android webview (chrome) and backdrop-filter is pretty new for android, I would say late 2019 as I remember it started to work after an os update. caniuse.com is a good way to check browser support.

[NovaG]

That’s amazing. I’d really love those SVGs especially the blinds I’ve been looking for a good one but could never find one.

[Jer78 (Jeremy Percival)]

@Mattias_Persson Wow! This is amazing!! Great job. Hopefully this gets the attention of the Lovelace UI devs and maybe, just maybe one day this will inspire lovelace…oh who am I kidding. lol

Anyways…I’ve managed to “borrow” the hue, tv and speaker icons. Wondering if you have plans to create the SVGs for climate, garage doors, security cameras?

Also, is it possible to to keep an animation repeating such as when the music is playing I’d like to have the woofer keep animating.

Thanks again for the inspiration!!

[NovaG]

Can you post the paths here, so if anyone want them they can use them?

Going through the YAML was harder than I thought to extract the icons.