Our icons can be used across multiple plaforms (web, iOS, Android) to represent similar concepts. Certain icons are already established by conventions on specific platforms. In these cases, follow the conventions for the operating system using the OS-specific guidance.
Functional icons library in Figma
Best practices:
Icons should be used purposefully to maximize comprehension and reduce cognitive load when you need to call attention to a particular action, command, or section.
As a general rule, icons should be used in combination with meaningful and supporting text help users move through the product in an easy-to-understand manner. There are only a handful of widely recognized icons that can be successfully used without the use of a label, so be mindful when choosing icons for e.g. icon buttons.
- Consider when to use icons – if you’re questioning an icon’s use, it probably doesn’t need to be used at all.
- Use icon and text coupled in a meaningful and thought out way
- Don't combine multiple icons into one object or action.
- Always consider icons from a global perspective and use an internationally recognized icon in place of a locally recognized one.
- Avoid using icons solely for decoration or visual interest
- Don’t use icons as background decoration e.g. like watermarks.
- Avoid scaling icons below the recommend smallest size (xs) to prevent icons from being illegible
Sizes
There are 4 supported icon sizes:
- X-Small - 16px: Used in places with limited space such as small versions of components or in tight interfaces such as mobile application. Use this size thoughtfully while keeping accessibility and the users in mind.
- Small - 20px: Small icons are used specifically in some of the components.
- Medium - 24px: Medium icons are the standard size in our system, and is the most commonly used.
- Large - 28px: - Large icons are the used in large variants of various components.
- X-Large - 40px: Large icons are used more sparingly in situations with plenty of space available.
Colour
The icons are by default using the primary foreground color (fg.default ). For components involving status/signal colouring of icons, follow the guidelines associated with the component and use case.
Accessibility
Icons are always a solid, monochromatic color and should have a contrast ratio of at least 3.0:1 against background colors. The color of the icon should reflect the importance of the icon’s action which should always be to help guide a user.
In cases where widely recognized icons are used with no assisting text, an aria-label will be used for the icon.
For icons shown with assisting text or labels, aria-labels should not be used to prevent accessibility label duplication.