luci wireless overview pixelated overview icons

[olumolu]

Is there an existing issue for this?

• I have searched among all existing issues (including closed issues)

screenshots or captures

Actual behaviour

Signal icons are not crisp and clear rather extremely hazy. The issue i found out that luci use the signal level as png icons
Like
75% signal
signal-75-100.png
For 50% signal it will be
signal-50-100.png
And png images are not vector in nature hence if you use a large monitor you will see this images pixelated
And if you add icons larger sized then the total image firmware will be larger

Expected behaviour

How much you zoom or open in a big sceeen the icons should stay clear.

solution

Use .svg vector icons which will be even smaller than the png images but due to the nature of vector it can be easily zoomed in or out without pixelated icons

Steps to reproduce

Network-> wireless

Signal levels

Additional Information

Not required

What browsers do you see the problem on?

Firefox, Chrome, Safari, Microsoft Edge

Relevant log output

[stokito]

It may be not so easy to find good SVG icons with a compatible license (ISC, BSD, MIT, Apache 2, WTFPL, Unlicense). If you can collect a list of candidates for replacement that would be nice. Maybe you can find them in other projects or re-draw from PNG. They also needs to be adopted for light and dark themes.

The LUCI itself already have a few e.g. Wi-Fi:
https://github.com/openwrt/luci/blob/master/modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/icons/wireless.svg

It can be taken as a base.

[olumolu]

I can redraw some of them so images can be slowly be replaced with .svg.

[systemcrash]

The iconography hasn't been touched in more than 10 years. It wouldn't be a bad idea to throw this request open to the forums and see if there are some designers who want to see their icons in here for the next decade.

[olumolu]

Sure that is a good approach. Actially having png as icons in 2025 is not sounds right.

[olumolu]

svg of that png
https://github.com/openwrt/luci/blob/master/modules/luci-base/htdocs/luci-static/resources/icons/signal-0.png

[stokito]

The topic already exists on the forum
https://forum.openwrt.org/t/svg-icons-wanted-for-luci/112325

[olumolu]

https://github.com/lessload/openwrt-icon-minimal/tree/main
someone already made this svg we can switch to this new sets of icons

[castillofrancodamian]

@olumolu In my opinion, monochrome icons are not good.

[olumolu]

If you add color to the SVG, it will increase the size of the icons. I have tested this, but I don't know how to adjust it.

[skramstad]

I like Heroicons, but they don't have everything either. I'm a Tailwind dude, so I prefer the way I can control icons with just simple code, stroke-width, color etc...

I also like SVG symbol instead of font, sprite etc... but that's my preference :)

But my favorite icon library is https://nucleoapp.com/ and with the app for exporting etc, makes things very easy.

They do support open source:

"Can I include the icons in open source projects?

If you’re using the Nucleo icons in open source projects, you can include up to 100 icons in the downloadable source files. This limitation applies to the icon fonts as well.

The downloadable source file has to include the [Nucleo copyright notice](https://nucleoapp.com/copyright-notice)."

I have an Nucleo license. So if we could use mine and 100 icons (and that's okay with Nucleo). Just let me know. I can ask Nucleo.

Just a thought!

[stokito]

PR #7647