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 are often used to represent commonly used operations, such as: save, edit, delete. Ant Design also includes icons to represent file types and state.
<imgclass="preview-img no-padding good"align="right"src="https://gw.alipayobjects.com/zos/rmsportal/uoNmxXiqKpfoFDdEVjUB.png"alt="Correct example"description="Line thickness is consistently 72px">
<imgclass="preview-img no-padding bad"align="right"src="https://gw.alipayobjects.com/zos/rmsportal/cnFYbWzcKaPFSiHcptCF.png"alt="Incorrect example"description="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.
<imgclass="preview-img no-padding good"align="right"src="https://gw.alipayobjects.com/zos/rmsportal/tGbuhPmvEJXmOFoYAkPK.png"alt="Correct example"description="The icon's corners are properly rounded">
<imgclass="preview-img no-padding bad"align="right"src="https://gw.alipayobjects.com/zos/rmsportal/JekevTlqdDJQLIQwrppm.png"alt="Incorrect example"description="The icon's corners are not rounded">
<imgclass="preview-img no-padding good"align="right"src="https://gw.alipayobjects.com/zos/rmsportal/VghPLyDUdFmjhGJlNxjV.png"alt="Correct example"description="For the intricate “JPG” lettering, an outline is added for readability">
<imgclass="preview-img no-padding bad"align="right"src="https://gw.alipayobjects.com/zos/rmsportal/qnzloxRQmvHzHAhWWwCS.png"alt="Incorrect example"description="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.
<imgclass="preview-img no-padding good"align="right"src="https://gw.alipayobjects.com/zos/rmsportal/tIePnIOTXtgzVKbqwucm.png"alt="Correct example"description="Maintains a flat, simple style">
<imgclass="preview-img no-padding bad"align="right"src="https://gw.alipayobjects.com/zos/rmsportal/ALNOEelXeFhxUobLqyCq.png"alt="Incorrect example"description="Icons should not have depth nor varying perspectives">
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, 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.
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.
