ak-icon

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/arrowrightlong';	<ak-icon-arrowrightlong />
	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/cancel';	<ak-icon-cancel />
	import 'ak-icon/glyph/checkbox';	<ak-icon-checkbox />
	import 'ak-icon/glyph/confirm';	<ak-icon-confirm />
	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/advanced';	<ak-icon-editor-advanced />
	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/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/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/location';	<ak-icon-location />
	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 />
	import 'ak-icon/glyph/time';	<ak-icon-time />
	import 'ak-icon/glyph/warning';	<ak-icon-warning />

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!