Icons

In Digital Assistant you can show icons from the icon set inside your Cards.

Best Practices

Make the icons meaningful

Avoid using icons solely for visual interest. Make sure they'll be meaningful to the end user and have a purpose in the UI.

Minimal color usage

Icons use the regular body text color, however you can designate a different color by using one of the color classes. If you so, ensure the colors can help convey a meaning to the user.

Use standardized sizes

It is advisable to use standardized sizes for icons, based on where they are used. We suggest 16px for utility icons, 22px for navigational and 32px for features.

Utility: 16x16

Used to indicate an interaction inside a component such as a drop down menu or a date picker.

Way-finding iconography used to navigate UI elements such as dialog boxes or open\/close panels.

Feature & Object: 44x44

For use as visual anchors on Cards. As the largest icons they are intended to be used to indicate top level features.

Use icons

To add an icon, use the at-carbon-icon element, and specif which icon you want to display using the icon attribute. Choose from one of the icons from the icon set below.

You can change the color of your icon by adding a color class.

You could further change the size of your icon by adding inline styling.

Icon set