When we want to rearrange ICONS in the design, in addition to rearranging, we also need to resize the ICONS to make them look “about the same size”. Trying to achieve consistency and uniformity is very cumbersome and time-consuming.
Finally, I found a prescribed way in Material Design of Google.
For example, the size of the icon is 48px by 48px. If you need other ICONS, you can scale them up and down. The best icon you can design is a vector or shape icon.
Google officially defines three Material Design shapes: circle, square and rectangle.
1. Decide what size icon should be used?
Align the icon with the template in the image above, and with the center still, enlarge the icon so that it touches the boundary of the three shapes in turn. The most filled shape is the size required for the icon.
2.The problem of iconfont
Most teams convert ICONS to iconFont to reduce the size of the entire project.
3.alignment
If you look closely, the size of the icon is 48px by 48px, but the area with content, such as the circle, is only 44px by 44px, which is where you want to center the image. One centered up and down, one centered right and left.
If you look closely, it doesn’t look middle. This is caused by people’s visual illusion [2]. At this time, it is necessary to make appropriate adjustments and align them with their own visual judgment.
4.Uniform color
Generally speaking, ICONS can be set to the same color value (such as #FFFFF) to unify the color, but there are some cases where the color of an icon is lighter. This is because the transparency of the image processed in Sketch is in two places, one is the overall transparency (above the fill option area), the other is the transparency of the fill. This is often because of the overall transparency there is a problem, fix it.
Ok, that’s all for today!