Icons might be one of the most important – and underrated – examples of design in your portfolio. Here’s a look at icon design with some inspiring examples.
Icon elements are shown almost everywhere, but sometimes get produced as an afterthought. That shouldn’t be the case. Great icon design can be distinctive and add finesse and flair to a project.
Let’s take a look at what’s new, and what’s hot in icon design in 2020!
Hand Drawn Icons
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.
The best part of hand drawn styles is that you don’t 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’t feeling overly artistic.
Icons with Depth
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.
These styles are quite fun and sometimes use hints of trends that have come and gone such as long shadows.
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.
Icons with Hover States
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.
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.
And don’t try to get too complicated here. An elaborate icon can get lost with a hover state. This works best for simple icon pairs.
Even websites and designs that previously featured complex icon styles are moving to more stripped down and simplified icons.
What’s nice about them is that each icon portrays an identifiable thing, but the representation isn’t 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.
Line Icons with Color Shapes
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.
The color shape might fill a part of the line icon design, but more often than not it’s 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.
The tricky part of the icon design is placement and size of the color shape element. If it’s 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.
While there’s 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.
Abstract Icon Shapes
Not sure what icon represents your content? An abstract icon shape might be the answer.
More designers are creating abstract style icons for use across websites. The nice thing about this style – and trend in general – is that abstract styles create a sense of whimsy and wonder that matches some of the bigger overall trends in design.
The key to working with abstract shapes is to make sure you aren’t replicating something by mistake and that icons truly are abstract. (Don’t 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.
Primary color palettes are a bold, bright, and engaging choice for small design elements.
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 “Material” brights that have dominated palettes as of late.
Soften the design with gradients (or faux-ombre gradients, such as the example above) to keep the color palette from looking too elementary. Don’t go overboard when working with primary colors. They can be a touch overwhelming. Consider a muted primary palette or monochromatic scheme.
Icons with Background Icons
Some trending icons have icons of their own. Seriously!
For more elaborate uses of icons – we’re not taking tiny favicons here – icons can be stacked and layered to create more of an art element.
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.
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’t be afraid to use and reuse elements and use the same icons (alternating line and filled) in backgrounds and foregrounds.
Another icon design trend that builds on popular line icon styles is to create two-color elements.
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.
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.)
This creates an accent in the icon design that will help draw the eye into the design element, and hopefully, surrounding content as well.
If you browse through any app store, you’ll see a lot of common marks – envelopes for mail apps, checks for productivity apps, locks for security apps.
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’s an inclination to use icons for a specific meaning.
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.
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.
Color is being used in a few different ways when it comes to the icon design trend:
- As a background with a white or black line-style icon
- For full color icon elements with a more realistic look
- For icon elements with a more flat, gradient or super-bright design
Popular color choices in the bright family include yellows, blues, greens, and purples. These colors tend to be on the bright side and crafting a color palette with three to five hues for an icon set is popular.
Not sure where to start? Material Palette showcases colors that are a big part if the color icon design trend.
Icons in Logos
Take note of how many logos feature icons. Once you start thinking about it, not seeing all the little icons in logo design will be tough.
What’s nice about an icon in a logo is that it works with the brand name, and with some time and brand equity can stand alone. Think about the example above, Spotify. Even though the music provider hasn’t been around all that long (in the scope of brands), the circle with three lines is highly identifiable.
The icon works in color and without – a key of a strong icon – and can stand alone or with lettering. This versatility makes it easy to see why icons are a popular element in logo design.
Circles are one of the most harmonious shapes. And when it comes to icon design, they are rather popular. From icons that are contained inside a sphere to circles within objects, creating a design mark using circles can establish just the right feel for users.
Part of the influence of circle in icon design might connect back to some of the guidelines set forth by Google with Material Design. All those circular buttons are perfect for tapping on mobile phones. And that same philosophy applies to icon design. (Just think how often an icon is a touchable or clickable element.)
The part that can be a little trick about this icon trend is meshing circles in all the places where other shapes are used. App icons tend to be square; social media profiles are circular (and square).
When creating a round icon, make sure that the content of the icon design is easy to understand at small sizes, because you must shrink it often to fit in other places.
Line Style Icon Design
Line style icons seem to be the trend that never gets old.
Part of the reason is that this icon style can work practically anywhere on any background type. Many of the popular, downloadable icon packs often include a line style design because of this versatility.
It’s easy to see this in the example above. Each icon is easy to see and understand at practically any size.
Simple Elements and Representations
As with most other design trends in 2020, simplicity is part of icon design as well. Simple shapes and geography combine to create almost over simplistic representations for icons.
The result is a quite an artful design that makes users look.
In the example using food icons above, each icon uses the common thread of a circle in the icon. This can be the overall shape of the icon itself or a part of the icon design. This shape connects each icon to one another in the project.
Icons with Gradients
The gradient color trend that has become one of the dominant themes of 2019 is a factor in icon design as well. From simple gradients in line strokes (such as the example above) to full gradient coloring to white icons on a gradient background, this color scheme is popular.
That might be what’s so appealing about the use of gradients in icons (and overall) – there are so many different ways to use the trend. You can add a gradient and still not have a project that looks just like something else.
Focus on Simple Coloring
Icon designers are taking the opposite approach with color as well and sticking to simple, more limited, more basic color palettes for these small design elements.
Using a limited palette is a great idea. With a design that’s so small, too much color or detail can overwhelm the space quickly and cause strain on the eye.
You don’t want users to have to think about what the icon is or what color means. Limiting the amount of detail – including elaborate coloring – can make each individual icon a little easier to see and understand. This is most important with icons that will be used at the smallest sizes.
Everything App Style
One of the reasons that icons have grown in popularity so much is that we are already designing them for almost everything. From app icons to app-style icons for favicons or desktop icons, this style is practically everywhere.
App-style icons have a distinct style almost of their own. This includes:
- Square in shape
- Rounded edges
- Colored background (usually one color)
- Simple shape inside icon
- Plenty of contrast between icon and background color
- No text or lettering
Thick, Uniform Strokes
Not only are line-style icons popular, but icons with thick line strokes are especially popular.
Designed often for single-color applications, these icons are frequently used in white or black on top of color or photo backgrounds.
Icons with thick, uniform strokes are most frequently used on their own, such as a cart icon or contact icon. They aren’t often used in a collection of icons.
Flat Icons Remain Popular
While much of the hard focus on flat design has evaporated, icon design is still pretty flat (or at least almost flat).
This is likely due to the super-simple nature of flat design and the idea that this look can integrate with a number of other styles fairly easily.
Even looking at some of the icon design examples and trends featured here, you’ll see that many of them are flat. (Line style icons are almost always flat, for example.)
Emojis have almost become their own language – a more visual form of communication that’s getting more generally accepted all the time.
Icons design is also taking on an emoji-esque flair. These icons are identifiable because of a focus on the head shape of a person or creature. (The Star Wars-inspired emoji icons above are a great example of how to have fun with icon design.)
This style of the icon could work great for a contact page or for representing people or personas in a design.
How to Design a Better Icon
Crafting a good icon or set of icons is more than just hopping on to some of the latest trends in icon design. Because of the small size of icons, attention to detail and precision are an important part of the design process.
Simple rules still hold true for icon design in 2019. Pair these guidelines with some of the trending ideas above to create something you’ll love:
- Start with a grid
- Build with geometry
- Create a unique shape
- Give icons plenty of room
- Stick to your brand colors
- Use consistent divots
- Design for the smallest size you need
- Don’t decorate
Icon Design Guidelines
A good way to keep up with what’s “in” is by looking at graphics standards and style guides. Each time Apple or Google changes their approach so does everyone else. Partially because they have to and partially because the new style is often reflective of the times and trends in icon design.
You can find guidelines here:
Icons are a useful design tool. From use as app icons to website marks or favicons to divots that can be used in a logo or throughout a design project, the icon is a mark that’s here to stay.
Approach icon design in the same way you would almost any other project, but really think about simplicity and size. Icons are made to look at quickly and are often small. This can have a great impact on the design.