Best practices
Coloplast provides a basic icon set, designed with our brand personality in mind, and aiming to balance our human side with function.
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.
To make it easier to maintain icons sizes across many different designs and platforms, the Icon component provides the themes and preferred sizes. Use this component instead of including icons directly.
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 succesfully used without the use of a label, so be mindful when chosing 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.
Use icons with meaningful labels and supportive text when possible.
Icons with no label can be confusing or misinterpreted.
Use contextually meaningful and widely recognised icons.
Non-standard use of icons and labels make actions unclear.
Use identical colours for icon and label.
Avoid using custom colours for icons.
Sizes
There are 5 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 colour (fg.default ). For components involving status/signal colouring of icons, follow the guidelines associated with the component and use case.