SVG icons wanted for LuCI

Hi,

I would like to replace the aged LuCI icons with modern SVG versions in order to have sharper graphics on higher resolution screens and to be able to better blend in the icons with light and dark color palettes.

Can anyone suggest Apache license compatible icons which would be a good fit or is there maybe someone with a little bit of SVG drawing talent willing to create new icons?

These are the icons I want to replace:

port_down Wired ethernet port, disconnected

port_up Wired ethernet port, connected

ethernet Simple ethernet interface (e.g. eth0)

alias Alias interface (e.g. @wan)

bridge Bridge interface (e.g. br-lan)

switch Switch port / VLAN interface (e.g. lan1 or eth0.100)

tunnel Tunnel interface (e.g. tap0, wg0, pppoe-wan)

wifi Wireless interface

signal-none No Signal (disabled/error)

signal-0 No signal (but enabled)

signal-0-25 Signal < 25%

signal-25-50 Signal < 50%

signal-50-75 Signal < 75%

signal-75-100 Very good signal

4 Likes

I can draw few of them... do you have an vector original images of them OR some high resolution?

I think using https://materialdesignicons.com/ would be your best option. They have covered a number of use cases (e.g. Home Assistant uses this icon set extensively), and can easily combine/overlay multiple elements to indicate various things.

A few examples:

Signal icons are unfortunately 3-stage instead of 4, so I'm not sure if it can be used properly.

But the best part is, you can create subset fonts easily, even via a REST API, so it could be easily incorporated into the build system, without taking up too much space, and even luci plugins could call into the existing font, similar to how HA does it (e.g. in Home Assistant you can tell the system to use mdi:light as an icon, the same could be done with LuCI, and the user/theme could replace the font with different variants or alternatives without breaking things). Plus it also has plethora of device icons, which could be useful for more detailed network client analysis, similar to how Unifi can display different icons/images for devices.

1 Like

Hi @peternikolow - thanks for the offer. Unfortunately I don't have access to the high res originals anymore, some of these icons also were manually created by cutting and pasting bits together, then manually downscaling and optimizing the color palette to achieve the smallest possible file size. Afair the icons were based on a Gnome network manager icon theme, but I forgot which one.

@fonix232 - good idea. Although I was thinking about multi colored icons as standalone .svg files. But given the flexibility, I maybe should revisit the icon font approach and do a quick mockup on how monochrome line-art icons would look like compared to the current ones...

If you use layered/combined icons with tint, you can add a "splash" of colour to the icons, while also allowing the theme to define its own - e.g. the new OpenWrt2020 theme could tint the base Ethernet port icon blue, and a small dot on it could indicate status (gray - unplugged, orange - 100M, green - 1000M, blue - 2.5Gbps, etc.). Same goes for wireless, you can use the base disabled in gray, and add the cross-out (which is already present on the base icon) in red, to make it more prominent. You can do a lot with font based icons that make the approach more dynamic, and most icon font sets support multiple layers for tinting purposes.

I know it's not quite the solution you're looking for, but as a stopgap in the CSS doing

body {
  image-rendering: pixelated;
}

makes all the existing icons look fantastic on high-dpi displays.

1 Like