Jul 21, 2020
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
