Help understanding custom SVG icons

DP0427 · February 11, 2026, 10:39pm

Hey all! I started looking into creating my own icons for various cards I want to build since there are clearly some unique use cases that wouldn’t have an accurate icon available.

As such I found integrations like custom brand icons and custom icons in HACS and with the help of ChatGPT got to work on creating my own SVG icons with what I think are correct conditions to display in HA.

Here’s the SVG Code below for a 24x24 icon that has a single path and using the currentColor to be theme proof (you can probably guess where I’m from ):

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
  viewBox="0 0 340.61078 293.59019"
  version="1.1"
  width="24"
  height="24"
  xmlns="http://www.w3.org/2000/svg">
  
  <title>Toronto Blue Jays hat light logo</title>
  
  <path
    d="M 103.84532,105.67796 c 0,0 -1.98044,-4.97521 0.55978,-10.070271 0.99388,-2.008208 2.88808,-3.841028 5.41077,-5.342069 18.71259,-12.535958 58.34621,0.312778 58.34621,0.312778 -9.40818,-0.856485 -17.1487,-0.698634 -23.65273,0.190005 11.04954,3.423017 22.87663,8.100068 30.889,10.022047 9.84373,2.40868 16.39014,3.63202 26.19149,4.20934 l -0.31424,-3.84103 5.45753,0.92372 14.52371,2.4613 2.13975,-5.410763 2.36483,-5.988087 4.60982,4.466583 c 0.10231,0.08769 7.23481,7.053577 10.99691,10.684137 -0.65478,-6.84311 -2.34875,-24.2622 -2.36483,-24.45659 l -0.68109,-7.052116 6.55517,2.670304 7.14128,2.864694 10.7426,-17.546249 3.63202,-5.953009 3.67587,5.953009 8.65693,14.156848 c 3.01085,-12.288951 5.17691,-25.310153 11.50262,-31.333317 -6.33448,0.226544 -10.80399,2.025747 -17.71433,6.876726 3.9258,-10.611059 9.7195,-18.503582 17.57694,-27.49229 -7.62067,1.154647 -14.89787,3.352861 -22.03768,7.401433 2.72292,-6.493792 2.90854,-14.523704 2.90854,-14.523704 -33.45553,38.842907 -126.74077,38.338663 -150.89335,46.260418 -15.84789,5.203219 -23.974271,13.841147 -29.620349,22.362149 -0.540784,8.816241 5.858007,17.194004 13.396829,17.194004 z M 238.78116,161.34364 l -6.24094,7.50667 l 6.24094,-7.50521 M 222.73011,173.96437 l 6.52741,-7.83845 l 3.52678,-4.27511 l -13.67745,-11.81686 c -7.43651,11.38131 -14.68009,23.68634 -18.13818,33.21875 l 15.04695,-0.0877 c -7.73175,9.5821 -22.63985,25.45046 -32.65897,42.95871 C 173.3273,201.52827 149.85727,169.84709 107.45688,152.46016 95.16062,147.41771 83.570304,140.72953 85.080114,131.00711 63.83461,127.96995 40.61013,125.52619 14.278333,124.65217 c -2.016978,-0.0336 -3.865875,-0.0512 -5.5335361,-0.0702 -1.5448883,-0.0512 -1.9380529,0.61094 -0.2630841,1.90297 7.2289672,5.25292 31.7089442,14.73272 61.7663032,20.31887 14.46378,2.6893 21.078884,6.63264 31.438554,13.89376 22.59015,15.81428 53.38269,58.12697 72.1552,113.27233 35.59382,-69.14289 76.93018,-100.17951 80.20265,-102.55457 l -21.17388,1.71004 l -10.14336,0.84041 z M 7.7962325,122.81936 c 15.0732585,-0.61094 36.2369135,-1.36219 73.2002315,-0.12131 3.124855,0.0322 6.197092,0.11984 9.193328,0.17246 1.866436,-2.47884 5.251451,-4.67705 11.702858,-4.67705 h 1.92052 c 11.99955,0.17539 14.227,12.4965 26.98512,12.4965 12.70988,0 14.95194,-12.2188 26.86673,-12.48188 0.32155,0 0.68694,-0.0146 0.99387,-0.0146 h 44.02275 l -0.59925,-7.3152 h -44.07682 c -12.2188,0 -14.38193,-12.481879 -27.2219,-12.481879 -12.6485,0 -14.92564,12.360569 -26.68111,12.448259 -12.734736,-0.76881 -17.778643,-11.414943 -18.773978,-20.476729 -5.568613,2.375065 -8.433307,5.149141 -12.613421,11.765709 -45.507705,7.52566 -61.080823,14.80432 -65.1630121,19.34399 -0.6021703,0.80387 -0.3478556,1.1868 0.2455452,1.34465 z M 125.91077,104.07315 c -0.89156,3.61302 -0.39463,6.68526 -0.18416,8.29007 h -4.27365 c -0.0965,-3.21255 1.80651,-6.52887 4.45781,-8.29007 z M 326.8018,106.30644 l -17.97011,3.08832 l -3.41425,-8.69201 c 0,0 -11.58301,11.27608 -13.11766,12.74497 -1.00557,0.92079 -2.11491,1.48204 -3.0547,1.48204 -1.51127,0 -2.62061,-1.3622 -2.31514,-4.64344 0.0263,-0.2967 0.0789,-0.78487 0.13154,-1.39581 0.57586,-5.953 2.45984,-25.416844 2.47007,-25.468 l -5.68554,2.285909 l -4.82321,1.939514 l -12.62073,-20.615563 h -0.0146 L 253.77405,87.647933 243.2653,83.423972 c 0.009,0.05115 1.88544,19.514998 2.47007,25.468008 0.0512,0.61094 0.10523,1.0991 0.13154,1.3958 0.30401,3.28125 -0.81263,4.64344 -2.30491,4.64344 -0.96025,0 -2.06813,-0.54079 -3.06346,-1.4835 -1.53466,-1.46889 -13.11036,-12.74497 -13.11036,-12.74497 l -3.4274,8.69201 l -17.94819,-3.08832 l 1.60774,19.743 l -6.99073,2.40722 l 38.1472,32.88552 l -6.24094,7.50666 l 2.19236,-0.17538 l 12.26265,-1.01142 l 16.66199,-1.34465 l 1.6662,3.19355 l 0.35809,0.67963 l 0.7264,1.39581 l 1.41335,-2.72292 l 1.31542,-2.54899 l 31.11408,2.53145 l -6.22194,-7.5052 l 38.14281,-32.88844 l -7.00096,-2.40722 l 1.63405,-19.74008 Z"
    fill="currentColor"
    style="stroke-width:1" />
    
</svg>

I’ve uploaded the file to the /homeassistant/custom_icons/ path as shown below:

I’ve restarted HA, reloaded the front end a few times, yet the icon doesn’t turn up correctly as shown here:

Not 100% what I’m doing wrong here, but GPT tends to think everything is correct in terms of path within HAOS, so likely an issue with the SVG rendering?

Would love any thoughts or assistance here!

almighty59 · February 11, 2026, 11:53pm

If you’re using the following Custom Icons card found in HACS then you need to enable Local Icons in the integration and use the prefix local: not phu:.

HappyCadaver · February 12, 2026, 2:04am

That was your first mistake . Common AI engines generally use dated aggregated information and it’s likely giving you options from different integrations.

Which one? Different integrations use different configuration options. Please be specific and maybe someone can help you nail it down.

I use the integration that @almighty59 linked to and it’s been pretty solid, although some core update invoked restarts require a page refresh to make them visible.

DP0427 · February 12, 2026, 2:20am

@HappyCadaver fair enough! I knew I was likely not going to be getting super accurate info with LLMs but hey I thought I’d try my luck.
As you may have guessed I have both integrations installed (custom brand icons and custom icons) and the LLM confused the phu: prefix used in the former, and what I should’ve actually have been using (local:) in the latter that @almighty59 correctly pointed out.

After an adjustment in my YAML, and a reload, everything is working just fine. Thanks for the reality check!