Icon

An icon is a symbol representing a command, device, directory, or common action.

Icon explorer Examples Code Usage Changelog

Installation

Package installation information
Install	`yarn add @atlaskit/icon`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/icon, (opens new window)
Bundle	unpkg.com, (opens new window)

Props

`color`
Description	Color for the icon. Supports any icon or text design token, or 'currentColor' to inherit the current text color. Defaults to `currentColor`, inheriting the current text color.
Type	`"currentColor" \| "var(--ds-link-pressed)" \| "var(--ds-link-visited-pressed)" \| "var(--ds-text)" \| "var(--ds-text-accent-lime)" \| "var(--ds-text-accent-lime-bolder)" \| ... 74 more ... \| "var(--ds-rovo-icon-purple)"`

`label`
Required
Description	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.
Type	`string`

`name`
Description	Display name of the icon.
Type	`string`

`shouldRecommendSmallIcon`
Description	No description.
Type	`boolean`

`size`
Description	There are two icon sizes available: `medium` - 16px. (default). `small` - 12px. Alternatively a function can be passed to determine the size based on the icon's name, which can be useful for dynamic rendering.
Type	`IconSize \| ((iconName: string) => IconSize)`

`spacing`
Deprecated
Description	Use a `Flex` wrapper with `cssMap` padding tokens instead. Migrate with the `32.0.2-icon-spacing-to-flex-primitive` codemod in `npx @atlaskit/codemod-cli`, or the `no-icon-spacing-prop` ESLint rule.
Type	`"none" \| "compact" \| "spacious"`

`testId`
Description	A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
Type	`string`

Was this page helpful?

We use this feedback to improve our documentation.