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);
Kind: global class
Properties
icon.label : stringnew 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
HTML Example
<ak-icon-* label="Accessible description of the icon" />
JS Example
const icon = new Icon();
icon.label = 'Accessible description of the icon';
document.body.appendChild(icon);
new AtlassianIcon()Create an instance of the ak-icon-atlassian programmatically, or by using markup.
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);
new BitbucketAdminIcon()Create an instance of the ak-icon-bitbucket-admin programmatically, or by using markup.
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);
new BitbucketBranchesIcon()Create an instance of the ak-icon-bitbucket-branches programmatically, or by using markup.
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);
new BitbucketBuildsIcon()Create an instance of the ak-icon-bitbucket-builds programmatically, or by using markup.
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);
new BitbucketCommitsIcon()Create an instance of the ak-icon-bitbucket-commits programmatically, or by using markup.
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);
new BitbucketCreateIcon()Create an instance of the ak-icon-bitbucket-create programmatically, or by using markup.
HTML Example
<ak-icon-bitbucket-create label="My label" />
JS Example
import BitbucketCreateIcon from 'ak-icon/glyph/bitbucket/create';
const icon = new BitbucketCreateIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-bitbucket-create label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { BitbucketCreateIcon } from 'ak-icon';
const icon = new BitbucketCreateIcon();
icon.label = 'My label';
document.body.appendChild(icon);
new BitbucketDownloadsIcon()Create an instance of the ak-icon-bitbucket-downloads programmatically, or by using markup.
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);
new BitbucketFeedbackIcon()Create an instance of the ak-icon-bitbucket-feedback programmatically, or by using markup.
HTML Example
<ak-icon-bitbucket-feedback label="My label" />
JS Example
import BitbucketFeedbackIcon from 'ak-icon/glyph/bitbucket/feedback';
const icon = new BitbucketFeedbackIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-bitbucket-feedback label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { BitbucketFeedbackIcon } from 'ak-icon';
const icon = new BitbucketFeedbackIcon();
icon.label = 'My label';
document.body.appendChild(icon);
new BitbucketFollowersIcon()Create an instance of the ak-icon-bitbucket-followers programmatically, or by using markup.
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);
new BitbucketFollowingIcon()Create an instance of the ak-icon-bitbucket-following programmatically, or by using markup.
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);
new BitbucketHelpIcon()Create an instance of the ak-icon-bitbucket-help programmatically, or by using markup.
HTML Example
<ak-icon-bitbucket-help label="My label" />
JS Example
import BitbucketHelpIcon from 'ak-icon/glyph/bitbucket/help';
const icon = new BitbucketHelpIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-bitbucket-help label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { BitbucketHelpIcon } from 'ak-icon';
const icon = new BitbucketHelpIcon();
icon.label = 'My label';
document.body.appendChild(icon);
new BitbucketIssuesIcon()Create an instance of the ak-icon-bitbucket-issues programmatically, or by using markup.
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);
new BitbucketLogoIcon()Create an instance of the ak-icon-bitbucket-logo programmatically, or by using markup.
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);
new BitbucketOptoutIcon()Create an instance of the ak-icon-bitbucket-optout programmatically, or by using markup.
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);
new BitbucketOverviewIcon()Create an instance of the ak-icon-bitbucket-overview programmatically, or by using markup.
HTML Example
<ak-icon-bitbucket-overview label="My label" />
JS Example
import BitbucketOverviewIcon from 'ak-icon/glyph/bitbucket/overview';
const icon = new BitbucketOverviewIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-bitbucket-overview label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { BitbucketOverviewIcon } from 'ak-icon';
const icon = new BitbucketOverviewIcon();
icon.label = 'My label';
document.body.appendChild(icon);
new BitbucketPipelinesIcon()Create an instance of the ak-icon-bitbucket-pipelines programmatically, or by using markup.
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);
new BitbucketPullrequestsIcon()Create an instance of the ak-icon-bitbucket-pullrequests programmatically, or by using markup.
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);
new BitbucketReposIcon()Create an instance of the ak-icon-bitbucket-repos programmatically, or by using markup.
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);
new BitbucketRepositoriesIcon()Create an instance of the ak-icon-bitbucket-repositories programmatically, or by using markup.
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);
new BitbucketSettingsIcon()Create an instance of the ak-icon-bitbucket-settings programmatically, or by using markup.
HTML Example
<ak-icon-bitbucket-settings label="My label" />
JS Example
import BitbucketSettingsIcon from 'ak-icon/glyph/bitbucket/settings';
const icon = new BitbucketSettingsIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-bitbucket-settings label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { BitbucketSettingsIcon } from 'ak-icon';
const icon = new BitbucketSettingsIcon();
icon.label = 'My label';
document.body.appendChild(icon);
new BitbucketSnippetsIcon()Create an instance of the ak-icon-bitbucket-snippets programmatically, or by using markup.
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);
new BitbucketSourceIcon()Create an instance of the ak-icon-bitbucket-source programmatically, or by using markup.
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);
new BitbucketTeamsIcon()Create an instance of the ak-icon-bitbucket-teams programmatically, or by using markup.
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);
new BitbucketWikiIcon()Create an instance of the ak-icon-bitbucket-wiki programmatically, or by using markup.
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);
new CheckboxIcon()Create an instance of the ak-icon-checkbox programmatically, or by using markup.
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);
new ConfluenceCalendarIcon()Create an instance of the ak-icon-confluence-calendar programmatically, or by using markup.
HTML Example
<ak-icon-confluence-calendar label="My label" />
JS Example
import ConfluenceCalendarIcon from 'ak-icon/glyph/confluence/calendar';
const icon = new ConfluenceCalendarIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-confluence-calendar label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { ConfluenceCalendarIcon } from 'ak-icon';
const icon = new ConfluenceCalendarIcon();
icon.label = 'My label';
document.body.appendChild(icon);
new ConfluenceCanvasIcon()Create an instance of the ak-icon-confluence-canvas programmatically, or by using markup.
HTML Example
<ak-icon-confluence-canvas label="My label" />
JS Example
import ConfluenceCanvasIcon from 'ak-icon/glyph/confluence/canvas';
const icon = new ConfluenceCanvasIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-confluence-canvas label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { ConfluenceCanvasIcon } from 'ak-icon';
const icon = new ConfluenceCanvasIcon();
icon.label = 'My label';
document.body.appendChild(icon);
new ConfluencePageIcon()Create an instance of the ak-icon-confluence-page programmatically, or by using markup.
HTML Example
<ak-icon-confluence-page label="My label" />
JS Example
import ConfluencePageIcon from 'ak-icon/glyph/confluence/page';
const icon = new ConfluencePageIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-confluence-page label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { ConfluencePageIcon } from 'ak-icon';
const icon = new ConfluencePageIcon();
icon.label = 'My label';
document.body.appendChild(icon);
new ConfluencePersonIcon()Create an instance of the ak-icon-confluence-person programmatically, or by using markup.
HTML Example
<ak-icon-confluence-person label="My label" />
JS Example
import ConfluencePersonIcon from 'ak-icon/glyph/confluence/person';
const icon = new ConfluencePersonIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-confluence-person label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { ConfluencePersonIcon } from 'ak-icon';
const icon = new ConfluencePersonIcon();
icon.label = 'My label';
document.body.appendChild(icon);
new ConfluenceQuoteIcon()Create an instance of the ak-icon-confluence-quote programmatically, or by using markup.
HTML Example
<ak-icon-confluence-quote label="My label" />
JS Example
import ConfluenceQuoteIcon from 'ak-icon/glyph/confluence/quote';
const icon = new ConfluenceQuoteIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-confluence-quote label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { ConfluenceQuoteIcon } from 'ak-icon';
const icon = new ConfluenceQuoteIcon();
icon.label = 'My label';
document.body.appendChild(icon);
new DashboardIcon()Create an instance of the ak-icon-dashboard programmatically, or by using markup.
HTML Example
<ak-icon-dashboard label="My label" />
JS Example
import DashboardIcon from 'ak-icon/glyph/dashboard';
const icon = new DashboardIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-dashboard label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { DashboardIcon } from 'ak-icon';
const icon = new DashboardIcon();
icon.label = 'My label';
document.body.appendChild(icon);
new EditorBoldIcon()Create an instance of the ak-icon-editor-bold programmatically, or by using markup.
HTML Example
<ak-icon-editor-bold label="My label" />
JS Example
import EditorBoldIcon from 'ak-icon/glyph/editor/bold';
const icon = new EditorBoldIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-editor-bold label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { EditorBoldIcon } from 'ak-icon';
const icon = new EditorBoldIcon();
icon.label = 'My label';
document.body.appendChild(icon);
new EditorCodeIcon()Create an instance of the ak-icon-editor-code programmatically, or by using markup.
HTML Example
<ak-icon-editor-code label="My label" />
JS Example
import EditorCodeIcon from 'ak-icon/glyph/editor/code';
const icon = new EditorCodeIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-editor-code label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { EditorCodeIcon } from 'ak-icon';
const icon = new EditorCodeIcon();
icon.label = 'My label';
document.body.appendChild(icon);
new EditorImageIcon()Create an instance of the ak-icon-editor-image programmatically, or by using markup.
HTML Example
<ak-icon-editor-image label="My label" />
JS Example
import EditorImageIcon from 'ak-icon/glyph/editor/image';
const icon = new EditorImageIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-editor-image label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { EditorImageIcon } from 'ak-icon';
const icon = new EditorImageIcon();
icon.label = 'My label';
document.body.appendChild(icon);
new EditorItalicIcon()Create an instance of the ak-icon-editor-italic programmatically, or by using markup.
HTML Example
<ak-icon-editor-italic label="My label" />
JS Example
import EditorItalicIcon from 'ak-icon/glyph/editor/italic';
const icon = new EditorItalicIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-editor-italic label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { EditorItalicIcon } from 'ak-icon';
const icon = new EditorItalicIcon();
icon.label = 'My label';
document.body.appendChild(icon);
new EditorLinkIcon()Create an instance of the ak-icon-editor-link programmatically, or by using markup.
HTML Example
<ak-icon-editor-link label="My label" />
JS Example
import EditorLinkIcon from 'ak-icon/glyph/editor/link';
const icon = new EditorLinkIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-editor-link label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { EditorLinkIcon } from 'ak-icon';
const icon = new EditorLinkIcon();
icon.label = 'My label';
document.body.appendChild(icon);
new EditorListBulletIcon()Create an instance of the ak-icon-editor-list-bullet programmatically, or by using markup.
HTML Example
<ak-icon-editor-list-bullet label="My label" />
JS Example
import EditorListBulletIcon from 'ak-icon/glyph/editor/list/bullet';
const icon = new EditorListBulletIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-editor-list-bullet label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { EditorListBulletIcon } from 'ak-icon';
const icon = new EditorListBulletIcon();
icon.label = 'My label';
document.body.appendChild(icon);
new EditorListNumberIcon()Create an instance of the ak-icon-editor-list-number programmatically, or by using markup.
HTML Example
<ak-icon-editor-list-number label="My label" />
JS Example
import EditorListNumberIcon from 'ak-icon/glyph/editor/list/number';
const icon = new EditorListNumberIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-editor-list-number label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { EditorListNumberIcon } from 'ak-icon';
const icon = new EditorListNumberIcon();
icon.label = 'My label';
document.body.appendChild(icon);
new EditorMentionIcon()Create an instance of the ak-icon-editor-mention programmatically, or by using markup.
HTML Example
<ak-icon-editor-mention label="My label" />
JS Example
import EditorMentionIcon from 'ak-icon/glyph/editor/mention';
const icon = new EditorMentionIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-editor-mention label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { EditorMentionIcon } from 'ak-icon';
const icon = new EditorMentionIcon();
icon.label = 'My label';
document.body.appendChild(icon);
new EditorOpenIcon()Create an instance of the ak-icon-editor-open programmatically, or by using markup.
HTML Example
<ak-icon-editor-open label="My label" />
JS Example
import EditorOpenIcon from 'ak-icon/glyph/editor/open';
const icon = new EditorOpenIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-editor-open label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { EditorOpenIcon } from 'ak-icon';
const icon = new EditorOpenIcon();
icon.label = 'My label';
document.body.appendChild(icon);
new EditorUnderlineIcon()Create an instance of the ak-icon-editor-underline programmatically, or by using markup.
HTML Example
<ak-icon-editor-underline label="My label" />
JS Example
import EditorUnderlineIcon from 'ak-icon/glyph/editor/underline';
const icon = new EditorUnderlineIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-editor-underline label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { EditorUnderlineIcon } from 'ak-icon';
const icon = new EditorUnderlineIcon();
icon.label = 'My label';
document.body.appendChild(icon);
new EditorUnlinkIcon()Create an instance of the ak-icon-editor-unlink programmatically, or by using markup.
HTML Example
<ak-icon-editor-unlink label="My label" />
JS Example
import EditorUnlinkIcon from 'ak-icon/glyph/editor/unlink';
const icon = new EditorUnlinkIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-editor-unlink label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { EditorUnlinkIcon } from 'ak-icon';
const icon = new EditorUnlinkIcon();
icon.label = 'My label';
document.body.appendChild(icon);
new ExpandIcon()Create an instance of the ak-icon-expand programmatically, or by using markup.
HTML Example
<ak-icon-expand label="My label" />
JS Example
import ExpandIcon from 'ak-icon/glyph/expand';
const icon = new ExpandIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-expand label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { ExpandIcon } from 'ak-icon';
const icon = new ExpandIcon();
icon.label = 'My label';
document.body.appendChild(icon);
new HomeIcon()Create an instance of the ak-icon-home programmatically, or by using markup.
HTML Example
<ak-icon-home label="My label" />
JS Example
import HomeIcon from 'ak-icon/glyph/home';
const icon = new HomeIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-home label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { HomeIcon } from 'ak-icon';
const icon = new HomeIcon();
icon.label = 'My label';
document.body.appendChild(icon);
new JiraLogoIcon()Create an instance of the ak-icon-jira-logo programmatically, or by using markup.
HTML Example
<ak-icon-jira-logo label="My label" />
JS Example
import JiraLogoIcon from 'ak-icon/glyph/jira/logo';
const icon = new JiraLogoIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-jira-logo label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { JiraLogoIcon } from 'ak-icon';
const icon = new JiraLogoIcon();
icon.label = 'My label';
document.body.appendChild(icon);
new ProjectsIcon()Create an instance of the ak-icon-projects programmatically, or by using markup.
HTML Example
<ak-icon-projects label="My label" />
JS Example
import ProjectsIcon from 'ak-icon/glyph/projects';
const icon = new ProjectsIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-projects label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { ProjectsIcon } from 'ak-icon';
const icon = new ProjectsIcon();
icon.label = 'My label';
document.body.appendChild(icon);
new QuestionIcon()Create an instance of the ak-icon-question programmatically, or by using markup.
HTML Example
<ak-icon-question label="My label" />
JS Example
import QuestionIcon from 'ak-icon/glyph/question';
const icon = new QuestionIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-question label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { QuestionIcon } from 'ak-icon';
const icon = new QuestionIcon();
icon.label = 'My label';
document.body.appendChild(icon);
new RadioIcon()Create an instance of the ak-icon-radio programmatically, or by using markup.
HTML Example
<ak-icon-radio label="My label" />
JS Example
import RadioIcon from 'ak-icon/glyph/radio';
const icon = new RadioIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-radio label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { RadioIcon } from 'ak-icon';
const icon = new RadioIcon();
icon.label = 'My label';
document.body.appendChild(icon);
new SearchIcon()Create an instance of the ak-icon-search programmatically, or by using markup.
HTML Example
<ak-icon-search label="My label" />
JS Example
import SearchIcon from 'ak-icon/glyph/search';
const icon = new SearchIcon();
icon.label = 'My label';
document.body.appendChild(icon);
// or via JSX
const ret = (<ak-icon-search label="My label" />);
JS Example
// only do this if you have tree-shaking enabled in your build
import { SearchIcon } from 'ak-icon';
const icon = new SearchIcon();
icon.label = 'My label';
document.body.appendChild(icon);
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.