Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@atlaskit/icon

atlassian690.3kApache-2.026.0.0TypeScript support: included

An icon is a symbol representing a command, device, directory, or common action.

atlaskit, ui

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.

changelog

@atlaskit/icon

26.0.0

Major Changes

Patch Changes

  • Updated dependencies

25.8.0

Minor Changes

  • #148166 06a7435a03c28 - This release updates icons in @atlaskit/icon.

    Updated:

    @atlaskit/icon/core

    • refresh
    • shapes

25.7.0

Minor Changes

  • #150689 35118f49ae5c3 - This release adds icons in @atlaskit/icon.

    Added:

    @atlaskit/icon/core

    • child-work-items

25.6.0

Minor Changes

  • #138291 12b2a21a4da5a - This release updates and deprecates icons in @atlaskit/icon.

    Updated:

    @atlaskit/icon/core

    • api
    • data-number
    • data-string
    • emoji-remove
    • eye-open-strikethrough
    • field-checkbox-group
    • field-radio-group
    • list-bulleted
    • list-checklist
    • list-numbered
    • notification-muted
    • pin-filled
    • pin
    • retry
    • shield-strikethrough
    • summarize
    • tag
    • text-heading
    • text-strikethrough
    • text
    • video-skip-backward-fifteen
    • video-skip-backward-ten
    • video-skip-forward-fifteen
    • video-skip-forward-ten
    • video

25.5.0

Minor Changes

  • #135884 20a4ca43b3a13 - This release adds icons in @atlaskit/icon.

    Added:

    @atlaskit/icon/core

    • ai-generative-text-summary

25.4.0

Minor Changes

  • #134572 9ae8e789e419b - Icons are now shipped using paths instead of strokes and no longer require SVG filter overrides when using disabled tokens for color.

25.3.1

Patch Changes

25.3.0

Minor Changes

  • #132827 b69d7b27b4b5f - This release updates icons in @atlaskit/icon.

    Updated:

    @atlaskit/icon/core

    • assets

25.2.0

Minor Changes

  • #132394 8c4b7d72f9c69 - This release updates and deprecates icons in @atlaskit/icon.

    Updated:

    @atlaskit/icon/core

    • text-underline

    Deprecated:

    @atlaskit/icon/core

    • border-weight-medium
    • border-weight-thick
    • border-weight-thin
    • content-align-center
    • content-align-left
    • content-align-right
    • drag-handle
    • align-center
    • align-left
    • align-right

    Deprecated:

    @atlaskit/icon/utility

    • drag-handle

Patch Changes

  • Updated dependencies

25.1.0

Minor Changes

  • #131966 bb527c6817e2b - This release adds icons in @atlaskit/icon.

    Added:

    @atlaskit/icon/core

    • accessibility
    • drawer-left
    • drawer-right
    • work-item
    • work-items

25.0.2

Patch Changes

25.0.1

Patch Changes

  • #129972 b2d69a39e6687 - Update @compiled/react dependency for improved type checking support.
  • Updated dependencies

25.0.0

Major Changes

  • #124742 ca9cea0dadcce - Icons have been updated to use paths instead of strokes. This results in some very minor anti-aliasing differences, imperceptable to the eye, yet may cuase VR tests to break.

24.1.1

Patch Changes

24.1.0

Minor Changes

  • #117980 445574ca2bf8c - This release updates icons in @atlaskit/icon.

    Updated:

    @atlaskit/icon/core

    • drag-handle-horizontal
    • drag-handle-vertical
    • drag-handle
    • text-strikethrough

    @atlaskit/icon/utility

    • drag-handle-horizontal
    • drag-handle-vertical
    • drag-handle

24.0.0

Major Changes

Patch Changes

  • Updated dependencies

23.11.0

Minor Changes

  • #114599 bea386785f6f4 - This release adds, updates and deprecates icons in @atlaskit/icon.

    Added:

    @atlaskit/icon/core

    • drag-handle-horizontal
    • drag-handle-vertical

    @atlaskit/icon/utility

    • drag-handle-horizontal
    • drag-handle-vertical

    Updated:

    @atlaskit/icon/core

    • refresh
    • text-strikethrough

    Deprecated:

    @atlaskit/icon/core

    • content-align-center
    • content-align-left
    • content-align-right
    • border-weight-medium
    • border-weight-thick
    • border-weight-thin
    • align-center
    • align-left
    • align-right

23.10.1

Patch Changes

23.10.0

Minor Changes

23.9.1

Patch Changes

  • #113917 70dbe7ccc0f8e - Rebuilt assets with original mask IDs in tact in order to prevent clashes.

23.9.0

Minor Changes

  • #113397 50304c1a4bc84 - This release adds a svgs/core and svgs/utility entry point to allow use of the svgs for the new icons.

23.8.1

Patch Changes

23.8.0

Minor Changes

  • #111393 cbcdf9cbfacf7 - This release adds and updates icons in @atlaskit/icon.

    Added:

    @atlaskit/icon/core

    • align-image-center
    • align-image-left
    • align-image-right
    • align-text-center
    • align-text-left
    • align-text-right
    • stroke-weight-extra-large
    • stroke-weight-large
    • stroke-weight-medium
    • stroke-weight-small

    Updated:

    @atlaskit/icon/core

    • text-strikethrough

23.7.1

Patch Changes

23.7.0

Minor Changes

  • #108250 2ff8982b58a26 - [ux] This adds and modifies icons in @atlaskit/icons and @atlaskit/icon-lab

    Added:

    @atlaskit/icon/core

    • exclamation-square
    • information-circle
    • text-heading
    • text-strikethrough
    • text-underline

      Updated:

    @atlaskit/icon/core

    • cloud-arrow-up
    • error
    • field-radio-group
    • minus
    • operations
    • problem
    • thumbs-down
    • thumbs-up
    • volume-high
    • volume-low
    • volume-muted
    • warning

    @atlaskit/icon/glyph

    • issue-raise - now has replacement icon, core/plus-square and migration component

23.6.1

Patch Changes

  • Updated dependencies

23.6.0

Minor Changes

23.5.0

Minor Changes

Patch Changes

  • Updated dependencies

23.4.1

Patch Changes

23.4.0

Minor Changes

  • #102935 cce3e57461cd7 - This release updates icons in @atlaskit/icon.

    Updated:

    @atlaskit/icon/core

    • field-radio-group

23.3.1

Patch Changes

  • Updated dependencies

23.3.0

Minor Changes

  • #101112 13f29ccf9c9db - This release adds icons in @atlaskit/icon.

    Added:

    @atlaskit/icon/utility

    • chevron-double-left
    • chevron-double-right

23.2.0

Minor Changes

  • #100878 435ae22dc9289 - This release updates icons in @atlaskit/icon.

    @atlaskit/icon/core

    • 'discovery'
    • 'field-radio-group'
    • 'mention'
    • 'story'
    • 'video-skip-backward-fifteen'
    • 'video-skip-backward-ten'
    • 'video-skip-forward-fifteen'
    • 'video-skip-forward-ten'

23.1.1

Patch Changes

  • #179351 96a92733114df - Upgraded dev dependency '@emotion/babel-preset-css-prop' from '^10.0.7' to '^11.11.0'
  • Updated dependencies

23.1.0

Minor Changes

  • #175583 75911cb003bd5 - Add new property to migration map to indicate if an replacement icon is visually different to the original.

23.0.1

Patch Changes

  • #168321 01cada6d7a4d7 - Fix bug where new icon types had an additional prop isFacadeDisabled that was not used

23.0.0

Major Changes

  • #171994 be58e4bb2e387 - This release renames UNSAFE types and entrypoints. It also includes rebuilding the icons and removing deprecated entrypoints.

    Renamed entrypoints:

    • @atlaskit/icon/UNSAFE_base-new@atlaskit/icon/base-new
    • @atlaskit/icon/UNSAFE_migration-map@atlaskit/icon/migration-map

    Removed entrypoints:

    @atlaskit/icon/core

    • bulleted-list
    • collapse
    • expand

    @atlaskit/icon/core/migration

    • bulleted-list--bullet-list
    • bulleted-list--editor-bullet-list
    • collapse--editor-collapse
    • expand--editor-expand
    • expand--editor-image-resize
    • expand--image-resize

22.28.0

Minor Changes

  • #169436 e52faf54c03cd - Adds testId to Icon Tile. Fixes bug where icon tiles could render incorrectly when placed inside headings.

22.27.0

Minor Changes

Patch Changes

  • Updated dependencies

22.26.0

Minor Changes

  • #168599 48b86e5124c23 - This release adds a supplementary set of icons to @atlaskit/icon.

    Added:

    @atlaskit/icon/core

    • shield-strikethrough
    • video-skip-backward-fifteen
    • video-skip-forward-fifteen

    Updated:

    @atlaskit/icon/core

    • field-radio-group
    • sidebar-collapse
    • sidebar-expand
    • video-skip-backward-ten
    • video-skip-forward-ten

22.25.0

Minor Changes

  • #162725 b2449424247a3 - New deprecation endpoint to identify icons that have been deprecated. Used with the no-deprecated-imports lint rule to assist with displaying errors and auto-fixing those icons with a defined replacement.

22.24.3

Patch Changes

  • #166026 962b5e77810fb - Adds side-effect config to support Compiled css extraction in third-party apps

22.24.2

Patch Changes

22.24.1

Patch Changes

  • #157955 ea8ebc84a9079 - Updated migration mapping for several icon entrypoints.

    @atlaskit/icon/core/migration

    • content-wrap-left--editor-media-wrap-left
    • content-wrap-right--editor-media-wrap-right
    • discovery--editor-note
    • file--document-filled
    • file--document
    • files--documents
    • minus--editor-divider

    Updated legacy icons to map to new icons via the icon facade:

    • document → file
    • document-filled → file
    • documents → files
    • editor/divider → minus
    • editor/media-wrap-left → content-wrap-left
    • editor/media-wrap-right → content-wrap-right
    • editor/note → discovery

22.24.0

Minor Changes

22.23.0

Minor Changes

22.22.0

Minor Changes

  • #149700 86fe5879e0d2d - Default color prop for icons in experimental core and utility entrypoints has changed from color.icon to currentColor.

22.21.0

Minor Changes

Patch Changes

22.20.2

Patch Changes

22.20.1

Patch Changes

22.20.0

Minor Changes

  • #147410 7300bd8281c70 - This release adds a supplementary set of icons to @atlaskit/icon.

    Added:

    @atlaskit/icon/core

    • api
    • arrow-down-left
    • arrow-down-right
    • arrow-up-left
    • assets
    • border
    • border-weight-medium
    • border-weight-thick
    • border-weight-thin
    • border
    • calendar-plus
    • card
    • chat-widget
    • clipboard
    • curly-brackets
    • data-number
    • data-string
    • emoji-casual
    • emoji-neutral
    • emoji-remove
    • field-alert
    • field-checkbox-group
    • field-dropdown
    • field-radio-group
    • form
    • glasses
    • image-fullscreen
    • image-inline
    • image-scaled
    • markdown
    • person-remove
    • person-warning
    • project-status
    • radio-checked
    • radio-unchecked
    • screen-plus
    • sidebar-left
    • sidebar-right
    • smart-link-card
    • smart-link-embed
    • smart-link-inline
    • smart-link-list
    • smart-link
    • status-verified
    • summarize
    • support
    • table-cell-clear
    • table-cell-merge
    • table-cell-split
    • table-column-add-left
    • table-column-add-right
    • table-column-delete
    • table-column-move-left
    • table-column-move-right
    • table-columns-distribute
    • table-row-add-above
    • table-row-add-below
    • table-row-delete
    • table-row-move-down
    • table-row-move-up
    • task-in-progress
    • task-to-do
    • text-shorten
    • text-wrap
    • translate
    • video-skip-backward-ten
    • video-skip-forward-ten
    • video-stop-overlay
    • video-stop

    Updated:

    @atlaskit/icon/core

    • edit
    • link-broken
    • link-external
    • thumbs-down
    • thumbs-up

Patch Changes

22.19.0

Minor Changes

22.18.1

Patch Changes

  • Updated dependencies

22.18.0

Minor Changes

  • #140548 c66b92f724af1 - ### Summary:

    • Fixes issue where icons with arrows sometimes rendered incorrectly.
    • Adds and updates some icons used in Editor.

    Added:

    @atlaskit/icon/core

    • highlight
    • layout-one-column

    Updated:

    @atlaskit/icon/core

    • text-style: now feature smaller text with room for a color indicator underneath.
    • Icons containing arrows have corrected paths

Patch Changes

22.17.0

Minor Changes

22.16.1

Patch Changes

22.16.0

Minor Changes

22.15.2

Patch Changes

  • #135696 81ef1300efc63 - This release tests changes to the default color value for new icons in /core and /utility entrypoints behind a feature flag. These changes will roll out in an upcoming major release.

22.15.1

Patch Changes

  • #135508 7a69ad1e19510 - Reverts the removal of several icon entrypoints from @atlaskit/icon/core and @atlaskit/icon/utility:

    Core icons (from @atlaskit/icon/core):

    • bulleted-list
    • expand
    • collapse

    Core migration icons (from @atlaskit/icon/core/migration):

    • app-switcher--switcher
    • bulleted-list--bullet-list
    • bulleted-list--editor-bullet-list
    • collapse
    • collapse--editor-collapse
    • expand--editor-expand
    • expand--editor-image-resize
    • expand--image-resize
    • maximize--media-services-actual-size
    • minimize--media-services-fit-to-page
    • minimize--vid-full-screen-off
    • phone--hipchat-dial-out

    Utility migration icons (from @atlaskit/icon/core/utility/migration):

    • check-circle
    • check-circle--editor-success

    These restored entrypoints match the designs from the previous release.

    Core and Utility icons that were re-named in the previous release were not reverted to their previous designs to prevent regressions in experiences that have updated to use the new designs.

22.15.0

Minor Changes

  • #133643 1ab5ca9bddc97 -

    Warning:

    This release erroneously removed a number of entrypoints that should not have been removed in a minor release. Please stay on 22.14.2, or roll forward to 22.15.1, which adds back the removed entrypoints with the closest equivalent icons from the new set.

    Summary

    This release adds a huge new set of icons to @atlaskit/icon/core and @atlaskit/icon/utility, including replacements for legacy Editor, Jira and Media icons.

    To see how legacy icons from @atlaskit/icon/glyph map to these new icons, see the migration map in @atlaskit/icon/migration-map.

    Added:

    @atlaskit/icon/core

    • key-result
    • people-group
    • merge-failure
    • merge-success
    • text
    • sort-descending
    • sort-ascending
    • minus
    • grow-horizontal
    • expand-horizontal
    • collapse-horizontal
    • expand-vertical
    • collapse-vertical
    • grow-vertical
    • shrink-vertical
    • refresh
    • note
    • discovery
    • eye-open-strikethrough
    • file
    • files
    • video-pause-overlay
    • video-play-overlay
    • video-next-overlay
    • video-previous-overlay
    • notification-muted
    • plus-square
    • cash
    • defect
    • devices
    • list-checklist
    • magic-wand
    • pulse
    • minus-square
    • ticket
    • tools
    • wallet
    • wrench
    • on-call
    • edit-bulk
    • objective
    • target
    • scales
    • data-flow
    • theme
    • paint-bucket
    • paint-roller
    • paint-brush
    • pen
    • projection-screen
    • paint-palette
    • field
    • field-text
    • operations
    • text-bold
    • text-italic
    • list-numbered
    • text-indent-left
    • text-indent-right
    • layout-two-columns
    • layout-two-columns-sidebar-left
    • layout-two-columns-sidebar-right
    • layout-three-columns
    • layout-three-columns-sidebars
    • content-align-left
    • content-align-center
    • content-align-right
    • content-wrap-left
    • content-wrap-right
    • content-width-narrow
    • content-width-wide
    • tree
    • takeout-food
    • basketball
    • vehicle-car

    @atlaskit/icon/utility

    • success
    • arrow-down
    • arrow-left
    • arrow-right
    • arrow-up
    • drag-handle

    Renamed:

    @atlaskit/icon/core

    • list-bulleted → bulleted list
    • shrink-diagonal → minimize
    • grow-diagonal → maximize
    • shrink-horizontal → collapse
    • maximize → expand
    • success → check-circle

    @atlaskit/icon/utility

    • success → check-circle

    Updated:

    @atlaskit/icon/core

    • check-circle
    • ai-chat
    • comment
    • comment-add
    • person
    • person-add
    • person-added
    • person-offboard
    • lock-locked
    • lock-unlocked
    • check-mark
    • checkbox-checked
    • issue
    • issues
    • scorecard
    • task
    • tasks
    • branch
    • pull-request
    • add
    • minimize
    • fullscreen-exit
    • commit
    • office-building
    • department
    • text-style
    • eye-open
    • eye-open-filled
    • notification
    • arrow-up-right

    @atlaskit/icon/utility

    • chevron-right
    • chevron-down
    • chevron-left
    • chevron-up
    • lock-locked
    • lock-unlocked
    • check-circle
    • check-mark

    Removed entrypoints:

    @atlaskit/icon/core

    • bulleted-list
    • expand
    • collapse

    @atlaskit/icon/core/migration

    • app-switcher--switcher
    • bulleted-list--bullet-list
    • bulleted-list--editor-bullet-list
    • collapse
    • collapse--editor-collapse
    • expand--editor-expand
    • expand--editor-image-resize
    • expand--image-resize
    • maximize--media-services-actual-size
    • minimize--media-services-fit-to-page
    • minimize--vid-full-screen-off
    • phone--hipchat-dial-out

    @atlaskit/icon/core/utility/migration

    • check-circle
    • check-circle--editor-success

22.14.2

Patch Changes

22.14.1

Patch Changes

22.14.0

Minor Changes

22.13.0

Minor Changes

  • #129428 668728e77517f - Updated metadata format for /core and /utility icons, tightening types and moving to lowercase format.

22.12.0

Minor Changes

  • #127511 db30e29344013 - Widening range of react and react-dom peer dependencies from ^16.8.0 || ^17.0.0 || ~18.2.0 to the wider range of ^16.8.0 || ^17.0.0 || ^18.0.0` (where applicable).

    This change has been done to enable usage of `react@18.3as well as to have a consistent peer dependency range forreactandreact-domfor/platform` packages.

Patch Changes

  • Updated dependencies

22.11.1

Patch Changes

22.11.0

Minor Changes

  • #128427 ade1e717764e2 - Updated the color prop of alpha icon components to support text design tokens.

22.10.0

Minor Changes

  • #126553 a8d7e60d3b69d - Add new export, migrationOutcomeDescriptionMap, containing written migration guidance for use in documentation and tooling

22.9.0

Minor Changes

  • #125980 4df9272f5f016 - Adds four new icons to the experimental /core icon set: 'notification', 'menu', 'app-switcher', and 'app-switcher-legacy'

22.8.0

Minor Changes

  • #124884 3108a1a229e07 - - Icons in @atlaskit/icon/glyph can now switch to updated designs behind a feature flag.
    • SVGs in /svgs, used by icons in @atlaskit/icon/glyph, have been re-optimised with the latest version of SVGO; some slight changes to SVG code or subpixel aliasing may occur

22.7.0

Minor Changes

  • #122612 0c9d2190a14f2 - Adds a new prop, LEGACY_margin, to the new icon API to allow for spacing adjustments between old and new icons API.

Patch Changes

22.6.0

Minor Changes

  • c1a3f0e0f18e2 - Adds LEGACY_primaryColor to the icon API, to assist with user migration.

22.5.1

Patch Changes

  • Updated dependencies

22.5.0

Minor Changes

  • #114987 4fdcfc2b65ce0 - - Added experimental new variants of the new icon components with legacy fallbacks built in. These are available at core/migration and utility/migration and are generated based on a new migration mapping, available at @atlaskit/icon/UNSAFE_migration-map.
    • Updated the oldName value in metadata-core and metadata-utility to contain an array of legacy icon IDs, generated from the information in the migration map.

22.4.1

Patch Changes

  • #113646 01c04f5a4e85a - Update experimental new icons to support link tokens as colors
  • Updated dependencies

22.4.0

Minor Changes

  • #110670 c733254a2dd6e - Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime is implicitly set to automatic.

22.3.2

Patch Changes

  • #93481 c826eb17b113e - Remove examples of the logos that have been deprecated by the '@atlaskit/logo' package.

22.3.1

Patch Changes

  • #104222 cabed929cdde - Fix bug where utility icons incorrectly allowed the 'spacing' prop to be set. Utility icons only support 'none' spacing and the prop type has been removed"

22.3.0

Minor Changes

  • #95202 80507e249e92 - Adds new experimental icons at the entrypoints @atlaskit/icon/core/* and @atlaskit/icon/utility/*, as well as a new IconTile component (compatible with global icons).

    These new components are experimental, and subject to change or removal in minor or patch releases.

Patch Changes

  • Updated dependencies

22.2.0

Minor Changes

22.1.1

Patch Changes

  • #74633 fc09be1a0b9e - Fix bug where archive, arrow-left, mobile, editor/file-preview and editor/remove-emoji rendered with a 1% opacity white rectangle behind the glyph

22.1.0

Minor Changes

22.0.2

Patch Changes

  • #64934 532734a858a1 - Update to internal metadata order, following update of @atlaskit/icon-build-process

22.0.1

Patch Changes

  • #72130 b037e5451037 - Update new button text color fallback for default theme (non-token) to match that of old button current text color

22.0.0

Major Changes

  • #41812 48b3b440f51 - Removed all remaining legacy theming logic from the Icon and ProgressIndicator components.

21.12.8

Patch Changes

21.12.7

Patch Changes

21.12.6

Patch Changes

  • #36754 4ae083a7e66 - Use @af/accessibility-testing for default jest-axe config and jest-axe import in accessibility testing.

21.12.5

Patch Changes

  • #35441 599bfe90ee3 - Internal change to use shape tokens. There is no expected visual change.

21.12.4

Patch Changes

  • #33652 e7ea6832ad2 - Bans the use of React.FC/React.FunctionComponent type in ADS components as part of the React 18 migration work. The change is internal only and should not introduce any changes for the component consumers.

21.12.3

Patch Changes

  • #32935 b1bdec7cce2 - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour change.

21.12.2

Patch Changes

21.12.1

Patch Changes

21.12.0

Minor Changes

Patch Changes

  • Updated dependencies

21.11.5

Patch Changes

  • Updated dependencies

21.11.4

Patch Changes

  • Updated dependencies

21.11.3

Patch Changes

  • Updated dependencies

21.11.2

Patch Changes

  • Updated dependencies

21.11.1

Patch Changes

  • #25860 88a34a8c2dd - Remove redundant role=presentation on wrapping @atlaskit/icon and @atlaskit/logo spans.
  • 15d704e3090 - For an SVG icon, do not render a aria-label when empty.

21.11.0

Minor Changes

  • #24710 a3973745679 - Updates @emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.

21.10.8

Patch Changes

21.10.7

Patch Changes

  • Updated dependencies

21.10.6

Patch Changes

  • Updated dependencies

21.10.5

Patch Changes

  • Updated dependencies

21.10.4

Patch Changes

  • Updated dependencies

21.10.3

Patch Changes

21.10.2

Patch Changes

  • 19d72473dfb - Updates usage of deprecated token names so they're aligned with the latest naming conventions. No UI or visual changes
  • Updated dependencies

21.10.1

Patch Changes

  • Updated dependencies

21.10.0

Minor Changes

  • #17576 1c835620aa5 - Note: It is a re-release of the wrongly patched version 21.9.2 that should have been a minor release.

    CETI-16 added remove emoji icon so that it appears in mobilekit too

Patch Changes

  • Updated dependencies

21.9.3

Patch Changes

21.9.2

Minor Changes

WRONG RELEASE TYPE - DON'T USE

  • #15998 229177bb85d - CETI-16 added remove emoji icon so that it appears in mobilekit too

Patch Changes

  • f460cc7c411 - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
  • Updated dependencies

21.9.1

Patch Changes

  • Updated dependencies

21.9.0

Minor Changes

Patch Changes

  • Updated dependencies

21.8.1

Patch Changes

  • Updated dependencies

21.8.0

Minor Changes

  • #13864 22b8dd3f590 - Instrumented Icon with the new theming package, @atlaskit/tokens.

    New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha). These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.

  • 88ff832bd2b - Add @atlaskit/icon/glyph/editor/file-preview to atlaskit/icon package for media group toolbar

Patch Changes

  • Updated dependencies

21.7.4

Patch Changes

21.7.3

Patch Changes

21.7.2

Patch Changes

  • #13102 0c0c4315085 - [ux] Fixed a regression where Icons used static colors in High Contrast Mode when they should actually dynamically respond to changes to the primaryColor and secondaryColor props.

21.7.1

Patch Changes

21.7.0

Minor Changes

  • #12328 662739d8c28 - Icon now uses internal techstack "design-system: v1" and "styling: emotion".

Patch Changes

  • 2368dfabe46 - fix Icon appearance in windows high contrast mode
  • 54b0730475e - Fixed an a11y bug associated with the role of the SVGIcon component. The role now correctly adapts to whether a user provides a label or not.

21.6.1

Patch Changes

  • #11649 9f5d6ed95f0 - Added aria-hidden to icon wrapper when there is no label provided

21.6.0

Minor Changes

  • #11113 b9c78813d40 - Use named export of base icon instead of default in icon glyphs

21.5.1

Patch Changes

21.5.0

Minor Changes

  • #9083 017587eca78 - Icon now exposes an additional component SVG which can be used to for custom icon use cases.
  • 4203387aa43 - Internal changes to the way Icon styles are generated. Additional types have also been exposed to match the glyph component.

Patch Changes

  • 469f36d9629 - Icon build tooling has been updated.
  • d6580503ce9 - Internal refactor for JSDoc annotated modules.
  • 3de10e7652e - Documentation updates and fixes to types for all icon packages.
  • d98f1bb1169 - Local build tooling improvements.

21.4.0

Minor Changes

  • #8644 2f1a299688b - The sizeOpts type has been renamed to Size, available in both the ./ and ./types entrypoints.

Patch Changes

  • 79c23df6340 - Use injected package name and version for analytics instead of version.json.
  • f922302ad53 - Icons no longer ship with the focusable attribute in their glyph exports. This attribute was only required for IE11 support. This is purely a build change and has no effect on user API.

21.3.0

Minor Changes

  • #8178 b9265389fa0 - Icon now exposes a base icon via the @atlaskit/icon/base entrypoint. This is used in all generated glyphs inside the icon package.
  • 83944ca2cf2 - Icon now ships with cjs, esm, and es2019 bundles for components and utils exported in the icon package. Glyphs unfortunately aren't included and still only export cjs bundles.
  • 6ef8824baee - - Icon now uses React.memo() to stop unnecessary re-renders.

    • A bug in the types for icon sizes has been resolved

    This change also includes a number of quality of life fixes as part of lite mode.

    Internal changes

    • class components have been changed to functional components
    • styled-components has been removed as a peer dependency
    • @emotion/core has been added a direct dependency, base components now use emotion for styling
    • An internal gradient function insertDynamicGradientId has been removed from the runtime
    • Enzyme removed in favour of RTL

    Updating tests

    Tests that rely on enzyme may have issues with this update. We've mostly seen issues with one of the following cases.

    Can't find internal react test id

    Because icon is now wrapped in memo you won't be able to easily find it. This code will fail:

    import BookIcon from '@atlaskit/icon/glyph/book';
    
    <BookIcon />;
    
    wrapper.find('BookIcon');

    As a fix you can add memo to the target:

    wrapper.find('Memo(BookIcon)');

    Even better, use the test id.

    <BookIcon testId="book-icon" />;
    
    wrapper.find('[data-testid="book-icon"]');

    Treating the icon as a button

    Icon hasn't had an onClick handler since many major versions. This code will fail:

    const Example = () => <Button testId="test-id" iconBefore={<SomeGlyph />} />;
    
    // in some teat
    wrapper.find(SomeGlyph).click();
    // OR
    wrapper.find('SomeGlyph').click();

    As a fix you can target the button instead:

    wrapper.find('[data-testid="test-id"]').click();

Patch Changes

  • 0741b1556f6 - All icon glpyhs are now built without inline extends helpers, reducing their bundlesize.
  • 8d6c79b9055 - Typedefs of glyphs have been updated to reflect an API change that occured in version 15. For context, onClick was removed as a functional prop but it was still supported by the types. This may have resulted in a confusing developer experience although the fundamental behaviour has been consistent since version 15.

21.2.4

Patch Changes

21.2.3

Patch Changes

  • #7425 b9f0d16300 - Re-generated icons using a newer version of the build process

21.2.2

Patch Changes

  • #7589 c65f28c058 - Change codemod to return raw source if it is not transforming a file.

    Otherwise it would run prettier which can lead to some invalid syntax outputted in edge cases. This is likely due to an issue in either codemod-cli or jscodeshift.

21.2.1

Patch Changes

  • #7458 bc896a20b0 - Add a missing codemod for the entrypoint change in 21.2.0


    Running the codemod cli

    To run the codemod: You first need to have the latest version installed before you can run the codemod

    yarn upgrade @atlaskit/PACKAGE@^VERSION

    Once upgraded, use the Atlaskit codemod-cli;

    npx @atlaskit/codemod-cli --parser [PARSER] --extensions [FILE_EXTENSIONS] [TARGET_PATH]

    Or run npx @atlaskit/codemod-cli -h for more details on usage. For Atlassians, refer to this doc for more details on the codemod CLI.

21.2.0

Minor Changes

  • #7170 fbdf356800 - Remove undocumented metadata export from main entry point. To import metadata instead do it from the /metadata entrypoint.

21.1.4

Patch Changes

  • #5497 5f58283e1f - Export types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules compiler option. This requires version 3.8 of Typescript, read more about how we handle Typescript versions here: https://atlaskit.atlassian.com/get-started Also add typescript to devDependencies to denote version that the package was built with.

21.1.3

Patch Changes

  • Updated dependencies

21.1.2

Patch Changes

  • #4649 d6ff4c7dce - Removes unused (and incorrect) es2019 key in package.json

21.1.1

Patch Changes

  • #4682 f51e6ff443 - License updated to Apache 2.0 (previously under the ADG license)

21.1.0

Minor Changes

  • #4424 2f414dd083 - The new ArchiveIcon is now available to use via import ArchiveIcon from '@atlaskit/icon/glyph/archive';

21.0.3

Patch Changes

  • #3885 6c525a8229 - Upgraded to TypeScript 3.9.6 and tslib to 2.0.0

    Since tslib is a dependency for all our packages we recommend that products also follow this tslib upgrade to prevent duplicates of tslib being bundled.

21.0.2

Patch Changes

  • #3823 6262f382de - Use the 'lodash' package instead of single-function 'lodash.*' packages

21.0.1

Patch Changes

21.0.0

Major Changes

Patch Changes

  • Updated dependencies

20.1.2

Patch Changes

20.1.1

Patch Changes

20.1.0

Minor Changes

  • [minor]fd5292fd5a:

    Adds test id to icon.- [minor]fd5292fd5a:

    Refactors icon to be a functional component.

Patch Changes

20.0.2

Patch Changes

20.0.1

Patch Changes

20.0.0

Major Changes

Patch Changes

19.1.0

Minor Changes

  • [minor]28f8f0e089:

    Added person-with-circle, person-with-cross, person-with-tick icons

Patch Changes

19.0.11

Patch Changes

19.0.10

Patch Changes

  • [patch]6d37081dc8:

    Upgrade prettier from 1.18 to 1.19

19.0.9

Patch Changes

  • [patch]f081cdac54:

    Upgrade prettier from 1.14 to 1.18

19.0.8

Patch Changes

  • [patch]f9b5e24662:

    @atlaskit/icon-file-type and @atlaskit/icon-object have been converted to TypeScript to provide static typing. Flow types are no longer provided. No API or bahavioural changes.

19.0.7

Patch Changes

  • [patch]3c7bee089a:

    @atlaskit/icon-priority has been converted to TypeScript to provide static typing. Flow types are no longer provided. No API or bahavioural changes.

19.0.6

Patch Changes

  • [patch]097b696613:

    Components now depend on TS 3.6 internally, in order to fix an issue with TS resolving non-relative imports as relative imports

19.0.5

Patch Changes

19.0.4

Patch Changes

  • [patch]708028db86:

    Change all the imports to theme in Core to use multi entry points

19.0.3

Patch Changes

  • [patch]de35ce8c67:

    Updates component maintainers

19.0.2

19.0.1

Patch Changes

19.0.0

Major Changes

  • [major]06326ef3f7:

    @atlaskit/icon has been converted to TypeScript to provide static typing. Flow types are no longer provided. No API or bahavioural changes.

18.0.5

Patch Changes

  • [patch]56eae512a3:

    Updated the icon for Premium and cleaned up reduced-ui-pack sprite

18.0.4

Patch Changes

  • [patch]4615439434:

    index.ts will now be ignored when publishing to npm

18.0.3

Patch Changes

18.0.2

Patch Changes

  • [patch]0d7be7e6fc:

    All icons are breaking since the Typescript conversion. Revert PR 5769#

18.0.1

18.0.0

Major Changes

  • [major]cfc3c8adb3:

    • @atlaskit/icon has been converted to TypeScript to provide static typing. Flow types are no longer provided. No API or bahavioural changes.

17.2.0

  • [minor]70862830d6:

    • Checkbox has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No API or behavioural changes.

17.1.3

  • [patch]b0ef06c685:

    • This is just a safety release in case anything strange happened in in the previous one. See Pull Request #5942 for details

17.1.2

17.1.1

17.1.0

  • [minor]8f4f5d914a:

    • Updated home-circle icon and replaced home-filled icon with new home icon

17.0.2

17.0.1

17.0.0

  • [major]7c17b35107:

    • Updates react and react-dom peer dependencies to react@^16.8.0 and react-dom@^16.8.0. To use this package, please ensure you use at least this version of react and react-dom.

16.0.9

16.0.8

16.0.7

  • [patch]a143c9758f:

    • New Icon: Add the PremiumIcon

16.0.6

  • [patch]98e11001ff:

    • Removes duplicate babel-runtime dependency

16.0.5

16.0.4

16.0.3

16.0.2

16.0.1

16.0.0

15.0.3

  • [patch]1d1f6d1:

    • Make icon glyphs not import metadata

15.0.2

15.0.1

15.0.0

  • [major]ab9b69c:

    • Removed onClick prop as icon is only a presentational placeholder. Please wrap your icon in a Button or a Link component and add onClick to that instead.

14.6.1

14.6.0

  • [minor]29968f4:

    • Add a menu expand icon

14.5.0

14.4.0

  • [patch]29b160f:

    • Simplify the icons build process

    Icons no longer need a custom build step to be accurate on npm. This has come about by renaming the es5 folder to cjs. If you weren't reaching into our package's internals, you shouldn't notice.

  • [minor]62a7c37:

    • Add metadata export

    In trying to align the icons packages, the core @atlaskit/icon package now exports metadata, which includes information about every icon in this package.

  • Updated dependencies b29bec1:

  • Updated dependencies 80304f0:

14.3.0

  • [minor]dced9bf:

    • Remove StarOutlineIcon as it is not used

14.2.1

  • [patch]d15caa6:

    • adding editor image alignment icons

14.2.0

14.1.0

14.0.3

  • [patch] Update to use babel-7 for build processes e7bb74d

14.0.2

  • [patch] Adds missing implicit @babel/runtime dependency b71751b

14.0.1

  • [patch] Change devDependency on sectionMessage to caret dependency 91a3ced

14.0.0

  • [major] Remove product logo icons from icons, recommend using @atlaskit/logo instead 65c6514
    • The following logo exports have been removed:
      • AtlassianIcon
      • BitbucketIcon
      • ConfluenceIcon
      • HipchatIcon
      • JiraCoreIcon
      • JiraServiceDeskIcon
      • JiraSoftwareIcon
      • JiraIcon
      • StatuspageIcon
      • StrideIcon
    • Check the Upgrade Guide for more information.
  • [patch] Updated dependencies 709b239

13.9.0

13.8.1

13.8.0

  • [minor] Add the questions icon ad96a89

13.7.0

  • [minor] Add and edit star icons 55e3ec7

13.6.1

  • [patch] Adds sideEffects: false to allow proper tree shaking b5d6d04

13.6.0

  • [minor] Add static displayName prop to all icons. This results in accurate display names even after minifying and uglifying the icon variable names. a75db9d

13.5.0

  • [minor] Add the new child-issues icon 8d3f8dd

13.4.0

  • [minor] Add the new check circle outline 22af4c5

13.3.0

  • [minor] Add new icon d36f760
  • [patch] Add new icon for Roadmap 7cf05b3

13.2.6

  • [patch] Update warning message and fix test for reduced-ui-pack 4b166d8
  • [none] Updated dependencies 4b166d8

13.2.5

13.2.4

13.2.3

  • [patch] Added pointer-events: none targeting the <svg> element within the Icon component to prevent type errors in JS b755d8a
  • [none] Updated dependencies b755d8a

13.2.2

13.2.1

13.2.0

  • [minor] Add Layout Type icons for the Editor. ED-4196 259ef37
  • [none] Updated dependencies 259ef37

13.1.1

13.1.0

  • [minor] Add a new star large icon 5dd7d0e
  • [none] Updated dependencies 5dd7d0e

13.0.0

12.8.0

  • [minor] Add new media viewer icons and replace existing ones 623a2a0
  • [none] Updated dependencies 623a2a0

12.7.0

  • [minor] Add chevron large icons 086b5d7
  • [none] Updated dependencies 086b5d7

12.6.2

  • [patch] Prevent icons shrinking when they are flex-children a78cd4d
  • [none] Updated dependencies a78cd4d

12.6.1

12.6.0

  • [minor] Add a new badge id: department and suitcase e46ff5e
  • [none] Updated dependencies e46ff5e

12.5.1

  • [patch] Update to select-clear icon to allow for primaryColor and secondaryColor configuration 216b20d
  • [none] Updated dependencies 216b20d

12.5.0

  • [minor] Added select-clear icon 91ab036
  • [none] Updated dependencies 91ab036

12.4.0

  • [minor] Add the new app-switcher icon 8c0cacd
  • [none] Updated dependencies 8c0cacd

12.3.1

12.3.0

  • [minor] Object icons color updated and adding file types icons c49ce0b
  • [none] Updated dependencies c49ce0b

12.2.0

12.1.2

12.1.1

12.1.0

12.0.1

12.0.0

11.4.0

  • [minor] Update emoji and add no-image 620557e
  • [none] Updated dependencies 620557e

11.3.2

  • [patch] Update readme to be in line with other atlaskit readmes 75f016c
  • [none] Updated dependencies 75f016c

11.3.1

  • [patch] Fix unit tests 22337bd
  • [patch] Update for label with white background a0d7ed7
  • [patch] Fix whitebackground for label b8eb930
  • [patch] Fix white background for label 229a63c
  • [none] Updated dependencies 22337bd
  • [none] Updated dependencies a0d7ed7
  • [none] Updated dependencies b8eb930
  • [none] Updated dependencies 229a63c

11.3.0

11.2.0

  • [minor] Add divider from editor 5cbb8a6
  • [minor] Add divider fabric icon 8b794ed
  • [minor] Add divider icon from fabric c8adb64
  • [none] Updated dependencies 5cbb8a6
  • [none] Updated dependencies 8b794ed
  • [none] Updated dependencies c8adb64

11.1.0

11.0.1

  • [patch] ED-4228 adding icons for table floating toolbar advance options. b466410

11.0.0

  • [major] Bump to React 16.3. 4251858

10.13.0

  • [minor] Add indeterminate checkbox icon 27f4e40

10.12.2

  • [patch] add horizontal rule toolbar item 48c36f4

10.12.1

  • [patch] Re-releasing due to potentially broken babel release 9ed0bba

10.12.0

  • [minor] Update styled-components dependency to support versions 1.4.6 - 3 ceccf30

10.11.0

  • [minor] Create skeleton representations of various components cd628e4

10.10.1

  • [patch] update atlaskit src for internal consumption 4601bf0

10.10.0

  • [minor] Added 42 new icons for Objects e00ff79

10.9.3

  • [patch] removed role props to make it more accessible 88cc276

10.9.2

10.9.1

  • [patch] Packages Flow types for elements components 3111e74

10.9.0

  • [minor] New emoji-add icon b8b1b51

10.8.0

  • [minor] added editor/success icon, updated a few other editor icons 911074c

10.7.1

  • [patch] Resolved low hanging flow errors in field-base field-text comment icon item and website, $ 007de27

10.7.0

  • [minor] Add React 16 support. 12ea6e4

10.6.0

  • [minor] Updated switcher icon 2815441

10.5.0

  • [minor] Move icon and reduced-ui pack to new repo, update build process b3977f3

10.4.0 (2017-12-08)

  • feature; added new media layout icons for the editor (issues closed: ak-4012) (ee770f5)

10.3.3 (2017-12-05)

  • bug fix; fix product icon gradients not appearing with default icon colour (013f52a)
  • bug fix; fix icon gradients not applying properly in safari in some cases (issues closed: ak-3744) (e35edf8)

10.3.2 (2017-11-23)

  • bug fix; remove theme package direct references (0f99302)

10.3.1 (2017-11-20)

  • bug fix; fS-3907 Use content attribute instead of description for Tooltip (25c9604)
  • bug fix; fS-3907 Bump tooltip version in icon, item and util-shared-styles (6d20540)

10.3.0 (2017-11-16)

  • feature; new and updated icons for the editor (issues closed: ak-3720) (2c709e2)

10.2.0 (2017-11-15)

  • feature; added a new prop for icons to make them more performant. (7dc38f7)
  • feature; icon component performance improved and the glyph can now be passed as a string. (317274c)

10.1.3 (2017-11-09)

  • bug fix; add missing color props (f186c02)

10.1.2 (2017-10-26)

  • bug fix; fix to rebuild stories (793b2a7)

10.1.1 (2017-10-22)

  • bug fix; update styled component dependency and react peerDep (39f3286)

10.1.0 (2017-10-10)

  • feature; added 8 new icons, updated 4 others (issues closed: ak-3590) (0cff900)

10.0.0 (2017-09-25)

  • breaking; Removing the "editor/expand" icon. Use the appropriate chevron-up/chevron-down icons instead. (dc2f175)
  • breaking; removing the "expand" icon in preference to using the chevron ones instead (issues closed: ak-2157) (dc2f175)

9.0.1 (2017-09-15)

  • bug fix; removed glitched path from the People icon (issues closed: ak-3524) (bb1da8a)

9.0.0 (2017-09-11)

  • breaking; The company/product icons (AtlassianIcon, BitbucketIcon, ConfluenceIcon, HipchatIcon, JiraIcon) have (8a502b1)
  • breaking; new company and product icons added (8a502b1)

8.1.0 (2017-08-28)

  • feature; added switcher icon back (de848a6)

8.0.1 (2017-08-21)

  • bug fix; fix PropTypes warning (040d579)

8.0.0 (2017-08-17)

  • bug fix; fixing the devDep for icon on itself (b3db177)
  • bug fix; fixed icon build script (10aea52)
  • feature; updated stories for icons and updated the build step for reduced-ui-pack icons (0ad9eea)
  • breaking; Some icons have been deleted, and some are now 2-colours (733dbd3)
  • breaking; icon audit and improvement (733dbd3)

7.1.0 (2017-08-11)

  • bug fix; make theme import absolute (5ef8926)
  • feature; support dark mode (6701273)

7.0.2 (2017-07-24)

  • fix; use class transform in loose mode in babel to improve load performance in apps (fde719a)
  • fix; icons no longer grow massively in Webkit or when font size bumped (adfb57e)

7.0.1 (2017-06-28)

  • fix; changed icon wrapper display from inline-flex to inline-block (64dc3de)

7.0.0 (2017-06-08)

  • fix; refactored icon module and build process (a68abba)
  • breaking; Module no longer exports named exports. Import a specific icon like so: import AtlassianIcon from '@atlaskit/icon/glyph/atlassian';
  • ISSUES CLOSED: AK-2388

6.6.0 (2017-05-31)

  • fix; add prop-types as a dependency to avoid React 15.x warnings (92598eb)
  • feature; added log-in icon to @atlaskit/icon and @atlaskit/reduced-ui-pack (aa72586)

6.5.4 (2017-05-12)

  • fix; add package name and version to the hashing of classnames in @atlaskit/icon to preve (a28bfe5)

6.5.3 (2017-05-10)

  • fix; do not import whole icon in media-card (cc5ec63)

6.5.2 (2017-04-27)

  • fix; update legal copy to be more clear. Not all modules include ADG license. (f3a945e)

6.4.0 (2017-04-26)

  • fix; fixed bug in the new ExampleWithCode story type (f30a4d3)
  • fix; checkbox icon now correctly a 2-colour icon again (470642e)
  • fix; icon SVG files updated. Fills made to be transparent for 2-color icons, and some ico (264bb97)
  • fix; update legal copy and fix broken links for component README on npm. New contribution and (0b3e454)
  • feature; Adds switcher icon (220cc33)
  • feature; icons now have a primaryColor and secondaryColor prop (9768e00)

6.3.2 (2017-04-24)

  • fix; fixing improper PropType for a prop 'glyph' (cff41c5)

6.3.1 (2017-04-20)

  • fix; fixes regressions where styles werent being loaded causing sizing to be broken (1de6d0c)

6.3.0 (2017-04-20)

  • feature; removed explicit style! imports, set style-loader in webpack config (891fc3c)

6.1.0 (2017-04-19)

  • feature; refactoring Icon to reduce bundle size and code complexity (43c61f5)

6.0.1 (2017-04-18)

  • fix; update icon stories to use new readme component (1cdfa6d)
  • feature; add media services scale large and small icons (3bd9d86)

5.0.0 (2017-03-28)

  • fix; remove icon baseline alignment story (876c682)
  • fix; use new 24px artboard size in 'too big' story (404e6e0)
  • feature; bulk icon update (76367b5)
  • feature; update default icon sizes (90850bd)
  • breaking; default SVG artboard sizes are now 24px, with some icons such as editor on the 16px artboard.
  • breaking; icons are no longer guaranteed to baseline-align with sibling content. use flexbox to control alignment.
  • ISSUES CLOSED: AK-1924
  • breaking; This icon released contains a large amount of breaking naming changes due to deletions and renames. Please update to this new major version and ensure your application is using the correct icon exports via linting.
  • ISSUES CLOSED: AK-1924

3.0.3 (2017-03-23)

  • fix; Empty commit to release the component (49c08ee)
  • feature; icon sizes changed to be on grid (f6748ea)
  • breaking; Icon sizes changed. This does not change the default sizes, only the ones when there is a size prop specified.
  • ISSUES CLOSED: AK-1515

3.0.1 (2017-03-21)

  • fix; maintainers for all the packages were added (261d00a)

3.0.0 (2017-03-03)

  • feature; move service desk icons out of the servicedesk directory (f959e6b)
  • breaking; Service desk icons now live in the root icons directory
  • ISSUES CLOSED: AK-1858

2.5.5 (2017-02-28)

  • fix; dummy commit to release stories (3df5d9f)

2.5.3 (2017-02-28)

  • fix; dummy commit to fix broken stories and missing registry pages (a31e92a)

2.5.3 (2017-02-28)

  • fix; dummy commit to release stories for components (a105c02)

2.5.2 (2017-02-28)

  • fix; removes jsdoc annotations from icons and removes scripts used to generate Icons.md (e5302a0)

2.5.1 (2017-02-27)

  • fix; update flag's icon dependency to latest (32885ce)

2.4.3 (2017-02-20)

  • fix; change directory icon specific names to generic icon names (13bb38a)

2.4.1 (2017-02-20)

  • fix; fix fill color typo in jira/addon icon (8900095)
  • fix; copy in-code comment about reduced-ui-pack to readme (24e2c37)
  • fix; use correctly scoped package names in npm docs (91dbd2f)
  • feature; add icons for directory privacy levels (fb5f89b)

2.4.0 (2017-02-16)

  • feature; Force icons version bump to get mediakit icons (64bf24e)

2.3.3 (2017-02-07)

  • fix; Rearrange tsconfig.json organisation to allow per-package configuration. (6c6992d)

2.3.1 (2017-02-06)

  • fix; Updates packages to use scoped ak packages (26285cb)
  • fix; Fixes invite team icon for icons (3b66fd7)