Hey everyone! I’m super excited to share my journey with OpenHAB 3 and how I managed to get custom icons working in my widgets. If you’re like me and love a bit of personalization, this might be the post for you! 
The Challenge
I’ve been playing around with OpenHAB 3 and its new widgets, but I couldn’t get my custom icons to show up in the Main UI. I followed the documentation, placed my icons in the icons/classic/ folder, and even tried icons/, but nothing worked. Frustrating, right? 
The Solution
After some research and trial and error, I figured it out! Here’s how I did it:
-
Create Your Icons
I used Draw.io (now Lucidchart) to design my icons. It’s free and perfect for creating vector graphics. I made three states for a valve icon: green for ON, red for OFF, and black for the default state. -
Export Your Icons
- Select only the shape you want as your icon.
- Export as SVG with a transparent background and crop the selection.
- Name your files according to the OpenHAB documentation, like
water_magneticvalve-ON.svg.
- Configure Your Icons
In your widget configuration, use the basic icon name without the state (e.g.,water_magneticvalve) and add theoh:prefix. This tells OpenHAB to use the state-dependent icons automatically.
Example Configuration
yaml
component: oh-label-card
config:
title: Toggle the Magnetic Valve
item: Main_Magnetic_Valve
action: toggle
icon: oh:water_magneticvalve
actionCommand: ON
actionCommandAlt: OFF
label: Magnetic Valve
iconUseState: true
Results
Now, my valve icon changes color based on its state! It’s so satisfying to see everything work seamlessly. 
Tips for Others
- Keep your icon names consistent with a domain prefix (like
water_) for easier management. - Don’t forget the
oh:prefix in your configuration—it’s crucial! - Test your icons in different states to ensure they switch correctly.
I hope this helps someone out there! It’s all about persistence and a bit of creativity. Happy icon-making! 
#OpenHAB #CustomIcons #SmartHomeTips