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.
Interact with a live demo of the ak-icon component.
npm install ak-icon
The ak-icon package exports the Icon Skate components.
Import the component in your JS resource:
import 'ak-icon/glyph/home';
Now you can use the defined tag in your HTML markup:
<html>
<head>
<script src="bundle.js"></script>
</head>
<body>
<!-- ... -->
<ak-icon-home></ak-icon-home>
</body>
</html>
You can also use it from within another JavaScript resource:
import BitbucketLogo from 'ak-icon/glyph/bitbucket/logo';
const component = new BitbucketLogo();
document.body.appendChild(component);
You can control the icon color via CSS:
<span style="color: red;">
<ak-icon-home></ak-icon-home>
</span>
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.
import * as icons from 'ak-icon';
const { BitbucketLogo } = icons;
// old-school
const icon = new BitbucketLogo();
document.body.appendChild(icon);
// or JSX
const x = (<BitbucketLogo />);
Import a single icon:
import BitbucketLogo from 'ak-icon';
// old-school
const icon = new BitbucketLogo();
document.body.appendChild(icon);
// or JSX
const x = (<BitbucketLogo />);
<!-- ... -->
<ak-icon-home></ak-icon-home>
<ak-icon-bitbucket-logo></ak-icon-bitbucket-logo>
This should only be used for prototyping. Keep in mind that this will pull in all icons, not only the ones you use.
This is a standard web component, if you want to use it in your React app, use the Skate.js React integration.
import HomeIcon from 'ak-icon/glyph/home';
import reactify from 'skatejs-react-integration';
const ReactComponent = reactify(HomeIcon, {});
ReactDOM.render(<ReactComponent />, container);
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.js file and update all the stories in storybook to use it.
Some things to look for:
/ak-icon/src/icons/subfolder and it will be namespaced appropriately.All icons story. Look for any clipping or sizing issues here.All icons (usage) story to make sure the naming has worked as expected (paths/namespacing makes sense, etc).Icons with broken fills (solid parts) story to make sure that no parts of your svg have hardcoded colors.
fill="XXXXX" and replace them with fill="currentColor".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.ak-icon/test/index.js to include your icon.IconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconIconKind: global class
Properties
stringsizeMethods
Icon interface. All icons follow this structure.
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
HTML Example
<ak-icon-* label="Accessible description of the icon" />
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.label = 'Accessible description of the icon';
document.body.appendChild(icon);
size(Optional) An icon size.
Defaults to an empty string (which means it uses the default size).
Kind: instance property of Icon
Default: small
HTML Example
<ak-icon-* size="medium">
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.size = 'medium';
document.body.appendChild(icon);
IconKind: global class
Extends: Icon
Properties
stringsizeMethods
Create an instance of the ak-icon-atlassian programmatically, or by using markup.
It looks like this: 
HTML Example
<ak-icon-atlassian label="My label" />
JS Example
import AtlassianIcon from 'ak-icon/glyph/atlassian';
const icon = new AtlassianIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-atlassian label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { AtlassianIcon } from 'ak-icon';
const icon = new AtlassianIcon();
icon.label = 'My label';
document.body.appendChild(icon);
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 AtlassianIcon
HTML Example
<ak-icon-* label="Accessible description of the icon" />
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.label = 'Accessible description of the icon';
document.body.appendChild(icon);
size(Optional) An icon size.
Defaults to an empty string (which means it uses the default size).
Kind: instance property of AtlassianIcon
Default: small
HTML Example
<ak-icon-* size="medium">
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.size = 'medium';
document.body.appendChild(icon);
IconKind: global class
Extends: Icon
Properties
Methods
Create an instance of the ak-icon-bitbucket-addons programmatically, or by using markup.
It looks like this: 
HTML Example
<ak-icon-bitbucket-addons label="My label" />
JS Example
import BitbucketAddonsIcon from 'ak-icon/glyph/bitbucket/addons';
const icon = new BitbucketAddonsIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-bitbucket-addons label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { BitbucketAddonsIcon } from 'ak-icon';
const icon = new BitbucketAddonsIcon();
icon.label = 'My label';
document.body.appendChild(icon);
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 BitbucketAddonsIcon
HTML Example
<ak-icon-* label="Accessible description of the icon" />
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.label = 'Accessible description of the icon';
document.body.appendChild(icon);
size(Optional) An icon size.
Defaults to an empty string (which means it uses the default size).
Kind: instance property of BitbucketAddonsIcon
Default: small
HTML Example
<ak-icon-* size="medium">
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.size = 'medium';
document.body.appendChild(icon);
IconKind: global class
Extends: Icon
Properties
Methods
Create an instance of the ak-icon-bitbucket-admin programmatically, or by using markup.
It looks like this: 
HTML Example
<ak-icon-bitbucket-admin label="My label" />
JS Example
import BitbucketAdminIcon from 'ak-icon/glyph/bitbucket/admin';
const icon = new BitbucketAdminIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-bitbucket-admin label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { BitbucketAdminIcon } from 'ak-icon';
const icon = new BitbucketAdminIcon();
icon.label = 'My label';
document.body.appendChild(icon);
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 BitbucketAdminIcon
HTML Example
<ak-icon-* label="Accessible description of the icon" />
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.label = 'Accessible description of the icon';
document.body.appendChild(icon);
size(Optional) An icon size.
Defaults to an empty string (which means it uses the default size).
Kind: instance property of BitbucketAdminIcon
Default: small
HTML Example
<ak-icon-* size="medium">
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.size = 'medium';
document.body.appendChild(icon);
IconKind: global class
Extends: Icon
Properties
Methods
Create an instance of the ak-icon-bitbucket-branches programmatically, or by using markup.
It looks like this: 
HTML Example
<ak-icon-bitbucket-branches label="My label" />
JS Example
import BitbucketBranchesIcon from 'ak-icon/glyph/bitbucket/branches';
const icon = new BitbucketBranchesIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-bitbucket-branches label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { BitbucketBranchesIcon } from 'ak-icon';
const icon = new BitbucketBranchesIcon();
icon.label = 'My label';
document.body.appendChild(icon);
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 BitbucketBranchesIcon
HTML Example
<ak-icon-* label="Accessible description of the icon" />
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.label = 'Accessible description of the icon';
document.body.appendChild(icon);
size(Optional) An icon size.
Defaults to an empty string (which means it uses the default size).
Kind: instance property of BitbucketBranchesIcon
Default: small
HTML Example
<ak-icon-* size="medium">
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.size = 'medium';
document.body.appendChild(icon);
IconKind: global class
Extends: Icon
Properties
Methods
Create an instance of the ak-icon-bitbucket-builds programmatically, or by using markup.
It looks like this: 
HTML Example
<ak-icon-bitbucket-builds label="My label" />
JS Example
import BitbucketBuildsIcon from 'ak-icon/glyph/bitbucket/builds';
const icon = new BitbucketBuildsIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-bitbucket-builds label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { BitbucketBuildsIcon } from 'ak-icon';
const icon = new BitbucketBuildsIcon();
icon.label = 'My label';
document.body.appendChild(icon);
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 BitbucketBuildsIcon
HTML Example
<ak-icon-* label="Accessible description of the icon" />
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.label = 'Accessible description of the icon';
document.body.appendChild(icon);
size(Optional) An icon size.
Defaults to an empty string (which means it uses the default size).
Kind: instance property of BitbucketBuildsIcon
Default: small
HTML Example
<ak-icon-* size="medium">
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.size = 'medium';
document.body.appendChild(icon);
IconKind: global class
Extends: Icon
Properties
Methods
Create an instance of the ak-icon-bitbucket-commits programmatically, or by using markup.
It looks like this: 
HTML Example
<ak-icon-bitbucket-commits label="My label" />
JS Example
import BitbucketCommitsIcon from 'ak-icon/glyph/bitbucket/commits';
const icon = new BitbucketCommitsIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-bitbucket-commits label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { BitbucketCommitsIcon } from 'ak-icon';
const icon = new BitbucketCommitsIcon();
icon.label = 'My label';
document.body.appendChild(icon);
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 BitbucketCommitsIcon
HTML Example
<ak-icon-* label="Accessible description of the icon" />
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.label = 'Accessible description of the icon';
document.body.appendChild(icon);
size(Optional) An icon size.
Defaults to an empty string (which means it uses the default size).
Kind: instance property of BitbucketCommitsIcon
Default: small
HTML Example
<ak-icon-* size="medium">
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.size = 'medium';
document.body.appendChild(icon);
IconKind: global class
Extends: Icon
Properties
Methods
Create an instance of the ak-icon-bitbucket-dashboard programmatically, or by using markup.
It looks like this: 
HTML Example
<ak-icon-bitbucket-dashboard label="My label" />
JS Example
import BitbucketDashboardIcon from 'ak-icon/glyph/bitbucket/dashboard';
const icon = new BitbucketDashboardIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-bitbucket-dashboard label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { BitbucketDashboardIcon } from 'ak-icon';
const icon = new BitbucketDashboardIcon();
icon.label = 'My label';
document.body.appendChild(icon);
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 BitbucketDashboardIcon
HTML Example
<ak-icon-* label="Accessible description of the icon" />
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.label = 'Accessible description of the icon';
document.body.appendChild(icon);
size(Optional) An icon size.
Defaults to an empty string (which means it uses the default size).
Kind: instance property of BitbucketDashboardIcon
Default: small
HTML Example
<ak-icon-* size="medium">
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.size = 'medium';
document.body.appendChild(icon);
IconKind: global class
Extends: Icon
Properties
Methods
Create an instance of the ak-icon-bitbucket-downloads programmatically, or by using markup.
It looks like this: 
HTML Example
<ak-icon-bitbucket-downloads label="My label" />
JS Example
import BitbucketDownloadsIcon from 'ak-icon/glyph/bitbucket/downloads';
const icon = new BitbucketDownloadsIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-bitbucket-downloads label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { BitbucketDownloadsIcon } from 'ak-icon';
const icon = new BitbucketDownloadsIcon();
icon.label = 'My label';
document.body.appendChild(icon);
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 BitbucketDownloadsIcon
HTML Example
<ak-icon-* label="Accessible description of the icon" />
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.label = 'Accessible description of the icon';
document.body.appendChild(icon);
size(Optional) An icon size.
Defaults to an empty string (which means it uses the default size).
Kind: instance property of BitbucketDownloadsIcon
Default: small
HTML Example
<ak-icon-* size="medium">
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.size = 'medium';
document.body.appendChild(icon);
IconKind: global class
Extends: Icon
Properties
Methods
Create an instance of the ak-icon-bitbucket-followers programmatically, or by using markup.
It looks like this: 
HTML Example
<ak-icon-bitbucket-followers label="My label" />
JS Example
import BitbucketFollowersIcon from 'ak-icon/glyph/bitbucket/followers';
const icon = new BitbucketFollowersIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-bitbucket-followers label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { BitbucketFollowersIcon } from 'ak-icon';
const icon = new BitbucketFollowersIcon();
icon.label = 'My label';
document.body.appendChild(icon);
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 BitbucketFollowersIcon
HTML Example
<ak-icon-* label="Accessible description of the icon" />
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.label = 'Accessible description of the icon';
document.body.appendChild(icon);
size(Optional) An icon size.
Defaults to an empty string (which means it uses the default size).
Kind: instance property of BitbucketFollowersIcon
Default: small
HTML Example
<ak-icon-* size="medium">
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.size = 'medium';
document.body.appendChild(icon);
IconKind: global class
Extends: Icon
Properties
Methods
Create an instance of the ak-icon-bitbucket-following programmatically, or by using markup.
It looks like this: 
HTML Example
<ak-icon-bitbucket-following label="My label" />
JS Example
import BitbucketFollowingIcon from 'ak-icon/glyph/bitbucket/following';
const icon = new BitbucketFollowingIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-bitbucket-following label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { BitbucketFollowingIcon } from 'ak-icon';
const icon = new BitbucketFollowingIcon();
icon.label = 'My label';
document.body.appendChild(icon);
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 BitbucketFollowingIcon
HTML Example
<ak-icon-* label="Accessible description of the icon" />
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.label = 'Accessible description of the icon';
document.body.appendChild(icon);
size(Optional) An icon size.
Defaults to an empty string (which means it uses the default size).
Kind: instance property of BitbucketFollowingIcon
Default: small
HTML Example
<ak-icon-* size="medium">
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.size = 'medium';
document.body.appendChild(icon);
IconKind: global class
Extends: Icon
Properties
Methods
Create an instance of the ak-icon-bitbucket-issues programmatically, or by using markup.
It looks like this: 
HTML Example
<ak-icon-bitbucket-issues label="My label" />
JS Example
import BitbucketIssuesIcon from 'ak-icon/glyph/bitbucket/issues';
const icon = new BitbucketIssuesIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-bitbucket-issues label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { BitbucketIssuesIcon } from 'ak-icon';
const icon = new BitbucketIssuesIcon();
icon.label = 'My label';
document.body.appendChild(icon);
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 BitbucketIssuesIcon
HTML Example
<ak-icon-* label="Accessible description of the icon" />
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.label = 'Accessible description of the icon';
document.body.appendChild(icon);
size(Optional) An icon size.
Defaults to an empty string (which means it uses the default size).
Kind: instance property of BitbucketIssuesIcon
Default: small
HTML Example
<ak-icon-* size="medium">
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.size = 'medium';
document.body.appendChild(icon);
IconKind: global class
Extends: Icon
Properties
Methods
Create an instance of the ak-icon-bitbucket-logo programmatically, or by using markup.
It looks like this: 
HTML Example
<ak-icon-bitbucket-logo label="My label" />
JS Example
import BitbucketLogoIcon from 'ak-icon/glyph/bitbucket/logo';
const icon = new BitbucketLogoIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-bitbucket-logo label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { BitbucketLogoIcon } from 'ak-icon';
const icon = new BitbucketLogoIcon();
icon.label = 'My label';
document.body.appendChild(icon);
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 BitbucketLogoIcon
HTML Example
<ak-icon-* label="Accessible description of the icon" />
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.label = 'Accessible description of the icon';
document.body.appendChild(icon);
size(Optional) An icon size.
Defaults to an empty string (which means it uses the default size).
Kind: instance property of BitbucketLogoIcon
Default: small
HTML Example
<ak-icon-* size="medium">
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.size = 'medium';
document.body.appendChild(icon);
IconKind: global class
Extends: Icon
Properties
Methods
Create an instance of the ak-icon-bitbucket-members programmatically, or by using markup.
It looks like this: 
HTML Example
<ak-icon-bitbucket-members label="My label" />
JS Example
import BitbucketMembersIcon from 'ak-icon/glyph/bitbucket/members';
const icon = new BitbucketMembersIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-bitbucket-members label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { BitbucketMembersIcon } from 'ak-icon';
const icon = new BitbucketMembersIcon();
icon.label = 'My label';
document.body.appendChild(icon);
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 BitbucketMembersIcon
HTML Example
<ak-icon-* label="Accessible description of the icon" />
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.label = 'Accessible description of the icon';
document.body.appendChild(icon);
size(Optional) An icon size.
Defaults to an empty string (which means it uses the default size).
Kind: instance property of BitbucketMembersIcon
Default: small
HTML Example
<ak-icon-* size="medium">
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.size = 'medium';
document.body.appendChild(icon);
IconKind: global class
Extends: Icon
Properties
Methods
Create an instance of the ak-icon-bitbucket-optout programmatically, or by using markup.
It looks like this: 
HTML Example
<ak-icon-bitbucket-optout label="My label" />
JS Example
import BitbucketOptoutIcon from 'ak-icon/glyph/bitbucket/optout';
const icon = new BitbucketOptoutIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-bitbucket-optout label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { BitbucketOptoutIcon } from 'ak-icon';
const icon = new BitbucketOptoutIcon();
icon.label = 'My label';
document.body.appendChild(icon);
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 BitbucketOptoutIcon
HTML Example
<ak-icon-* label="Accessible description of the icon" />
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.label = 'Accessible description of the icon';
document.body.appendChild(icon);
size(Optional) An icon size.
Defaults to an empty string (which means it uses the default size).
Kind: instance property of BitbucketOptoutIcon
Default: small
HTML Example
<ak-icon-* size="medium">
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.size = 'medium';
document.body.appendChild(icon);
IconKind: global class
Extends: Icon
Properties
Methods
Create an instance of the ak-icon-bitbucket-pipelines programmatically, or by using markup.
It looks like this: 
HTML Example
<ak-icon-bitbucket-pipelines label="My label" />
JS Example
import BitbucketPipelinesIcon from 'ak-icon/glyph/bitbucket/pipelines';
const icon = new BitbucketPipelinesIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-bitbucket-pipelines label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { BitbucketPipelinesIcon } from 'ak-icon';
const icon = new BitbucketPipelinesIcon();
icon.label = 'My label';
document.body.appendChild(icon);
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 BitbucketPipelinesIcon
HTML Example
<ak-icon-* label="Accessible description of the icon" />
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.label = 'Accessible description of the icon';
document.body.appendChild(icon);
size(Optional) An icon size.
Defaults to an empty string (which means it uses the default size).
Kind: instance property of BitbucketPipelinesIcon
Default: small
HTML Example
<ak-icon-* size="medium">
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.size = 'medium';
document.body.appendChild(icon);
IconKind: global class
Extends: Icon
Properties
Methods
Create an instance of the ak-icon-bitbucket-projects programmatically, or by using markup.
It looks like this: 
HTML Example
<ak-icon-bitbucket-projects label="My label" />
JS Example
import BitbucketProjectsIcon from 'ak-icon/glyph/bitbucket/projects';
const icon = new BitbucketProjectsIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-bitbucket-projects label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { BitbucketProjectsIcon } from 'ak-icon';
const icon = new BitbucketProjectsIcon();
icon.label = 'My label';
document.body.appendChild(icon);
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 BitbucketProjectsIcon
HTML Example
<ak-icon-* label="Accessible description of the icon" />
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.label = 'Accessible description of the icon';
document.body.appendChild(icon);
size(Optional) An icon size.
Defaults to an empty string (which means it uses the default size).
Kind: instance property of BitbucketProjectsIcon
Default: small
HTML Example
<ak-icon-* size="medium">
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.size = 'medium';
document.body.appendChild(icon);
IconKind: global class
Extends: Icon
Properties
Methods
Create an instance of the ak-icon-bitbucket-pullrequests programmatically, or by using markup.
It looks like this: 
HTML Example
<ak-icon-bitbucket-pullrequests label="My label" />
JS Example
import BitbucketPullrequestsIcon from 'ak-icon/glyph/bitbucket/pullrequests';
const icon = new BitbucketPullrequestsIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-bitbucket-pullrequests label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { BitbucketPullrequestsIcon } from 'ak-icon';
const icon = new BitbucketPullrequestsIcon();
icon.label = 'My label';
document.body.appendChild(icon);
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 BitbucketPullrequestsIcon
HTML Example
<ak-icon-* label="Accessible description of the icon" />
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.label = 'Accessible description of the icon';
document.body.appendChild(icon);
size(Optional) An icon size.
Defaults to an empty string (which means it uses the default size).
Kind: instance property of BitbucketPullrequestsIcon
Default: small
HTML Example
<ak-icon-* size="medium">
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.size = 'medium';
document.body.appendChild(icon);
IconKind: global class
Extends: Icon
Properties
Methods
Create an instance of the ak-icon-bitbucket-repos programmatically, or by using markup.
It looks like this: 
HTML Example
<ak-icon-bitbucket-repos label="My label" />
JS Example
import BitbucketReposIcon from 'ak-icon/glyph/bitbucket/repos';
const icon = new BitbucketReposIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-bitbucket-repos label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { BitbucketReposIcon } from 'ak-icon';
const icon = new BitbucketReposIcon();
icon.label = 'My label';
document.body.appendChild(icon);
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 BitbucketReposIcon
HTML Example
<ak-icon-* label="Accessible description of the icon" />
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.label = 'Accessible description of the icon';
document.body.appendChild(icon);
size(Optional) An icon size.
Defaults to an empty string (which means it uses the default size).
Kind: instance property of BitbucketReposIcon
Default: small
HTML Example
<ak-icon-* size="medium">
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.size = 'medium';
document.body.appendChild(icon);
IconKind: global class
Extends: Icon
Properties
Methods
Create an instance of the ak-icon-bitbucket-repositories programmatically, or by using markup.
It looks like this: 
HTML Example
<ak-icon-bitbucket-repositories label="My label" />
JS Example
import BitbucketRepositoriesIcon from 'ak-icon/glyph/bitbucket/repositories';
const icon = new BitbucketRepositoriesIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-bitbucket-repositories label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { BitbucketRepositoriesIcon } from 'ak-icon';
const icon = new BitbucketRepositoriesIcon();
icon.label = 'My label';
document.body.appendChild(icon);
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 BitbucketRepositoriesIcon
HTML Example
<ak-icon-* label="Accessible description of the icon" />
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.label = 'Accessible description of the icon';
document.body.appendChild(icon);
size(Optional) An icon size.
Defaults to an empty string (which means it uses the default size).
Kind: instance property of BitbucketRepositoriesIcon
Default: small
HTML Example
<ak-icon-* size="medium">
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.size = 'medium';
document.body.appendChild(icon);
IconKind: global class
Extends: Icon
Properties
Methods
Create an instance of the ak-icon-bitbucket-snippets programmatically, or by using markup.
It looks like this: 
HTML Example
<ak-icon-bitbucket-snippets label="My label" />
JS Example
import BitbucketSnippetsIcon from 'ak-icon/glyph/bitbucket/snippets';
const icon = new BitbucketSnippetsIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-bitbucket-snippets label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { BitbucketSnippetsIcon } from 'ak-icon';
const icon = new BitbucketSnippetsIcon();
icon.label = 'My label';
document.body.appendChild(icon);
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 BitbucketSnippetsIcon
HTML Example
<ak-icon-* label="Accessible description of the icon" />
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.label = 'Accessible description of the icon';
document.body.appendChild(icon);
size(Optional) An icon size.
Defaults to an empty string (which means it uses the default size).
Kind: instance property of BitbucketSnippetsIcon
Default: small
HTML Example
<ak-icon-* size="medium">
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.size = 'medium';
document.body.appendChild(icon);
IconKind: global class
Extends: Icon
Properties
Methods
Create an instance of the ak-icon-bitbucket-source programmatically, or by using markup.
It looks like this: 
HTML Example
<ak-icon-bitbucket-source label="My label" />
JS Example
import BitbucketSourceIcon from 'ak-icon/glyph/bitbucket/source';
const icon = new BitbucketSourceIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-bitbucket-source label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { BitbucketSourceIcon } from 'ak-icon';
const icon = new BitbucketSourceIcon();
icon.label = 'My label';
document.body.appendChild(icon);
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 BitbucketSourceIcon
HTML Example
<ak-icon-* label="Accessible description of the icon" />
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.label = 'Accessible description of the icon';
document.body.appendChild(icon);
size(Optional) An icon size.
Defaults to an empty string (which means it uses the default size).
Kind: instance property of BitbucketSourceIcon
Default: small
HTML Example
<ak-icon-* size="medium">
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.size = 'medium';
document.body.appendChild(icon);
IconKind: global class
Extends: Icon
Properties
Methods
Create an instance of the ak-icon-bitbucket-teams programmatically, or by using markup.
It looks like this: 
HTML Example
<ak-icon-bitbucket-teams label="My label" />
JS Example
import BitbucketTeamsIcon from 'ak-icon/glyph/bitbucket/teams';
const icon = new BitbucketTeamsIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-bitbucket-teams label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { BitbucketTeamsIcon } from 'ak-icon';
const icon = new BitbucketTeamsIcon();
icon.label = 'My label';
document.body.appendChild(icon);
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 BitbucketTeamsIcon
HTML Example
<ak-icon-* label="Accessible description of the icon" />
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.label = 'Accessible description of the icon';
document.body.appendChild(icon);
size(Optional) An icon size.
Defaults to an empty string (which means it uses the default size).
Kind: instance property of BitbucketTeamsIcon
Default: small
HTML Example
<ak-icon-* size="medium">
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.size = 'medium';
document.body.appendChild(icon);
IconKind: global class
Extends: Icon
Properties
Methods
Create an instance of the ak-icon-bitbucket-wiki programmatically, or by using markup.
It looks like this: 
HTML Example
<ak-icon-bitbucket-wiki label="My label" />
JS Example
import BitbucketWikiIcon from 'ak-icon/glyph/bitbucket/wiki';
const icon = new BitbucketWikiIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-bitbucket-wiki label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { BitbucketWikiIcon } from 'ak-icon';
const icon = new BitbucketWikiIcon();
icon.label = 'My label';
document.body.appendChild(icon);
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 BitbucketWikiIcon
HTML Example
<ak-icon-* label="Accessible description of the icon" />
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.label = 'Accessible description of the icon';
document.body.appendChild(icon);
size(Optional) An icon size.
Defaults to an empty string (which means it uses the default size).
Kind: instance property of BitbucketWikiIcon
Default: small
HTML Example
<ak-icon-* size="medium">
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.size = 'medium';
document.body.appendChild(icon);
IconKind: global class
Extends: Icon
Properties
stringsizeMethods
Create an instance of the ak-icon-checkbox programmatically, or by using markup.
It looks like this: 
HTML Example
<ak-icon-checkbox label="My label" />
JS Example
import CheckboxIcon from 'ak-icon/glyph/checkbox';
const icon = new CheckboxIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-checkbox label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { CheckboxIcon } from 'ak-icon';
const icon = new CheckboxIcon();
icon.label = 'My label';
document.body.appendChild(icon);
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 CheckboxIcon
HTML Example
<ak-icon-* label="Accessible description of the icon" />
JS Example
import SomeIcon from 'ak-icon/glyph/some';
const icon = new SomeIcon();
icon.label = 'Accessible description of the icon';
document.body.appendChild(icon);
[size]
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!
FAQs
A react package that contains icons
The npm package ak-icon receives a total of 549 weekly downloads. As such, ak-icon popularity was classified as not popular.
We found that ak-icon demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.