Vscode-icons: Consistent look and feel of icons

[rogeralsing]

First of all, love the addin itself.

But some rant, the current look and feel of the icons is very inconsistent.
For example, check the width of the Markdown files there compared to Json and C#

F# and Git has similar icons, yet they are different sizes.

They styles also vary, C# is just text. some are flat documents, and License is an attempt of semi realistic keys.
It looks as if they were all collected from different places.

[robertohuertasm]

The vast majority of the icons was taken from a Sublime Text extension and they already had this kind of inconsistency. It's not an excuse, just a fact. I agree with you but I'm not a designer myself and I don't have the time to elaborate cool icons so if any designer is reading this, know that you will be very welcome if you want to show your work in this extension.

I already put this message in the readme:

If you're a designer and you're willing to collaborate by showing your icons to the world you're more than welcome!!

Anyway, you also have the option to use your own custom icons if you want.

I understand your point and I agree with you but I can't promise you a quick fix for that. 😞

Reference: #30

[jens1o]

What's the size we actually need? I have a few graphics skills.

[robertohuertasm]

@jens1o the size of the icons is 32x32. First step would be to take all the icons and apply the same margins to all of them. They're all 32x32 but some of them have more margin than others.

Second step would be to review current icons and look for graphical consistency. The majority honors their logo, so these are good but there are some of them with no logo so text is used instead.

Let me know what do you think :wink:

[SamHurne]

I might take a stab at this myself as well. I'm no graphic designer, but I know my way around some tools.

[milkshakeuk]

Is there any reason that some icons couldn't be taken from visual studio images i.e. the closed and open folder icons, cs files etc

[robertohuertasm]

@milkshakeuk no particular reason at all. The closed and open folder icons are the ones shipped with VSCode. They already have some icons and have somehow the scaffolding of future icon functionality so that's why I kept them.

[TheColorRed]

Not sure how possible it is, but I feel the icons should be vector images so they scale nicely when resized, and won't become blurred.

[jens1o]

@TheColorRed It is possible. For example the folder Icons are currently in svg.

[jsynowiec]

Similar Atom extension DanBrooker/file-icons has some consistent and good looking icons. Maybe use those?

[spywhere]

What about wyze/atom-seti-icons?

And mrmartineau/SetiUI-Icons-Sublime should have a similar file structure for the same icon set.

[robertohuertasm]

@spywhere this was the set I'm currently using as a base

[mysticman]

Hi Roberto,

if you need some help with the icons graphic, just let me know. I see there is some new icons request in the queue but I don't know those are on going or not started yet?

[robertohuertasm]

Hi Emil, choose whatever you want. I'm focused on tab icons at the moment. :wink:

[olzaragoza]

I created a table from supportedExtensions.js to be able to see all of the icons before starting any work on consistency/feel. I can't seem to find which icon is used for postcss('pcss', 'postcss') in icons.zip even though it's showing up in vscode.

[robertohuertasm]

@olzaragoza great work and idea. I've also published the icons folder to github in the master branch. I would like to include your table list but I would like to do it by leveraging the build process in vscode-icons. The idea is that when running npm run build the table is automatically regenerated. :+1:

[robertohuertasm]

Microsoft is planning to create an official base extensions with its own designed icons so maybe we should wait to see what they got and reuse their icons or create a more fancy way to change the icon sets by using some sort of command.

[robertohuertasm]

@olzaragoza the icons.zip in the repo was outdated. I've also uploaded the correct one.

[olzaragoza]

@robertohuertasm Yeah, the table was just an idea. I'm still going through the code trying to better understand the build process and how to include it in the build. With an official icon release planned, it might only be for my personal understanding if things get changed drastically. I'm holding off on any icon work for now.

[jens1o]

short update for everybody watching here for conventions. Please look in the readme.

[jens1o]

I was looking for untransparent icons, I found this one:
https://github.com/robertohuertasm/vscode-icons/blob/master/icons/[email protected]

Can I replace the white with nothing, so it's transparent?

[mysticman]

Sure you can resolve the white, but I can do it and redraw some of the parts if needed tomorrow morning.

[jens1o]

Feel free to do that ;)

[mysticman]

Hi,

that is the best what I could do. The text is so small but I think it's ok for this icon. I think it's worth a replace for this transparent one.

[jens1o]

Do you have a good idea for a new icon?

[robertohuertasm]

I think this one is ok.

[mysticman]

This is another sample, like Adobe using it's own products. The Adobe has got a good brand guide and very consistent it's worth to follow those logo designs. I provide 2 samples and pick one.

[mysticman]

By the way. Make a consistent look and feel is quite hard for this project because every logo, brand, language etc has got different colors shape and graphic, and feel. One of the best approach I think if we follow the original logos and very common graphics, - because the main reason I think why this extension was create to make easier to the eyes to navigates through hundreds of files via colors and icons - and just for those whats are not fit at all into this palette, should a little redesign. Adobe has got different style, Microsoft has it, all the packages has got very different and of course, some of the icons works well with light theme some are good for the dark. Nothing is perfect and nothing will be perfect, so everybody should keep it in mind. This is one of the best package for VsCode and I think everybody who was involved and of course the creator made a very good job. Keep everybody on this track.