Computer icon design has been around in some form or another since the late 70’s, but since then the idea of what exactly constitutes an “icon” has changed dramatically. The term once associated with minimal black and white images serving as the digital equivalent of call-to-action roadsigns might now refer to more elaborate and colorful illustrations meant to enhance textual content. Our continually expanding possibilities as graphic designers have led to icons that are sophisticated, intricate and more “playful, stand-alone creations” than “purely functional stand-ins”. Naturally, the lean toward more visual exploration leads to exciting new design trends, which can be equally helpful if used tastefully and harmful if followed slavishly for the sake of…well, of being trendy. We’ve picked out 5 major icon design trends that are either here to stay in 2018 or are just now popping up – enjoy, and please use responsibly :)
Via Seanau
Desaturated Palette
Used largely with stroked multi-color icons, the desaturated palette look has appeared quite a bit over the past few years and seems to still be going strong in 2018. The effect is popular for its ability to soften the impact of the icon on the viewer’s eye and create a more subtle reaction, which further allows the icon to aid in the comprehension of content instead of distracting from it. The lightened hues also make for a much more versatile graphic as the designer can worry less about a loudly colored icon clashing with the palette of the surrounding design (check out our medical icon set for some more examples of this technique). Furthermore, desaturating the palette can make it easier to stroke multi-color icons with unusual colors in place of the traditional black outline, resulting in a truly unique icon.
Via popcornarts
Sparkles and Dots
As laughable as the above style might sound, you can find it virtually everywhere. The trend started popping up around 2017 and has continued to appeal to designers as a fun way to add a lively touch to the space surrounding an icon. It manages to convey a playful and vaguely retro 50’s feel while still remaining versatile and contemporary. This effect is often coupled with a subtle drop shadow under the icon which creates the illusion of an unconfined icon floating in space.
Via Paolo Valzania
Broken Lines
I remember seeing this light stylistic touch around the time I was just getting into icon design around 2015 and it seems to have endured over the last few years. If one is careful not to overuse the broken line to the detriment of the icon, it’s a fairly simple technique for the designer to execute but one that results in an undeniably contemporary look. It’s often used to represent a subtle light reflection on the outline of a shape or it can be a filled shape within the object, creating the shiny “bubble” effect. Even as a simple dot or two trailing the end of a line, it can effectively add a distinct sense of movement to an otherwise static looking graphic.
Via Flat-icons
Elaborate Line Icons
Icon design has seen a huge development over the last few decades and more possibilities for icon designers has led to the pushing of boundaries beyond universal utilitarian symbols. Serious icon designers with time to dedicate to their craft are now able to create intricate scenes that combine multiple stand alone icons and essentially do away with the traditional “less is more” philosophy. These icons work on a number of levels by visually engaging the viewer, escaping the trap of using a simple and generic concept, and presenting the exciting challenge to the designer of piecing together a truly unique scene.
Via Dave Chenell
Animated Icons
One of the most exciting design trends has been the prevalence of animated icons created with Adobe After Effects. Where fluid animation was once confined to relatively simple icons like the “hamburger menu” or the play button, more intricate vector icons are now able to spring to life and create a playfully engaging user experience. You might say we’ve backtracked to the dark ages of the internet where GeoCities home pages were invaded by unsightly flying fairies and distracting spinning planets – except this time we actually got it right. Whereas the intentions for animated gifs back then was mainly to pimp your page (content be damned), designers seem to have learned to harness the power of web animations for good by making them more relevant to the content and resisting the looping effect which can lead to overstimulation. Let’s just hope it stays this way…
