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.
`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 iconBefore or iconAfter (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" />
  );
};