Enhancing the Look and Feel of Eclipse IDE Icons

[Michael5601]

Icons play a critical role in shaping the overall Look and Feel of the Eclipse IDE. Unfortunately, the current icons appear outdated and suffer from several issues that impact their usability, appearance, and consistency. This issue aims to open a discussion to summarize these problems and outline the requirements for a modern, cohesive set of icons.

Over the past few weeks, I’ve gained insights into these challenges while introducing a feature to rasterize SVGs at runtime within the Eclipse IDE. Through this process, I encountered several recurring issues, particularly related to the state of the SVGs themselves. These include:

1. Problems in the State of the SVGs

• Unnecessary Content: Many SVGs contain empty layers, unnecessary elements, or items outside the view box, which contribute nothing to the rendered icon.
• Inconsistent Contrast: Foreground-background contrast is often achieved using white filters around certain areas. These filters vary between icons and render differently depending on the rasterizer.
• Misalignment in View Box: Icons are frequently not centered properly within the view box. For example, icons intended for 16×16px may not fill the available space, leading to inconsistent visual sizes.
• Asymmetrical Elements: Certain design elements (e.g., the plus in the star of the following example) are not symmetrically placed.
  Example: The following icon (org.eclipse.jdt.ui\icons\full\etool16\java_app.svg) shows points 1–4:
  
• Text as Text: Some icons include text that hasn’t been converted to paths, resulting in inconsistent rendering across different rasterizers.
• Legacy SVG Format: As noted in this issue, many icons are in an outdated SVG format. I don't know if this causes any problems beside a window opening in Inkscape.

2. Broader Design and Usability Challenges

Beyond technical issues in the SVGs, I collected the following design flaws of the icons:

• Overuse of Gradients: A significant portion (58%) of all SVG elements are gradients. While gradients were once popular, they now make the icons appear outdated.
• Limited Theming Support: The many colors of the icons make it challenging to adapt them for different themes.
• Dark Mode Issues: Some icons do not render well in dark mode or when displayed in a disabled state.
• Spacing of the icons: Although the icons generally follow a similar aesthetic, it seems not like there are rules regarding placement or alignment within the view box.
• Overly Detailed Designs: Icons sometimes include many details that are impossible to see at their typical display size, adding unnecessary complexity without value.
• Unclear Symbolism: Some icons fail to convey their intended function.

To solve these problems I would propose the idea of a new icon set to fully remake the existing icons.
I think this would be a possibility for contributors that are interested in graphics design rather than programming.
As this is a big task it can be divided into icon packs for the different Eclipse IDE projects such as JDT, Platform, PDE etc.

[Michael5601]

As I am not an experienced Eclipse UI contributor I think at first it is important to hear some opinions in the community. Maybe you could help out here @BeckerWdf.

We need to divide the task of remaking icons (if it is wanted this way) into smaller tasks and provide a modern style guide or improve the already existing UI Guidelines.

With a style guide we can achieve consistency in the workflow of many collaborators and we could have a base for a discussion at first. "Good" looking Icons are subjective to the individual view but we need to get a consensus about the goals and the style at first.

I can also assist in the creation of icons as soon as my bachelor thesis is done in February 2025. Until then I will be part of this discussion and I am glad to help with my knowledge about graphics design.

@IamLRBA maybe you want to attend the Eclipse IDE ‐ Developers Community Call that takes place every second thursday and is moderated by @HannesWell. Tomorrow is the next meeting and I also plan to talk about my project that is related to icons/UI. New faces are very welcome :) and more contributors could get aware of this issue.

[Bananeweizen]

Please be aware that there are technical constraints, which contradict some of your assumptions AFAIK. E.g. icons are not centered on purpose and they are sometimes aligned at the top, sometimes at the bottom etc. on purpose. See https://www.eclipse.org/articles/Article-UI-Guidelines/Contents.html#IconSpecsSize_VDG.
I'm not sure if any of these styleguide rules are part of the automated conversion, but I guess not. Otherwise one could of course have all SVGs centered, and then derive an offset PNG via some automation, and the offset would always be in the right direction.

[BeckerWdf]

I'm not sure if any of these styleguide rules are part of the automated conversion, but I guess not.

It's not.

[Michael5601]

I propose the following workflow for this project. If you like you can leave a comment with refinements.

Proposed Workflow and Initial Tasks for Developing a Comprehensive Style Guide

1. Icon Design Experiment
   Select three representative icons to serve as a basis for exploration. Each icon will be independently designed by at least two contributors in three distinct styles—resulting in a total of nine icons. @IamLRBA if you want we can do this step together. These designs should not involve collaboration or discussion to preserve individual creative interpretations. Each style should use only the color black to focus on the design itself. This ensures that the icon set can be used across different themes and allows for automated colorization in the future.

2. Style Selection and Community Polling
   Share the proposed styles with the community and conduct a poll to determine the most popular option. The style receiving the most votes will then be refined based on community feedback and constructive comments.

3. Developing the Style Guide
   Create a style guide based on the selected style and the feedback. The style guide will define design rules based on the discussions and the existing UI Guidelines. It will serve as a reference to ensure consistency across the icon set.

4. Icon Creation and Quality Control
   Once the style guide is created, contributors can begin creating icons individually. New contributors can also join the effort. It also doesn't matter if it will take a while to remake all icons as the style guide itself would be a big accomplishment and can be used as a base for the effort. To ensure high-quality outputs, each new icon will undergo a quality control process through a dedicated Pull Request. The PR should follow a specific template, including the new icon, and must verify that the icon meets the following criteria:

   • Works well on different background colors.
   • Is rasterizable with JSVG.
   • Has a clean and optimized SVG structure.
   • Is not too detailed.
   • Can be inverted without issues.
   • Functions effectively at different sizes.
   • Follows the rules in the style guide.
   • Is not directly copied from other IDEs like VSCode or IntelliJ

This structured process minimizes the workload for quality controllers while maintaining consistency in the icon set.
All finished icons need to be saved in a similar structure as the current icons. Every icon needs to have the name of the icon it will replace in the future so it can be assigned to the intended place. This structure allows checking if a specific icon is already created.

5. Onboarding and Promotion
   Create a welcome page with detailed instructions for contributors and advertise the initiative to attract new participants. Highlight the opportunity for contributors to gain experience in graphic design or frontend development while engaging with Eclipse. For instance, advertise the project on LinkedIn, highlighting that participants can showcase their icons in their portfolios for job interviews.

In the community meeting at thursday we talked a bit about this initiative and I felt like the concerns were mostly about the size of this task. By focusing on the proposed workflow at first I think we can create a platform where more collaborators are interested in participating. Also I think that creating 400-500 icons would already be enough to give the most used pages in the Eclipse IDE a new look without replacing all 1500 or so unique icons.

[weisJ]

As I have originally created JSVG with this exact purpose (creating a scalable iconset for user interfaces) here are my two cents regarding this topic :)

To make creating cohesive icons I think it would be nice to have some color palette, which icons can refer to. In the readme of JSVG there is an example on how to dynamically change the color inside a SVGDocument. This way a single icon could be used for both dark and light mode, as the only thing that needs to be changed is the palette itself.

Also here is an idea I always wanted to see carried out with an icon set (which svg files lend themselves to relatively easily). Embed in the icon some information about

• where the baseline of the icon is relative to its bounds. This helps with visually aligning icons to text next to them.
• or moreover allow specifying a visual bounding box e.g. an icon could have some portion hanging off to the left while "visual left edge" is further in the middle. The UI could make use of this information to improve (in the mentioned case left edge) alignment across multiple rows of content. In MiG Layout this concept is called "visual padding".

Of course both of these features would need further support on the UI side.

[Michael5601]

I'm okay with that, I'll start right away!

Thats great, thank you! We need to decide which three representative icons we want to design so our results are comparable.
I also want to make clear that this is no competition but a method to gather good comparable results.

How about the following three icons:

• org.eclipse.pde.ui\icons\obj16\debug_exc.png:
  
• org.eclipse.ui\icons\full\etool16\pin_editor.png:
  
• org.eclipse.ui.ide\icons\full\etool16\search_src.png
  

And we both design all icons in 16x16px size in black color with white background.

As I also have another project that I need to finish, it would be nice if we have time to upload our results on next week Sunday, 1st of December in this discussion.

I appreciate your effort and wish you a lot of fun designing the icons!

[Michael5601]

I'm okay with that, I'll start right away!

Thats great, thank you! We need to decide which three representative icons we want to design so our results are comparable. I also want to make clear that this is no competition but a method to gather good comparable results.
How about the following three icons:

* org.eclipse.pde.ui\icons\obj16\debug_exc.png:
  ![debug_exc](https://private-user-images.githubusercontent.com/102024826/389454392-0250dd47-656c-4480-87dc-9f0935aaba3f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzI1Mjc5ODUsIm5iZiI6MTczMjUyNzY4NSwicGF0aCI6Ii8xMDIwMjQ4MjYvMzg5NDU0MzkyLTAyNTBkZDQ3LTY1NmMtNDQ4MC04N2RjLTlmMDkzNWFhYmEzZi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQxMTI1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MTEyNVQwOTQxMjVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1iYTY3YjMxMGE5YmM4ZjZmNjFmYjRmNzIzZjlkOTZkNDVkNDY0OWU1ZmQyMzE1YzM4MGRiYjg2NmRjMGU1MWY1JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.OZKR6VcozdVBe4DzYsMVX_ZVVEwyLH3UK3mlVN3Wtuc)

* org.eclipse.ui\icons\full\etool16\pin_editor.png:
  ![pin_editor](https://private-user-images.githubusercontent.com/102024826/389455632-fe5cfa60-c83f-4e5b-9365-9d2f4e87b7a9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzI1Mjc5ODUsIm5iZiI6MTczMjUyNzY4NSwicGF0aCI6Ii8xMDIwMjQ4MjYvMzg5NDU1NjMyLWZlNWNmYTYwLWM4M2YtNGU1Yi05MzY1LTlkMmY0ZTg3YjdhOS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQxMTI1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MTEyNVQwOTQxMjVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0zY2NlMTBkNTYwMTVkZjJjZWQ3ODg2MzQ4MzIwZmY3MjIxZDA4YmYxYTY1ZGUzMmMzYWQ0YTk2YjViNzQ0OTM3JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.LrCAt6sORHUR1Uv_VxsjUa2sibxuoVVVaQUXMRC32a8)

* org.eclipse.ui.ide\icons\full\etool16\search_src.png
  ![search_src](https://private-user-images.githubusercontent.com/102024826/389457340-eba38357-eab2-4dca-84f1-2c22bfc0229d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzI1Mjc5ODUsIm5iZiI6MTczMjUyNzY4NSwicGF0aCI6Ii8xMDIwMjQ4MjYvMzg5NDU3MzQwLWViYTM4MzU3LWVhYjItNGRjYS04NGYxLTJjMjJiZmMwMjI5ZC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQxMTI1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MTEyNVQwOTQxMjVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hMTUwOGQ4M2I5OTBhOWMzZGEwMjhiYWM4Y2Q1ODg0MjFhMzMzMjYwZTM0ODQ4NzMzM2E4OWRmYjEwZjEzMjY1JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.8cmJAxB_Lvs8zZTz0VmTX5AoKYvZdg141DrHdnyr38Q)

And we both design all icons in 16x16px size in black color with white background.
As I also have another project that I need to finish, it would be nice if we have time to upload our results on next week Sunday, 1st of December in this discussion.
I appreciate your effort and wish you a lot of fun designing the icons!

Sure thing, Thanks brother and see you on the next Sunday. If it's not any bother, could I get a means of directly communicating to you? That would be nice!

In my profile you can see my contact e-mail :)

[Bananeweizen]

@Michael5601 @weisJ

where the baseline of the icon is relative to its bounds.

https://eclipse-platform.github.io/ui-best-practices/#icon_size_placement

I think it would be nice to have some color palette, which icons can refer to

https://eclipse-platform.github.io/ui-best-practices/#color_palette_themes

A lot of the UI system is described in that documentation, so please check it before starting. It would be a pity if new icons contradict some of the aspects described there. Improvements of that document can be made at https://github.com/eclipse-platform/ui-best-practices.

[akurtakov]

Please note that these best practices are up for update as a lot have changed since they were written. Please bring any proposal change as issue/PR and it would be discussed at the next PMC call.

[Michael5601]

@Michael5601 @weisJ

where the baseline of the icon is relative to its bounds.

https://eclipse-platform.github.io/ui-best-practices/#icon_size_placement

I think it would be nice to have some color palette, which icons can refer to

https://eclipse-platform.github.io/ui-best-practices/#color_palette_themes

A lot of the UI system is described in that documentation, so please check it before starting. It would be a pity if new icons contradict some of the aspects described there. Improvements of that document can be made at https://github.com/eclipse-platform/ui-best-practices.

Thanks for the advice. This will be part of the creation process for the new style guide as described above. As @akurtakov metioned: If we find outdated infos in the existing UI Guidelines we will provide an issue/PR and discuss how we proceed with the information in the new style guide. For example: I don't think it is smart to create the icons without centering them in the middle. It seems to me that this workflow comes from technical debt as there is no process in the Eclipse UI to automatically apply an offset. Until all new icons are finished this technical debt is maybe fixed and we would need to change back many icons to a proper centered state.

[vogella]

I personally would love centered icons.

[BeckerWdf]

For example: I don't think it is smart to create the icons without centering them in the middle.

The issue with changing this is that it will look strange when not all icons (e.g. object type icons in project explorer) are aligned in the same way (if some are centered, some are not).
And if centering means to leave one pixel emptyp on all 4 sides then you loose valuable space in the icon. They are only 16x16px and would then be only 14x14 effectively.

I once provided a talk on best practices when creating icons for eclipse. See here:
https://speakerdeck.com/beckerwdf/modernize-the-ui-of-your-eclipse-application?slide=11

[BeckerWdf]

Please note that these best practices are up for update as a lot have changed since they were written.

But that does not mean that they are bad our outdated per se. I would prefer PRs for the existing style guide instead of a complete new one.