Illustration icons - summary of icon types and styles

What are the types of UI design icons

Can be divided into functional categories

Application icons, such as the logos of Sohu, Sina, NetEase and other websites;

Function icons, such as the "start", "pause" and "fast forward" icons of various music players;

Can be divided into silhouette icons according to design style

;

Light skeuomorphic icons: Based on the original skeuomorphic icons, the heavy texture is reduced, and shadows, gradients, and textures are removed to transform into flat icons;

Lightly textured icons: Gradient/projection/opacity and other icons are unique and have richer details;

Phenomorphic icons: tangible, colored, styled and textured icons;

Overlay icons;

Icons with text as the main body, such as Alipay and Taobao icons;

Illustration icons are usually game applications that directly use characters, props or pictures in the game as icons. Summary of icon types and styles

This article comes from Youshe.com. Icons are often used in recent work, but the designed icons are always a bit uncoordinated when placed on the page, so see I would like to collect and share this article.

The author's writing is still very detailed. If you like it, you can follow him. The link address is below.

Editor's note: Icon types are ever-changing, but in fact they are inseparable from the three aspects of "linearity, surfaceness, and combination of lines and surfaces", combined with expressions such as "transparency, gradient, color overlay, texture, and multi-dimensional space" designed in a way. This article has nearly 6,000 words. You can understand all the design styles in one article!

Icons are an extremely important part of UI design. Almost every interface design we do involves the expression of icons. Excellent Icon design can make interface expression more refined and interesting.

The design of icons often reflects the basic skills of designers. Therefore, in addition to daily drawing to improve the control of icon shapes, we also need to understand and learn the trend types of icon design to help us Improve efficiency in design.

Based on the purpose of self-study, I usually do corresponding collection when browsing some design websites. Therefore, this article mainly organizes the "types and styles" of icon design, as well as my own thoughts on each icon type.

Dividing the types of icons

The icons on the design website can be said to be diverse, and different types of icons have unique charms. For example, linear icons are simple and lightweight, while flat icons are thick and direct. Of course, the same type of icon also has many different forms of expression.

So based on my understanding of icons, they can be roughly divided into three categories: linear, surface, and combination of lines and surfaces. A wide variety of expressions can be created by combining the three basic types of expressions.

Linear icons

Icons outlined with lightweight lines tend to have an overall feel that is refined, detailed and sharp. Different line expressions have different visual experiences. Thin lines are lightweight, straight lines are strong, and curves are soft.

1. Basic analysis and ideas of line icons

Thickness comparison

With different thicknesses, the intensity and weight of the icon will be different. Icons with thick lines will be more prominent in terms of visual attention, but they will also appear thicker and heavier than icons with thin lines. Thin line icons, delicate, breathable and beautiful.

However, when designing, you need to determine the thickness of the line based on the "overall UI style". Instead of simply considering the attention of the icon, you need to consider the balance between the icon and the overall interface.

Softness comparison

Right angles and rounded corners determine the perception of appearance and the direction of style. As can be seen from the comparison in the figure below, the larger the rounded corners, the more cute and soft the graphics will be (as shown below) Right picture), the smaller the rounded corners, the more direct, tough and masculine (left picture below). So hard or soft or in-between depends entirely on the early setting of the overall style.

Comparison between Traditional and Simplified Chinese

In addition to being lightweight and concise, the recognition of icons is also extremely important. As shown in the picture on the left below, "excessive simplicity" causes the icon to lose its recognition and become ambiguous, while the overlay of elements in the picture on the right below makes the icon slightly complex. In the balance between complexity and simplicity, the simplicity of the icon should be maximized without affecting the recognition of the icon.

Recognizability of features

In addition to simplicity, it is also necessary to consider the characteristics of the icon. For example, in the case of the "Comment" icon in the picture below, when I remove the "three dots" in the icon, the icon still has the meaning of "Dialogue/Comment", and when I remove the "arrow" below, the "three dots" remain. ”, there will be ambiguity. It can be expressed as “more”. Therefore, when designing icons, it is necessary to accurately grasp the meaning to avoid ambiguity.

Maintain the characteristic beauty of the icon

For example, the "heart-shaped" icon below. The picture on the left below is our universal icon, which still maintains its original appearance after being combined with a circle. The beauty of form. But from time to time we also see the third kind of design. Although the overall shape remains loving, the outer outline is forcibly cut in order to be "consistent" with the overall style. The aesthetics of the original graphic are slightly different. This is something we need to think about. Key points.

Combined proportion

The proportion of the combination will affect the sophistication of the icon. The accurate "proportion value" can make the overall shape more balanced and more aesthetic. As shown in the example below, two sets of effects with different proportions were tried. Here, the narrow edge of the icon was used as the "base value" for the experiment. When the inner shape is 1:2 of the outer shape (Figure 2 below), the overall visual effect of the icon is relatively balanced; when it is larger than 1:2 and close to 4:3, the internal structure of the icon will appear too full. When it is less than 1:2 and close to 4:1 (Figure 3 below), it will produce a sparse and uncompact effect. (The proportions here are only required for the case, the actual design is subject to the final visual perception)

2. Linear type expansion

Basic theory, combined with the application of extension, can burst out more Lots of creative ideas. There is not only one design form for linear icons. Through the following cases, you can see the diversity of line icon design types.

Minimalist style

The overall style is extremely simple, with no extra lines. The essence of graphics is restored through lines. The appearance is "simple" but has strong recognition. In terms of visual perception, Easy and clean.

The minimalist style icon lies in the control of graphics. One more stroke may appear complicated, while one less stroke may affect the recognition level. Taking the above picture as an example, the combination elements of the icon are kept at about 2, and the overall design is relatively clean.

Practical applications: Instagram, Airbnb, Facebook, Twitter

Two colors

Compared with "solid color icons", they are more expressive and have more details. Rich, there is an extra layer of change in form perception. Combining the superposition, contrast, and complementation of colors enhances the layering and richness of the icon.

Same color system: expressions of cold colors, warm colors or the same color system. As shown in the example below, dark colors are used as the main color, and bright colors are used to brighten the icons, giving the icon a high-light feeling.

Another set of cases is a combination of bright main colors and dark colors. The overall icon effect is pretty good, but the brighter colors are not applied to the key features of the icon, which slightly weakens the perception of the icon at first glance.

Contrast complementary colors: the color span is wider and the layers are more distinct. As shown in the example below, the contrast between red and blue is more colorful and memorable than a single-color icon.

Actual case: Tencent Animation My Page

Transparency Change

Essentially, it is the same type of design as above, through the superposition and change of transparency, Improve the sense of layering and space of the icon and reduce the oppressiveness of the icon.

Actual case: iQiyi 9-square grid icon

Gradient layer overlay

Gradient brings out the texture of the icon, combining "different depths" or "different Changes in "saturation" make icons more detailed and layered.

Black and white + brand color

Black and white are the main colors, combined with the brand color as the embellishment color. Compared with the conventional black and white icons, it not only changes, but also takes into account the exposure of the brand color.

Actual case: Dianping guide page icon

Linear gradient

Combined with the color of the gradient, it enriches the visual expression of the entire icon and improves the visual appearance of the icon Impact and design. The case is combined with a black and white background as an attempt. White background: The visual effect of thick lines is relatively better than thin lines, and gradients can be expressed more clearly; black background: The visual effect of thin lines is more refined and sharp than thick lines. feel.

Actual cases: NetEase Koala, NAVER

One stroke forming

This type of icon has high linear fluency and design sense in visual expression. The point of concern is that the "opening starting point" setting of the entire set of icons needs to be consistent. For example, "from left to right" or "from right to left" forms an integrated and coherent line. Inconsistent opening starting points will affect the consistency of the entire set of icons, and will also appear cluttered when applied to the page.

Breakpoint icon

It is similar to the previous one, but there is no continuity requirement. On the basis of linear icons, we look for a gap to break the dull feeling of "all-inclusive icons" and make the icons breathable and have changes in lines. The position of the notches should be kept in the same direction and size as much as possible. In addition, the number of openings needs to be controlled to avoid too many openings that will cause the icon appearance to be too fragmented.

Actual cases: Tencent Sports, JD.com

Hand-sided icons

Hand-sided icons can express the power and weight of the icon better than linear icons. Linear icons are more likely to attract users’ attention. In terms of recognition, face icons are more dependent on the clarity of the outer outline, so polishing the appearance is the top priority during design. A clear outer outline can help improve recognition.

1. Basic analysis and ideas of face icons

Outline comparison

The difference in outline will reflect different temperaments, such as the difference between the left and right sides in the figure below , one has a more direct and tough temperament, while the other is more soft and cute. A smooth shape can make the overall face-shaped icon more concise and regular. The icon in the middle of the picture below appears to be relatively fragmented in outline processing, and the overall outline shape lacks coherence.

Hollow-out contrast

Appropriate hollow-out not only supplements the recognition of graphics, but also improves the design details of the icons. In addition, it is necessary to control the proportion of the hollow part and the overall shape. If it is too small or too large, it may affect the balance of the icon. As shown in the middle and right side of the picture below, if the hollow is too small, it will not have much effect on the recognition of the icon. If there is no hollow, it will lose some breathability.

Physical comparison

Differences in form will also lead to different visual perceptions. Taking "star" and "heart" as examples, the visual perception of individual shapes is more intuitive than the combined shapes, while the combined icons are relatively more refined and have more layers. The experience in daily design is: the smaller the icon shape, the simpler it should be, so it is recommended that it is better to appear alone; if the size of the icon is large enough, a combined design can be used to supplement the details of the icon.

Comparison between Traditional and Simplified Chinese

When designing face-to-face icons, it is also important to manage redundant details. As details increase, cutting too many blocks will make the overall icon too fragmented (as shown on the right below). Keep the design simple to improve the recognition of the icon, and add key feature details (the camera flash in the middle picture below).

2. Expansion of face icon types

Face icons can also be designed with various expression methods to enhance the texture and creativity of the icon, rather than simply Fill color.

Single color surface + embellishment color

The overall appearance uses a unified color, and different colors are used for embellishment based on the attribute perception of the icon. The embellishment color brightens the visual effect of the icon. , to achieve both unity and differentiation.

Colorful two-colors

The overall icon atmosphere is created through the combination of contrasting colors and adjacent colors, which enhances the level and richness of the icons. The two-color expression also adds to the interest of the graphics. It is extremely common in APPs used daily, simple and easy to produce results.

Micro texture gradient

Weak gradient enhances the texture of the icon. The direction of the gradient will affect the visual effect of the overall icon, so it can be adjusted according to the needs of different designs. As shown below:

Actual case: National Karaoke

Transparency/grayscale changes

Transparency/grayscale changes make the original monochrome icons become It has a more layered and spatial sense, the design details are richer, and the heaviness of the monochrome icons is reduced.

Actual case: Penguin FM my page

Transparency change + gradient

The gradient design improves the texture of the face icon and has a certain color effect richness. On the basis of gradient, the transparency of the combined type is differentiated, giving the icon a layered feel.

Transparent overlay icon + gradient background

This type of icon is often used in lists or top entries in UI interfaces.

Actual case: National Karaoke song request page

Color overlay penetration

After the icons are transparently overlaid, a staggered negative shape is produced, and a third one is superimposed. noodle. Although the overall design still remains flat, it has a sense of layering and the details of the icons have been added.

Actual case: Baidu Netdisk

Gradient layer overlay

The overall effect is closer to the icon with changing transparency. Through the changes in the depth of the gradient, the shape of the There is a contrast between light and dark at the junction, so the icon also has a sense of thickness and layering.

Actual cases: NAVER, Palm Life

Gaussian blur

This type of icon is basically not seen in the APP, and it is not related to "transparency change" or "color overlay" "Compared with them, they have a more layered and spatial sense, and the icons also have a strong sense of design.

Line-surface combination

Combines the advantages of linearity and surface, which not only maintains the weight of surface, but also has the delicacy and delicacy of linearity. Therefore, when designing, the line-surface ratio can be controlled according to the specific feeling that the icon wants to express. Different ratios can present different visual perceptions.

1. Basic analysis and ideas of line-surface combination icons

Line-surface ratio

Differences in line-surface ratio will lead to different tensions in graphics. feelings. Three different ratios have been tried for the icon shape based on the middle filling. As can be seen from the figure below, when the ratio of the filling to the narrow side of the shape is 1:3 (left picture), the icon appears to be drawn in; the filling and the narrow side are narrow. When the side ratio is 1:2 (middle), the overall icon is more balanced; when the fill-to-shape narrow side ratio is 2:3 (greater than 1:2) (right picture), the overall icon has a tendency to expand.

Combined forms

Lines and surfaces can be drawn in different combination forms. A variety of line and plane icons can be designed based on different combination forms. Different combination forms will reflect different design styles, so think as much as possible when designing to find a combination that suits you.

Contrast between Traditional and Simplified

The combination of line and surface itself is composed of two forms, so it is more necessary to control the overall shape during design, and the single (line and surface) shape It is necessary to maintain a high level of simplicity so that the final combination of the icon will not be too complex (pictured left). If the form itself is too complex, it will reduce the icon's recognition and visual beauty.

2. Expansion of line-surface combination icon types

Icons that combine line and surface combine the advantages of linearity and surface, and also inherit the advantages of both in terms of design methods. The design method is also based on the combination of the above two, so more design possibilities can be combined.

Black and white lines + surface brand color

It is closer to the "linear + brand color" approach, with a unified linear color superimposed on the brand color.

Actual case: Haohaozhu, soul

Two-color line and surface

Based on the line and surface, make differences in the color of the line and surface. The specific method is close to linear or surface two-color.

The combination of lines and surfaces - Yin and Yang

The combination of lines and surfaces is designed at a ratio of 50%, based on the structured design of basic methods such as top and bottom, left and right, and centering, and the visual appearance of the overall icon The effect is jumpy and unconventional.

Double-color line and surface + misalignment

Based on the two-color icon, the line and surface are scaled according to a unified "percentage", and perspective and displacement are designed to present the overall It is a kind of interlaced and superimposed visual effect, which is richer than the ordinary two-color line and surface.

Actual cases: Xianyu bottom tab, face ball bottom tab

Line surface misalignment + gradient

Based on the previous style, the color of the opposite side or line is used Gradient design enriches the texture and color of the icon and makes it more delicate.

Line and surface transparency changes

The design method of "line and surface transparency changes" is roughly the same. As shown in the example below, the first recognition of "weak line and strong side" is weak, while the shape recognition of "weak side and strong line" is higher, and it is more in line with the expression of the icon.

Actual cases: Sina Weibo, Tencent News

Based on three basic types of expression, a variety of design forms can be developed.

In addition to the above cases, some other designs have also been collected.

Line and surface combined with C illustration

The overall feeling is more like an illustration, with more details and elements, which is common in the blank page design of some APPs.

Line and surface combination_cartoon illustration

The overall feeling is cute, cartoony, and two-dimensional, which is common in some two-dimensional or comic-based APPs.

Faceness_Gradient strong texture

The overall style of light and shadow texture will be relatively strong, which often appears in some activity operations or mini-game interfaces.

Facial C Flat Realism

The overall feeling is relatively flat, and the richness of details is close to the perception of reality.

Line surface + gradient illustration

The overall style is more towards the colorful color style, with rich texture and details.

Realistic style

3D texture icons

Due to the relatively high production cost of C4D, it is currently rarely seen in conventional APPs. However, as 3D is a mainstream design trend, more attempts in this area need to be made as time and ability permit.

The combination of isometric lines and surfaces

The isometric design enriches the original line and surface icons and gives them a three-dimensional perspective.

In addition to the above, we will also find some more special icon designs in actual scenes.

List icon for Facebook more pages

The overall style is biased towards illustration style + gradient texture. Since more pages are designed for pure lists, the entire page has made a bold attempt in the design of icons, which is more attractive than conventional monochrome icons. In order to distinguish different businesses, the function icons of system nature are distinguished by different colors.

The category list icons under the APPStore game and new APP interface

The overall design expression is a concrete flat style, and the color of the icon restores the most basic perception of reality.

Start page icon of iOS office software

The overall style is more business-like and simple, with concrete graphic expression + slight gradient texture.

The extended function icons in the QQ mobile version

The overall style tends to be light realism + weak gradient. Each icon has rich detailed expressions, and the tones are distinguished based on business attributes and brand colors. The whole icon is both unified and differentiated. 40 self-media commercial material website videos + illustrations + pictures + icons

Creative Commons (knowledge sharing) is referred to as CC license material. The creator voluntarily gives up some rights to the work, and there will still be restrictions. For example, it is required to indicate the source, author name, etc. Please read the instructions carefully when seeing the CC license. The PD agreement proves that the work has been donated to the public domain.

The CC0 agreement means that the creator voluntarily gives up all rights to the work and can use it unconditionally, including commercial use. (However, you cannot upload it to other material websites, claim copyright, or use it in illegal ways. The content involved in the image may still involve trademark rights, publicity, and privacy rights.

pexels photography pictures of people, landscapes, animals, etc.

High-definition videos and pictures of sandy fields (Chinese website)

/

unsplash high-definition artistic photography pictures (most used)

visualhunt photography pictures of people, landscapes, animals, etc.

pixabay photos, illustrations, vectors, videos

freejpg colorful landscapes, plants, animals

skuawk professional photographer's works

picjumbo high-definition still life, landscape pictures

kaboompics architecture, still life and other small fresh High-definition pictures

gratisography fashion photography gallery

foodiesfeed food photography high-definition gallery