“The future of glyphs that inhabit a product deserve to be preserved and future-proofed”
“The future of glyphs that inhabit a product deserve to be preserved and future-proofed”
“The future of glyphs that inhabit a product deserve to be preserved and future-proofed”
A brief summary of the process, outcomes, hurdles and lessons learned along the way by redoing over a 100 icons then growing that library number 3x in size
An overview of the process, outcomes, hurdles and lessons learned along the way by redoing over a 100 icons then growing that library number 3x in size
An overview of the process, outcomes, hurdles and lessons learned along the way by redoing over a 100 icons then growing that library number 3x in size
@Proton
Senior Product Designer
@Proton
Senior Product Designer
TL;DR
Proactively suggested this change. Lead the entire initiative.
Did various various research in order to select the best style.
Collaborated with dev's & the product design team.
Aided the entire update throughout the whole suite.
Hand-made 200+ icons with various platform counterparts.
Proactively suggested this change. Lead the entire initiative.
Did various various research in order to select the best style.
Collaborated with dev's & the product design team.
Aided the entire update throughout the whole suite.
Hand-made 200+ icons with various platform counterparts.
The why
The why
An update to the Proton icon set was long overdue. The icon set that came before was merely a temporary solution done by a devoted employee who went out of her way to accommodate the product in the early days and completed a set of over a 100 icons. This worked for some time, however with time it was harder and harder to upkeep. Couple that with new ways to maintain libraries like this it was quickly in need of some love. We were about to change all that by introducing a new & updated style, scalability, grids & otherwise linking it to a design system that has firm pillars for expansion & hopefully - collaboration as well.
An update to the Proton icon set was long overdue. The icon set that came before was merely a temporary solution done by a devoted employee who went out of her way to accommodate the product in the early days and completed a set of over a 100 icons. This worked for some time, however with time it was harder and harder to upkeep. Couple that with new ways to maintain libraries like this it was quickly in need of some love. We were about to change all that by introducing a new & updated style, scalability, grids & otherwise linking it to a design system that has firm pillars for expansion & hopefully - collaboration as well.
Old vs new
First steps
First steps
We knew that something as large as this will need to stand firm on it’s own legs, no need to re-invent the wheel, best to go with common practices - one of which is a fairly standard grid. Now, this grid allows for a multitude of various shapes to play & combine around with that also enables us to really focus on the styling and the possible unique factor of the set, which of course at a glance to an untrained eye might be difficult to spot and would easily blend with a lot of sets out there, but for us - this was a nice angle to include and aim for uniqueness. If nothing else - it’s still an effort to be very proud of where we can state that we made the set that best suits our very specific needs instead of trying to make a pre-made icon library work.
With the key line grid in place - it’s time to set some rules to retain consistency:
2px corner radiuses applied to larger rounded angles/areas, 1px for smaller ones.
16x16px icons are the foundation that scales to 20px, 24px and 32px.
Two separate platform sets as they use different taxonomies: mobile & desktop. Additional reason for this is to allow tweaks for the desktop version to align the icons to the pixel grid exactly. While this is not an issue on mobile - it is noticeable on lower resolution screens for desktop.
Icons are stroke-based for easy dev handover and manipulation in code* (The single rule not to remember - more on this below).
One final rule was that anyone can contribute to the set in the future, but more on that later.
We knew that something as large as this will need to stand firm on it’s own legs, no need to re-invent the wheel, best to go with common practices - one of which is a fairly standard grid. Now, this grid allows for a multitude of various shapes to play & combine around with that also enables us to really focus on the styling and the possible unique factor of the set, which of course at a glance to an untrained eye might be difficult to spot and would easily blend with a lot of sets out there, but for us - this was a nice angle to include and aim for uniqueness. If nothing else - it’s still an effort to be very proud of where we can state that we made the set that best suits our very specific needs instead of trying to make a pre-made icon library work.
With the key line grid in place - it’s time to set some rules to retain consistency:
2px corner radiuses applied to larger rounded angles/areas, 1px for smaller ones.
16x16px icons are the foundation that scales to 20px, 24px and 32px.
Two separate platform sets as they use different taxonomies: mobile & desktop. Additional reason for this is to allow tweaks for the desktop version to align the icons to the pixel grid exactly. While this is not an issue on mobile - it is noticeable on lower resolution screens for desktop.
Icons are stroke-based for easy dev handover and manipulation in code* (The single rule not to remember - more on this below).
One final rule was that anyone can contribute to the set in the future, but more on that later.
Updated icons applied to the grid
Watching the paint dry
Watching the paint dry
With all the tiny rules and agreements in place we inevitably arrive here - the actual part of redoing an icon set that consists of approximately a 100+ icons with the prospect of creating more in the process. Yikes. The first 20 icons seems fun to do, but gets really old after this point. Now, this definitely wasn’t something that’s going to sway or otherwise demotivate from completing the task, but trust me when I say that devotion to redo this is required.
Pushed through. 50 icons, then a 100, 150 and closing in on 200. Similar to sunning a marathon - second breath hits and you become determined to drive this home. There it is! All icons accounted for with +110% addition to spare! Success seems just around the corner and implementation seems in sight...
With all the tiny rules and agreements in place we inevitably arrive here - the actual part of redoing an icon set that consists of approximately a 100+ icons with the prospect of creating more in the process. Yikes. The first 20 icons seems fun to do, but gets really old after this point. Now, this definitely wasn’t something that’s going to sway or otherwise demotivate from completing the task, but trust me when I say that devotion to redo this is required.
Pushed through. 50 icons, then a 100, 150 and closing in on 200. Similar to sunning a marathon - second breath hits and you become determined to drive this home. There it is! All icons accounted for with +110% addition to spare! Success seems just around the corner and implementation seems in sight...
Variants created for both mobile & web. A display of a few icons that begin with the letter “P”.
A brick wall
A brick wall
Failure is something you have to welcome when it arrives. It’s not yourself to blame, it’s not the time to point fingers, it’s simply a hurdle to overcome. When we were at the 227 icon mark (Still remember the number) the devs were already testing out how the icons work and for the most part - they worked fine. Not until more complex icons came to play. Now, in all the visuals on this page the icons are flattened with a created outlined. That was not always the case. The outlined icons are a standard practice - it allows the export of a clean .svg file of any icon and is relatively light in terms of storage if it’s retained in a single piece. However - in the very beginning we opted out to innovate instead by using stroke-based icons that as it turned out was not a great move to introduce on a multi-platform product.
The issue was that the stroke-based approach really behaved differently in each code environment: it could be fine on iOS, but filled in places in a wonky way on something like Android or Windows. We deemed this as a total loss of control in regards of how the set might behave and in order to future-proof the maintenance of the library we had to come up with a way to salvage the set. Lesson learned and challenge accepted - we went back and manually outlined every single icon that we did up to that point. We really took this opportunity to learn that standard practices are standard for a reason - they simply work. Therefore an addition to the few rules seen before just in case you were making notes:
Standard practices are good. Use them. Also outline the icons if you’re making a set - it just works (but keep the source icon intact for safe keeping).
Failure is something you have to welcome when it arrives. It’s not yourself to blame, it’s not the time to point fingers, it’s simply a hurdle to overcome. When we were at the 227 icon mark (Still remember the number) the devs were already testing out how the icons work and for the most part - they worked fine. Not until more complex icons came to play. Now, in all the visuals on this page the icons are flattened with a created outlined. That was not always the case. The outlined icons are a standard practice - it allows the export of a clean .svg file of any icon and is relatively light in terms of storage if it’s retained in a single piece. However - in the very beginning we opted out to innovate instead by using stroke-based icons that as it turned out was not a great move to introduce on a multi-platform product.
The issue was that the stroke-based approach really behaved differently in each code environment: it could be fine on iOS, but filled in places in a wonky way on something like Android or Windows. We deemed this as a total loss of control in regards of how the set might behave and in order to future-proof the maintenance of the library we had to come up with a way to salvage the set. Lesson learned and challenge accepted - we went back and manually outlined every single icon that we did up to that point. We really took this opportunity to learn that standard practices are standard for a reason - they simply work. Therefore an addition to the few rules seen before just in case you were making notes:
Standard practices are good. Use them. Also outline the icons if you’re making a set - it just works (but keep the source icon intact for safe keeping).
Time flies when you’re having fun
Time flies when you’re having fun
Today the icon count is 299 (Ah! So close), each and every one of them work on all of our platforms, fellow product designers are able to contribute to the library with a handy step-by-step guide in place. It’s a huge satisfaction when something works as intended, especially when that “something” is a huge endeavour.
Now, mind you - even though this initiative was mine to suggest and helm, I definitely wasn’t alone - the whole team provided valuable feedback all the way until the very final steps. But one name deserves a special mention: Ignas Širka. Ignas assisted tirelessly through all the grind and missteps mentioned above and offered constant support, kudos - glad to have someone like him on the team.
With that - this was definitely a great project to take on. Even though this topic is very much visual at it’s core - there’s zero deniers that it doesn’t feel better when using the app. Icons are no longer out to stab you, nor they are inconsistent when sat next to one another. Whatever your stance on icons may be - one thing’s apparent: if a product has an icon set in use - it has to be maintained and showed love as much as any other element within that app. Once this is acquired the future of glyphs that inhabit a product deserve to be preserved and future-proofed, so that even if you’re long gone - the legacy of the system in place is well understood and able to be easily picked up by fellow and future peers.
Today the icon count is 299 (Ah! So close), each and every one of them work on all of our platforms, fellow product designers are able to contribute to the library with a handy step-by-step guide in place. It’s a huge satisfaction when something works as intended, especially when that “something” is a huge endeavour.
Now, mind you - even though this initiative was mine to suggest and helm, I definitely wasn’t alone - the whole team provided valuable feedback all the way until the very final steps. But one name deserves a special mention: Ignas Širka. Ignas assisted tirelessly through all the grind and missteps mentioned above and offered constant support, kudos - glad to have someone like him on the team.
With that - this was definitely a great project to take on. Even though this topic is very much visual at it’s core - there’s zero deniers that it doesn’t feel better when using the app. Icons are no longer out to stab you, nor they are inconsistent when sat next to one another. Whatever your stance on icons may be - one thing’s apparent: if a product has an icon set in use - it has to be maintained and showed love as much as any other element within that app. Once this is acquired the future of glyphs that inhabit a product deserve to be preserved and future-proofed, so that even if you’re long gone - the legacy of the system in place is well understood and able to be easily picked up by fellow and future peers.
Today the icon count is 299 (Ah! So close), each and every one of them work on all of our platforms, fellow product designers are able to contribute to the library with a handy step-by-step guide in place. It’s a huge satisfaction when something works as intended, especially when that “something” is a huge endeavour.
Now, mind you - even though this initiative was mine to suggest and helm, I definitely wasn’t alone - the whole team provided valuable feedback all the way until the very final steps. But one name deserves a special mention: Ignas Širka. Ignas assisted tirelessly through all the grind and missteps mentioned above and offered constant support, kudos - glad to have someone like him on the team.
With that - this was definitely a great project to take on. Even though this topic is very much visual at it’s core - there’s zero deniers that it doesn’t feel better when using the app. Icons are no longer out to stab you, nor they are inconsistent when sat next to one another. Whatever your stance on icons may be - one thing’s apparent: if a product has an icon set in use - it has to be maintained and showed love as much as any other element within that app. Once this is acquired the future of glyphs that inhabit a product deserve to be preserved and future-proofed, so that even if you’re long gone - the legacy of the system in place is well understood and able to be easily picked up by fellow and future peers.
Today the icon count is 299 (Ah! So close), each and every one of them work on all of our platforms, fellow product designers are able to contribute to the library with a handy step-by-step guide in place. It’s a huge satisfaction when something works as intended, especially when that “something” is a huge endeavour.
Now, mind you - even though this initiative was mine to suggest and helm, I definitely wasn’t alone - the whole team provided valuable feedback all the way until the very final steps. But one name deserves a special mention: Ignas Širka. Ignas assisted tirelessly through all the grind and missteps mentioned above and offered constant support, kudos - glad to have someone like him on the team.
With that - this was definitely a great project to take on. Even though this topic is very much visual at it’s core - there’s zero deniers that it doesn’t feel better when using the app. Icons are no longer out to stab you, nor they are inconsistent when sat next to one another. Whatever your stance on icons may be - one thing’s apparent: if a product has an icon set in use - it has to be maintained and showed love as much as any other element within that app. Once this is acquired the future of glyphs that inhabit a product deserve to be preserved and future-proofed, so that even if you’re long gone - the legacy of the system in place is well understood and able to be easily picked up by fellow and future peers.
©2023
©2023
©2023