Consider using colorful rather than monochrome icons for small places, devices, and mimetype icons
Open, WishlistPublic

Description

Right now, Breeze switches to monochrome line-art icons for small-sized places, devices, and mimetype icons.

I have a confession to make: I don't think they look good. I think they're kind of crude-looking, they don't actually look like documents or files at all, and they look jarringly different next to colorful app icons or preview thumbnails or anything else that's not monochrome at a small size, and even compared to their own larger sizes.

Here's Dolphin's appearance with small icons in a list. Compare the appearance when the places, devices, and mimetype icons are colorful rather than monochrome line-art:


Wow, document icons that actually look like document icons!

This was accomplished by deleting the 16* and 22* folders from the places, devices, and mimetype folders in the Breeze icon theme. Note that this is the crudest possible way to do it and the above image should be considered a mockup, nothing more.

I think the monochrome icons look great for actions, but for files and folders, I'm just not feeling it. Let's explore the idea of using scaled-down colorful icons for places, devices, and mimetype icons. Some of them would probably need some tweaking to ensure legibility at smaller sizes--specially the Places icons, which right now become a bit of a muddy soup; see the Places panel in the above screenshot. That doesn't seem like an insurmountable challenge, and henceforth icon creators wouldn't have to create two different styles for each new places, devices, and mimetype icon.

ngraham created this task.Apr 30 2019, 8:09 PM
ngraham triaged this task as Wishlist priority.
ndavis added a subscriber: ndavis.May 1 2019, 12:17 AM

I somewhat agree that it looks better, but this might increase the difficulty of making new mimetype icons significantly. If we were allowed to have no margins on 16 and 22 px color icons like with the emblems, then it would be easier. In order to avoid restricting the horizontal space for the inner symbols we already had, we'd need to make the icons kind of like this:

16px:

22px:

Those 22px versions look totally fine, I say. But I see what you mean for the 16px versions. Maybe we could permit those to be widened by an extra pixel on each side. But is it really impossible to fit stuff into that existing size? For the C++ one for example, perhaps the plus signs could actually be inside the C instead of above and to the right. For the other one, maybe the internal frame around those lines could be dropped.

ndavis added a comment.EditedMay 1 2019, 2:28 AM

Those 22px versions look totally fine, I say. But I see what you mean for the 16px versions. Maybe we could permit those to be widened by an extra pixel on each side. But is it really impossible to fit stuff into that existing size? For the C++ one for example, perhaps the plus signs could actually be inside the C instead of above and to the right. For the other one, maybe the internal frame around those lines could be dropped.

I suppose all of the existing 16px mimetype icons could be remade at least 1px smaller in order to make them fit. Some of them may even benefit from being redone since they aren't all made to line up with the pixel grid. It would be a lot more work than just inserting a background and recoloring them though. The latter can be done on all of them at once with a script or opening them up in a text editor.

Ah, I see what you mean, yeah. If a lot of the existing ones aren't even made to align to the pixel grid , I think that's even more reason to move away from the style. Line-art not aligned to the grid seems pretty pointless.

Maybe the larger versions could be scaled down with a script and then just individually tweaked?

ndavis added a comment.May 1 2019, 3:04 AM

Ah, I see what you mean, yeah. If a lot of the existing ones aren't even made to align to the pixel grid , I think that's even more reason to move away from the style. Line-art not aligned to the grid seems pretty pointless.

Maybe the larger versions could be scaled down with a script and then just individually tweaked?

Excluding the inner symbols, the 32px ones could be scaled down since most of them already use the 16px icons as their inner symbols (actually 12px when not counting the margins). Most of the inner symbols on the 32px icons line up with the grid, but they use 22px icons (16px without margins) when the 16px versions didn't line up to the pixel grid. See application-pgp-signature and application-vnd.ms-infopath as examples.

Yeah, it would definitely require some work. But I think the results would be worth it. Maybe a good task for the Usability & Productivity sprint if close coordination with others would be useful?

ndavis added a comment.EditedMay 3 2019, 4:56 AM

Yeah, it would definitely require some work. But I think the results would be worth it. Maybe a good task for the Usability & Productivity sprint if close coordination with others would be useful?

I don't think it would be particularly useful, but I suppose the load could be split between multiple people. The largest reservation I have about doing this change is whether or not other people will agree with this change. It's a major change in style for frequently used icons. Some applications probably use mimetype icons as action icons, which is inappropriate, but it'll be something that users notice. Breeze is a very unique theme and we are making it more and more difficulty to keep a consistent look for 1st and 3rd party applications. In order to fully embrace the direction we've been going in, we need to hack around the problem or change the XDG icon spec to handle our needs.

mglb added a subscriber: mglb.May 3 2019, 10:43 AM

Is it possible (without hacks or per-application changes) to make icons colorful in a view and monochrome in a panel?

Icons with limited horizontal space are less readable than current symbolic ones. I think using square generic mime icon + current monochrome icon would be nice compromise, with possibility to automate some (most?) work:


I prefer monochrome icons... again as I've been in favour of monochrome icons for system settings too, where I listed few benefits. This time I can only speak for my personal preference, current variant is clearer for me.

Just making sure, all sidebar (F9) icons would stay monochrome?

ndavis added a comment.Jun 6 2019, 7:10 PM

I prefer monochrome icons... again as I've been in favour of monochrome icons for system settings too, where I listed few benefits. This time I can only speak for my personal preference, current variant is clearer for me.

Just making sure, all sidebar (F9) icons would stay monochrome?

I personally like the sidebar icons as they are, so most likely.

Yeah, the monochrome icons in the Places Panel are fine.

alex-l added a subscriber: alex-l.EditedJun 9 2019, 8:39 AM

At 16x16 the symbol could be removed and just show the document frame (I thought about this when I insisted to associate a color with mostly each mimetype).
Anyway consider that any change to mimetype icons imply a lot of work.

Edit: here there is an old mockup I made:

mglb added a comment.Jun 15 2019, 11:00 AM

Anyway consider that any change to mimetype icons imply a lot of work.

Scripting! <3 At least with some designs, like yours or mine

In T10870#188954, @mglb wrote:

Anyway consider that any change to mimetype icons imply a lot of work.

Scripting! <3 At least with some designs, like yours or mine

I don't think it's possible, each MIME type icon is the result of manual refinement and the content of the SVG file is not structured...

ndavis added a comment.EditedJun 18 2019, 6:44 PM

About 190 files would need to be changed for 16px and 22px for a total of about 380, but most of it is just very repetitive (Add background, move symbol down a bit) and at least we don't need to worry about stylesheets. If I cleaned and autoformatted all of the SVGs, I could script a lot of the background changes, but I think I'd need to manually move the symbols.

itsjustarumour added a subscriber: itsjustarumour.EditedAug 3 2019, 11:34 PM

I prefer monochrome icons... again as I've been in favour of monochrome icons for system settings too, where I listed few benefits. This time I can only speak for my personal preference, current variant is clearer for me.

Just making sure, all sidebar (F9) icons would stay monochrome?

I also prefer the monochrome icons, especially in the Dolphin sidebar. IMHO, smaller colourful icons don't work great, and were one of the areas where icon themes like Faenza (I used to be a GNOME user) fell down - in particular, in a file manager colour sidebar icons for music folder, pictures folder, downloads folder etc. tend to end up looking very "scrunched up" and hard to decipher, due to an inevitable attempt to squeeze too much graphical detail into too small a space on the icon. The simpler, monochrome icons avoid this problem I think. Just my two cents...

Hi everyone! I'm new here (though I have been lurking around the KDE Forums for a while). I just noticed this task and thought I'd add a comment. I completely agree with what is suggested here. I find the version with colorful icons much easier to parse, navigate and use. Not to mention it looks more uniform and coherent. I usually find color helps very much with quickly locating things, especially when they are small. The uniform shapes also helps icons work better together with the text. Either way, thanks for all your hard work on KDE! I'm really happy this amazing DE exists!

In my opinion it's not really a good idea. Look at "places" for example, each folder looks like a small blue square and is much less recognizable than a monochrome symbol. This will be even worse for smaller screens and screens with low resolutions. For files there is another problem: some of them have similar colors (.h and .xml, binary and .iso or .sh, and so on) which will result in worse recognizability again. Also, some line-art icons look reasonably better on smaller scales (look at cmake file on that screenshot) and leaving it as it is will make it inconsistent with other icons (unless we want to redraw all small icons which is a lot of icons). Anyway, this is just my opinion and see some people here have the opposite one.

I am loving the line-art iconography because my opinion of the colourful iconography is that it is significantly ugly. The ugliness has forced me to configure "kcm_icons" to utilise 16-pixel iconography for all that it is able to control, which is not ideal, but adequate, so please do not modify them more. Colourful iconography is not ideal for any resolution, but this is solely, and significantly, obvious during utilisation of it for small resolutions. Additionally, I am agreeing with all that has been stated by @itsjustarumour and @trapped-in-dreams.