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

Icons are a visual representation that can communicate an action, object, or idea. They provide information and reduce complexity to users

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

 (XL). They can also be resized to other dimensions if needed.

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

Chevrons are used as an affordance for a collapsible/expandable, accordion, element. They do not 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.

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.

Icons should be contextual to the action or information that they are coupled with. They should also be placed closely to items in a way that make it clear what text they are supporting

Instead, follow our brand guidelines on how to display brand names.

Whether working in light or dark mode, ensure your icon color is accessible and pass a 

You can check this contrast ratio by using the 

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