Toolbar Icon Scaling & Future Icon Sets

[WildByDesign]

@derceg I have been thinking recently about contributing more icon work into Explorer++. But the problem is my daily driver system has a DPI scaling of 125% which does not go well with Explorer++ toolbar icon scaling. So it's difficult for me to proceed with icon work since I can't visualize the true sharpness.

Quite often, I use your comment from (https://github.com/derceg/explorerplusplus/commit/f4b80d03db82195eb4732b2cc5dee2a116e83cd1) as reference:

Add 32x32 and 48x48 icons
This means that the 16x16 icons should display cleanly at the following
DPI scaling factors:

- 100%
- 150%
- 200%
- 300%

At other scaling factors, the icons will be shrunk/stretched as
appropriate.

Additionally, the 24x24 icons (currently only used on the main toolbar)
should display cleanly at the following DPI scaling factors:

- 100%
- 133%
- 200%

Your comments are always detailed and great, by the way.

So I tried switching Windows scaling to 133% and the toolbar icons looked sharp and nice. However, 99% of Windows (all Start menu icons, system tray icons, etc.) looked like garbage.

From Microsoft (https://learn.microsoft.com/en-us/windows/apps/design/style/iconography/app-icon-construction) it is suggested that 125% scaling would require 20px icons (or possibly 40px scaled down).

• Would it make sense in Explorer++ to add support for 20px and 40px toolbar icons?

• Or would there be a possibility of switching toolbar icons to support SVG? (I believe LibreOffice has this implemented)

So before I really dig into more toolbar icon work or updates, I was wondering if you could help clarify by answering those two questions.

Thank you for your time.

[derceg]

It would be good to have more icon sets or improvements to the current sets, so I definitely appreciate any work you do here.

Or would there be a possibility of switching toolbar icons to support SVG?

I would much prefer to have gone with SVG from the start. There were 2 reasons I didn't:

1. I don't think icons8 allows use of SVGs on the free plan. Checking again now, https://intercom.help/icons8-7fb7577e8170/en/articles/4725631-do-you-have-free-icons-in-svg lists 3 categories that have free SVG icons. It's possible the icons I used in Explorer++ are present in the popular category, so SVG use may be ok. https://icons8.com/license also indicates that open source projects can use the graphics for free, though I'd probably have to contact them to check if that includes SVGs.
2. I wasn't sure there was any easy way of actually loading and displaying SVGs. I think that's a less significant issue, since there's probably a Microsoft API or library that can do it.

Ultimately, I'd really like to switch to SVG, since the current system was painful to set up and is painful to maintain. Part of the reason I haven't added any more icons is that sourcing 4 specific icon sizes across 3 different icon sets is pretty tedious.

[WildByDesign]

Thank you for your response and for all of the work that you do with Explorer++.

Ultimately, I'd really like to switch to SVG, since the current system was painful to set up and is painful to maintain. Part of the reason I haven't added any more icons is that sourcing 4 specific icon sizes across 3 different icon sets is pretty tedious.

I would imagine that once implemented, SVG would definitely be easier to maintain. Binary size would shrink considerably as well, I assume.

I have been excited to jump back in and do a complete refresh of the Fluent UI icons. The only problem is that it's difficult to get motivated to begin since my own system (125% scale) cannot make use of any efforts for updating the current icons.

On the current Dev builds of Explorer++ (I always use Dev builds) I find that whether I use 125% scaling or 133% scaling, the toolbar buttons are always using the 36 pixel icons and scaling them for use with Large toolbar button setting.

• Is that correct? Should it be using the 36 pixel icons for large toolbar buttons at 125% and 133% scaling?

• Is there are quick and dirty method, in my own builds, to force Explorer++ to use 20 pixel icons and not scale at all?

I have tried placing 20 pixel icons into my builds but they still get force-scaled anyway. I was hoping for a quick method (in my own builds) to disable icon scaling. But if this is too much effort and too difficult, please let me know because I absolutely do not want to waste your time.

Thank you.

[derceg]

Is that correct? Should it be using the 36 pixel icons for large toolbar buttons at 125% and 133% scaling?

Icon sizes aren't dynamically checked. They're stored as constants here. The toolbar asks for 24px icons when the large toolbar icons setting is enabled. At 125% scaling, that would be 30px. At 133% scaling, that would be 32px. Since the hardcoded sizes are 16px, 24px, 32px and 48px and scaling down is preferred, the 32px icons would be used in both cases. So, assuming that the 36px icon is placed in the 32px icon set, that's what would be used in both cases.

Is there are quick and dirty method, in my own builds, to force Explorer++ to use 20 pixel icons and not scale at all?

If you're using small toolbar icons at 125% scaling, then 20px icons would be requested. If you change this line of code from:

{ 24, BaseResourceId##_24 }, \

to

{ 20, BaseResourceId##_24 }, \

then the icons in that set will be treated as 20px. Icons that are actually 24px will be clipped, but any icons that are 20px will display correctly.

[derceg]

Also, on the subject of SVG, I have spent a bit more time looking into it:

• It looks like LunaSVG would be at least one library that could be used to load and display SVGs. In https://github.com/sammycage/lunasvg/issues/82, someone describes using LunaSVG to load and display an SVG in a Win32 app, which is exactly what would be needed.
• From checking a few more icons that are being used from icons8, they're not all under the popular category. For example, this split files icon is being used, but it's not in the popular category and the SVG isn't freely available.
• I've sent a message to icons8, asking them whether there's a way to use SVG icons in an open source project.

If icons8 indicate that the SVGs can be used, switching to SVGs might be the best option and it means you wouldn't have to duplicate your work - first to find icons of specific sizes, then to replace them with SVGs.

[derceg]

Icons8 got back to me and said they offer a 20% discount to open source projects, which I don't really think is going to work. Even if I paid, their license talks about not distributing licensed materials as stand-alone files and I'm not sure how that would work if the code is open source.

@WildByDesign Do you know of any other free icon packs? Out of the current icon sets, I personally prefer the color icons, so if there's another icon pack out there that has similar icons and offers free SVGs, I could potentially switch.

[WildByDesign]

Icon sizes aren't dynamically checked. They're stored as constants here. The toolbar asks for 24px icons when the large toolbar icons setting is enabled. At 125% scaling, that would be 30px. At 133% scaling, that would be 32px. Since the hardcoded sizes are 16px, 24px, 32px and 48px and scaling down is preferred, the 32px icons would be used in both cases. So, assuming that the 36px icon is placed in the 32px icon set, that's what would be used in both cases.

Thank you. This really helped clarify things for me. I was having a lot of trouble wrapping my mind around the mathematics involved in DPI and quite honestly I was stuck. My original attempt a few days prior failed because I was trying to use 20px for large toolbar, but as you stated I should have been using 30px for large and 20px for small.

Here is what I have changed now after you helping me to understand it better:

    { 20, BaseResourceId##_24 }, \
    { 30, BaseResourceId##_32 }, \

This seems to be working correctly for me now at 125% scaling with 20px icons for small toolbar and 30px icons for large toolbar and they are no longer scaling which is great. Everything is looking sharp now, so I really appreciate that.

Do you know of any other free icon packs? Out of the current icon sets, I personally prefer the color icons, so if there's another icon pack out there that has similar icons and offers free SVGs, I could potentially switch.

I did some quick searching this morning. I decided that it would be best to start with open source projects. I started with LibreOffice and checked their drop-down menu selection of icon sets that provide SVG icons. Now, LibreOffice has a huge amount of icons but it's very likely that we could still be missing a few icons to complete a set for Explorer++.

So I dug deeper. Many of those LibreOffice icon sets have much deeper roots in Linux. Some of them from KDE, some from Gnome. Many of them extend further into open source file managers on Linux such as Krusader, Konquerer, etc. When I got to the root of these icon sets, they would likely have everything covered for what Explorer++ needs and they are open source and provided in SVG format almost exclusively. Licenses ranged from GPL3, GPL2, to MIT.

If this is something that you seriously want to consider, I am absolutely willing to help. I am not a programmer though. But I can help with the sourcing of icon sets.

[WildByDesign]

I forgot to mention that PowerToys also has a built-in SVG preview pane handler and SVG thumbnail provider (https://github.com/microsoft/PowerToys/tree/main/src/modules/previewpane). I am not sure if those use an open source library that can be used with Explorer++ for rendering toolbar icons or not, but it might be worth looking at.

[WildByDesign]

This should have been obvious to me, but Chrome and Edge also load their toolbar icons directly from SVG. That might be a good place to look to see how Chromium achieves that and through which SVG library and so on. Whatever method Chromium uses, their toolbar icons seem to scale better and smoother in comparison to LibreOffice implementation of SVG.

I have been spending some time researching the availability of different icon sets that are in SVG and open source. Specifically, I've been digging into the Breeze icon set and Elementary icon set since they have a plethora of different icons. Breeze is more similar to Fluent UI, while Elementary is a beautiful colored icon set which you might like since you prefer color.

[Shakil-Shahadat]

There are a ton of open-source and free svg icons available out there. Like Bootstrap Icons, Heroicons, Font Awesome etc. There are more here.

If you can provide a list of icons you need, I can help you find those icons.