Replace or augment existing database icons

[droidmonkey]

Can we find adequate replacements for the entry and group icons as well? That used to be the blocker in my previous attempts at doing this. They are extremely low-resolution and its an enormous amount of work to find alternatives.
Originally posted by @phoerious in #122 (comment)

The current set of default database icons are 16x16 pixels and from a bygone era of computing. We should offer our users a modern set of equivalent icons, at their choice. This can be controlled from within the application settings or within the settings of each individual database.

Existing databases would reference the existing icon set until the user decided to change it. New databases will reference the new icon set by default.

[droidmonkey]

@phoerious That would be great. The default icons for groups/entries (share/icons/database in the source code) are ancient, hideous, unintellegible, and 16x16 only, and really should be redesigned. I see some possible issues however:

First, users consider these icons part of their database, and it could be off-putting for them if a new KeePassXC release suddenly made everything look different. Not all of our users are IT experts who are tolerant about such changes.

Second, our redesign could mess up people's use of the icons because the redesign would be based on the "semantic" meaning of the icons, but people may have used them "literally" based on their current graphical appearance. For example, there's the C33_Run.png icon that's supposed to resemble a start flag, however I'm using it for games because it also happens to resemble a chess board. C59_Package_Development.png looks like a hammer and C34_Configure.png looks like a wrench; what would break if we changed them into something completely different, e. g. a box and cogwheel?

Third, people use different KeePass clients across platforms (e. g. KeePassXC on macOS and Strongbox on iOS) and may expect icons to look identical (or at least similar enough be be recognizable) on all of them.

AFAIK all of these clients are open source and under active development, and I suppose their maintainers are as annoyed by the icons as we are. Maybe we can try and find a solution together with the others, so at least we maintain some consistency across clients.

Finally, custom icons (e. g. downloaded favicons) don't look too nice next to icons that follow other styles like Material Design. Have a look at this screenshot of KeePassium, a KeePass client for iOS that already uses redesigned default icons:

It's not too bad in this case because this database consistently uses default icons for groups and favicons for entries, but it looks totally messy if they are used in a mix.

For these reasons, I think that redesigning the default icons should go into an issue of its own where we can discuss the solution in detail. IMHO it's independent of the ongoing redesign of the application icons (#475, #4066, #122) which is entirely a question of our own UI design.

If you agree, I'll create a new issue for the default icon redesign and jot down some ideas there.

Originally posted by @wolframroesler in #122 (comment)

[phoerious]

Worst case we need to pull a higher-res copy of Nuvola, but I am all for replacing it with something that actually looks good.

[droidmonkey]

This resource looks perfect, we can cull the icons that are needed to do a 1-for-1 replacement while also adding to the default list where necessary:

https://icons8.com/icons/color

They offer a no-strings-attached open source license:
https://icons8.com/license

[wolframroesler]

icons8 is amazing, the sheer amount of icons to choose from is totally overwhelming. Many icons come in lots of variations which would make it possible to offer various style sets to the user (as suggested by @droidmonkey above).

Unfortunately, the SVG versions of many of the icons on icons8.com are available to paying customers only, and it's not immediately obvious from the search results which are free, nor have I found a way to restrict search to free icons -- there's https://icons8.com/icons/pack/free-icons but it doesn't contain all the icons to cover our needs. They say "Established open source projects could get the icons for free" (where "established" means that it has a Wikipedia page) with additional details on https://icons8.com/articles/we-contributed-icon-to-imageoptim/; I'll contact them and see what they say.

Of course we should go for SVG instead of PNG to become resolution-independent, just as in #475.

[droidmonkey]

I am going to apply for an Open Source license so we can access the SVG versions. Although for the purposes of the database icons they can be PNG of 150x150 px since that is equivalent to what we do with downloaded favicons.

Looking at their website I noticed that they support adding emblems to icons. I think this would be a good idea (emblems) to indicate entries that have warnings are errors associated with them. (separate issue)

Ref: https://icons8.com/articles/we-contributed-icon-to-imageoptim/

[wolframroesler]

I downloaded a handful of 100x100 PNGs from icon8 to see what it looks like in the demo database. LOL, seems like the PNGs are expected to be a certain size, look at this mess:

Haven't dug into the source code yet. Does anyone have a quick idea where/how to fix the icon sizes?

Anyway, the names of the icon8 icons I used are:

• icons8-folder-100.png
• icons8-globe-earth-100.png
• icons8-monitor-100.png
• icons8-remove-100.png
• icons8-us-dollar-100.png
• icons8-user-male-100.png

[droidmonkey]

For reference, we want to use full-color icons for the database icon set. Preferably pastel style / non-loud colors.

The whole handling of icons around the app needs to be addressed. It is likely that a width/height needs to be added to the QPixmap that loads the database icons to scale them down.

[wolframroesler]

Full color is reasonable, matches favicons better and is a welcome contrast to the application icons in Material Design (#475). Picking consistent icons will be a challenge because of the huge amount of icons available on icon8; OTOH we'll find all we need there, and in abundance.

Also, we mustn't forget to credit them properly (cf. https://icons8.com/license).

Figured out the icon size thing. We need DatabaseIcons::iconScaledPixmap which so far was considered unneeded since all database icons were 16x16 anyway (as described explicitly in comments). Adding width/height parameters to this function is trivial (16x16 is hard-coded in the function now, just as in Metadata::customIconScaledPixmap).

Looks much better now:

[droidmonkey]

We should allow for a setting to increase the size of the icons (perhaps in steps of 8px, 16x16, 24x24, 32x32)

[phoerious]

That looks so much better already.
Can we get svgs from Icons8? If not, we have to add multiple resolutions, because scaling them down in Qt is a bad idea.

[wolframroesler]

SVGs from icons8 require a commercial license. Open source projects can get them for free, @droidmonkey said he wanted to apply for a license. I consider the PNGs I did so far experimental and temporary, will replace them by SVGs when they are available.

[wolframroesler]

BTW what's the problem with scaling icons in Qt? Doesn't look too bad on my system. Or is it a performance issue?

[phoerious]

The results depend a lot on the scaling algorithms. Bicubic is pretty good, but properly rendering the correct resolution from vector line art is usually better.

[wolframroesler]

We should allow for a setting to increase the size of the icons (perhaps in steps of 8px, 16x16, 24x24, 32x32)

Maybe we can support Ctrl-+/-/0 for zooming, just like the web browsers do (Cmd-+/-/0 on macOS). Would increase/decrease font and icon sizes in the group tree, entry list, and entry preview panel. Hiding a size selection in app settings with no immediate visual feedback would be so 20th century. But that should go into another issue.

In the icon selection dialog (in the group and entry editors) the icons should be bigger than 16x16, either a fixed size (32x32 should be enough I think) or also zoomable with Ctrl-+/-/0. Without checking the code I guess that simply increasing the size should be fairly easy.

[wolframroesler]

Will continue working on this issue after @phoerious has finished theming (#4110), since that may affect how icons are stored and used in the source code.

@droidmonkey did you manage to obtain the Open Source license for icon8 so that we can use the SVG versions of their icons?

[droidmonkey]

Yes, we need to identify which icons we are going to use and they will provide us access.

[wolframroesler]

Pull request submitted (#4699).

BTW, if there's trouble with Icon8 making the SVGs freely available, the 150x150 PNGs are free and don't look too bad either.

[pigsflew]

Why not use Google's material design icons directly? They're all available under Apache 2.0 and available from the linked website as SVG.

I've already pulled a bunch of them to set as my icons as external ones, and they look like this:

[phoerious]

We want coloured icons that are easy to distinguish from the main UI and that go well together with coloured favicons.

[grenzor]

The new icons look nice. Can icons be added for the Copy Attribute and TOTP entry right-click menu/sub-menu items? I think doing that would make all menu items have icons.