Icons are a helpful and familiar visual aid to guide and inform users. Not just for aesthetics, they provide humanity by defining hierarchy for information and shaping a page’s composition, helping to make our product more approachable and usable.
See our Icon Component for information about how to use these components.
by default, by 20px in size (minimum) and can be scaled to larger sizes if it contextually makes sense.
have a minimum touch zone of 48px
be accompanied by a label to support the visual. Try avoid using icons in isolation of labels, unless they are being used for a clear visual convention (e.g. Search, Home, Close, etc.)
be overused. Avoid using icons for the sake of it.
need to align to the baseline grid.