[WIP] Flat Dark Icon Theme

UX/UI Design
1

Hello,

I started this set as a spiritual successor or continuation of the work done by user st_phan in this thread: https://devtalk.freecad.org/t/work-on-modern-icon-theme/41172/1

I haven’t come up with any particularly good name for this set, so for now it shall be called “Flat Dark” (yes a light themed friendly variant will eventually arrive)!

I’ve reached a fairly significant milestone, in the theming of the entire set of icons used in Sketcher Workbench.

185 Icons have been themed and I don’t believe I’ve overlooked any. Feedback on specific icons, or the general style is welcome, I do have a few tweaks left to do for the sake of visual consistency.
sketcher.png

2

Part Design Workbench Completed
part_design.png

3

Hi Obelisk !
Whoa, nice work !
It’s quite a job to re-draw all those icons…

A few questions tough to better grasp the overall design :

  • could you please explain the logic for the colors used ?
    Colors are great for highlighting the specific nature of the feature and emphasizes the “group” to which it belongs. It’s cool that your icon theme uses this trick.
    Green for additions and red for subtractions are easily understandable. What about blue, purple, orange, yellow, cyan, light green, etc. ?
    Although FreeCAD has a huge number of operations, I would try to minimize the number of different colors and set a general logic across workbenches. In some cases, it makes sense to use a particular color for one workbench, but it should clearly help the user to understand that it’s a very particular group of features.
    I would try to keep anything related to file management, views, general properties and settings within white/grayscale/black (like the “light” version of COIL iconTheme), but that’s just me so don’t feel you have to.

  • could you please explain the differences between the plus (+), minus (-), cross (x), check mark (✓), toogle widget (o ), etc. and the differences of shape, size and position of these small elements ?

  • do you have a grid of all the icons in ABC columns and 123 rows so we could comment on specific icons ?

  • do you already have in mind a few guidelines for other users contributing to this theme, also for external workbenches ?

Thanks a lot and keep up !

4

Thanks for the kind words!

  • could you please explain the logic for the colors used ?

Yes, green/red for additive vs subtractive functions related to solids.
In Sketcher it was tougher, Green/white for geometry, dashed for construction, orange for control pointsj and lighter blue for datums. In some cases functions are complex and don’t neatly fit into a category and in those cases I tend to favor blue. I’ve been developing these through the Discord server and common feedback has been that all icons need some sort of color on them to easily differentiate between enabled vs disabled ones.

  • could you please explain the differences between the plus (+), minus (-), cross (x), check mark (✓), toggle widget (o ), etc. and the differences of shape, size and position of these small elements ?

I decided to add the marks of + or - for people with color-vision deficiencies. Toggleable functions get the toggle, check marks are for validations. I generally favor placing them in the lower right hand corner of the icon, however in some cases they aren’t clearly visible there so I will position them in the upper-right unless they are a key part of that tools representation (ie measurement tools). In several cases, I inherited these ideas from the original author I’ve based this set off of.

  • do you have a grid of all the icons in ABC columns and 123 rows so we could comment on specific icons ?

I don’t, and in all honesty I don’t know of a simple way to create such a thing without manually positioning everything. That would be a massive consumer of time I could spend on more icons. If you are interested, I do have a compiled rcc file with the existing work you can test drive with the icon themes addon. Be aware however that the Part WB icons are screwed up in their current state.

  • do you already have in mind a few guidelines for other users contributing to this theme, also for external workbenches ?

I have a github repo I’ve created, with a palette file and draft design guidelines as well as the svg files for each icon. This is my first repo and I haven’t put a lot of time/effort into making it well organized yet, its on my to-do. Selfishly, I’m prioritizing creating the icons for the workbenches I most use before working on modifying a stylesheet with matching color schemes from the same palette. Afterwards, I’ll continue with theming the remaining default workbenches.

5

I still very much consider myself a humble amateur with design and especially with inkscape/vector art.

Here is an example of my work environment while creating an icon.

I design 48x48px. External strokes (outside edges) are done at a 3px width. Internal lines when required will be done at 2px or 1.5px based on the complexity of the icon and preview window. I try to keep a 2px pad around the outside edges of the icons although in certain cases that wasn’t reasonable and I’ve allowed some deviation from this general guideline. Patterned strokes are done with settings of “0.01 2” I had previously been using “0.1 1.5” but my design style has evolved as I learn more about the software and what looks good designed with consideration of pixel scaling. My focus has been on making sure the icons all scale very well to 24px size, but they are all still recognizable down to 16px.
Screenshot_2023-08-06_10-19-57.png

6

What the sketcher and part design icons currently look like inside FreeCAD:
Screenshot_2023-08-06_10-28-56.png
Screenshot_2023-08-06_10-28-23.png

7

This looks sweet!
I am also open to work towards a new default icons style, but then we should definitely start using a dark and a light icon. Because I really see that as one of the main reasons current icons look outdated.
And for this we really need the preference packs to work with icons! Glad chennes is already thinking about how he can do this! And we already have realthunder who actually set such a system up.
If only I had more free time otherwise I would adjust my icon theme to your style. But that is way to much work than I have time for atm.

8

This looks nice. This makes me think that it would be nice to add a ‘icon set’ selector in the preferences as linkstage has. Though perhaps we already have it and I have just not found it.

9

Even the model looks better. Did you use some non-default rendering settings or is it just a matter of colors ?

Also, what are your background color settings ?

10

I used material settings available from the appearance dialog. I have my models set to line width 1, point size 2.
Under Preferences > Part Design > Shape View
Max deviation: 0.5%
Max deflection: 7.12 deg

For the background:
Radial
Central: #495057
Midway: #343a40
End: #212529

I plan on releasing a stylesheet/preference pack after I complete the Part WB icons, before moving on to the icons from the other shipped workbenches.

Regards,
Joe

11

Damn, your theme and icons look slick when put together! :open_mouth:

12

Hey FreeCAD Community,

I stumbled upon this topic here: https://devtalk.freecad.org/t/work-on-modern-icon-theme/41172/1 and replied there already, so I don’t want to repeat to much. But in summary:

I want to give a shoutout to st_phan and obelisk79 for their work on the modern icon theme. They’ve spiced up our FreeCAD visuals, and it’s mind-blowing! :astonished:

We’ve got the potential to make FreeCAD even more appealing, accessible, and vibrant. Let’s encourage Joe to share his creation on GitHub. Since these icons are basically code (SVG), it does seem to make a lot of sense to me. I know that GitHub does not need advertisement, but here it is nonetheless. Please back me up! I want to contribute :wink: Why use GitHub for this project:

  1. Collaboration: GitHub is like the ultimate hangout for developers worldwide. We team up, tweak stuff, and toss our ideas around, all while making this icon theme even more epic.
  2. Transparency: GitHub spills the beans on everything. You can peek at the source code, check out our discussions, and see what’s cookin’. It’s like an open book where we all know what’s happening.
  3. Version Control: GitHub uses Git, a magical system that tracks changes. If we goof up, we can turn back time and fix it. It’s like having a time machine for our project’s history.
  4. Issue Tracking: GitHub has this built-in issue tracker thingy. You can report bugs, toss in your awesome ideas, and see how things are rollin’. We keep things neat and tidy.
  5. Community Building: GitHub is our cozy hangout spot. We chat, ask questions, and brainstorm like a big, happy family. It’s where we become pals and make this project awesome.
  6. Documentation: GitHub’s got your back for docs. We can create cool guides for our theme using GitHub Pages. Clear docs make it easier for newbies to hop on board.
  7. Securing Progress: Life can throw curveballs, right? Sometimes, a developer can’t make time or faces tricky circumstances. GitHub has our back by keeping the project safe and sound. If someone can’t continue, others can step in, ensuring our theme’s journey goes on!
  8. Code Review: With GitHub’s pull requests, we can dive deep into code. We check each other’s work, give thumbs up, and make sure only the best code makes the cut.
  9. Community Contributions: By putting our project on GitHub, we’re inviting a global gang of developers and designers to the party. They can toss in ideas, fix bugs, and level up our project big time.
  10. Distribution: GitHub makes it easy-peasy to grab our cool stuff. You can snag the latest version or clone the project. It’s like a one-stop-shop for all things awesome. :exclamation:

Let’s make FreeCAD as cool as it can be, together! :smiley:

I’ve put my money where my mouth is by creating these basic guidelines gathered from previous discussion - it might be a good starting point, don’t You think?
**General Guidelines:**Icon Dimensions: Design your icons at 48x48 pixels.
Stroke Width: Use a 3px width for external strokes (outside edges) of icons.
Internal Lines: For internal lines, use 2px or 1.5px based on the icon’s complexity and preview window.
Padding: Aim to keep a 2px pad around the outside edges of the icons for consistency.
Patterned Strokes: When using patterned strokes, apply settings of “0.01 2” for optimal results. Adjust as needed based on design considerations.
Scalability: Focus on ensuring that icons scale well to 24px size, while still remaining recognizable down to 16px.

Color Guidelines:**Color Logic: Use a color scheme where green and red represent additive vs. subtractive functions related to solids.
Sketcher Icons: In Sketcher, use green/white for geometry, dashed lines for construction, orange for control points, and lighter blue for datums.
Color for Functions: Assign specific colors like plus (+) or minus (-**) for functions to accommodate users with color-vision deficiencies.
Position of Marks: Generally, place marks like check marks (✓) or toggles in the lower right-hand corner of the icon. Consider upper-right if visibility is an issue.
Consistency with Original Set: Maintain consistency with the original icon set where applicable.

**Organization and Contribution Guidelines:**GitHub Repository: Consider creating a GitHub repository for your icon theme, including a palette file and draft design guidelines. :stuck_out_tongue:
Organization: Make efforts to organize the repository for clarity and accessibility.
Prioritization: Prioritize creating icons for the workbenches most commonly used before modifying a stylesheet with matching color schemes from the same palette.
Theme Expansion: After creating icons for default workbenches, work on theming the remaining default workbenches.
Focus on Scalability: Ensure that icons remain recognizable even at smaller sizes, especially down to 16px.


This might not be much, but each of these could be developed into a separate document! :wink:

13

Thanks for the kind words. I have not ceased work on the icon themes. I completed my two most used workbenches (Sketcher and Part Design) which was a tremendous work. I have some revisions I want to make, as well as finish up the Part WB before creating many more. However, that was very exhausting to do and I have taken a break to work on studying colors, ui/ux accessibility and work on complementary themes.

My Dark theme is progressing slowly, but still coming along quite well. Once I feel it is in a fairly good state, I intend to resume work on icons. Community involvement on the icons is welcome. For the theme, the style is rather preferential and I’d like to get it mostly complete before I open it up on Github for contributions.