At Coloplast, icons are used extensively across all types of communication. By using them repeatedly, we enhance consistency in our brand's communication. Together with the rest of our branding elements, such as our colours, our icons form an important part of a coherent experience that strengthens our brand.
Best practices
For the best outcome, show Line icons on light backgrounds and the inverted on dark backgrounds. The Filled variations fit many circumstances, especially when you want to put the focus on the turquoise. Use icons of the same variant to enhance a specific topic and show different process steps.
Sizes
There are 3 supported icon sizes:
- Large - 112px
- Medium - 80px
- Small - 48px
Color
We’ve created our icons in three variants: Line (deep blue with turquoise touchpoints), Filled (our primary turquoise with fill in) and Inverted (white with turquoise).
All three are meant to reflect our brand identity. The Line variant should be used when you may already have too many turquoise elements on your artboard or when you want to present a more toned-down communication. The Filled variant is the standard version, which you’re welcome to use most of the time. The Inverted is for placing the icon on a dark background or with dark mode on screens.
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.
Missing an icon
If you find that there is an icon you need that is not currently represented in the brand icon library, we have guidelines for developing brand icons. This guidelines can be found on the Coloplast Brandportal - Brand icons