Icon

To add the Icon component to your app:

1
2
import { Icon } from "@forge/react";

Description

An icon is a visual representation of a command, device, directory, or common action.

Props

Name	Type	Required	Description
`glyph`	`string`	No	Name of the icon to be rendered.
`label`	`string`	Yes	Text used to describe what the icon is in context. A label is needed when there is no pairing visible text next to the icon. An empty string marks the icon as presentation only.
`primaryColor`	`string`	No	Primary color for the icon. Inherits the current font color by default.
`secondaryColor`	`string`	No	Secondary color for the icon. Defaults to the page background for an icon that supports two colors.
`size`	`"small" \| "medium" \| "large" \| "xlarge"`	No	There are three icon sizes – `small` (16px), `medium` (24px), `large` (32px), and `xlarge` (48px). This pixel size refers to the canvas the icon sits on, not the size of the icon shape itself.

Examples

Default

Valid icons can be found in the Atlassian Design System Icon Library.

Extract the glyph segment of the icon's import to get the valid icon name to pass into glyph (eg. @atlaskit/icon/glyph/like -> like is a valid icon name).

1
2
const IconDefault = () => {
  return (
    <Icon glyph="like" label="Like" />
  );
};

Sizing

Small

1
2
const IconSmall = () => {
  return (
    <Icon glyph="like" label="Like" size="small" />
  );
};

Medium (default)

1
2
const IconMedium = () => {
  return (
    <Icon glyph="like" label="Like" size="medium" />
  );
};

Large

1
2
const IconLarge = () => {
  return (
    <Icon glyph="like" label="Like" size="large" />
  );
};

Extra Large

1
2
const IconExtraLarge = () => {
  return (
    <Icon glyph="like" label="Like" size="xlarge" />
  );
};

Color

Primary color

This refers to the main color of the icon. The icon’s primary color inherits the current font color by default. Allowed primaryColor values include any design token with the prefix color.icon. found under Atlassian Design System design tokens.

1
2
import { Inline, Icon } from "@forge/react";

const IconColor = () => {
  return (
    <Inline>
      <Icon glyph="info" label="info" primaryColor="color.icon.information" />
      <Icon
        glyph="editor-note"
        label="note"
        primaryColor="color.icon.information"
      />
      <Icon
        glyph="editor-success"
        label="success"
        primaryColor="color.icon.success"
      />
      <Icon
        glyph="warning"
        label="warning"
        primaryColor="color.icon.warning"
      />
      <Icon
        glyph="editor-error"
        label="error"
        primaryColor="color.icon.danger"
      />
    </Inline>
  );
};