@atlaskit/icon

What is @atlaskit/icon?

@atlaskit/icon is a package from Atlassian's Atlaskit design system that provides a collection of icons for use in React applications. It offers a variety of icons that can be easily integrated and customized within your projects.

What are @atlaskit/icon's main functionalities?

Basic Icon Usage

This feature allows you to import and use a specific icon from the @atlaskit/icon package. The example demonstrates how to use the AtlassianIcon with a medium size.

import { AtlassianIcon } from '@atlaskit/icon';

const MyComponent = () => (
  <div>
    <AtlassianIcon size="medium" />
  </div>
);

Customizing Icon Size

This feature allows you to customize the size of the icon. The example shows how to set the size of the AtlassianIcon to large.

import { AtlassianIcon } from '@atlaskit/icon';

const MyComponent = () => (
  <div>
    <AtlassianIcon size="large" />
  </div>
);

Using Different Icons

This feature demonstrates how to use different icons from the @atlaskit/icon package. The example shows the usage of BitbucketIcon and JiraIcon with medium size.

import { BitbucketIcon, JiraIcon } from '@atlaskit/icon';

const MyComponent = () => (
  <div>
    <BitbucketIcon size="medium" />
    <JiraIcon size="medium" />
  </div>
);

Other packages similar to @atlaskit/icon

react-icons

react-icons is a popular package that provides a wide range of icons from various icon libraries such as Font Awesome, Material Design, and more. It offers a similar functionality to @atlaskit/icon but with a broader selection of icons from different sources.

fontawesome

fontawesome is a widely-used icon library that offers a vast collection of icons. It provides both free and pro versions, with the pro version offering additional icons and features. Font Awesome icons can be used in various frameworks and libraries, including React.

README

Icon

This package contains the AtlasKit icons. All icons should be consumed separately unless your build tool supports tree shaking.

This packages is licensed under the Atlassian Design Guidelines - please check the LICENSE file for more information.

Try it out

Interact with a live demo of the @atlaskit/icon component.

Installation

npm install @atlaskit/icon

Using the component

HTML

The @atlaskit/icon package exports the Icon React components.

Import the component in your React app as follows:

bundle.js

import AkIconHome from '@atlaskit/icon/glyph/home';
ReactDOM.render(<AkIconHome />, container);

Controlling the icon color

You can control the icon color via CSS:

<span style={{color: 'red'}}>
  <AkIconHome />
</span>

Use the bundle (all icons)

This package provides all icons bundled in one export but unless your build tool supports tree shaking, you should import only a single icon instead of the bundled version.

bundle.js

import * as icons from '@atlaskit/icon';
const { BitbucketLogo } = icons;

ReactDOM.render(<BitbucketLogo />, container);

Importing a single icon (this will still bundle all of the icons in your final bundle if you don't use tree shaking):

import BitbucketLogo from '@atlaskit/icon';

ReactDOM.render(<BitbucketLogo />, container);

Adding new icons

Adding new icons is as simple as checking out the AtlasKit repo, adding your SVG file to /packages/icon/src/icons and running

npm run prepublish

from within the icon package. This will clean up the SVG and generate a new src/index.jsx file and update all the stories in storybook to use it.

NOTE: The reduced-ui-pack package uses the icons from this package, so if you change add or remove any icons then you'll also need to update the tests in reduced-ui-pack.

Some things to look for:

• If your icon is used only in a specific context or product, place it in /icon/src/icons/subfolder and it will be namespaced appropriately.
• Check that the icon appears in the All icons story. Look for any clipping or sizing issues here.
• Check the All icons (usage) story to make sure the naming has worked as expected (paths/namespacing makes sense, etc).
• Check the Icons with broken fills (solid parts) story to make sure that no parts of your svg have hardcoded colors.
  • If any parts of your icon appear to be dark, check the svg file for instances of fill="XXXXX" and replace them with fill="currentColor".
• Check the Icons that are too big (red parts) story to show any parts of the icon that fall outside the 24x24 size that icons should fill.
• Make sure you update the test in icon/test/indexSpec.jsx to include your icon.
• Make sure you use the appropriate commit message when adding or modifying icons
  • changing an icon is a patch
  • adding an icon is a feature
  • removing an icon is breaking change
  • renaming an icon is a breaking change

Icons

These are the icons that are currently bundled in ak-icon.

Icon	Import	Webcomponent
	import 'ak-icon/glyph/activity';	<ak-icon-activity />
	import 'ak-icon/glyph/add-item';	<ak-icon-add-item />
	import 'ak-icon/glyph/add';	<ak-icon-add />
	import 'ak-icon/glyph/addon';	<ak-icon-addon />
	import 'ak-icon/glyph/arrowleft';	<ak-icon-arrowleft />
	import 'ak-icon/glyph/arrowright';	<ak-icon-arrowright />
	import 'ak-icon/glyph/arrowrightlong';	<ak-icon-arrowrightlong />
	import 'ak-icon/glyph/atlassian';	<ak-icon-atlassian />
	import 'ak-icon/glyph/attachment';	<ak-icon-attachment />
	import 'ak-icon/glyph/audio';	<ak-icon-audio />
	import 'ak-icon/glyph/backlog';	<ak-icon-backlog />
	import 'ak-icon/glyph/bitbucket';	<ak-icon-bitbucket />
	import 'ak-icon/glyph/bitbucket/branches';	<ak-icon-bitbucket-branches />
	import 'ak-icon/glyph/bitbucket/builds';	<ak-icon-bitbucket-builds />
	import 'ak-icon/glyph/bitbucket/commits';	<ak-icon-bitbucket-commits />
	import 'ak-icon/glyph/bitbucket/members';	<ak-icon-bitbucket-members />
	import 'ak-icon/glyph/bitbucket/optout';	<ak-icon-bitbucket-optout />
	import 'ak-icon/glyph/bitbucket/pipelines';	<ak-icon-bitbucket-pipelines />
	import 'ak-icon/glyph/bitbucket/pullrequests';	<ak-icon-bitbucket-pullrequests />
	import 'ak-icon/glyph/bitbucket/repos';	<ak-icon-bitbucket-repos />
	import 'ak-icon/glyph/bitbucket/repositories';	<ak-icon-bitbucket-repositories />
	import 'ak-icon/glyph/bitbucket/snippets';	<ak-icon-bitbucket-snippets />
	import 'ak-icon/glyph/board';	<ak-icon-board />
	import 'ak-icon/glyph/calendar';	<ak-icon-calendar />
	import 'ak-icon/glyph/camera';	<ak-icon-camera />
	import 'ak-icon/glyph/canvas';	<ak-icon-canvas />
	import 'ak-icon/glyph/chart';	<ak-icon-chart />
	import 'ak-icon/glyph/check-circle';	<ak-icon-check-circle />
	import 'ak-icon/glyph/check';	<ak-icon-check />
	import 'ak-icon/glyph/checkbox';	<ak-icon-checkbox />
	import 'ak-icon/glyph/code';	<ak-icon-code />
	import 'ak-icon/glyph/components';	<ak-icon-components />
	import 'ak-icon/glyph/cross-circle';	<ak-icon-cross-circle />
	import 'ak-icon/glyph/cross';	<ak-icon-cross />
	import 'ak-icon/glyph/dashboard';	<ak-icon-dashboard />
	import 'ak-icon/glyph/date';	<ak-icon-date />
	import 'ak-icon/glyph/decision';	<ak-icon-decision />
	import 'ak-icon/glyph/detail-view';	<ak-icon-detail-view />
	import 'ak-icon/glyph/discover';	<ak-icon-discover />
	import 'ak-icon/glyph/document';	<ak-icon-document />
	import 'ak-icon/glyph/edit';	<ak-icon-edit />
	import 'ak-icon/glyph/editor/add';	<ak-icon-editor-add />
	import 'ak-icon/glyph/editor/addon';	<ak-icon-editor-addon />
	import 'ak-icon/glyph/editor/advanced';	<ak-icon-editor-advanced />
	import 'ak-icon/glyph/editor/align-center';	<ak-icon-editor-align-center />
	import 'ak-icon/glyph/editor/align-left';	<ak-icon-editor-align-left />
	import 'ak-icon/glyph/editor/align-right';	<ak-icon-editor-align-right />
	import 'ak-icon/glyph/editor/attachment';	<ak-icon-editor-attachment />
	import 'ak-icon/glyph/editor/bold';	<ak-icon-editor-bold />
	import 'ak-icon/glyph/editor/bullet-list';	<ak-icon-editor-bullet-list />
	import 'ak-icon/glyph/editor/check';	<ak-icon-editor-check />
	import 'ak-icon/glyph/editor/close';	<ak-icon-editor-close />
	import 'ak-icon/glyph/editor/code';	<ak-icon-editor-code />
	import 'ak-icon/glyph/editor/date';	<ak-icon-editor-date />
	import 'ak-icon/glyph/editor/decision';	<ak-icon-editor-decision />
	import 'ak-icon/glyph/editor/emoji';	<ak-icon-editor-emoji />
	import 'ak-icon/glyph/editor/error';	<ak-icon-editor-error />
	import 'ak-icon/glyph/editor/expand';	<ak-icon-editor-expand />
	import 'ak-icon/glyph/editor/feedback';	<ak-icon-editor-feedback />
	import 'ak-icon/glyph/editor/file';	<ak-icon-editor-file />
	import 'ak-icon/glyph/editor/help';	<ak-icon-editor-help />
	import 'ak-icon/glyph/editor/hint';	<ak-icon-editor-hint />
	import 'ak-icon/glyph/editor/image-border';	<ak-icon-editor-image-border />
	import 'ak-icon/glyph/editor/image-resize';	<ak-icon-editor-image-resize />
	import 'ak-icon/glyph/editor/image';	<ak-icon-editor-image />
	import 'ak-icon/glyph/editor/indent';	<ak-icon-editor-indent />
	import 'ak-icon/glyph/editor/info';	<ak-icon-editor-info />
	import 'ak-icon/glyph/editor/italic';	<ak-icon-editor-italic />
	import 'ak-icon/glyph/editor/link';	<ak-icon-editor-link />
	import 'ak-icon/glyph/editor/location';	<ak-icon-editor-location />
	import 'ak-icon/glyph/editor/mention';	<ak-icon-editor-mention />
	import 'ak-icon/glyph/editor/more';	<ak-icon-editor-more />
	import 'ak-icon/glyph/editor/note';	<ak-icon-editor-note />
	import 'ak-icon/glyph/editor/number-list';	<ak-icon-editor-number-list />
	import 'ak-icon/glyph/editor/open';	<ak-icon-editor-open />
	import 'ak-icon/glyph/editor/outdent';	<ak-icon-editor-outdent />
	import 'ak-icon/glyph/editor/panel';	<ak-icon-editor-panel />
	import 'ak-icon/glyph/editor/photo';	<ak-icon-editor-photo />
	import 'ak-icon/glyph/editor/recent';	<ak-icon-editor-recent />
	import 'ak-icon/glyph/editor/redo';	<ak-icon-editor-redo />
	import 'ak-icon/glyph/editor/remove';	<ak-icon-editor-remove />
	import 'ak-icon/glyph/editor/search';	<ak-icon-editor-search />
	import 'ak-icon/glyph/editor/table';	<ak-icon-editor-table />
	import 'ak-icon/glyph/editor/task';	<ak-icon-editor-task />
	import 'ak-icon/glyph/editor/text-color';	<ak-icon-editor-text-color />
	import 'ak-icon/glyph/editor/underline';	<ak-icon-editor-underline />
	import 'ak-icon/glyph/editor/undo';	<ak-icon-editor-undo />
	import 'ak-icon/glyph/editor/unlink';	<ak-icon-editor-unlink />
	import 'ak-icon/glyph/editor/warning';	<ak-icon-editor-warning />
	import 'ak-icon/glyph/emoji';	<ak-icon-emoji />
	import 'ak-icon/glyph/emoji/activity';	<ak-icon-emoji-activity />
	import 'ak-icon/glyph/emoji/atlassian';	<ak-icon-emoji-atlassian />
	import 'ak-icon/glyph/emoji/custom';	<ak-icon-emoji-custom />
	import 'ak-icon/glyph/emoji/flags';	<ak-icon-emoji-flags />
	import 'ak-icon/glyph/emoji/food';	<ak-icon-emoji-food />
	import 'ak-icon/glyph/emoji/frequent';	<ak-icon-emoji-frequent />
	import 'ak-icon/glyph/emoji/nature';	<ak-icon-emoji-nature />
	import 'ak-icon/glyph/emoji/objects';	<ak-icon-emoji-objects />
	import 'ak-icon/glyph/emoji/people';	<ak-icon-emoji-people />
	import 'ak-icon/glyph/emoji/symbols';	<ak-icon-emoji-symbols />
	import 'ak-icon/glyph/emoji/travel';	<ak-icon-emoji-travel />
	import 'ak-icon/glyph/expand';	<ak-icon-expand />
	import 'ak-icon/glyph/export';	<ak-icon-export />
	import 'ak-icon/glyph/favorite';	<ak-icon-favorite />
	import 'ak-icon/glyph/feedback';	<ak-icon-feedback />
	import 'ak-icon/glyph/file';	<ak-icon-file />
	import 'ak-icon/glyph/folder';	<ak-icon-folder />
	import 'ak-icon/glyph/followers';	<ak-icon-followers />
	import 'ak-icon/glyph/following';	<ak-icon-following />
	import 'ak-icon/glyph/hipchat/arrow-down';	<ak-icon-hipchat-arrow-down />
	import 'ak-icon/glyph/hipchat/arrow-left';	<ak-icon-hipchat-arrow-left />
	import 'ak-icon/glyph/hipchat/arrow-right';	<ak-icon-hipchat-arrow-right />
	import 'ak-icon/glyph/hipchat/arrow-up';	<ak-icon-hipchat-arrow-up />
	import 'ak-icon/glyph/hipchat/authentication';	<ak-icon-hipchat-authentication />
	import 'ak-icon/glyph/hipchat/bell-all';	<ak-icon-hipchat-bell-all />
	import 'ak-icon/glyph/hipchat/bell-default';	<ak-icon-hipchat-bell-default />
	import 'ak-icon/glyph/hipchat/bell-direct';	<ak-icon-hipchat-bell-direct />
	import 'ak-icon/glyph/hipchat/billing';	<ak-icon-hipchat-billing />
	import 'ak-icon/glyph/hipchat/carat-down';	<ak-icon-hipchat-carat-down />
	import 'ak-icon/glyph/hipchat/carat-left';	<ak-icon-hipchat-carat-left />
	import 'ak-icon/glyph/hipchat/carat-right';	<ak-icon-hipchat-carat-right />
	import 'ak-icon/glyph/hipchat/carat-up';	<ak-icon-hipchat-carat-up />
	import 'ak-icon/glyph/hipchat/close';	<ak-icon-hipchat-close />
	import 'ak-icon/glyph/hipchat/connect-addon';	<ak-icon-hipchat-connect-addon />
	import 'ak-icon/glyph/hipchat/lobby';	<ak-icon-hipchat-lobby />
	import 'ak-icon/glyph/hipchat/logo';	<ak-icon-hipchat-logo />
	import 'ak-icon/glyph/hipchat/more-vertical';	<ak-icon-hipchat-more-vertical />
	import 'ak-icon/glyph/hipchat/preferences';	<ak-icon-hipchat-preferences />
	import 'ak-icon/glyph/hipchat/room-directory';	<ak-icon-hipchat-room-directory />
	import 'ak-icon/glyph/hipchat/room-menu';	<ak-icon-hipchat-room-menu />
	import 'ak-icon/glyph/hipchat/upgrade-available-settings';	<ak-icon-hipchat-upgrade-available-settings />
	import 'ak-icon/glyph/hipchat/upgrade-available';	<ak-icon-hipchat-upgrade-available />
	import 'ak-icon/glyph/hipchat/upgrade-min';	<ak-icon-hipchat-upgrade-min />
	import 'ak-icon/glyph/hipchat/video';	<ak-icon-hipchat-video />
	import 'ak-icon/glyph/hipchat/warning-circle';	<ak-icon-hipchat-warning-circle />
	import 'ak-icon/glyph/home';	<ak-icon-home />
	import 'ak-icon/glyph/image-border';	<ak-icon-image-border />
	import 'ak-icon/glyph/image-resize';	<ak-icon-image-resize />
	import 'ak-icon/glyph/image';	<ak-icon-image />
	import 'ak-icon/glyph/info';	<ak-icon-info />
	import 'ak-icon/glyph/invite-team';	<ak-icon-invite-team />
	import 'ak-icon/glyph/issue';	<ak-icon-issue />
	import 'ak-icon/glyph/issues';	<ak-icon-issues />
	import 'ak-icon/glyph/jira';	<ak-icon-jira />
	import 'ak-icon/glyph/jira/addon';	<ak-icon-jira-addon />
	import 'ak-icon/glyph/light-bulb';	<ak-icon-light-bulb />
	import 'ak-icon/glyph/link';	<ak-icon-link />
	import 'ak-icon/glyph/list';	<ak-icon-list />
	import 'ak-icon/glyph/lock';	<ak-icon-lock />
	import 'ak-icon/glyph/mention';	<ak-icon-mention />
	import 'ak-icon/glyph/more';	<ak-icon-more />
	import 'ak-icon/glyph/notification';	<ak-icon-notification />
	import 'ak-icon/glyph/office-building';	<ak-icon-office-building />
	import 'ak-icon/glyph/open';	<ak-icon-open />
	import 'ak-icon/glyph/page';	<ak-icon-page />
	import 'ak-icon/glyph/people';	<ak-icon-people />
	import 'ak-icon/glyph/person';	<ak-icon-person />
	import 'ak-icon/glyph/play';	<ak-icon-play />
	import 'ak-icon/glyph/question-circle';	<ak-icon-question-circle />
	import 'ak-icon/glyph/question';	<ak-icon-question />
	import 'ak-icon/glyph/quote';	<ak-icon-quote />
	import 'ak-icon/glyph/radio';	<ak-icon-radio />
	import 'ak-icon/glyph/recent';	<ak-icon-recent />
	import 'ak-icon/glyph/redo';	<ak-icon-redo />
	import 'ak-icon/glyph/refresh';	<ak-icon-refresh />
	import 'ak-icon/glyph/search';	<ak-icon-search />
	import 'ak-icon/glyph/settings';	<ak-icon-settings />
	import 'ak-icon/glyph/share';	<ak-icon-share />
	import 'ak-icon/glyph/ship';	<ak-icon-ship />
	import 'ak-icon/glyph/shortcut';	<ak-icon-shortcut />
	import 'ak-icon/glyph/source';	<ak-icon-source />
	import 'ak-icon/glyph/table';	<ak-icon-table />
	import 'ak-icon/glyph/task';	<ak-icon-task />
	import 'ak-icon/glyph/trash';	<ak-icon-trash />
	import 'ak-icon/glyph/tray';	<ak-icon-tray />
	import 'ak-icon/glyph/undo';	<ak-icon-undo />
	import 'ak-icon/glyph/unlink';	<ak-icon-unlink />
	import 'ak-icon/glyph/video';	<ak-icon-video />
	import 'ak-icon/glyph/warning';	<ak-icon-warning />
	import 'ak-icon/glyph/world';	<ak-icon-world />

Classes

Icon

Icon

Kind: global class

• Properties

  • icon.label : string
  • icon.size : size
  • icon.onClick : function

new Icon()

Icon interface. All icons follow this structure.

icon.label : string

(Required) The icon label This is a required attribute. Omitting it will make the icon inaccessible for screen readers, etc.. The text passed will be sanitized, e.g. passed HTML will be represented as plain text.

Kind: instance property of Icon

icon.size : size

(Optional) An icon size.

Defaults to an empty string (which means it uses the default size).

Kind: instance property of Icon
Default: small

icon.onClick : function

(Optional) A handler to execute when the icon is clicked.

Defaults to a noop.

Kind: instance property of Icon

size : enum

Icon size values.

Kind: global enum
Properties

Name	Type	Default	Description
small	string	"small"	small icon
medium	string	"medium"	medium icon
large	string	"large"	large icon
xlarge	string	"xlarge"	xlarge icon

Support and feedback

We're here to help!

Let us know what you think of our components and docs, your feedback is really important for us.

Community support

Ask a question in our forum.

Check if someone has already asked the same question before.

Create a support ticket

Are you in trouble? Let us know!