Refinement of the new modern icon style

[Michael5601]

As the community poll is finished now I want to refine the icon style that will be used as a base for the new style guide.

Please see my comments to the results here.

[Michael5601]

If you agree we can focus on the Mono style with dual tonality (see Dual-Tone style) and icon enablement.
I also want to discuss the content in the Eclipse UI Guidelines to refine the chosen style.

One such example from the Eclipse UI Guidelines is the centering of the icons. Is there a reason why icons are not centered but have one pixel space on the top and left side?
If we can avoid this for the new style this would be great as we already have problems with this as seen here. This would also increase the size of the icons because we can use the whole 16x16px space.

[BeckerWdf]

One such example from the Eclipse UI Guidelines is the centering of the icons. Is there a reason why icons are not centered but have one pixel space on the top and left side?
If we can avoid this for the new style this would be great as we already have problems with this as seen here. This would also increase the size of the icons because we can use the whole 16x16px space.

I don't really know what the real cause is. Maybe it's just some kind of "padding" so that there a bit of space when icons are next to each other. Maybe we can make an experiment and try out what happens if we don't leave these 1 pixel rows / columns empty.

[Michael5601]

One such example from the Eclipse UI Guidelines is the centering of the icons. Is there a reason why icons are not centered but have one pixel space on the top and left side?
If we can avoid this for the new style this would be great as we already have problems with this as seen here. This would also increase the size of the icons because we can use the whole 16x16px space.

I don't really know what the real cause is. Maybe it's just some kind of "padding" so that there a bit of space when icons are next to each other. Maybe we can make an experiment and try out what happens if we don't leave these 1 pixel rows / columns empty.

Yes this is a good idea.

[Michael5601]

@IamLRBA if you want you can create a simple list of icon related requirements from the Eclipse UI Guidelines.

With this I mean a listing of things like Positioning, Color Palette etc.
We need a short information about how every point is done in the UI Guidelines. This way we can also find deprecated information in the UI Guidelines that can be fixed with a PR.
You don't need to go to deep for every point as we can just read it in the UI Guidelines ourselves. We only need a simple list with everything to think about and a short description. If you already have ideas you can describe your approach to the new icon style for the specific point of the list.

If you don't want to create this list and want to focus on something different instead, I will provide the list as soon as I find some time. :)

[Michael5601]

I just saw that the positioning of the icons (one pixel line space on two sides) is dependent of the type of the icon in the Eclipse UI Guidelines.

The following icon shows only 2 of 4 different icon types from which 2 have the same spacing. So in total we have the 1 pixel space on the top + left (toolbar icons), bottom + left (view icons + model object icons), bottom + right (perspective icons). If we don't find a good reason why the positioning should be done this way, I would strongly advise against it.

[IamLRBA]

@IamLRBA if you want you can create a simple list of icon related requirements from the Eclipse UI Guidelines.

@Michael5601 I did some digging and here's what i found.

Icon Design Guidelines for Eclipse UI

1. Positioning

Icons should align consistently within their designated spaces, particularly in tree views or lists. Misaligned icons create a cluttered appearance and reduce readability.

---

2. Color Palette

The Eclipse-style palette uses blue and yellow as base colors, complemented by green, red, brown, purple, and beige for specific functions or object types. Consistency in color choices ensures harmony across the UI while enabling differentiation between elements.

---

3. Icon Types

Distinctions exist between functional, representational, and navigational icons:

• Functional: Depict actions (e.g., run, stop).
• Representational: Indicate objects (e.g., files, folders).
• Navigational: Guide users through the interface.

---

4. Icon Size & Placement

Standard sizes are critical for clarity and consistency. Eclipse icons are typically designed for 16x16 pixels but must remain legible at various resolutions. Placement standards include spacing to avoid visual clutter.

---

5. Enablement States

Icons should visually indicate their states, such as active, inactive, or disabled. Techniques include using grayscale for disabled icons or applying slight opacity changes. This is crucial for user feedback and accessibility.

---

6. Overlays

Overlays provide additional contextual information, such as a small arrow to signify a shortcut. They should be clear and not obscure the main icon’s function.

---

7. Consistency

Icon design should adhere to established visual patterns to maintain a unified look and feel across the UI. Variations should be minimal and purposeful.

---

8. Accessibility

Icons must be distinguishable for users with color blindness or other visual impairments. Use patterns, shapes, and complementary design elements alongside color to enhance accessibility.

---

9. Prototypes and Testing

Before finalizing designs, test icons within the Eclipse environment to ensure usability in real-world scenarios. This helps refine the style guide and identify practical issues.

If at all you need further refinements or additional points added to the list, let me know!

[IamLRBA]

I just saw that the positioning of the icons (one pixel line space on two sides) is dependent of the type of the icon in the Eclipse UI Guidelines.

The following icon shows only 2 of 4 different icon types from which 2 have the same spacing. So in total we have the 1 pixel space on the top + left (toolbar icons), bottom + left (view icons + model object icons), bottom + right (perspective icons). If we don't find a good reason why the positioning should be done this way, I would strongly advise against it.

Thank you, @Michael5601, for highlighting this issue with the current positioning rules in the Eclipse UI Guidelines. I completely agree that the varying pixel spacings based on icon type introduces unnecessary complexity and could result in misalignment issues. As mentioned in previous discussions, I'd still have those same ideas as my thoughts and suggestions to address this:

Suggestions for Standardization:

1. Uniform Spacing

   • Apply a single standard for pixel spacing (e.g., 1-pixel space on all sides or no space at all) across all icon types.
   • This ensures predictable and consistent alignment regardless of the icon's context, reducing design complexity.

2. Context-Specific Adjustments

   • If specific icon types (e.g., toolbar icons) really do require unique positioning due to design constraints (As I am pretty sure our foredesigners who designed the guidelines sat in a similar discussion and had reasons for choosing that), we can document these adjustments explicitly as exceptions.
   • But the base rule should remain consistent to minimize unnecessary variations.

3. Testing Prototypes
   I'm glad you already mentioned this as a step in the near future so it can help us to evaluate their impact on visual clarity and alignment, particularly in dense UI components like toolbars, menus, and side panels.

Benefits of Standardization:

• Simplifies the guidelines, making them easier to follow for designers.
• Enhances visual consistency across the Eclipse interface.
• Aligns with modern UI/UX best practices, improving the overall user experience.

Let me know your thoughts!

[Michael5601]

Thanks for the list!
We can go trough every point of the list and discuss it.
I think for Positioning we have the same opinion that we should stay with a no-space rule. As said we have to test if this leads to any complications.

The second point from the list is Color Palette. My idea for this is that most icons will be monochromatic as they don't need a visual indicator. But some icons for example Actions like the debug_exc icon should be fully colored monochromaticly (in this case green) or dual-toned like I presented it for the pin_editor in the poll. The colors for this indications can for sure be derived from the current color-code.
For example:

• The color for interfaces is purple in the UI Guidelines so the visual indicator for dual-toned icons should be colored purple if the icon is connected to interfaces.
• An icon to stop the execution should be fully red in one single red tone. Here we don't need dual-tonality.
• Icons like the search icon can remain in the default color without any dual-tonality. The default color should be gray as presented in the poll. The gray I used for the light theme is #6E6E6E.

I`d say we focus on the light theme at first as all icons can be easily "recolored" automatically after they are designed monochromatically. The design is the hard part for this initiative.

[Michael5601]

This is my proposal for a modern icon pack style guide. I redesigned the icons that won the poll and had no issues by following these rules. It would be great if you can give me feedback for this.
@IamLRBA I am looking forward to the new icon you will design with this work in progress style guide. The style guide will be adjusted with your feedback.

Eclipse Modern Icon Pack Style Guide

Icon Types

Every Icon is categorized into one of three distinct types:

1. Base Icons (Gray Scale)

   • Most icons are colored in a standard gray tone, ensuring a neutral and consistent appearance.

   • The gray tone differs from light mode to dark mode.

     

2. Monochromatic Colored Icons

   • Used for important actions such as "Run" (green) or "Stop" (red).

   • These icons employ a single, distinct color to indicate their function clearly.

     

3. Dual-Tone Icons

   • A hybrid of the base and monochromatic styles.

   • The main part of the icon remains in base gray, while a key element (e.g., the "pin" in a "Pin Editor" icon) is highlighted in a single distinct accent color.

     

---

Color Assignments

Each color has a specific meaning and should be applied consistently:

Color	Purpose	Light Mode	Dark Mode
Gray	Default color for all icons	#6E6E6E	#A8A8A8
Green	Indicates action (e.g., "Run")	#008000	Same
Red	Error, alert, or stop (e.g., "Stop")	#FF0000	Same
Yellow	Warnings	#FFD700	Same
Purple	For "Web Site," "Fragment," "Interface," etc.	#800080	Same

---

Icon Sizes & Placement

• The icon’s motive must be centered within the view area.

• The design should fully utilize the available space while maintaining balance and clarity.

• If full width and height cannot be used simultaneously, at least one of them should be fully utilized.

  

Standard Icons

• View area: 16x16 pixels

Overlay Icons

• View area: 8x7 pixels
• Overlay icons must be monochromatic colored to ensure they remain distinguishable from the base icon.

Wizard Icons

• Standard size: 75x58 pixels

---

Disabled Icon State (This point may need more discussion)

Disabled icons should maintain their original form while visually indicating inactivity:

• Light Mode: Icons become brighter
• Dark Mode: Icons become darker
• Transparency Adjustment:
  • The disabled state is achieved programmatically by modifying transparency.
  • Colored icons retain a faint version of their original hue to preserve recognition while ensuring they appear deactivated.

---

Specifications

This section outlines the design rules for Eclipse icons in the modern icon pack.

Stroke style

• Every path/stroke must have a fixed width of 2.0 px to ensure visibility at small sizes.
• All strokes must have rounded corners for a smooth appearance.

Spacing

• Spacing between elements within an icon is allowed but should always be 1.5 px wide.

Corners

• The corners of each stroke and shape should be rounded (Rx and Ry must be 0.5).

Dual-Tonality

• The spacing between the main part and the key element must be 1.5 px wide.

• The key element itself must have a width of 10.0 px.

  

[Bananeweizen]

Do you intend to replace existing icons, or just to make this new icon set available in addition? The Eclipse IDE, all the plugins around it and the commercial products have a 25 year history, and by replacing the icons in the icon repository and in the platform code, you will not be able to standardize anything more, but rather less. It's impossible to have all external plugins and applications also update their icons. Just the change from gif extensions to png extension (many years ago) caused broken Eclipse icons for a timespan of around 3 years, until most developers had updated their code. By doing a similar (and larger) refactoring of icons, there will be even more turbulences for anyone who is not the platform project.

[Michael5601]

Do you intend to replace existing icons, or just to make this new icon set available in addition?

The icons are meant as an addition to the existing default icons. In this PR an icon theming mechanism for Eclipse was discussed and a prototype (i think?) implemented.

With such a mechanism users could change the icon theme (default, modern, flat etc.) as they want. I started this initiative for monochromatic modern icons as I worked and still work on the SVG rasterization feature in this PR.

[IamLRBA]

Icon Design for external_tools (Dual Tone Style)

Hello,
My sincere apologies for the late reply @Michael5601,
I designed three icon proposals for the external_tools symbol used to represent the action of running external tools. My goal was to follow the modern dual tone icon style outlined in the draft style guide, while experimenting with different metaphors and design clarity.

---

Existing icon
16px

---

Option 1 – Wrench + Play Button (1.5px Stroke)

16px

32px

Design:

• A Back of a wrench to represent "tools" is combined with a right-facing play triangle to indicate execution or run.

---

Option 2 – Toolbox + Play Button

16px

64px

Design:

• A toolbox base metaphor emphasizes a collection of tools rather than a single one.
• A green triangle play button is overlaid in front, signaling activation of the external tool.

---

Option 3 – Wrench with Play Button

16px

64px

Design:

• A minimalist wrench is used, and the play button is carved out as negative space in a hexagonal handle space.
• This allows a clean and clever visual metaphor without adding extra visual clutter.
• Makes excellent use of minimal tone while still conveying meaning.

---

Style Guide Notes:

The style guide was well and clearly drafted with all parts executable during design. My opinions are;

• The style guide doesn’t address space usage especially in terms of percentage e.g roughly what percentage of negative space should an icon possess in comparison to the general space and main icon features. That would be helpful here.
• Stroke thickness worked well, but in some cases, the 1.5px stroke width sort of distorts the base feature making it hard to recognize. Though i must say it really works and will well for other icons as well.
• I am unsure if the embedded approach is preferred over overlays for this Duo-Tone styl . For instance; Is the play button drawn within the wrench (embedded) and not sitting on top as a separate visual element (overlays). Or any of the two can work?.
• When it comes to the rounded corners, I feel like we could use a little more radius to the roundness. it is 0.5px in the style guide but i think since each box is 1px and the recommended lines width is 2px, we can use 1px for the roundness just for clarity and for its role to take effect.

---

Thanks again @Michael5601 for the opportunity and i hope to get feedback from the community on this, get everyone involved and engaged so that we can move forward with this initiative.

regards,
Jerry Laruba Festus

[Michael5601]

Hey Jerry,
thanks for the feedback and the icons you provided. The first option is my favorite. I will send you an e-mail with potential improvements so we don't discuss them here. In the future, as soon as a proper space for the moden icon pack is available, every icon can be provided by a pull request and discussed within the pull request.

Your feedback for the style guide was helpful and I already integrated it into the pull request. Here is a comparison of my changes:

1. I changed the radius form 0.5px to 1.0px
2. I added information for the placement of the overlay element for dual-tone icons. In my opinion they should always be in the top right or the bottom right corner. If I understood your question number 3 correctly this would resemble the overlay approach. Please note that this approach always needs white space of 1.5px around the overlay element as you already provided in your icons.
3. I also changed the information for the size of the overlay icon as before it was mandatory to have a width of 10.0px. Now I changed it so that either the height, width or both can be 10.0px. For some icons this will fit better.
4. I won't add information about negative space or similar as this would be too specific information and also a percentage is hard to choose. But for this case I added an introduction sentence that tells readers to orient themselves with the already created icons as not every information will be described in the style guide and creative freedom should not be restricted.

Today I also designed three new icons:

collapseall:

copy_edit_co:

disconnect_co:

All of these icons are from the org.eclipse.debug.ui bundle. If you want you can freely choose icons from this bundle and create a new modern style with the style guide. I will do the same and will focus on the folder object16. Please choose a different folder so we don't accidentaly do the same work.

[IamLRBA]

Hey Jerry, thanks for the feedback and the icons you provided. The first option is my favorite. I will send you an e-mail with potential improvements so we don't discuss them here. In the future, as soon as a proper space for the moden icon pack is available, every icon can be provided by a pull request and discussed within the pull request.

Your feedback for the style guide was helpful and I already integrated it into the pull request. Here is a comparison of my changes:

1. I changed the radius form 0.5px to 1.0px

2. I added information for the placement of the overlay element for dual-tone icons. In my opinion they should always be in the top right or the bottom right corner. If I understood your question number 3 correctly this would resemble the `overlay` approach. Please note that this approach always needs white space of 1.5px around the overlay element as you already provided in your icons.

3. I also changed the information for the size of the overlay icon as before it was mandatory to have a width of 10.0px. Now I changed it so that either the height, width or both can be 10.0px. For some icons this will fit better.

4. I won't add information about negative space or similar as this would be too specific information and also a percentage is hard to choose. But for this case I added an introduction sentence that tells readers to orient themselves with the already created icons as not every information will be described in the style guide and creative freedom should not be restricted.

Today I also designed three new icons:

collapseall:

copy_edit_co:

disconnect_co:

All of these icons are from the org.eclipse.debug.ui bundle. If you want you can freely choose icons from this bundle and create a new modern style with the style guide. I will do the same and will focus on the folder object16. Please choose a different folder so we don't accidentaly do the same work.

Thanks for the reply @Michael5601, I already started designing icons from a different folder in the bundle and will share details here soon.