Icon Styles for Every Taste

Some ideas for your next collection of interface icons

The icons are, without a doubt, one of the most used graphic elements today in the interface design of digital products. And to make this statement with some degree of certainty, we do not even need a very robust statistical analysis. Just remember the interface of that application where we just ordered a transport, last night when we saw a movie through an online platform or even the most recent visit we made to our homebanking. The truth is that icons are everywhere in our daily lives, on or offline.

It is also true that in terms of their design, the languages ​​are the most varied and creative that we can imagine. There are icons for all tastes, shapes and forms. Whether you have a strictly functional mission to indicate a direction, or serve as a graphic reference in the hierarchy of information on a given page, icons are one of the visual tools most used by designers, in the most varied areas of activity.

Definition of icons

Although the drawing style of the icons can vary greatly (as we will see later), their definition is quite easy. Defining what icons are, at least in terms of their use in the interface of a digital product, is relatively simple. We can define an icon, as being an image constructed through its own visual language, with some degree of similarity but also of abstraction, in face of a figure recognized by a certain group of people.

In this definition, a number of characteristics are evident, among which some are closely related to the dimension of the graphic design itself. When designing an icon or a complete iconographic family, for a wider use in the product, one of the most important points is the definition of the drawing style, or better saying, its visual language.

In addition, the definition also refers to the necessary and preponderant balance between two very relevant concepts with regard to icons: similarity and abstraction. Only with the determination of these two dimensions, it is possible to achieve a graphic language, visually interesting and capable of giving its own identity to the digital product interface that we are working on.

Visual languages

Trying to inventory all the graphic styles that can be used in the design of icon families, is a task condemned to failure. Whether due to the breadth of possible solutions or the difficulty of defining the boundaries of each graphic style, creating a library that manages to inventory, all the visual languages ​​used today, is in itself an impossible task.

More than being able to understand which language to use at any given moment, the fundamental thing, as in many aspects of creativity, is to define your own style of design, which is identical for each brand. It is essential to collect inspirations and collect references. However, this work is of no use if each designer does not succeed in creating an own design style for each digital product, almost as an alchemist.

Not wanting to serve as a catalog of options, much less an inventory for styles of icon designs, here are some more examples, from iconographic families, that may serve as inspiration at some point. This set of references, goes through a scale that goes from more figurative representations using the graphic element of the line, to more abstract drawings where the spot predominates.

Image for post
Image for post

Two lines

Very figurative design that seeks a greater similarity with the representation of the object. Therefore, the construction of shapes uses two thicknesses of lines, trying to create a greater rhythm in the design of each icon.

Image for post
Image for post

One line

Search for a representation, less figurative and more systematic of forms. This style of drawing also uses a single line thickness, predominantly thin in density, for the construction of shapes.

Image for post
Image for post

One line, two colors

Starting from many common premises of the previous style, whether in the design or information density of the shapes, this style of drawing introduces the dimension of color. Through two different colors, the shapes gain a greater rhythm with each other.

Image for post
Image for post

Broken lines

Using the line as a design element, this language opts for a stronger line density. In addition to this, the line is used with breaks, which help not only create several readings, but also introduce a greater rhythm to the drawing.

Image for post
Image for post

Patterns

Assuming the silhouette in a way, with some degree of simplification, the interior can be filled with different patterns. Using the line, or not, in the design of this pattern, in addition to the outline, the interior of the icon also serves as a drawing space.

Image for post
Image for post

Silhouettes

Assuming the silhouette of the form as the main reference, this graphic language, comes down exclusively to that contour. As a rule, using an opaque padding, the shapes should contain some degree of simplification to facilitate reading.

Image for post
Image for post

Silhouettes in two colors

Using the same design assumptions of shapes as in the previous graphic language, this solution also introduces the color dimension to this type of design. Through different chromatic tones, the figure’s silhouette gains depth and rhythm of reading.

Image for post
Image for post

Colors

Keeping a degree of relative simplification in the design of the shapes, the color, applied to the stain, has the property of introducing texture to the design. This language can be constructed using a wide chromatic range or simply with tonal variations.

Image for post
Image for post

Circumscribed

For styles that take a certain geometric shape as a visual reference space for the icon, with or without color. In this case, the shape is assumed as the main visual reference, passing the interior design to the background.

Image for post
Image for post

Abstract

Whether using geometric shapes or not, the design is constructed in a completely abstract way. Therefore, in this type of visual language, the drawing loses any representativeness with a known figure, passing exclusively the visual reference.

Always an incomplete inventory of visual languages, this selection of drawing styles can serve as inspiration for creating your own solutions. Therefore, it is essential to look at all of these approaches with some critical sense, but above all with the ambition to add new perspectives, perhaps even more creative, whether in the design of shapes or in graphic grammar.

There are also many platforms online — such as The Noun Project — where it is possible to look for inspiration for the design of icons or complete families. But, it is essential not to forget, that what makes the design of the icons interesting, is not only the graphic style itself, but also the way in which this language relates to the identity of the brand and the digital product.

Read and share more about at www.dxd.pt

The Startup

Medium's largest active publication, followed by +755K people. Follow to join our community.

Ruben Ferreira Duarte

Written by

Hi. My name is Ruben Ferreira Duarte and I am a portuguese UX/UI Designer, currently living in Lisbon (Portugal). www.everythinks.pt

The Startup

Medium's largest active publication, followed by +755K people. Follow to join our community.

Ruben Ferreira Duarte

Written by

Hi. My name is Ruben Ferreira Duarte and I am a portuguese UX/UI Designer, currently living in Lisbon (Portugal). www.everythinks.pt

The Startup

Medium's largest active publication, followed by +755K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store