ak-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 ak-icon component.

Installation

npm install ak-icon

Using the component

HTML

The ak-icon package exports the Icon React components.

Import the component in your React app as follows:

bundle.js

import AkIconHome from 'ak-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 'ak-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 'ak-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/ak-icon/src/icons and running

npm run prepublish

from within the ak-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.

Some things to look for:

• If your icon is used only in a specific context or product, place it in /ak-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 20x20 size that icons should fill.
• Make sure you update the test in ak-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/arrowleft';	<ak-icon-arrowleft />
	import 'ak-icon/glyph/arrowright';	<ak-icon-arrowright />
	import 'ak-icon/glyph/atlassian';	<ak-icon-atlassian />
	import 'ak-icon/glyph/bitbucket/addons';	<ak-icon-bitbucket-addons />
	import 'ak-icon/glyph/bitbucket/admin';	<ak-icon-bitbucket-admin />
	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/dashboard';	<ak-icon-bitbucket-dashboard />
	import 'ak-icon/glyph/bitbucket/downloads';	<ak-icon-bitbucket-downloads />
	import 'ak-icon/glyph/bitbucket/followers';	<ak-icon-bitbucket-followers />
	import 'ak-icon/glyph/bitbucket/following';	<ak-icon-bitbucket-following />
	import 'ak-icon/glyph/bitbucket/issues';	<ak-icon-bitbucket-issues />
	import 'ak-icon/glyph/bitbucket/logo';	<ak-icon-bitbucket-logo />
	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/projects';	<ak-icon-bitbucket-projects />
	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/bitbucket/source';	<ak-icon-bitbucket-source />
	import 'ak-icon/glyph/bitbucket/teams';	<ak-icon-bitbucket-teams />
	import 'ak-icon/glyph/bitbucket/wiki';	<ak-icon-bitbucket-wiki />
	import 'ak-icon/glyph/checkbox';	<ak-icon-checkbox />
	import 'ak-icon/glyph/confluence/calendar';	<ak-icon-confluence-calendar />
	import 'ak-icon/glyph/confluence/canvas';	<ak-icon-confluence-canvas />
	import 'ak-icon/glyph/confluence/page';	<ak-icon-confluence-page />
	import 'ak-icon/glyph/confluence/person';	<ak-icon-confluence-person />
	import 'ak-icon/glyph/confluence/quote';	<ak-icon-confluence-quote />
	import 'ak-icon/glyph/create';	<ak-icon-create />
	import 'ak-icon/glyph/dashboard';	<ak-icon-dashboard />
	import 'ak-icon/glyph/edit';	<ak-icon-edit />
	import 'ak-icon/glyph/editor/bold';	<ak-icon-editor-bold />
	import 'ak-icon/glyph/editor/code';	<ak-icon-editor-code />
	import 'ak-icon/glyph/editor/image';	<ak-icon-editor-image />
	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/list/bullet';	<ak-icon-editor-list-bullet />
	import 'ak-icon/glyph/editor/list/number';	<ak-icon-editor-list-number />
	import 'ak-icon/glyph/editor/mention';	<ak-icon-editor-mention />
	import 'ak-icon/glyph/editor/open';	<ak-icon-editor-open />
	import 'ak-icon/glyph/editor/underline';	<ak-icon-editor-underline />
	import 'ak-icon/glyph/editor/unlink';	<ak-icon-editor-unlink />
	import 'ak-icon/glyph/error';	<ak-icon-error />
	import 'ak-icon/glyph/expand';	<ak-icon-expand />
	import 'ak-icon/glyph/feedback';	<ak-icon-feedback />
	import 'ak-icon/glyph/help';	<ak-icon-help />
	import 'ak-icon/glyph/home';	<ak-icon-home />
	import 'ak-icon/glyph/jira/logo';	<ak-icon-jira-logo />
	import 'ak-icon/glyph/moreoptions';	<ak-icon-moreoptions />
	import 'ak-icon/glyph/projects';	<ak-icon-projects />
	import 'ak-icon/glyph/question';	<ak-icon-question />
	import 'ak-icon/glyph/radio';	<ak-icon-radio />
	import 'ak-icon/glyph/search';	<ak-icon-search />
	import 'ak-icon/glyph/settings';	<ak-icon-settings />
	import 'ak-icon/glyph/success';	<ak-icon-success />

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!