Quick Entry Icons
The design principles are based on the unified design rules of the MEXC icon.
Size and grid
Use a unified grid size with dimensions of 24*24px for icons, while controlling the actual canvas within a 20*20px area. In certain special cases, if the icon is too long or has protruding corners, allow the content to extend appropriately to ensure a uniform visual weight.
24
20
24
20
Design Guidelines
2
Corner
3
3
Weight, Stroke
Space allocation
Trip endpoint
1
endpoint
Both ends of the external and internal segments are processed at right angles.
Corner
The outer circle is square, with the default outer contour maintaining 2px rounded corners and internal right angles. Minor adjustments can be made based on the visual appeal of the icon.
2
Generally, corners are 2px, combined with real-world effects
Large rounded corners can also be used to meet design requirements
To maintain the visual rigidity and clarity of the face icon, the internal hollow shape is treated with right angles.
If right angles produce the best effect, slight adjustments can be made based on the aesthetic of the shape (rounded corner range 1px or 0.5px).
Weight
The icon design of the diamond area typically adopts a faceted style. When the graphic semantics are limited and cannot be accurately expressed through faceting, linear icons can be used for supplementary design. The outer contour lines should be appropriately strengthened to avoid 'visual imbalance' with faceted icons.
When the internal hollow lines are too dense, minor adjustments to the thickness of the lines in that area are allowed (for example, adjusting between 1.8px to 1.5px) to ensure the visual clarity and comfort of the icon.
2
2
2
The thickness of the hollow lines inside the icon and the spacing between the split sections of the icon are both 2px.
Space allocation
The hollow design of the icon should strike a balance between clarity and graphical beauty, avoiding overly large hollow areas that make the icon appear too light, or overly small areas that make the design feel dull.
The proportion of the hollow area to the overall surface area of the icon should be controlled between 20% and 30%.
The range of the hollow area is limited to the actual drawing entity of the icon and does not include the safety margins around the icon.
Gradient angle
The icon uses a top-to-bottom 90° vertical gradient to enhance depth and a lightweight visual effect.
The icon uses a 90° vertical gradient from top to bottom, starting with a solid color at point A and gradually transitioning to a transparent color at point B.
Color token: content/primary
Color token: content/primary (75% Opacity)
A
B
Design example
The ends of the external and internal lines of the icon are all treated with right angles, and rounded corner designs are not allowed.
Do
Disable
When the graphical semantics are limited and cannot be accurately expressed through the surface, linear icons can be used for supplementary design, and their outer contour lines should be appropriately strengthened to enhance visual weight.
Do
Disable
Icon slicing rules and templates
The app outputs 3x slices, while the web outputs 2x slices; Please refer to the icon specification template file for the library
King Kong area + web menu bar icon
The icon content is drawn within a 24*24px grid and exported centered in a 32*32px delivery container to adapt to different platforms.
Placed in the play
32
24