Skip to content

UI improvement: clearer icons and added text description #5425

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DedeHai merged 3 commits into from
Mar 16, 2026
+152 −38
Merged

UI improvement: clearer icons and added text description #5425

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a09acfc
add two new icons (folder, hammer), add text to tool buttons
DedeHai Mar 15, 2026
cfaff6e
fix typos
DedeHai Mar 15, 2026
8291211
remove id's from buttons, always show all buttons
DedeHai Mar 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions wled00/data/icons-ui/HowTo_AddNewIcons.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
To edit the current font, this is the workflow:

go to https://icomoon.io/
In the menu, go to manage projects and import the json file from this folder and load it
Add new icons or exchange existing ones: if changing existing one, make sure the unicode stays the same (can be edited before exporting)
Go to "Generate SVG & More" and check the size of new icons (clicking on icons brings up the editor) -> scale new icons to match the size of existing ones
Got to "Generate font" tab, check unicodes are correct (can use any unicode, range > e900 is "custom range" and now preferred)
Download the font package and replace the files in this folder with new files
Using an online converter, convert the *.woff font into woff2 format (about half the file size)
Using another online converter, convert the woff2 font to base64 encoding for CSS
in index.css, replace the font string at the top, keep the "data:font/woff2;charset=utf-8;" and dont use octet-stream (browser compatibility).

enjoy your new icons in the UI :)

2 changes: 1 addition & 1 deletion wled00/data/icons-ui/Read Me.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.

To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/docs#install

You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.

Expand Down
6 changes: 6 additions & 0 deletions wled00/data/icons-ui/demo-files/demo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,12 @@ p {
font-size: 16px;
}
.fs1 {
font-size: 48px;
}
.fs2 {
font-size: 28px;
}
.fs3 {
font-size: 32px;
}

84 changes: 59 additions & 25 deletions wled00/data/icons-ui/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<title>IcoMoon Demo</title>
Expand All @@ -9,11 +9,45 @@
<link rel="stylesheet" href="style.css"></head>
<body>
<div class="bgc1 clearfix">
<h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> wled122 <small class="fgc1">(Glyphs:&nbsp;23)</small></h1>
<h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> wled122 <small class="fgc1">(Glyphs:&nbsp;25)</small></h1>
</div>
<div class="clearfix mhl ptl">
<h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
<h1 class="mvm mtn fgc1">Grid Size: 16</h1>
<div class="glyph fs1">
<div class="clearfix bshadow0 pbs">
<span class="i-pixelforge"></span>
<span class="mls"> i-pixelforge</span>
</div>
<fieldset class="fs0 size1of1 clearfix hidden-false">
<input type="text" readonly value="e900" class="unit size1of2" />
<input type="text" maxlength="1" readonly value="&#xe900;" class="unitRight size1of2 talign-right" />
</fieldset>
<div class="fs0 bshadow0 clearfix hidden-true">
<span class="unit pvs fgc1">liga: </span>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
</div>
<div class="clearfix mhl ptl">
<h1 class="mvm mtn fgc1">Grid Size: 14</h1>
<div class="glyph fs2">
<div class="clearfix bshadow0 pbs">
<span class="i-editor"></span>
<span class="mls"> i-editor</span>
</div>
<fieldset class="fs0 size1of1 clearfix hidden-false">
<input type="text" readonly value="e901" class="unit size1of2" />
<input type="text" maxlength="1" readonly value="&#xe901;" class="unitRight size1of2 talign-right" />
</fieldset>
<div class="fs0 bshadow0 clearfix hidden-true">
<span class="unit pvs fgc1">liga: </span>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
</div>
<div class="clearfix mhl ptl">
<h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
<div class="glyph fs3">
<div class="clearfix bshadow0 pbs">
<span class="i-pattern"></span>
<span class="mls"> i-pattern</span>
Expand All @@ -27,7 +61,7 @@ <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs1">
<div class="glyph fs3">
<div class="clearfix bshadow0 pbs">
<span class="i-segments"></span>
<span class="mls"> i-segments</span>
Expand All @@ -41,7 +75,7 @@ <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs1">
<div class="glyph fs3">
<div class="clearfix bshadow0 pbs">
<span class="i-sun"></span>
<span class="mls"> i-sun</span>
Expand All @@ -55,7 +89,7 @@ <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs1">
<div class="glyph fs3">
<div class="clearfix bshadow0 pbs">
<span class="i-palette"></span>
<span class="mls"> i-palette</span>
Expand All @@ -69,7 +103,7 @@ <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs1">
<div class="glyph fs3">
<div class="clearfix bshadow0 pbs">
<span class="i-eye"></span>
<span class="mls"> i-eye</span>
Expand All @@ -83,7 +117,7 @@ <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs1">
<div class="glyph fs3">
<div class="clearfix bshadow0 pbs">
<span class="i-speed"></span>
<span class="mls"> i-speed</span>
Expand All @@ -97,7 +131,7 @@ <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs1">
<div class="glyph fs3">
<div class="clearfix bshadow0 pbs">
<span class="i-expand"></span>
<span class="mls"> i-expand</span>
Expand All @@ -111,7 +145,7 @@ <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs1">
<div class="glyph fs3">
<div class="clearfix bshadow0 pbs">
<span class="i-power"></span>
<span class="mls"> i-power</span>
Expand All @@ -125,7 +159,7 @@ <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs1">
<div class="glyph fs3">
<div class="clearfix bshadow0 pbs">
<span class="i-settings"></span>
<span class="mls"> i-settings</span>
Expand All @@ -139,7 +173,7 @@ <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs1">
<div class="glyph fs3">
<div class="clearfix bshadow0 pbs">
<span class="i-playlist"></span>
<span class="mls"> i-playlist</span>
Expand All @@ -153,7 +187,7 @@ <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs1">
<div class="glyph fs3">
<div class="clearfix bshadow0 pbs">
<span class="i-night"></span>
<span class="mls"> i-night</span>
Expand All @@ -167,7 +201,7 @@ <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs1">
<div class="glyph fs3">
<div class="clearfix bshadow0 pbs">
<span class="i-cancel"></span>
<span class="mls"> i-cancel</span>
Expand All @@ -181,7 +215,7 @@ <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs1">
<div class="glyph fs3">
<div class="clearfix bshadow0 pbs">
<span class="i-sync"></span>
<span class="mls"> i-sync</span>
Expand All @@ -195,7 +229,7 @@ <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs1">
<div class="glyph fs3">
<div class="clearfix bshadow0 pbs">
<span class="i-confirm"></span>
<span class="mls"> i-confirm</span>
Expand All @@ -209,7 +243,7 @@ <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs1">
<div class="glyph fs3">
<div class="clearfix bshadow0 pbs">
<span class="i-brightness"></span>
<span class="mls"> i-brightness</span>
Expand All @@ -223,7 +257,7 @@ <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs1">
<div class="glyph fs3">
<div class="clearfix bshadow0 pbs">
<span class="i-nodes"></span>
<span class="mls"> i-nodes</span>
Expand All @@ -237,7 +271,7 @@ <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs1">
<div class="glyph fs3">
<div class="clearfix bshadow0 pbs">
<span class="i-add"></span>
<span class="mls"> i-add</span>
Expand All @@ -251,7 +285,7 @@ <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs1">
<div class="glyph fs3">
<div class="clearfix bshadow0 pbs">
<span class="i-edit"></span>
<span class="mls"> i-edit</span>
Expand All @@ -265,7 +299,7 @@ <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs1">
<div class="glyph fs3">
<div class="clearfix bshadow0 pbs">
<span class="i-intensity"></span>
<span class="mls"> i-intensity</span>
Expand All @@ -279,7 +313,7 @@ <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs1">
<div class="glyph fs3">
<div class="clearfix bshadow0 pbs">
<span class="i-star"></span>
<span class="mls"> i-star</span>
Expand All @@ -293,7 +327,7 @@ <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs1">
<div class="glyph fs3">
<div class="clearfix bshadow0 pbs">
<span class="i-info"></span>
<span class="mls"> i-info</span>
Expand All @@ -307,7 +341,7 @@ <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs1">
<div class="glyph fs3">
<div class="clearfix bshadow0 pbs">
<span class="i-del"></span>
<span class="mls"> i-del</span>
Expand All @@ -321,7 +355,7 @@ <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs1">
<div class="glyph fs3">
<div class="clearfix bshadow0 pbs">
<span class="i-presets"></span>
<span class="mls"> i-presets</span>
Expand Down
Loading
Loading