@atlaskit/icon 28.2.0 → 28.3.0

package/dist/esm/components/icon-tile/index.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+// Import both versions
+import IconTileNew from './icon-tile-new';
+import IconTileOld from './icon-tile-old';
+
+// Color mapping for size 16 standalone icons that will no longer be tiles
+var appearanceToIconColorMap = {
+  blue: "var(--ds-icon-accent-blue, #1D7AFC)",
+  blueBold: "var(--ds-icon-accent-blue, #1D7AFC)",
+  gray: "var(--ds-icon-accent-gray, #758195)",
+  grayBold: "var(--ds-icon-accent-gray, #758195)",
+  green: "var(--ds-icon-accent-green, #22A06B)",
+  greenBold: "var(--ds-icon-accent-green, #22A06B)",
+  lime: "var(--ds-icon-accent-lime, #6A9A23)",
+  limeBold: "var(--ds-icon-accent-lime, #6A9A23)",
+  magenta: "var(--ds-icon-accent-magenta, #CD519D)",
+  magentaBold: "var(--ds-icon-accent-magenta, #CD519D)",
+  orange: "var(--ds-icon-accent-orange, #E56910)",
+  orangeBold: "var(--ds-icon-accent-orange, #E56910)",
+  purple: "var(--ds-icon-accent-purple, #8270DB)",
+  purpleBold: "var(--ds-icon-accent-purple, #8270DB)",
+  red: "var(--ds-icon-accent-red, #C9372C)",
+  redBold: "var(--ds-icon-accent-red, #C9372C)",
+  teal: "var(--ds-icon-accent-teal, #2898BD)",
+  tealBold: "var(--ds-icon-accent-teal, #2898BD)",
+  yellow: "var(--ds-icon-accent-yellow, #B38600)",
+  yellowBold: "var(--ds-icon-accent-yellow, #B38600)"
+};
+
+/**
+ * __IconTile__
+ *
+ * An icon with background shape, color, and size properties determined by Tile.
+ */
+export default function IconTile(_ref) {
+  var appearance = _ref.appearance,
+    Icon = _ref.icon,
+    label = _ref.label,
+    size = _ref.size,
+    testId = _ref.testId,
+    shape = _ref.shape,
+    LEGACY_fallbackComponent = _ref.LEGACY_fallbackComponent,
+    UNSAFE_circleReplacementComponent = _ref.UNSAFE_circleReplacementComponent;
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  if (LEGACY_fallbackComponent && !fg('platform-visual-refresh-icons')) {
+    return LEGACY_fallbackComponent;
+  }
+  if (UNSAFE_circleReplacementComponent && shape === 'circle' && fg('platform_dst_icon_tile_circle_replacement')) {
+    return UNSAFE_circleReplacementComponent;
+  }
+  if (shape !== 'circle' && fg('platform_dst_new_icon_tile')) {
+    // Handle size 16 - render icon directly without Tile
+    if (size === '16') {
+      return /*#__PURE__*/React.createElement(Icon, {
+        color: appearanceToIconColorMap[appearance],
+        label: label,
+        testId: testId
+      });
+    }
+    return /*#__PURE__*/React.createElement(IconTileNew, {
+      appearance: appearance,
+      icon: Icon,
+      label: label,
+      shape: shape,
+      size: size,
+      testId: testId
+    });
+  }
+  return /*#__PURE__*/React.createElement(IconTileOld, {
+    appearance: appearance,
+    icon: Icon,
+    label: label,
+    shape: shape,
+    size: size,
+    testId: testId
+  });
+}

package/dist/esm/components/icon.js

@@ -1,4 +1,4 @@
-/* icon.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* icon.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./icon.compiled.css";

package/dist/esm/components/skeleton.js

@@ -1,4 +1,4 @@
-/* skeleton.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* skeleton.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./skeleton.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/components/svg.js

@@ -1,4 +1,4 @@
-/* svg.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* svg.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./svg.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/metadata-core.js

@@ -3,7 +3,7 @@
  *
  * To change the format of this file, modify `createIconDocsNew` in icon-build-process/src/create-icon-docs.tsx.
  *
- * @codegen <<SignedSource::736757b9fbc08cfe04a0dfd387060116>>
+ * @codegen <<SignedSource::ee18f4e5865068325a476701d51323b5>>
  * @codegenCommand yarn build:icon-glyphs
  */
 
@@ -511,7 +511,7 @@ var metadata = {
     package: '@atlaskit/icon/core/cash',
     type: 'core',
     categorization: 'multi-purpose',
-    usage: "Known usages: 'Sales' work type.",
+    usage: "Known usages: \'Sales\' work type.",
     team: 'Design System Team',
     status: 'published'
   },
@@ -1111,7 +1111,7 @@ var metadata = {
     package: '@atlaskit/icon/core/devices',
     type: 'core',
     categorization: 'multi-purpose',
-    usage: "Known usages: 'Asset' work type.",
+    usage: "Known usages: \'Asset\' work type.",
     team: 'Design System Team',
     status: 'published'
   },
@@ -1204,7 +1204,7 @@ var metadata = {
     oldName: ['editor/emoji', 'emoji/emoji', 'emoji', 'emoji/people'],
     type: 'core',
     categorization: 'single-purpose',
-    usage: "Single purpose - Reserved for Editor as a category for Emoji's.",
+    usage: "Single purpose - Reserved for Editor as a category for Emoji\'s.",
     team: 'Design System Team',
     status: 'published'
   },
@@ -1417,7 +1417,7 @@ var metadata = {
     oldName: ['document-filled', 'document', 'editor/file', 'file'],
     type: 'core',
     categorization: 'multi-purpose',
-    usage: "Multi purpose - Known uses: document, file. Do not use to represent a page — use the dedicated 'Page' icon instead.",
+    usage: "Multi purpose - Known uses: document, file. Do not use to represent a page — use the dedicated \'Page\' icon instead.",
     team: 'Design System Team',
     status: 'published'
   },
@@ -1428,7 +1428,7 @@ var metadata = {
     oldName: ['documents'],
     type: 'core',
     categorization: 'multi-purpose',
-    usage: "Multi purpose - Known uses: documents, files. Do not use to represent pages — use the dedicated 'Pages' icon instead.",
+    usage: "Multi purpose - Known uses: documents, files. Do not use to represent pages — use the dedicated \'Pages\' icon instead.",
     team: 'Design System Team',
     status: 'published'
   },
@@ -1713,7 +1713,7 @@ var metadata = {
     oldName: ['tray'],
     type: 'core',
     categorization: 'multi-purpose',
-    usage: "Multi purpose - Known uses: 'Your work' in Confluence, inbox, mail.",
+    usage: "Multi purpose - Known uses: \'Your work\' in Confluence, inbox, mail.",
     team: 'Design System Team',
     status: 'published'
   },
@@ -1739,7 +1739,7 @@ var metadata = {
       location: '@atlaskit/icon'
     },
     categorization: 'single-purpose',
-    usage: "Reserved for information statuses and messaging.  Filled status icons provide higher visual contrast to draw attention to important information. For information tooltips, use the unfilled 'information circle' icon.",
+    usage: "Reserved for information statuses and messaging.  Filled status icons provide higher visual contrast to draw attention to important information. For information tooltips, use the unfilled \'information circle\' icon.",
     team: 'Design System Team',
     status: 'deprecated'
   },
@@ -1901,7 +1901,7 @@ var metadata = {
     package: '@atlaskit/icon/core/list-checklist',
     type: 'core',
     categorization: 'multi-purpose',
-    usage: "Known usages: Checklist, 'Requirement' work type.",
+    usage: "Known usages: Checklist, \'Requirement\' work type.",
     team: 'Design System Team',
     status: 'published'
   },
@@ -2115,7 +2115,7 @@ var metadata = {
     package: '@atlaskit/icon/core/minus-square',
     type: 'core',
     categorization: 'multi-purpose',
-    usage: "Known usages: 'Remove feature' work type.",
+    usage: "Known usages: \'Remove feature\' work type.",
     team: 'Design System Team',
     status: 'published'
   },
@@ -2272,7 +2272,7 @@ var metadata = {
     package: '@atlaskit/icon/core/pen',
     type: 'core',
     categorization: 'multi-purpose',
-    usage: "Known usages: 'Design task' work type.",
+    usage: "Known usages: \'Design task\' work type.",
     team: 'Design System Team',
     status: 'published'
   },
@@ -2400,7 +2400,7 @@ var metadata = {
     oldName: ['issue-raise'],
     type: 'core',
     categorization: 'multi-purpose',
-    usage: "Known usages: 'New feature' work type.",
+    usage: "Known usages: \'New feature\' work type.",
     team: 'Design System Team',
     status: 'published'
   },
@@ -3073,7 +3073,7 @@ var metadata = {
     oldName: ['editor/info', 'editor/panel', 'info'],
     type: 'core',
     categorization: 'single-purpose',
-    usage: "Reserved for information statuses and messaging.  Filled status icons provide higher visual contrast to draw attention to important information. For information tooltips, use the unfilled 'information circle' icon.",
+    usage: "Reserved for information statuses and messaging.  Filled status icons provide higher visual contrast to draw attention to important information. For information tooltips, use the unfilled \'information circle\' icon.",
     team: 'Design System Team',
     status: 'published'
   },
@@ -3617,7 +3617,7 @@ var metadata = {
     package: '@atlaskit/icon/core/tools',
     type: 'core',
     categorization: 'multi-purpose',
-    usage: "Known usages: 'Service request' Jira work type.",
+    usage: "Known usages: \'Service request\' Jira work type.",
     team: 'Design System Team',
     status: 'published'
   },

package/dist/esm/metadata.js

@@ -6,7 +6,7 @@ var _excluded = ["packageLoader"];
  *
  * To change the format of this file, modify `createIconDocs` in icon-build-process/src/create-icon-docs.tsx.
  *
- * @codegen <<SignedSource::505188bcbfbd2bedd523b7a93366dd82>>
+ * @codegen <<SignedSource::5b9b70e1898d13b76e8faef592720556>>
  * @codegenCommand yarn build:icon-glyphs
  */
 /* eslint-disable import/no-extraneous-dependencies -- This import is within the same package, hence self-referential. */

package/dist/types/components/icon-tile/icon-tile-new.d.ts

@@ -0,0 +1,7 @@
+import { type IconTileProps } from '../../types';
+/**
+ * __IconTile__
+ *
+ * An icon with background shape, color, and size properties determined by Tile.
+ */
+export default function IconTileNew(props: IconTileProps): JSX.Element;

package/dist/types/components/icon-tile/icon-tile-old.d.ts

@@ -0,0 +1,7 @@
+import { type IconTileProps } from '../../types';
+/**
+ * __IconTile__
+ *
+ * An icon with background shape, color, and size properties determined by Tile.
+ */
+export default function IconTile(props: IconTileProps): JSX.Element;

package/dist/types/components/icon-tile/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type IconTileProps } from '../../types';
+/**
+ * __IconTile__
+ *
+ * An icon with background shape, color, and size properties determined by Tile.
+ */
+export default function IconTile({ appearance, icon: Icon, label, size, testId, shape, LEGACY_fallbackComponent, UNSAFE_circleReplacementComponent, }: IconTileProps): React.JSX.Element;

package/dist/types/entry-points/types.d.ts

@@ -1 +1 @@
-export type { CustomGlyphProps, GlyphProps, IconProps, Size, SkeletonProps, SVGProps, NewIconProps, NewGlyphColorProps, NewUtilityIconProps, NewCoreIconProps, IconMigrationMap, IconSpacing, } from '../types';
+export type { CustomGlyphProps, GlyphProps, IconProps, Size, SkeletonProps, SVGProps, NewIconProps, NewGlyphColorProps, NewUtilityIconProps, NewCoreIconProps, IconMigrationMap, IconSpacing, IconTileProps, } from '../types';

package/dist/types/metadata-core.d.ts

@@ -3,7 +3,7 @@
  *
  * To change the format of this file, modify `createIconDocsNew` in icon-build-process/src/create-icon-docs.tsx.
  *
- * @codegen <<SignedSource::736757b9fbc08cfe04a0dfd387060116>>
+ * @codegen <<SignedSource::ee18f4e5865068325a476701d51323b5>>
  * @codegenCommand yarn build:icon-glyphs
  */
 interface metadata {

package/dist/types/metadata.d.ts

@@ -3,7 +3,7 @@
  *
  * To change the format of this file, modify `createIconDocs` in icon-build-process/src/create-icon-docs.tsx.
  *
- * @codegen <<SignedSource::505188bcbfbd2bedd523b7a93366dd82>>
+ * @codegen <<SignedSource::5b9b70e1898d13b76e8faef592720556>>
  * @codegenCommand yarn build:icon-glyphs
  */
 interface Data {
@@ -15,11 +15,5 @@ interface Data {
     }>;
 }
 export declare const metaDataWithPackageLoader: Record<string, Data>;
-declare const metaData: {
-    [k: string]: {
-        keywords: string[];
-        componentName: string;
-        package: string;
-    };
-};
+declare const metaData: Record<string, Omit<Data, 'packageLoader'>>;
 export default metaData;

package/dist/types/types.d.ts

@@ -183,7 +183,9 @@ export type NewUtilityIconProps = Omit<UNSAFE_NewUtilityGlyphProps, 'dangerously
 export type UNSAFE_NewGlyphProps = UNSAFE_NewUtilityGlyphProps | UNSAFE_NewCoreGlyphProps;
 export type NewIconProps = Omit<UNSAFE_NewGlyphProps, 'dangerouslySetGlyph' | 'type' | 'name'>;
 export type IconTileAppearance = 'gray' | 'blue' | 'teal' | 'green' | 'lime' | 'yellow' | 'orange' | 'red' | 'magenta' | 'purple' | 'grayBold' | 'blueBold' | 'tealBold' | 'greenBold' | 'limeBold' | 'yellowBold' | 'orangeBold' | 'redBold' | 'magentaBold' | 'purpleBold';
-export type IconTileSize = '16' | '24' | '32' | '40' | '48';
+export type NewIconTileSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+export type LegacyIconTileSize = '16' | '24' | '32' | '40' | '48';
+export type IconTileSize = NewIconTileSize | LegacyIconTileSize;
 export interface IconTileProps {
     /**
      * The icon to display
@@ -198,18 +200,39 @@ export interface IconTileProps {
      */
     appearance: IconTileAppearance;
     /**
-     * Size of the tile, in pixels. Defaults to "24".
-     * In a future release, semantic names will be introduced, and number values will be deprecated.
+     * Size of the tile, in pixels. Defaults to `24`.
+     *
+     * Now supports both semantic t-shirt size names and pixel number values. Pixel number values are deprecated and will be removed in a future release, however they will both be available and backwards-compatible during a transition period.
+     *
+     * Size `16` will not have a replacement after deprecation, and should be replaced with direct icons without a tile or enlarging to the next available size `xsmall`.
+     *
+     * All available sizes:
+     * - `16` (deprecated)
+     * - `xsmall` (new)
+     * - `small` or `24`
+     * - `medium` or `32`
+     * - `large` or `40`
+     * - `xlarge` or `48`
      */
     size?: IconTileSize;
     /**
      * Shape of the tile background. Defaults to "square"
+     * @deprecated Circle shape is deprecated and will be removed in a future version. Consider migrating to alternatives such as a square tile, or an `IconButton` for interactive elements.
+     * If necessary, the only way to retain a circle appearance is to rebuild the component custom using ADS primitives. The prop `UNSAFE_circleReplacementComponent` can be used to
+     * implement alternatives.
      */
     shape?: 'square' | 'circle';
     /**
      * Legacy component to render when the icon refresh feature flag is turned off.
+     * @deprecated This prop is deprecated and will be removed in a future version.
      */
     LEGACY_fallbackComponent?: ReactElement;
+    /**
+     * A component to render in place of circle shaped icon tiles, swapped out with a feature flag.
+     *
+     * This prop is temporary, and will be used by ADS to safely rollout alternatives as circle shaped icon tiles are deprecated.
+     */
+    UNSAFE_circleReplacementComponent?: ReactElement;
     /**
      * A unique string that appears as a data attribute `data-testid` in the rendered code,
      * serving as a hook for automated tests.

package/dist/types-ts4.5/components/icon-tile/icon-tile-new.d.ts

@@ -0,0 +1,7 @@
+import { type IconTileProps } from '../../types';
+/**
+ * __IconTile__
+ *
+ * An icon with background shape, color, and size properties determined by Tile.
+ */
+export default function IconTileNew(props: IconTileProps): JSX.Element;

package/dist/types-ts4.5/components/icon-tile/icon-tile-old.d.ts

@@ -0,0 +1,7 @@
+import { type IconTileProps } from '../../types';
+/**
+ * __IconTile__
+ *
+ * An icon with background shape, color, and size properties determined by Tile.
+ */
+export default function IconTile(props: IconTileProps): JSX.Element;

package/dist/types-ts4.5/components/icon-tile/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type IconTileProps } from '../../types';
+/**
+ * __IconTile__
+ *
+ * An icon with background shape, color, and size properties determined by Tile.
+ */
+export default function IconTile({ appearance, icon: Icon, label, size, testId, shape, LEGACY_fallbackComponent, UNSAFE_circleReplacementComponent, }: IconTileProps): React.JSX.Element;

package/dist/types-ts4.5/entry-points/types.d.ts

@@ -1 +1 @@
-export type { CustomGlyphProps, GlyphProps, IconProps, Size, SkeletonProps, SVGProps, NewIconProps, NewGlyphColorProps, NewUtilityIconProps, NewCoreIconProps, IconMigrationMap, IconSpacing, } from '../types';
+export type { CustomGlyphProps, GlyphProps, IconProps, Size, SkeletonProps, SVGProps, NewIconProps, NewGlyphColorProps, NewUtilityIconProps, NewCoreIconProps, IconMigrationMap, IconSpacing, IconTileProps, } from '../types';

package/dist/types-ts4.5/metadata-core.d.ts

@@ -3,7 +3,7 @@
  *
  * To change the format of this file, modify `createIconDocsNew` in icon-build-process/src/create-icon-docs.tsx.
  *
- * @codegen <<SignedSource::736757b9fbc08cfe04a0dfd387060116>>
+ * @codegen <<SignedSource::ee18f4e5865068325a476701d51323b5>>
  * @codegenCommand yarn build:icon-glyphs
  */
 interface metadata {

package/dist/types-ts4.5/metadata.d.ts

@@ -3,7 +3,7 @@
  *
  * To change the format of this file, modify `createIconDocs` in icon-build-process/src/create-icon-docs.tsx.
  *
- * @codegen <<SignedSource::505188bcbfbd2bedd523b7a93366dd82>>
+ * @codegen <<SignedSource::5b9b70e1898d13b76e8faef592720556>>
  * @codegenCommand yarn build:icon-glyphs
  */
 interface Data {
@@ -15,11 +15,5 @@ interface Data {
     }>;
 }
 export declare const metaDataWithPackageLoader: Record<string, Data>;
-declare const metaData: {
-    [k: string]: {
-        keywords: string[];
-        componentName: string;
-        package: string;
-    };
-};
+declare const metaData: Record<string, Omit<Data, 'packageLoader'>>;
 export default metaData;

package/dist/types-ts4.5/types.d.ts

@@ -183,7 +183,9 @@ export type NewUtilityIconProps = Omit<UNSAFE_NewUtilityGlyphProps, 'dangerously
 export type UNSAFE_NewGlyphProps = UNSAFE_NewUtilityGlyphProps | UNSAFE_NewCoreGlyphProps;
 export type NewIconProps = Omit<UNSAFE_NewGlyphProps, 'dangerouslySetGlyph' | 'type' | 'name'>;
 export type IconTileAppearance = 'gray' | 'blue' | 'teal' | 'green' | 'lime' | 'yellow' | 'orange' | 'red' | 'magenta' | 'purple' | 'grayBold' | 'blueBold' | 'tealBold' | 'greenBold' | 'limeBold' | 'yellowBold' | 'orangeBold' | 'redBold' | 'magentaBold' | 'purpleBold';
-export type IconTileSize = '16' | '24' | '32' | '40' | '48';
+export type NewIconTileSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+export type LegacyIconTileSize = '16' | '24' | '32' | '40' | '48';
+export type IconTileSize = NewIconTileSize | LegacyIconTileSize;
 export interface IconTileProps {
     /**
      * The icon to display
@@ -198,18 +200,39 @@ export interface IconTileProps {
      */
     appearance: IconTileAppearance;
     /**
-     * Size of the tile, in pixels. Defaults to "24".
-     * In a future release, semantic names will be introduced, and number values will be deprecated.
+     * Size of the tile, in pixels. Defaults to `24`.
+     *
+     * Now supports both semantic t-shirt size names and pixel number values. Pixel number values are deprecated and will be removed in a future release, however they will both be available and backwards-compatible during a transition period.
+     *
+     * Size `16` will not have a replacement after deprecation, and should be replaced with direct icons without a tile or enlarging to the next available size `xsmall`.
+     *
+     * All available sizes:
+     * - `16` (deprecated)
+     * - `xsmall` (new)
+     * - `small` or `24`
+     * - `medium` or `32`
+     * - `large` or `40`
+     * - `xlarge` or `48`
      */
     size?: IconTileSize;
     /**
      * Shape of the tile background. Defaults to "square"
+     * @deprecated Circle shape is deprecated and will be removed in a future version. Consider migrating to alternatives such as a square tile, or an `IconButton` for interactive elements.
+     * If necessary, the only way to retain a circle appearance is to rebuild the component custom using ADS primitives. The prop `UNSAFE_circleReplacementComponent` can be used to
+     * implement alternatives.
      */
     shape?: 'square' | 'circle';
     /**
      * Legacy component to render when the icon refresh feature flag is turned off.
+     * @deprecated This prop is deprecated and will be removed in a future version.
      */
     LEGACY_fallbackComponent?: ReactElement;
+    /**
+     * A component to render in place of circle shaped icon tiles, swapped out with a feature flag.
+     *
+     * This prop is temporary, and will be used by ADS to safely rollout alternatives as circle shaped icon tiles are deprecated.
+     */
+    UNSAFE_circleReplacementComponent?: ReactElement;
     /**
      * A unique string that appears as a data attribute `data-testid` in the rendered code,
      * serving as a hook for automated tests.

package/docs/ai/icon-instructions.md

@@ -0,0 +1,24 @@
+# Prop guidance
+
+- **label** - Always provide descriptive text for accessibility
+- **size** - Use default 16px unless design requires different
+- **color** - Use design tokens for consistent theming
+
+# Translating from Tailwind
+
+An example diff of a migration from Tailwind generated code to ADS generated code.
+
+```diff
++import AddIcon from '@atlaskit/icon/core/add';
+-<div className="w-4 h-4 text-blue-600">
+-  <svg>...</svg>
+-</div>
++<AddIcon label="Add item" />
+
+-<span className="inline-flex items-center">
+-  <svg className="w-4 h-4 mr-2">...</svg>
+-  Text
+-</span>
++<AddIcon label="Add item" />
++Text
+```

package/docs/ai/icon-tile-instructions.md

@@ -0,0 +1,27 @@
+# Prop guidance
+
+- **icon** - The icon component to display
+- **label** - Required descriptive label for accessibility
+- **appearance** - Color appearance (blue, green, red, etc.)
+- **shape** - Circle or square tile shape
+- **size** - Tile size in pixels (16, 24, 32, 40, 48)
+
+# Translating from Tailwind
+
+An example diff of a migration from Tailwind generated code to ADS generated code.
+
+```diff
++import { IconTile } from '@atlaskit/icon';
++import AddIcon from '@atlaskit/icon/core/add';
++import CheckMarkIcon from '@atlaskit/icon/core/check-mark';
+
+-<div className="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
+-  <AddIcon className="w-4 h-4 text-white" />
+-</div>
++<IconTile icon={AddIcon} label="Add icon" appearance="blue" shape="circle" size="24" />
+
+-<div className="w-8 h-8 bg-green-500 rounded-lg flex items-center justify-center">
+-  <CheckIcon className="w-5 h-5 text-white" />
+-</div>
++<IconTile icon={CheckMarkIcon} label="Success icon" appearance="green" shape="square" size="32" />
+```

package/offerings.json

@@ -0,0 +1,69 @@
+[
+	{
+		"name": "Icon",
+		"package": "@atlaskit/icon",
+		"import": {
+			"name": "Icon",
+			"package": "@atlaskit/icon",
+			"type": "default"
+		},
+		"keywords": ["icon", "symbol", "command", "device", "directory", "action", "visual"],
+		"categories": ["images-and-icons"],
+		"shortDescription": "An icon is a symbol representing a command, device, directory, or common action.",
+		"status": "general-availability",
+		"accessibilityGuidelines": [
+			"Provide appropriate alt text or labels for icons",
+			"Use meaningful icon choices that convey clear meaning",
+			"Ensure sufficient color contrast for icon visibility",
+			"Consider icon size for touch targets",
+			"Use consistent iconography across the interface"
+		],
+		"usageGuidelines": [
+			"Use icons to enhance visual communication",
+			"Choose icons that clearly represent their function",
+			"Maintain consistent icon style and size",
+			"Use appropriate icon sizes for different contexts",
+			"Consider cultural and contextual icon meanings"
+		],
+		"contentGuidelines": [
+			"Use clear, recognizable icon symbols",
+			"Ensure icons are culturally appropriate",
+			"Maintain visual consistency across icon sets",
+			"Use appropriate icon labels and descriptions"
+		],
+		"generativeInstructions": "./docs/ai/icon-instructions.md",
+		"examples": ["./examples/ai/icon.tsx"]
+	},
+	{
+		"name": "IconTile",
+		"package": "@atlaskit/icon",
+		"import": {
+			"name": "IconTile",
+			"package": "@atlaskit/icon",
+			"type": "named"
+		},
+		"keywords": ["icon", "tile", "container", "background", "shape", "appearance"],
+		"categories": ["images-and-icons"],
+		"shortDescription": "A tile component that displays an icon with customizable background, shape, and appearance.",
+		"status": "release-candidate",
+		"accessibilityGuidelines": [
+			"Provide appropriate labels for icon tiles",
+			"Ensure sufficient color contrast",
+			"Use meaningful icon choices",
+			"Consider touch target sizes"
+		],
+		"usageGuidelines": [
+			"Use for icon presentation with background styling",
+			"Choose appropriate shapes and appearances",
+			"Maintain consistent sizing across tiles",
+			"Use for visual emphasis or categorization"
+		],
+		"contentGuidelines": [
+			"Use clear, recognizable icons",
+			"Choose appropriate colors and shapes",
+			"Ensure visual consistency across tiles"
+		],
+		"generativeInstructions": "./docs/ai/icon-tile-instructions.md",
+		"examples": ["./examples/ai/icon-tile.tsx"]
+	}
+]