Repository navigation
Enhancing the Look and Feel of Eclipse IDE Icons #108
Description
Activity
Hello, it will be a pleasure to contribute to this issue.
I find this project incredibly exciting, as icons play a crucial role in shaping the user experience of the Eclipse IDE, and modernizing them has the potential to significantly enhance usability and aesthetics.
From what I understand, this initiative focuses on:
- Addressing technical inconsistencies in the current SVG icons, such as unnecessary content, misalignment, and outdated formats.
- Tackling broader design challenges, including improving contrast, aligning with modern UI trends, and ensuring compatibility with dark mode and various themes.
- Proposing a cohesive and modern icon set to elevate the overall look and feel of Eclipse while improving clarity and functionality.
I’m particularly drawn to the creative aspect of designing scalable, responsive, and minimalist vector graphics.
@Michael5601 could you please provide further details about the workflow, expectations, and timeline? Additionally, would this involve collaborating closely with the Eclipse UI team just like the other contributors?
Otherwise, looking forward to hearing your thoughts and potentially getting started on this impactful initiative!
Thanks!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.
Reacted by Hannes WellmannPlease 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.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 consence 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.
Thanks @Michael5601 I'll be sure to attend tomorrow's meeting to get myself acquainted with the agenda.
Thanks again!I'm not sure if any of these styleguide rules are part of the automated conversion, but I guess not.
It's not.
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
-
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. -
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. -
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. -
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.- 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.
-
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.
Reacted by Jerry Laruba FestusReacted by Michael BangasI 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.I'm okay with that, I'll start right away!
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!
- org.eclipse.pde.ui\icons\obj16\debug_exc.png:
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!
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!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!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 :)
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!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 :)
Alright! ✌🏻
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.
20 remaining items
It's really nice to see these proposals. Impressive work.
I have some remarks to provide:It's really hard to evaluate icon proposals stand alone. Seeing them "in action" in the real UI helps a lot.
On OCX one participant saids: "I like the efforts modernize the UI. But pls. don't turn Eclipse visually into VSCode".
Maybe these icon proposals are "too different" to todays icons for a lot of users. What about provided a set of icons that is a simplification of todays version in the sense of that we remove radients but keep the colors but wit less saturation so that they look less colorful and bright.When designing monochrome icons keep in mind that with that you will run into issues with the "disabled" icon-style Eclipse provides. See my the issues I have in #114 (comment). You have to come up with an idea how you want to visualize a disabled state of an icon. Is that something VSCode even does offer?
I think my outline style is cool but not suitable for small detailed icons as the lines are too thin.
Look at my experienced I talked about in:
https://speakerdeck.com/beckerwdf/modernize-the-ui-of-your-eclipse-application?slide=11
Lines that are thinner then 1px will be blurry and hard to see if rendered to 16x16px. So ideally lines should always be 1px.Reacted by Hannes WellmannReacted by Hannes WellmannThank you for your valuable feedback. Here are my statements to your points:
It's really hard to evaluate icon proposals stand alone. Seeing them "in action" in the real UI helps a lot.
Maybe I can place them into a "real" environment for the poll.
What about provided a set of icons that is a simplification of todays version in the sense of that we remove radients but keep the colors but wit less saturation so that they look less colorful and bright.
As soon as the icon theming feature is implemented, the users can decide which icons they want to use. The only discussion would be for the "default" icons but I don't mind if they stay in the current design as long as the user can switch to a modern style. Right now there is no such option and also no modern icon pack.
Also I think Vector could already provide icons that are based on the current icons but in a flatened style. For this the icon theming feature is also needed.When designing monochrome icons keep in mind that with that you will run into issues with the "disabled" icon-style Eclipse provides. You have to come up with an idea how you want to visualize a disabled state of an icon. Is that something VSCode even does offer?
I already thought of this and I don't know of VSCode but IntelliJ also has monochromatic disabled icons as can be seen in the following screenshot. Disabled icons can be created very easily by darkening the gray tone in dark mode and light mode. They use a monochromatic style where many icons are standard gray and sometimes they are colored like the
runicon. Sometimes they also use a second color in a dual-tone icon where the base is standard gray and the other color gives some information as theRun with coverageicon. We don't need to do it like them but I see it as inspiration for our new modern icon pack.
I already thought of this and I don't know of VSCode but IntelliJ also has monochromatic disabled icons as can be seen in the following screenshot. Disabled icons can be created very easily by darkening the gray tone in dark mode and light mode.
If the difference is between light and dark grey I think this will be a accessibility issue. If the difference is between an monochrom icon (with a color different then grey) and a grey version of that icon that would be much better.
So in the IntelliJ screenshot all the icons have color so I can see that e.g. "Stop" id disabled. But the the "Import Tests from File..." entry is grey in the enabled state to. So yes we can see the difference but it's not as easy to see it.
Btw. See in the IntelliJ screenshot, that the complete menu entry is also greyed out in the same color. So this also helps. But this only helps in menus - in toolbars you often only have the icon.
If the difference is between light and dark grey I think this will be a accessibility issue. If the difference is between an monochrom icon (with a color different then grey) and a grey version of that icon that would be much better.
I see your point but I must disagree here as it also works in other programs.
So in the IntelliJ screenshot all the icons have color so I can see that e.g. "Stop" id disabled. But the the "Import Tests from File..." entry is grey in the enabled state to. So yes we can see the difference but it's not as easy to see it.
Most icons in IntelliJ are colored with the standard gray. In dark mode disabled icons are always in darker gray regardless of the original color of the icon.
Btw. See in the IntelliJ screenshot, that the complete menu entry is also greyed out in the same color. So this also helps. But this only helps in menus - in toolbars you often only have the icon.
The toolbar in IntelliJ is the same color as the menu. This is not the case in Eclipse as in dark mode the menus are darker than the toolbar. But I don't see the problem with disabling icons in a monochromatic design in Eclipse as we right now also use a darker gray tone in the menus for disabled icons than in the toolbar:
The toolbar in IntelliJ is the same color as the menu.
I like this design, can you open a new issue for this, suggesting that we use the same color in the toolbar and menu for the dark theme? The team around @thomasritter @BeckerWdf and @mvm-sap may want to evaluate this. It definitely would make the usage of new icons more consistent as we only would have to care about one common background color.
I already thought of this and I don't know of VSCode but IntelliJ also has monochromatic disabled icons as can be seen in the following screenshot. Disabled icons can be created very easily by darkening the gray tone in dark mode and light mode. They use a monochromatic style where many icons are standard gray and sometimes they are colored like the
runicon. Sometimes they also use a second color in a dual-tone icon where the base is standard gray and the other color gives some information as theRun with coverageicon.An element in a disabled style can also be drawn using 50% opacity, or drawn such that only every other pixel is rendered in a checkerboard pattern. Older user interfaces opted for an embossed appearance, but that kind of appearance is probably not wanted here. The menu you have shown here is probably doing the 50% opacity style.
Reacted by Michael Bangas@IamLRBA can you please send me your icons as SVG so I can finish the poll? :)
@IamLRBA can you please send me your icons as SVG so I can finish the poll? :)
Alright, should I send on email or right here?
Send me an e-mail please. Thank you!
Send me an e-mail please. Thank you!
Coming right up!
I created the Community Poll here
It would be great if you could participate.
Please mind that I changed the stylesAbstractandOutline 1as the lines were too thin. Now they look a lot better.
@BeckerWdf Thank you for the hint with the Eclipse Background. In the poll I put all icons on the real Eclipse Light- and Dark-Mode background colors so the icons can be seen in the right environment.Hi, I found this issue when looking for an issue about DevStyle. I have long thought eclipse icons need a refresh, especially when using an HDPI resolution. But did not have time to really dig into the issue. Have you seen DevStyle Darkest Dark theme and icons? It might be useful to you guys (I customized the icons a bit for my purposes with their icon designer).
They use material fonts amongst others as the base for their icons.
Hi, I found this issue when looking for an issue about DevStyle. I have long thought eclipse icons need a refresh, especially when using an HDPI resolution. But did not have time to really dig into the issue. Have you seen DevStyle Darkest Dark theme and icons? It might be useful to you guys (I customized the icons a bit for my purposes with their icon designer).
Hi, thank you for the input. :)
I think the Darkest Dark theme was created by @BeckerWdf who already participates in the discussion. The theme looks great and maybe we can take some fitting icons also for our icon pack. In the long run I think the icons from the darkest dark theme should be a separate icon pack that can be chosen as soon as the technical part is implemented.
I also don't know how many icons are part of the darkest dark theme.I created a style guide for our modern (dual-tone) icon theme and right now I am trying to create a space where all new icons can be saved, so we can really start creating new icons.
I think the Darkest Dark theme was created by @BeckerWdf who already participates in the discussion.
Noooo. It's a commercial plugin and I don't have anything to do with that. Don't know the licence of that plugin and the icons - so be careful here.
Noooo. It's a commercial plugin and I don't have anything to do with that. Don't know the licence of that plugin and the icons - so be careful here.
Oh I'm sorry, then I mixed something up here.
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
Example: The following icon (org.eclipse.jdt.ui\icons\full\etool16\java_app.svg) shows points 1–4:
2. Broader Design and Usability Challenges
Beyond technical issues in the SVGs, I collected the following design flaws of the icons:
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.