Side Projects

Icon Set

< Go Back

The Starting Point

Software for tool automation is not known for its style and beauty. But the tool operators and engineers have to use this software every day. The software should be easy to unterstand and icons can make it easier to recognize functions behind buttons without reading the label on the button.

Unfortunately every developer has different style preferences and sources for icons. This leads to an inkonsistent set of icons. Let‘s have a look at the icons that we are using.


There are a few problems here.

Ok, let us create some ideas to fix these problems. What can we do here.

The Process

After the initial analysis I created a list of all icons that the software currently has including the function or meaning. The final list contained 96 icons. But I knew already that I have duplictes and some icons xould be merged because they represented the same idea. Functions like "Add Recipe" and "Add Folder" had different icons but they can use the same. The number of icons went from 96 down to 64 from the review.

In the next step I created a style guide and a grid for my new icons. There are a lot of helpful sources like Apple, Microsoft or Google. My style guide contains only a few points:

It is also helpful to illustrate the coordinates for diagonal line or the intersection of diagonal and horizontal or vertical lines because these do not fit the base grid of 1px.

Now I have a framework and I can begin to create all of the 64 icons that I need. Some of them like arrows, plus, minus, or cross will probably be very easy. Other, more abstract icons like initialize or automatic mode are difficult. But the the process is the same: create ideas, use Google to find inspirations, create my own sketches and then implement the final icon design.

The Result

Here is an example of the final icon set. The icons look much better than before. All issues from the original version are addressed.

icons after rework

There is still some room for improvements: