Icons

Overview

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

How to use this component

General usage

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

Sizing

Our icons support built in sizes of 14px (Small), 16px (Default), 20px (Large), and 24px (XL). They can also be resized to other dimensions if needed.

Carets

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.

Ellipses

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 and text

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

Icons and brand names

Don’t use icons next to brand names. Instead, follow our brand guidelines on how to display brand names.

Color and accessibility

Whether working in light or dark mode, ensure your icon color is accessible and pass a 3:1 contrast ratio with their background.

You can check this contrast ratio by using the Contrast plugin in Figma. (Gray Base is the lightest you can go in light mode for our gray palette.)

Reserved Icons

Collection icon

The collection icons are a type of file icon specifically reserved to represent collections. If you want to present a different state of this icon place the additional icon element in the bottom right corner to be consistent with other icons.

Project Icon

The box icon is reserved to represent the project to avoid using the same icon to represent multiple elements. If you need to use a folder icon to represent a feature other than the project, please consult with the design systems team.

Cluster icons

We have icons for three different types of icon for cluster: sharded cluster, replica set, and serverless. Use the icons based on the type of cluster to be represented.

Nodes

There are two types of icons for nodes based on the type, primary and secondary. Use the icons based on the type of nodes to be represented.