Icons

Find an icon using the SearchInput below. Click an icon to copy its JSX to your clipboard.

Using icons

To use an icon, import it from components/src/global/icons and use it like any react component.

import { ChevronRight } from "components/src/global/icons";

const MyComponent = () => <ChevronRight />;

Sizes

In most cases, use the default IconSize.Medium. For situations where an icon needs emphasis or its used next to a large heading, use IconSize.Large. For instances where an icon is being used within a compact container, use IconSize.Small.

Editable example
<Team size={IconSize.Small} />
<Team size={IconSize.Medium} />
<Team size={IconSize.Large} />
<Team size={IconSize.Small} />
<Team size={IconSize.Medium} />
<Team size={IconSize.Large} />

Color

Icons use fill="currentColor" so by default they inherit the text color from their parent. Color can therefore be changed by wrapping an icon in an element with a specific color, or by giving a className to the icon and specifying a color or fill for that className.

Editable example
<span style={{ color: "slategrey" }}>
  <Team />
</span>
<span style={{ color: "slategrey" }}>
  <Team />
</span>

Accessibility

Any time an icon is used, try to combine it with either a Tooltip or a label to clarify its meaning. If an icon's meaning is clear visually based on its context or ubiquity, an aria-label must still be provided for screen readers. If an icon is used purely for decoration, make it aria-hidden.