Usage
The icon component allows you to display an icon from the Iconography library. They are used to provide additional meaning or give a hint about the usability of the component they are used in.
Best practices
Do
Pair icons with content to reinforce their meaning.
Don't
Don’t use icons for decorative purposes alone.
Do
Use it where text labels don’t fit. Remember always to add an aria-label.
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.
Examples
Live Preview
Resources
- To know more about icons, check our iconography here
- Check our foreground color palette here
- To know more about aria-label, check the w3 documentation
Props
Fetching props...