{"id":5407,"date":"2020-09-12T16:07:00","date_gmt":"2020-09-12T16:07:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=5407"},"modified":"2020-09-08T16:29:17","modified_gmt":"2020-09-08T16:29:17","slug":"key-trends-in-icon-design-in-2020","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/icons\/key-trends-in-icon-design-in-2020\/","title":{"rendered":"Key Trends in Icon Design in 2020"},"content":{"rendered":"\n

Icons <\/strong>might be one of the most important \u2013 and underrated \u2013 examples of design <\/strong>in your portfolio<\/strong>. Here\u2019s a look at icon design with some<\/strong> inspiring examples<\/strong>.<\/p>\n\n\n\n

Icon <\/strong>elements are <\/strong>shown almost everywhere<\/strong>, but sometimes get produced as an afterthought. That shouldn\u2019t be the case. Great icon design can be distinctive and add finesse and flair to a project.<\/p>\n\n\n\n

Let\u2019s take a look<\/strong> at what\u2019s new<\/strong>, and what\u2019s hot in icon design in 2020<\/strong>!<\/p>\n\n\n\n

Hand Drawn Icons<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Hand drawn icons are not only a trendy style, but they also create a more intimate, authentic feel for a design project. Styles for these icons can vary widely, from simple shapes and lines to full-color icons.<\/p>\n\n\n\n

The best part of hand drawn styles is that you don\u2019t actually have to draw them yourself. There are plenty of hand drawn icon sets available so you can find just the right style, even if you aren\u2019t feeling overly artistic.<\/p>\n\n\n\n

Icons with Depth<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Creating depth in icon design is somewhat tricky, but more designers are using this trend with oversized icon sets. Using shadows and geometry to create just the right shape combinations with an element that adds an almost three-dimensional effect.<\/p>\n\n\n\n

These styles are quite fun and sometimes use hints of trends that have come and gone such as long shadows.<\/p>\n\n\n\n

These icons tend to be on the more complex side and are best suited for use where the icons are fairly large or work in combination with another element, such as text for a logo.<\/p>\n\n\n\n

Icons with Hover States<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

When it comes to icons for the web, one of the most popular techniques is to pair a set of icons in such a way that creates a hover state or animation. This might include using an icon that with a color fill and then not or almost creating a button around an icon.<\/p>\n\n\n\n

If you plan to use some sort of hover state with an icon, it is important to think about this in the icon design phase. Not all icons or icon sets are optimized for this technique. Look for a complete icon set with variations that make creating a hover state that much easier.<\/p>\n\n\n\n

And don\u2019t try to get too complicated here. An elaborate icon can get lost with a hover state. This works best for simple icon pairs.<\/p>\n\n\n\n

Simplified Icons<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Even websites and designs that previously featured complex icon styles are moving to more stripped down and simplified icons.<\/p>\n\n\n\n

What\u2019s nice about them is that each icon portrays an identifiable thing, but the representation isn\u2019t always 100% literal. Icon designers may take liberty with shapes or lines to create icon shapes that are the most simple version of the item it represents.<\/p>\n\n\n\n

Line Icons with Color Shapes<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n


Line icons are always a popular choice, thanks to a versatile style that looks good with almost any other design element. The trend adds just a little more visual interest with a pop of color, often in the form of a circle or square, behind the line icon.<\/p>\n\n\n\n

The color shape might fill a part of the line icon design, but more often than not it\u2019s just floating in the background. This tiny bit of visual interest can tie an icon set together, emphasize a brand color, or just freshen up an older site of line icons.<\/p>\n\n\n\n

The tricky part of the icon design is placement and size of the color shape element. If it\u2019s too big or too bright in color, it can take away from the icon. If the shape is too small, you risk it looking like a mistake.<\/p>\n\n\n\n

While there\u2019s no perfect size, most of the icons using this trend keep the color shape to about one-quarter of the full size of the icon.<\/p>\n\n\n\n

Abstract Icon Shapes<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n


Not sure what icon represents your content? An abstract icon shape might be the answer.<\/p>\n\n\n\n

More designers are creating abstract style icons for use across websites. The nice thing about this style \u2013 and trend in general \u2013 is that abstract styles create a sense of whimsy and wonder that matches some of the bigger overall trends in design.<\/p>\n\n\n\n

The key to working with abstract shapes is to make sure you aren\u2019t replicating something by mistake and that icons truly are abstract. (Don\u2019t try to create icons that are similar to your logo, for example, they might just look like errors.) For something that really matches, use the same color palette for icons and brand materials.<\/p>\n\n\n\n

Primary Colors<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n


Primary color palettes are a bold, bright, and engaging choice for small design elements.<\/p>\n\n\n\n

This icon design trend makes use of red, blue, green, and yellow (along with purple and orange) to create a basic set of color rules. What makes this style work is a focus on color to draw attention to small elements on the screen. Primary colors will also stand out from all of the \u201cMaterial\u201d brights that have dominated palettes as of late.<\/p>\n\n\n\n

Soften the design with gradients (or faux-ombre gradients, such as the example above) to keep the color palette from looking too elementary. Don\u2019t go overboard when working with primary colors. They can be a touch overwhelming. Consider a muted primary palette or monochromatic scheme.<\/p>\n\n\n\n

Icons with Background Icons<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n


Some trending icons have icons of their own. Seriously!<\/p>\n\n\n\n

For more elaborate uses of icons \u2013 we\u2019re not taking tiny favicons here \u2013 icons can be stacked and layered to create more of an art element.<\/p>\n\n\n\n

This trend often uses color and shading to differentiate between the main focal icon and background icons. The primary icon is often full color or a filled icon. The background icons are almost always line style and might have light color palettes.<\/p>\n\n\n\n

You can create this effect with many premade icon kits by mixing and matching icons in different ways. Create depth and visual interest with icons of a similar theme and stick to just a handful of elements to keep the scene from getting too busy. Don\u2019t be afraid to use and reuse elements and use the same icons (alternating line and filled) in backgrounds and foregrounds.<\/p>\n\n\n\n

Two-Color Icons<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n


Another icon design trend that builds on popular line icon styles is to create two-color elements.<\/p>\n\n\n\n

Two-color icons can build on your existing color palette or brand colors or combine almost any other color pair. When designing using the icon trend, look for color pairs that will stand out from the background on which you plan to use them.<\/p>\n\n\n\n

When it comes to the design, pick a primary color for most of the icon. Use a secondary color to accent an element of the icon. (Think of using the primary color for 70% to 80% of the design and the secondary color for the rest.)<\/p>\n\n\n\n

This creates an accent in the icon design that will help draw the eye into the design element, and hopefully, surrounding content as well.<\/p>\n\n\n\n

Icon \u201cShorthand\u201d<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

If you browse through any app store, you\u2019ll see a lot of common marks \u2013 envelopes for mail apps, checks for productivity apps, locks for security apps.<\/p>\n\n\n\n

This icon shorthand provides a quick visual message that tells users what the app does. This same shorthand applies almost universally to all of icon design. While designers are experimenting with icons in their own style, there\u2019s an inclination to use icons for a specific meaning.<\/p>\n\n\n\n

And this is a good thing. An icon should be easy to see and understand at a glance. An icon should help users know what they should do and how they should interact with the design. This common icon shorthand is a nice evolution of how to do just that.<\/p>\n\n\n\n

Bright Color<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Bright color choices have been a big deal in all aspects of design. That is no different with icons. A bright color is an enticing way to draw the eye to the icon.<\/p>\n\n\n\n

Color is being used in a few different ways when it comes to the icon design trend:<\/p>\n\n\n\n