Good icons harmonize with typography and with the rest of the design language. They don’t mix metaphors, and they communicate only what’s needed, as speedily and simply as possible.
Linear scaling size ramps
|16px x 16px||24px x 24px||32px x 32px||48px x 48px|
Icons should generally maximize their given space with little padding. These shapes provide starting points for sizing basic shapes.
Use the shape that corresponds to the icon's orientation and compose around these basic parameters. Icons don't necessarily need to fill or fit completely inside the shape and may be adjusted as needed to ensure optimal balance.
|Horizontal rectangle||Vertical rectangle|
In addition to using the same grid and line weight, icons are constructed with common elements.
Using only these angles in building shapes creates consistency across all our icons, and ensures the icons render correctly.
These lines can be combined, joined, rotated, and reflected in creating icons.
Here are some examples:
Curved lines are constructed from sections of a whole circle and should not be skewed unless needed to snap to the pixel grid.
|1/4 circle||1/8 circle|
We recommend using only pure geometric shapes when constructing icons.
Icons can contain filled shapes when needed, but they should not be more than 4px at 32px × 32px. Filled circles should not be larger than 6px × 6px.
A "badge" is a generic term used to describe an element added to an icon that's not meant to be integrated with the base icon element. These usually convey other pieces of information about the icon like status or action. Other commons terms include: overlay, annotation, or modifier.
Status badges utilize a filled, colored object that is on top of the icon, whereas action badges are integrated into the icon in the same monochrome style and line weight.
|Common status badges||Common action badges|
Color badging should only be used to convey the state of an icon. The colors used in status badging convey specific emotional messages to the user.
|Green - #128B44||Blue - #2C71B9||Yellow - #FDC214|
|Positive: done, completed||Neutral: help, notification||Cautionary: alert, warning|
The default position for any status or action is the bottom right. Only use the other positions when the design will not allow it.
Badges should be sized to 10–18 px on a 32 px × 32 px grid.