Icon
Use the Icon Component to provide subtle graphical information to the user that, in some cases, may also trigger simple interactions such as liking a product, saving an article for later, etc. You may choose between the already provided Material Icons or add the ones you need to the Icons
page in Figma in the Indigo.Design System and the only condition here to use your icon is that it needs to be a component. We highly recommend exercising caution when selecting icons to add to the kit. It is important to maintain consistency in order to ensure the best visual coherence between them. The Icon is visually identical to the Ignite UI for Angular Icon Component
Icon Demo

Size
The Icon comes in three different sizes:
- Large
- Medium
- Small

Styling
The Icon comes with styling flexibility through the options for selectable graphic and the color applied to it.

Usage
Carefully pick the Icon color to assure good contrast with the background and definitely avoid similar shades of the same color or combinations that create chromatic aberrations.
Do | Don't |
---|---|
![]() |
![]() |
Additional Resources
Related topics:
Our community is active and always welcoming to new ideas.