Icons
Icons, as fundamental elements of the interface, influence the overall style presented by the UI to a certain extent.
Design Principles
Simplified
"Graph simplification" enhances clarity and understandability; "parameter simplification" aims to eliminate decimals, remove unnecessary points, and strip away unnecessary decorations to ensure the icons are concise.
Moderate
In icon design, the combination of lines and shapes should present a sense of moderation. When dealing with high-density icons, consider the rhythm of the lines to avoid a compact and oppressive feeling. Follow the principle of moderation to ensure a unified visual experience.
consistent
Icons maintain a consistent visual style, with uniform size, thickness, and rounded corners.
Size and layout
The uniform grid size is drawn with an icon size of 24*24px, and the icon supports scaling in units of 4px. Common icon sizes are 16*16px, 20*20px, 24*24px, and 32*32px.
24px
24px
24px
24px
Grid baseline
The icon design actual canvas controls an area of 20*20px, leaving a 2px bleed around it. In certain special cases where the icon is too long or has prominent corners, it is allowed for the content to extend appropriately to ensure a consistent visual weight.
2 pixels
2 pixels
20px
20px
Design Guidelines
2
3
Corner
Weight outline
Trip endpoint
1
endpoint
Corner treatment at the ends of the line segment
Corner
Keep a 2px outer radius
2
Generally, corners are 2px, combined with real-world effects
Large rounded corners can also be used to meet design requirements
In general, angles of ≥120° have no rounding.
A shape of ≥120°, if the corner is a right angle, would be too rigid. At this point, it is necessary to consider the real shape and provide a 2px rounded corner.
Weight
The system icon's stroke thickness is 1.5px, including internal graphics, hollow areas, and breaks.
1.5px
1.5px
1.5px
1.5px
1.5px
1.5px
1.5px
Size outline
How to use common sizes 24*24px, 16*16px, 12*12px
Scale proportionally
24
20
16
12
Separate for 1px border
angle
The basic angles at which icons are tilted are 45° and 90°. In some cases, angles of 30° and 60° are also used. These principles will help icons appear more consistent and visually synchronized.
45°
60°
30 degrees
0°
30 degrees
45°
60°
90°
Basic shape
For more complex icons, the following basic outer frames can be used for design to ensure a more regulated visual style. For design references, please go to the Foundation Library 4.0 library.
Contract trading icon
Coupon icon
Collection, “+” type icon
Currency and brand icons
Safety and authentication icons
Exchange and conversion icons
Design example
The rounded corners need to be adjusted based on the actual icon effect. In this case, the rounded corners for the check are only for smooth transitions, and no specific rounded corner values are defined.
Do
Caution
When handling some symmetrical shapes, centering should not break the balance of the composition for the sake of aligning the grid.
Do
Don't
Try to avoid using inconsistent stroke thicknesses that break the balance of the composition.
Do
Don't
Business icon design reference
Please design according to the icon usage specifications for different scenarios.
The design primarily conveys business functionality.
For example: the "VIP" diamond zone icon should be recreated using symbols like a crown, diamond, or the letter V, expressed in a way that is intuitive and easy for the public to understand. Avoid using ambiguous terms like "sofa" to prevent any misunderstanding by users.
Do
Don
Be consistent with the main visual core elements.
For example, when designing the icon for the "Send Great Gifts" event, the main visual elements should be gift boxes, US dollars, and gold coins. The core symbols should be extracted for shape design to ensure the marketing effectiveness of the icon, while further simplifying the shapes to ensure overall visual harmony and unity.
Do
Don't
Inheritance business/brand form gene
For example: When designing an icon for 'eth_300x', designers can further expand by inheriting or using the Ethereum brand image itself. It is not recommended for designers to make associations based on their own understanding, as this may convey inefficiency and ambiguity.
Do
Don't
Icon representation and slicing rules
The App outputs 3x images, and the Web outputs 2x images.
Navigation bar icon
The canvas size is 24*24px, and the actual drawing area is 20*20px, with a stroke width of 1.5px.
CATI / USDT
CATI / USDT
Light mode
Dark mode
16
16
16
16
12
24
Bottom navigation icon
The canvas size is 24*24px, the actual drawing area is 20*20px, and the stroke thickness is 1.5px.
Home
Markets
Trade
Futures
Wallets
Home
Markets
Trade
Futures
Wallets
Home
Markets
Trade
Futures
Wallets
Home
Markets
Trade
Futures
Wallets
Light mode
Dark mode
naming rules
Main structure:
icon style
Type case:
icon: Corresponding icon name
style: fill (filled icon) / tt (Two Tone icon) / rtl (icons supporting right-to-left reading languages)
Use all lowercase letters a-z; special characters (spaces, +, double underscores, etc.) are prohibited.
Separator: Use an underscore _, do not use - to separate words.
Icon examples:
info
info_fill
arrow_left_rtl
Design and development process
If you need to add a new business icon, the business designer must design it according to the specifications and place it in the fixed location to await review
