@atlaskit/icon

What is @atlaskit/icon?

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

What are @atlaskit/icon's main functionalities?

Basic Icon Usage

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

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

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

Customizing Icon Size

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

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

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

Using Different Icons

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

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

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

Other packages similar to @atlaskit/icon

react-icons

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

fontawesome

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

README

Icon

An icon is a visual representation of a command, device, directory, or common action.

Installation

yarn add @atlaskit/icon

Usage

Icons should be used intentionally to maximize comprehension and reduce cognitive load. Use it to call attention to a particular action, command, or section. If you’re questioning an icon’s use, it probably doesn’t need to be used.

To search through all the icons we have in our system, have a look at our icon explorer.