System Icons#

System Icons

System icons are often used to represent commonly used operations, such as: save, edit, delete. Ant Design also includes icons to represent file types and state.

• View the icons

Key Contour Lines#

Ant Design's grid and key contour lines

Contour lines play an important role in making various icons with the same visual effect.

Please make all icons in the 1024×1024 resolution (16×16 64 times).

• Illustrator tips

Square contour

Horizontal rectangle contour

Circular contour

Vertical rectangle contour

Stroke Weight#

Correct example

Line thickness is consistently 72px

Incorrect example

Line thickness is not uniform

Consistent stroke weight is the key to maintaining the visual unity of the entire icon system. Ant Design's icons have a consistent line width of 72px.

Corners#

Correct example

The icon's corners are properly rounded

Incorrect example

The icon's corners are not rounded

Consistent rounding of corners and sizing of angles is also an important element in maintaining visual unity.

Icons that follow Ant Design should have rounded corners and edges using a 72px radius.

Visual Correction#

Correct example

For the intricate “JPG” lettering, an outline is added for readability

Incorrect example

The text in the icon is crowded and hard to read

In certain special cases (for example, when the icon is too compact), adjustments to line width, outlines, or other subtle changes may be made to increase readability.

Perspective#

Correct example

Maintains a flat, simple style

Incorrect example

Icons should not have depth nor varying perspectives

Always keep a simple, flat style. Icons should not have a sense of depth nor a large amount of detail.

Naming Conventions#

Naming Conventions

Uniform naming conventions make finding icons faster and easier. For example, icons with a surrounding outline have a uniform "-o" suffix.

Icon Sizing#

Icon Sizing

Icons should be scaled according to the text size, according to the Ant Design specification.

For example, icons inline with 12pt font should be 12px in size with 8px of spacing.

Color#

Color

Colors demonstrated - @Black = #000000, @White = #FFFFFF, @Blue-6 = #1890FF

The color of the icon should be consistent the color of the surrounding copy, unless the icon is being used to express state (in which case it should be colored accordingly).

Business Icons#

Business Icons

Business icons, unlike system icons, do not themselves have functional operations, but rather an abstraction that assists with copywriting. Compared to the system icon, the business icon is more rich in the details of the design, the size of the use of relatively large.

Note: Business icons design principles and system icons are basically the same, the details of the processing (such as stroke weight, fillet size, etc.) depending on the specific scene may be.

Icon Sizing#

Icon Sizing

In normal use, there are 32px (minimum size), 48px and 64px (maximum size) three options.

Color#

Color

There are two kinds of business icon, single-color (neutral color) and double-color (neutral color + primary color), the area of primary color does not exceed 40% of the entire icon.