Anatomy
- Icon container: The containing element that defines the icon's boundaries and target area. It can also has a circle.
- Icon: The visual representation taken from the Watson iconography library
Usage Guidelines
When to use this component
- Icons help communicate actions and concepts where text labels don't fit, such as in action bars, navigation bars, or compact UI elements.
- As symbolic communication for elements that do not have room for text, like the phone number.
- When hovering, for displaying some additional information using the Popover.
When not to use this component
- When their meaning isn't immediately recognizable or if they could be interpreted differently by users from various cultural backgrounds.
- For interactive purposes. For that case, use Icon Button.
Best Practices
Pair icons with content to reinforce their meaning and improve accessibility.
Don't use icons for decorative purposes alone.
Use it where text labels don't fit. Remember always to add an aria-label.
Don't rely solely on icons to communicate critical information
Ensure sufficient contrast ratio (3:1 minimum) between icon and background
Don't use custom colors that don't meet accessibility contrast requirements
Use icons from the Watson iconography library to maintain visual consistency
States
Variants
There are two different icon variants:
- Default: this is just the icon, and its contrast must be checked against the background of the element containing it.
- Circle: a circular background is added to the icon to ensure that accessibility contrast requirements are met wherever it is inserted.
Styles
Default colors
By default, the icon component already comes with a range of colors that belong to the system palettes, in order to maintain consistency and harmony with the rest of the components in the library. We recommend using these colors if the icons are going to be used with Watson components.
Custom colors
The icon component supports custom HEX values to cover cases that are specific to the product and are not supported by the Watson color palette i.e. custom colors for services and agendas. If you have trouble identifying your case, reach out to the design system team for help.
Sizes
Related information
- To know more about icons, check our iconography information page.
- Check our foreground color palette and its pairings in our color page.
Content Guidelines
Use a descriptive label to describe the Icon
- Be succinct and exclude unnecessary words.
- Be informative and accurate with the message you want to convey.
- Avoid technical jargon and use a simple language.
For further information, see the Content Styleguide.
Known Gaps
- Possible component improvements:
- Guidelines on how to use the different icon sizes.