abf215a982
* init recommend block * init design pages * home frames * add background banner * hello, Hitu makes the animation * add media query * add images * update types * add declare * preload support * update ignore * additional ignore site Home lint * update ignore * add hover effect * adjust alt of bannber * adjust lang & card shadow * fix typo * adjust desc * hitu in english * article add link * Certainty is hitu * Meaning Hitu * Growth with Hitu * Natural Hitu * slow down of Natural * adjust speed of icons * New Meaning animation * adjust animation duration * update card link * update link * values doc * replace images * faster Growth * update values * fix lint * all slow down * adjust padding * update icons * adjust margin * update images * adjust montion * adjust by designer * update pages * update design prod * update articles * update site style * update doc * update images * update style * lint fix * adjust liner color * github text color update * adjust margin of title * mobile design * update design sub card * update style * less lint * update images * design card auto height * update img * update logo transition * adjust card style * adjust style to fix 184 * adjust nav style * category it * slow down of logo * update style * hide video link * hitu article * use img of hitu * update docs * style lint * update Hitu layout doc * update images * speed up logo * update link * clean up * clean up * update doc * adjust doc * update images
6.5 KiB
| category | order | title |
|---|---|---|
| Global Style | 4 | Icons |
An icon is a graphical representation of meaning. Icons can be used to express actions, state, and even to categorize data. Ant Design's icons adhere to the following two principles and are designed for cross-platform consistency:
- Graphics that are clear, intuitive, and simple enjoy a higher degree of recognition and are more easily understood
- All icons in the user interface should be consistent in style (detail design, perspective, stroke weight, etc.)
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.
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).
Stroke Weight
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
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
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
Always keep a simple, flat style. Icons should not have a sense of depth nor a large amount of detail.
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
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
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, 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
In normal use, there are 32px (minimum size), 48px and 64px (maximum size) three options.
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.