Icons can work together with text, or can serve as a standalone straightforward way of communicating actions or information to a user.

Icons can be used in a variety of settings, as support for text or standalone.

Caret icons are used in select inputs or standalone menu triggers. They always point down, and always open a new dropdown.

When a menu button is not standalone, like on the cluster card or in a table
row, use the ellipsis icon instead of the caret for menu triggers.

Chevrons are used as an affordance for a collapsible/expandable, accordion, element. They do no open a new dropdown, but resize the existing container. Always point the chevron in the direction of the content when open, and to the opposite of its content when closed.

Icons should be contextual to the action or information they support. Don’t
use icons next to brand names.

Whether working in light or dark mode, ensure your icons are accessible and pass a 3:1 contrast ratio with their background. You can check this contrast ratio by using the 

. (Gray Base is the lightest you can go in light mode for our gray palette.)