Icons
Chroma has a core set of icons used across our global components as well as brand specific icon sets.
Chroma Specific Icons
This are 2 icon sets available for all brands within the system.
These icons sets are called:
Font Awesome Icons
Using Font Awesome directly is also an option if you require an extended icon library set not available within the defined core and product sets.
Choosing the right icon
Use the following guidance when selecting icons:
| Type | Use for |
|---|---|
| Core Icons | Actions, navigation, status, system functionality |
| Product Icons | Insurance products, services and business concepts |
| Font Awesome | Fallback icon library when no suitable Chroma icon exists |
Naming convention
| Type | Name |
|---|---|
| Core Icons | i-icon name (example: i-search, i-download) |
| Product Icons | i-product-icon name (example: i-product-car, i-product-home) |
Basic rule
If the icon represents an action, navigation, or system function, use a Core Icon.
If the icon represents a product, service, coverage, or business concept, use a Product Icon.
Brand variations
Chroma supports multiple brands through a shared icon ecosystem.
Brand themes may change:
- Colour
- Styling
- Contextual presentation
New brand-specific icons should only be introduced when an existing shared icon cannot adequately represent a unique business, product, or regulatory requirement.
Best practices
Do
- Use existing icons whenever possible
- Reuse icons consistently across journeys
- Pair icons with text where needed
- Ensure accessibility requirements are met
- Prefer simple and familiar icon metaphors
Don't
- Do not create duplicate icons
- Do not use icons solely for decoration
- Do not change icon meaning between products
- Do not rely on icons alone for critical information
Can't find the right icon?
If the icon you need does not exist in the Core or Product icon libraries, contact the Chroma team before creating a custom icon.
New icon requests
The Chroma team reviews requests to:
- Verify that no suitable icon already exists.
- Ensure consistency across brands.
- Determine whether the icon could be reused by other teams.
- Add approved icons to the shared Chroma library.
If approved, the Chroma team can design, create, and publish the new icon so it becomes available across the Chroma ecosystem.