Best practices
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.
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.
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.
|
✅ Do |
🛑 Don’t |
|---|---|
|
Stick to the predefined colours |
Customise icon colours |
|
✅ Do |
🛑 Don’t |
|---|---|
|
Use filled icons with matching brand or white backgrounds |
Use inverted icons on light backgrounds |
Sizes
There are 3 supported icon sizes:
- Large - 112px
- Medium - 80px
- Small - 48px
Colour
We’ve created our icons in three variants: Line (deep blue with turquoise touch-points), 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 art-board 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.
