chore: update wds icon component (#34950)

## Description
> [!TIP]  
> _Add a TL;DR when the description is longer than 500 words or
extremely technical (helps the content, marketing, and DevRel team)._
>
> _Please also include relevant motivation and context. List any
dependencies that are required for this change. Add links to Notion,
Figma or any other documents that might be relevant to the PR._


Fixes #`Issue Number`  
_or_  
Fixes `Issue URL`
> [!WARNING]  
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._

## Automation

/ok-to-test tags="@tag.Anvil"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/9942515767>
> Commit: db1ef7c00e0caa0c433984a198d9e8059a7b609e
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9942515767&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Mon, 15 Jul 2024 16:12:38 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Enhanced icon library with new thematic icons and improved
accessibility features.
- Introduced a default option in dropdowns for color selection in the
property pane.
  
- **Bug Fixes**
	- Corrected naming inconsistencies in icon entries.

- **Improvements**
- Streamlined color handling for icon and text components, enhancing
visual coherence.
- Update to the icon component's logic for improved maintainability and
clarity.

- **Documentation**
- Added comments for better understanding of the handling of type errors
in the icon component's story.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/packages/design-system/headless/src/components/Icon/index.ts

@@ -1 +0,0 @@
-export * from "./src";

app/client/packages/design-system/headless/src/components/Icon/src/Icon.tsx

@@ -1,38 +0,0 @@
-import React from "react";
-import type { ReactElement } from "react";
-import { filterDOMProps } from "@react-aria/utils";
-import type { AriaLabelingProps, DOMProps } from "@react-types/shared";
-
-export interface IconProps extends DOMProps, AriaLabelingProps {
-  "aria-label"?: string;
-  role?: string;
-  className?: string;
-  children: ReactElement;
-  "aria-hidden"?: boolean | "false" | "true";
-}
-
-export function _Icon(props: IconProps, ref: React.Ref<SVGSVGElement>) {
-  const {
-    "aria-hidden": ariaHiddenProp,
-    "aria-label": ariaLabel,
-    children,
-    className,
-    role = "img",
-    ...otherProps
-  } = props;
-
-  return React.cloneElement(children, {
-    ...filterDOMProps(otherProps),
-    focusable: "false",
-    "aria-label": ariaLabel,
-    "aria-hidden": Boolean(ariaLabel) ? ariaHiddenProp ?? undefined : true,
-    role,
-    "data-icon": "",
-    ref,
-    className,
-  });
-}
-
-_Icon.displayName = "Icon";
-
-export const Icon = React.forwardRef(_Icon);

app/client/packages/design-system/headless/src/components/Icon/src/index.ts

@@ -1,2 +0,0 @@
-export { Icon } from "./Icon";
-export type { IconProps } from "./Icon";

app/client/packages/design-system/headless/src/index.ts

@@ -1,6 +1,5 @@
 // components
 export * from "./components/Field";
-export * from "./components/Icon";
 export * from "./components/Tooltip";
 export * from "./components/TextInput";
 export * from "./components/TextArea";

app/client/packages/design-system/widgets/package.json

@@ -19,7 +19,7 @@
     "@react-aria/visually-hidden": "^3.8.0",
     "@react-types/actiongroup": "^3.4.6",
     "@react-types/shared": "^3.23.1",
-    "@tabler/icons-react": "^2.45.0",
+    "@tabler/icons-react": "^3.10.0",
     "clsx": "^2.0.0",
     "colorjs.io": "^0.4.3",
     "lodash": "*",

app/client/packages/design-system/widgets/src/components/Icon/src/Icon.tsx

@@ -1,27 +1,21 @@
-import type { Ref } from "react";
+import type { Component, Ref } from "react";
 import React, { Suspense, forwardRef, lazy, useMemo } from "react";
 import { useThemeContext } from "@design-system/theming";
-import { Icon as HeadlessIcon } from "@design-system/headless";
 
 import { ICONS } from "./icons";
 import styles from "./styles.module.css";
 import type { IconProps } from "./types";
 import { FallbackIcon } from "./FallbackIcon";
 
-const _Icon = (props: IconProps, ref: Ref<SVGSVGElement>) => {
+const _Icon = (props: IconProps, ref: Ref<Component>) => {
-  const { filled: filledProp, icon, name, size = "medium", ...rest } = props;
+  const { color, filled: filledProp, name, size = "medium", ...rest } = props;
   const theme = useThemeContext();
   const filled = theme.iconStyle === "filled" || filledProp;
 
   const Icon = useMemo(() => {
-    let Icon: React.ComponentType | null;
-
-    if (icon !== undefined) {
-      Icon = icon as React.ComponentType;
-    } else if (name !== undefined) {
     const pascalName = ICONS[name];
 
-      Icon = lazy(async () =>
+    return lazy(async () =>
       import("@tabler/icons-react").then((module) => {
         if (Boolean(filled)) {
           const filledVariant = `${pascalName}Filled`;
@@ -42,11 +36,7 @@ const _Icon = (props: IconProps, ref: Ref<SVGSVGElement>) => {
         return { default: FallbackIcon };
       }),
     );
-    } else {
+  }, [name, filled]);
-      Icon = FallbackIcon;
-    }
-    return Icon;
-  }, [name, icon, filled]);
 
   return (
     <Suspense
@@ -58,14 +48,14 @@ const _Icon = (props: IconProps, ref: Ref<SVGSVGElement>) => {
         />
       }
     >
-      <HeadlessIcon
+      <Icon
         className={styles.icon}
+        data-color={color ? color : undefined}
+        data-icon=""
         data-size={Boolean(size) ? size : undefined}
         ref={ref}
         {...rest}
-      >
+      />
-        <Icon />
-      </HeadlessIcon>
     </Suspense>
   );
 };

app/client/packages/design-system/widgets/src/components/Icon/src/icons.ts

@@ -1,13 +1,4 @@
 export const ICONS = {
-  "123": "Icon123",
-  "12-hours": "Icon12Hours",
-  "24-hours": "Icon24Hours",
-  "2-fa": "Icon2fa",
-  "360": "Icon360",
-  "360-view": "Icon360View",
-  "3-d-cube-sphere": "Icon3dCubeSphere",
-  "3-d-cube-sphere-off": "Icon3dCubeSphereOff",
-  "3-d-rotate": "Icon3dRotate",
   ab: "IconAB",
   "ab-2": "IconAB2",
   "ab-off": "IconABOff",
@@ -52,6 +43,7 @@ export const ICONS = {
   "adjustments-x": "IconAdjustmentsX",
   "aerial-lift": "IconAerialLift",
   affiliate: "IconAffiliate",
+  ai: "IconAi",
   "air-balloon": "IconAirBalloon",
   "air-conditioning": "IconAirConditioning",
   "air-conditioning-disabled": "IconAirConditioningDisabled",
@@ -98,11 +90,18 @@ export const ICONS = {
   "align-center": "IconAlignCenter",
   "align-justified": "IconAlignJustified",
   "align-left": "IconAlignLeft",
+  "align-left-2": "IconAlignLeft2",
   "align-right": "IconAlignRight",
+  "align-right-2": "IconAlignRight2",
   alpha: "IconAlpha",
+  "alphabet-arabic": "IconAlphabetArabic",
+  "alphabet-bangla": "IconAlphabetBangla",
   "alphabet-cyrillic": "IconAlphabetCyrillic",
   "alphabet-greek": "IconAlphabetGreek",
+  "alphabet-hebrew": "IconAlphabetHebrew",
+  "alphabet-korean": "IconAlphabetKorean",
   "alphabet-latin": "IconAlphabetLatin",
+  "alphabet-thai": "IconAlphabetThai",
   alt: "IconAlt",
   ambulance: "IconAmbulance",
   ampersand: "IconAmpersand",
@@ -183,6 +182,7 @@ export const ICONS = {
   "arrow-down": "IconArrowDown",
   "arrow-down-bar": "IconArrowDownBar",
   "arrow-down-circle": "IconArrowDownCircle",
+  "arrow-down-from-arc": "IconArrowDownFromArc",
   "arrow-down-left": "IconArrowDownLeft",
   "arrow-down-left-circle": "IconArrowDownLeftCircle",
   "arrow-down-rhombus": "IconArrowDownRhombus",
@@ -190,6 +190,7 @@ export const ICONS = {
   "arrow-down-right-circle": "IconArrowDownRightCircle",
   "arrow-down-square": "IconArrowDownSquare",
   "arrow-down-tail": "IconArrowDownTail",
+  "arrow-down-to-arc": "IconArrowDownToArc",
   "arrow-elbow-left": "IconArrowElbowLeft",
   "arrow-elbow-right": "IconArrowElbowRight",
   "arrow-fork": "IconArrowFork",
@@ -201,10 +202,12 @@ export const ICONS = {
   "arrow-left": "IconArrowLeft",
   "arrow-left-bar": "IconArrowLeftBar",
   "arrow-left-circle": "IconArrowLeftCircle",
+  "arrow-left-from-arc": "IconArrowLeftFromArc",
   "arrow-left-rhombus": "IconArrowLeftRhombus",
   "arrow-left-right": "IconArrowLeftRight",
   "arrow-left-square": "IconArrowLeftSquare",
   "arrow-left-tail": "IconArrowLeftTail",
+  "arrow-left-to-arc": "IconArrowLeftToArc",
   "arrow-loop-left": "IconArrowLoopLeft",
   "arrow-loop-left-2": "IconArrowLoopLeft2",
   "arrow-loop-right": "IconArrowLoopRight",
@@ -232,9 +235,11 @@ export const ICONS = {
   "arrow-right": "IconArrowRight",
   "arrow-right-bar": "IconArrowRightBar",
   "arrow-right-circle": "IconArrowRightCircle",
+  "arrow-right-from-arc": "IconArrowRightFromArc",
   "arrow-right-rhombus": "IconArrowRightRhombus",
   "arrow-right-square": "IconArrowRightSquare",
   "arrow-right-tail": "IconArrowRightTail",
+  "arrow-right-to-arc": "IconArrowRightToArc",
   "arrow-rotary-first-left": "IconArrowRotaryFirstLeft",
   "arrow-rotary-first-right": "IconArrowRotaryFirstRight",
   "arrow-rotary-last-left": "IconArrowRotaryLastLeft",
@@ -249,6 +254,7 @@ export const ICONS = {
   "arrow-up": "IconArrowUp",
   "arrow-up-bar": "IconArrowUpBar",
   "arrow-up-circle": "IconArrowUpCircle",
+  "arrow-up-from-arc": "IconArrowUpFromArc",
   "arrow-up-left": "IconArrowUpLeft",
   "arrow-up-left-circle": "IconArrowUpLeftCircle",
   "arrow-up-rhombus": "IconArrowUpRhombus",
@@ -256,6 +262,7 @@ export const ICONS = {
   "arrow-up-right-circle": "IconArrowUpRightCircle",
   "arrow-up-square": "IconArrowUpSquare",
   "arrow-up-tail": "IconArrowUpTail",
+  "arrow-up-to-arc": "IconArrowUpToArc",
   "arrow-wave-left-down": "IconArrowWaveLeftDown",
   "arrow-wave-left-up": "IconArrowWaveLeftUp",
   "arrow-wave-right-down": "IconArrowWaveRightDown",
@@ -321,7 +328,10 @@ export const ICONS = {
   "augmented-reality": "IconAugmentedReality",
   "augmented-reality-2": "IconAugmentedReality2",
   "augmented-reality-off": "IconAugmentedRealityOff",
+  "auth-2-fa": "IconAuth2fa",
   "automatic-gearbox": "IconAutomaticGearbox",
+  automation: "IconAutomation",
+  avocado: "IconAvocado",
   award: "IconAward",
   "award-off": "IconAwardOff",
   axe: "IconAxe",
@@ -340,6 +350,7 @@ export const ICONS = {
   "badge-4-k": "IconBadge4k",
   "badge-8-k": "IconBadge8k",
   "badge-ad": "IconBadgeAd",
+  "badge-ad-off": "IconBadgeAdOff",
   "badge-ar": "IconBadgeAr",
   "badge-cc": "IconBadgeCc",
   "badge-hd": "IconBadgeHd",
@@ -414,7 +425,18 @@ export const ICONS = {
   "battery-charging": "IconBatteryCharging",
   "battery-charging-2": "IconBatteryCharging2",
   "battery-eco": "IconBatteryEco",
+  "battery-exclamation": "IconBatteryExclamation",
   "battery-off": "IconBatteryOff",
+  "battery-vertical": "IconBatteryVertical",
+  "battery-vertical-1": "IconBatteryVertical1",
+  "battery-vertical-2": "IconBatteryVertical2",
+  "battery-vertical-3": "IconBatteryVertical3",
+  "battery-vertical-4": "IconBatteryVertical4",
+  "battery-vertical-charging": "IconBatteryVerticalCharging",
+  "battery-vertical-charging-2": "IconBatteryVerticalCharging2",
+  "battery-vertical-eco": "IconBatteryVerticalEco",
+  "battery-vertical-exclamation": "IconBatteryVerticalExclamation",
+  "battery-vertical-off": "IconBatteryVerticalOff",
   beach: "IconBeach",
   "beach-off": "IconBeachOff",
   bed: "IconBed",
@@ -455,6 +477,7 @@ export const ICONS = {
   "binary-off": "IconBinaryOff",
   "binary-tree": "IconBinaryTree",
   "binary-tree-2": "IconBinaryTree2",
+  binoculars: "IconBinoculars",
   biohazard: "IconBiohazard",
   "biohazard-off": "IconBiohazardOff",
   blade: "IconBlade",
@@ -462,7 +485,9 @@ export const ICONS = {
   "bleach-chlorine": "IconBleachChlorine",
   "bleach-no-chlorine": "IconBleachNoChlorine",
   "bleach-off": "IconBleachOff",
+  "blend-mode": "IconBlendMode",
   blender: "IconBlender",
+  blob: "IconBlob",
   blockquote: "IconBlockquote",
   bluetooth: "IconBluetooth",
   "bluetooth-connected": "IconBluetoothConnected",
@@ -497,8 +522,11 @@ export const ICONS = {
   "bookmarks-off": "IconBookmarksOff",
   books: "IconBooks",
   "books-off": "IconBooksOff",
+  boom: "IconBoom",
   "border-all": "IconBorderAll",
   "border-bottom": "IconBorderBottom",
+  "border-bottom-plus": "IconBorderBottomPlus",
+  "border-corner-ios": "IconBorderCornerIos",
   "border-corner-pill": "IconBorderCornerPill",
   "border-corner-rounded": "IconBorderCornerRounded",
   "border-corner-square": "IconBorderCornerSquare",
@@ -506,14 +534,17 @@ export const ICONS = {
   "border-horizontal": "IconBorderHorizontal",
   "border-inner": "IconBorderInner",
   "border-left": "IconBorderLeft",
+  "border-left-plus": "IconBorderLeftPlus",
   "border-none": "IconBorderNone",
   "border-outer": "IconBorderOuter",
   "border-radius": "IconBorderRadius",
   "border-right": "IconBorderRight",
+  "border-right-plus": "IconBorderRightPlus",
   "border-sides": "IconBorderSides",
   "border-style": "IconBorderStyle",
   "border-style-2": "IconBorderStyle2",
   "border-top": "IconBorderTop",
+  "border-top-plus": "IconBorderTopPlus",
   "border-vertical": "IconBorderVertical",
   bottle: "IconBottle",
   "bottle-off": "IconBottleOff",
@@ -521,6 +552,8 @@ export const ICONS = {
   "bounce-right": "IconBounceRight",
   bow: "IconBow",
   bowl: "IconBowl",
+  "bowl-chopsticks": "IconBowlChopsticks",
+  "bowl-spoon": "IconBowlSpoon",
   box: "IconBox",
   "box-align-bottom": "IconBoxAlignBottom",
   "box-align-bottom-left": "IconBoxAlignBottomLeft",
@@ -548,7 +581,6 @@ export const ICONS = {
   "box-multiple-9": "IconBoxMultiple9",
   "box-off": "IconBoxOff",
   "box-padding": "IconBoxPadding",
-  "box-seam": "IconBoxSeam",
   braces: "IconBraces",
   "braces-off": "IconBracesOff",
   brackets: "IconBrackets",
@@ -563,6 +595,12 @@ export const ICONS = {
   "brand-4-chan": "IconBrand4chan",
   "brand-abstract": "IconBrandAbstract",
   "brand-adobe": "IconBrandAdobe",
+  "brand-adobe-after-effect": "IconBrandAdobeAfterEffect",
+  "brand-adobe-illustrator": "IconBrandAdobeIllustrator",
+  "brand-adobe-indesign": "IconBrandAdobeIndesign",
+  "brand-adobe-photoshop": "IconBrandAdobePhotoshop",
+  "brand-adobe-premier": "IconBrandAdobePremier",
+  "brand-adobe-xd": "IconBrandAdobeXd",
   "brand-adonis-js": "IconBrandAdonisJs",
   "brand-airbnb": "IconBrandAirbnb",
   "brand-airtable": "IconBrandAirtable",
@@ -580,9 +618,12 @@ export const ICONS = {
   "brand-appgallery": "IconBrandAppgallery",
   "brand-apple": "IconBrandApple",
   "brand-apple-arcade": "IconBrandAppleArcade",
+  "brand-apple-news": "IconBrandAppleNews",
   "brand-apple-podcast": "IconBrandApplePodcast",
   "brand-appstore": "IconBrandAppstore",
+  "brand-arc": "IconBrandArc",
   "brand-asana": "IconBrandAsana",
+  "brand-astro": "IconBrandAstro",
   "brand-auth-0": "IconBrandAuth0",
   "brand-aws": "IconBrandAws",
   "brand-azure": "IconBrandAzure",
@@ -704,6 +745,7 @@ export const ICONS = {
   "brand-grindr": "IconBrandGrindr",
   "brand-guardian": "IconBrandGuardian",
   "brand-gumroad": "IconBrandGumroad",
+  "brand-hackerrank": "IconBrandHackerrank",
   "brand-hbo": "IconBrandHbo",
   "brand-headlessui": "IconBrandHeadlessui",
   "brand-hexo": "IconBrandHexo",
@@ -741,6 +783,7 @@ export const ICONS = {
   "brand-mercedes": "IconBrandMercedes",
   "brand-messenger": "IconBrandMessenger",
   "brand-meta": "IconBrandMeta",
+  "brand-metabrainz": "IconBrandMetabrainz",
   "brand-minecraft": "IconBrandMinecraft",
   "brand-miniprogram": "IconBrandMiniprogram",
   "brand-mixpanel": "IconBrandMixpanel",
@@ -921,6 +964,7 @@ export const ICONS = {
   "briefcase-off": "IconBriefcaseOff",
   brightness: "IconBrightness",
   "brightness-2": "IconBrightness2",
+  "brightness-auto": "IconBrightnessAuto",
   "brightness-down": "IconBrightnessDown",
   "brightness-half": "IconBrightnessHalf",
   "brightness-off": "IconBrightnessOff",
@@ -934,6 +978,13 @@ export const ICONS = {
   "browser-x": "IconBrowserX",
   brush: "IconBrush",
   "brush-off": "IconBrushOff",
+  bubble: "IconBubble",
+  "bubble-minus": "IconBubbleMinus",
+  "bubble-plus": "IconBubblePlus",
+  "bubble-tea": "IconBubbleTea",
+  "bubble-tea-2": "IconBubbleTea2",
+  "bubble-text": "IconBubbleText",
+  "bubble-x": "IconBubbleX",
   bucket: "IconBucket",
   "bucket-droplet": "IconBucketDroplet",
   "bucket-off": "IconBucketOff",
@@ -945,6 +996,7 @@ export const ICONS = {
   "building-bridge": "IconBuildingBridge",
   "building-bridge-2": "IconBuildingBridge2",
   "building-broadcast-tower": "IconBuildingBroadcastTower",
+  "building-burj-al-arab": "IconBuildingBurjAlArab",
   "building-carousel": "IconBuildingCarousel",
   "building-castle": "IconBuildingCastle",
   "building-church": "IconBuildingChurch",
@@ -959,6 +1011,7 @@ export const ICONS = {
   "building-lighthouse": "IconBuildingLighthouse",
   "building-monument": "IconBuildingMonument",
   "building-mosque": "IconBuildingMosque",
+  "building-off": "IconBuildingOff",
   "building-pavilion": "IconBuildingPavilion",
   "building-skyscraper": "IconBuildingSkyscraper",
   "building-stadium": "IconBuildingStadium",
@@ -966,6 +1019,7 @@ export const ICONS = {
   "building-tunnel": "IconBuildingTunnel",
   "building-warehouse": "IconBuildingWarehouse",
   "building-wind-turbine": "IconBuildingWindTurbine",
+  buildings: "IconBuildings",
   bulb: "IconBulb",
   "bulb-off": "IconBulbOff",
   bulldozer: "IconBulldozer",
@@ -1039,22 +1093,33 @@ export const ICONS = {
   "camera-x": "IconCameraX",
   camper: "IconCamper",
   campfire: "IconCampfire",
+  cancel: "IconCancel",
   candle: "IconCandle",
   candy: "IconCandy",
   "candy-off": "IconCandyOff",
   cane: "IconCane",
   cannabis: "IconCannabis",
+  "cap-projecting": "IconCapProjecting",
+  "cap-rounded": "IconCapRounded",
+  "cap-straight": "IconCapStraight",
   capsule: "IconCapsule",
   "capsule-horizontal": "IconCapsuleHorizontal",
   capture: "IconCapture",
   "capture-off": "IconCaptureOff",
   car: "IconCar",
+  "car-4-wd": "IconCar4wd",
   "car-crane": "IconCarCrane",
   "car-crash": "IconCarCrash",
+  "car-fan": "IconCarFan",
+  "car-fan-1": "IconCarFan1",
+  "car-fan-2": "IconCarFan2",
+  "car-fan-3": "IconCarFan3",
+  "car-fan-auto": "IconCarFanAuto",
   "car-garage": "IconCarGarage",
   "car-off": "IconCarOff",
   "car-suv": "IconCarSuv",
   "car-turbine": "IconCarTurbine",
+  carambola: "IconCarambola",
   caravan: "IconCaravan",
   cardboards: "IconCardboards",
   "cardboards-off": "IconCardboardsOff",
@@ -1073,6 +1138,7 @@ export const ICONS = {
   "cash-banknote": "IconCashBanknote",
   "cash-banknote-off": "IconCashBanknoteOff",
   "cash-off": "IconCashOff",
+  "cash-register": "IconCashRegister",
   cast: "IconCast",
   "cast-off": "IconCastOff",
   cat: "IconCat",
@@ -1105,9 +1171,11 @@ export const ICONS = {
   "chart-arrows-vertical": "IconChartArrowsVertical",
   "chart-bar": "IconChartBar",
   "chart-bar-off": "IconChartBarOff",
+  "chart-bar-popular": "IconChartBarPopular",
   "chart-bubble": "IconChartBubble",
   "chart-candle": "IconChartCandle",
   "chart-circles": "IconChartCircles",
+  "chart-cohort": "IconChartCohort",
   "chart-donut": "IconChartDonut",
   "chart-donut-2": "IconChartDonut2",
   "chart-donut-3": "IconChartDonut3",
@@ -1115,6 +1183,7 @@ export const ICONS = {
   "chart-dots": "IconChartDots",
   "chart-dots-2": "IconChartDots2",
   "chart-dots-3": "IconChartDots3",
+  "chart-funnel": "IconChartFunnel",
   "chart-grid-dots": "IconChartGridDots",
   "chart-histogram": "IconChartHistogram",
   "chart-infographic": "IconChartInfographic",
@@ -1127,6 +1196,8 @@ export const ICONS = {
   "chart-ppf": "IconChartPpf",
   "chart-radar": "IconChartRadar",
   "chart-sankey": "IconChartSankey",
+  "chart-scatter": "IconChartScatter",
+  "chart-scatter-3-d": "IconChartScatter3d",
   "chart-treemap": "IconChartTreemap",
   check: "IconCheck",
   checkbox: "IconCheckbox",
@@ -1192,6 +1263,8 @@ export const ICONS = {
   "circle-chevrons-right": "IconCircleChevronsRight",
   "circle-chevrons-up": "IconCircleChevronsUp",
   "circle-dashed": "IconCircleDashed",
+  "circle-dashed-check": "IconCircleDashedCheck",
+  "circle-dashed-minus": "IconCircleDashedMinus",
   "circle-dashed-number-0": "IconCircleDashedNumber0",
   "circle-dashed-number-1": "IconCircleDashedNumber1",
   "circle-dashed-number-2": "IconCircleDashedNumber2",
@@ -1203,6 +1276,7 @@ export const ICONS = {
   "circle-dashed-number-8": "IconCircleDashedNumber8",
   "circle-dashed-number-9": "IconCircleDashedNumber9",
   "circle-dashed-percentage": "IconCircleDashedPercentage",
+  "circle-dashed-plus": "IconCircleDashedPlus",
   "circle-dashed-x": "IconCircleDashedX",
   "circle-dot": "IconCircleDot",
   "circle-dotted": "IconCircleDotted",
@@ -1281,6 +1355,7 @@ export const ICONS = {
   "clear-all": "IconClearAll",
   "clear-formatting": "IconClearFormatting",
   click: "IconClick",
+  "cliff-jumping": "IconCliffJumping",
   clipboard: "IconClipboard",
   "clipboard-check": "IconClipboardCheck",
   "clipboard-copy": "IconClipboardCopy",
@@ -1289,6 +1364,7 @@ export const ICONS = {
   "clipboard-list": "IconClipboardList",
   "clipboard-off": "IconClipboardOff",
   "clipboard-plus": "IconClipboardPlus",
+  "clipboard-smile": "IconClipboardSmile",
   "clipboard-text": "IconClipboardText",
   "clipboard-typography": "IconClipboardTypography",
   "clipboard-x": "IconClipboardX",
@@ -1296,6 +1372,7 @@ export const ICONS = {
   "clock-12": "IconClock12",
   "clock-2": "IconClock2",
   "clock-24": "IconClock24",
+  "clock-bitcoin": "IconClockBitcoin",
   "clock-bolt": "IconClockBolt",
   "clock-cancel": "IconClockCancel",
   "clock-check": "IconClockCheck",
@@ -1336,6 +1413,7 @@ export const ICONS = {
   "clothes-rack": "IconClothesRack",
   "clothes-rack-off": "IconClothesRackOff",
   cloud: "IconCloud",
+  "cloud-bitcoin": "IconCloudBitcoin",
   "cloud-bolt": "IconCloudBolt",
   "cloud-cancel": "IconCloudCancel",
   "cloud-check": "IconCloudCheck",
@@ -1371,7 +1449,7 @@ export const ICONS = {
   "clover-2": "IconClover2",
   clubs: "IconClubs",
   code: "IconCode",
-  "code-asterix": "IconCodeAsterix",
+  "code-asterisk": "IconCodeAsterisk",
   "code-circle": "IconCodeCircle",
   "code-circle-2": "IconCodeCircle2",
   "code-dots": "IconCodeDots",
@@ -1421,6 +1499,7 @@ export const ICONS = {
   confucius: "IconConfucius",
   container: "IconContainer",
   "container-off": "IconContainerOff",
+  contract: "IconContract",
   contrast: "IconContrast",
   "contrast-2": "IconContrast2",
   "contrast-2-off": "IconContrast2Off",
@@ -1490,6 +1569,8 @@ export const ICONS = {
   "crystal-ball": "IconCrystalBall",
   csv: "IconCsv",
   cube: "IconCube",
+  "cube-3-d-sphere": "IconCube3dSphere",
+  "cube-3-d-sphere-off": "IconCube3dSphereOff",
   "cube-off": "IconCubeOff",
   "cube-plus": "IconCubePlus",
   "cube-send": "IconCubeSend",
@@ -1589,6 +1670,7 @@ export const ICONS = {
   "database-plus": "IconDatabasePlus",
   "database-search": "IconDatabaseSearch",
   "database-share": "IconDatabaseShare",
+  "database-smile": "IconDatabaseSmile",
   "database-star": "IconDatabaseStar",
   "database-x": "IconDatabaseX",
   decimal: "IconDecimal",
@@ -1764,6 +1846,7 @@ export const ICONS = {
   "device-tv": "IconDeviceTv",
   "device-tv-off": "IconDeviceTvOff",
   "device-tv-old": "IconDeviceTvOld",
+  "device-unknown": "IconDeviceUnknown",
   "device-usb": "IconDeviceUsb",
   "device-vision-pro": "IconDeviceVisionPro",
   "device-watch": "IconDeviceWatch",
@@ -1843,9 +1926,6 @@ export const ICONS = {
   "disc-golf": "IconDiscGolf",
   "disc-off": "IconDiscOff",
   discount: "IconDiscount",
-  "discount-2": "IconDiscount2",
-  "discount-2-off": "IconDiscount2Off",
-  "discount-check": "IconDiscountCheck",
   "discount-off": "IconDiscountOff",
   divide: "IconDivide",
   dna: "IconDna",
@@ -1895,6 +1975,7 @@ export const ICONS = {
   "droplet-x": "IconDropletX",
   droplets: "IconDroplets",
   "dual-screen": "IconDualScreen",
+  dumpling: "IconDumpling",
   "e-passport": "IconEPassport",
   ear: "IconEar",
   "ear-off": "IconEarOff",
@@ -1949,6 +2030,7 @@ export const ICONS = {
   "external-link": "IconExternalLink",
   "external-link-off": "IconExternalLinkOff",
   eye: "IconEye",
+  "eye-bitcoin": "IconEyeBitcoin",
   "eye-bolt": "IconEyeBolt",
   "eye-cancel": "IconEyeCancel",
   "eye-check": "IconEyeCheck",
@@ -1957,6 +2039,7 @@ export const ICONS = {
   "eye-cog": "IconEyeCog",
   "eye-discount": "IconEyeDiscount",
   "eye-dollar": "IconEyeDollar",
+  "eye-dotted": "IconEyeDotted",
   "eye-down": "IconEyeDown",
   "eye-edit": "IconEyeEdit",
   "eye-exclamation": "IconEyeExclamation",
@@ -2011,6 +2094,7 @@ export const ICONS = {
   "file-dots": "IconFileDots",
   "file-download": "IconFileDownload",
   "file-euro": "IconFileEuro",
+  "file-excel": "IconFileExcel",
   "file-export": "IconFileExport",
   "file-function": "IconFileFunction",
   "file-horizontal": "IconFileHorizontal",
@@ -2018,6 +2102,7 @@ export const ICONS = {
   "file-infinity": "IconFileInfinity",
   "file-info": "IconFileInfo",
   "file-invoice": "IconFileInvoice",
+  "file-isr": "IconFileIsr",
   "file-lambda": "IconFileLambda",
   "file-like": "IconFileLike",
   "file-minus": "IconFileMinus",
@@ -2073,6 +2158,7 @@ export const ICONS = {
   "file-unknown": "IconFileUnknown",
   "file-upload": "IconFileUpload",
   "file-vector": "IconFileVector",
+  "file-word": "IconFileWord",
   "file-x": "IconFileX",
   "file-zip": "IconFileZip",
   files: "IconFiles",
@@ -2120,6 +2206,7 @@ export const ICONS = {
   "flag-2": "IconFlag2",
   "flag-2-off": "IconFlag2Off",
   "flag-3": "IconFlag3",
+  "flag-bitcoin": "IconFlagBitcoin",
   "flag-bolt": "IconFlagBolt",
   "flag-cancel": "IconFlagCancel",
   "flag-check": "IconFlagCheck",
@@ -2258,7 +2345,10 @@ export const ICONS = {
   "git-pull-request-draft": "IconGitPullRequestDraft",
   gizmo: "IconGizmo",
   glass: "IconGlass",
+  "glass-champagne": "IconGlassChampagne",
+  "glass-cocktail": "IconGlassCocktail",
   "glass-full": "IconGlassFull",
+  "glass-gin": "IconGlassGin",
   "glass-off": "IconGlassOff",
   globe: "IconGlobe",
   "globe-off": "IconGlobeOff",
@@ -2297,14 +2387,17 @@ export const ICONS = {
   "hammer-off": "IconHammerOff",
   "hand-click": "IconHandClick",
   "hand-finger": "IconHandFinger",
+  "hand-finger-down": "IconHandFingerDown",
+  "hand-finger-left": "IconHandFingerLeft",
   "hand-finger-off": "IconHandFingerOff",
+  "hand-finger-right": "IconHandFingerRight",
   "hand-grab": "IconHandGrab",
   "hand-little-finger": "IconHandLittleFinger",
+  "hand-love-you": "IconHandLoveYou",
   "hand-middle-finger": "IconHandMiddleFinger",
   "hand-move": "IconHandMove",
   "hand-off": "IconHandOff",
   "hand-ring-finger": "IconHandRingFinger",
-  "hand-rock": "IconHandRock",
   "hand-sanitizer": "IconHandSanitizer",
   "hand-stop": "IconHandStop",
   "hand-three-fingers": "IconHandThreeFingers",
@@ -2324,6 +2417,7 @@ export const ICONS = {
   "headset-off": "IconHeadsetOff",
   "health-recognition": "IconHealthRecognition",
   heart: "IconHeart",
+  "heart-bitcoin": "IconHeartBitcoin",
   "heart-bolt": "IconHeartBolt",
   "heart-broken": "IconHeartBroken",
   "heart-cancel": "IconHeartCancel",
@@ -2428,6 +2522,7 @@ export const ICONS = {
   "history-toggle": "IconHistoryToggle",
   home: "IconHome",
   "home-2": "IconHome2",
+  "home-bitcoin": "IconHomeBitcoin",
   "home-bolt": "IconHomeBolt",
   "home-cancel": "IconHomeCancel",
   "home-check": "IconHomeCheck",
@@ -2467,6 +2562,8 @@ export const ICONS = {
   "hourglass-high": "IconHourglassHigh",
   "hourglass-low": "IconHourglassLow",
   "hourglass-off": "IconHourglassOff",
+  "hours-12": "IconHours12",
+  "hours-24": "IconHours24",
   html: "IconHtml",
   "http-connect": "IconHttpConnect",
   "http-delete": "IconHttpDelete",
@@ -2489,6 +2586,8 @@ export const ICONS = {
   "id-badge-2": "IconIdBadge2",
   "id-badge-off": "IconIdBadgeOff",
   "id-off": "IconIdOff",
+  ikosaedr: "IconIkosaedr",
+  "image-in-picture": "IconImageInPicture",
   inbox: "IconInbox",
   "inbox-off": "IconInboxOff",
   "indent-decrease": "IconIndentDecrease",
@@ -2514,6 +2613,7 @@ export const ICONS = {
   "input-check": "IconInputCheck",
   "input-search": "IconInputSearch",
   "input-x": "IconInputX",
+  invoice: "IconInvoice",
   ironing: "IconIroning",
   "ironing-1": "IconIroning1",
   "ironing-2": "IconIroning2",
@@ -2528,12 +2628,15 @@ export const ICONS = {
   jacket: "IconJacket",
   jetpack: "IconJetpack",
   "jewish-star": "IconJewishStar",
+  "join-bevel": "IconJoinBevel",
+  "join-round": "IconJoinRound",
+  "join-straight": "IconJoinStraight",
   jpg: "IconJpg",
   json: "IconJson",
   "jump-rope": "IconJumpRope",
   karate: "IconKarate",
   kayak: "IconKayak",
-  kering: "IconKering",
+  kerning: "IconKerning",
   key: "IconKey",
   "key-off": "IconKeyOff",
   keyboard: "IconKeyboard",
@@ -2545,6 +2648,9 @@ export const ICONS = {
   "keyframe-align-horizontal": "IconKeyframeAlignHorizontal",
   "keyframe-align-vertical": "IconKeyframeAlignVertical",
   keyframes: "IconKeyframes",
+  label: "IconLabel",
+  "label-important": "IconLabelImportant",
+  "label-off": "IconLabelOff",
   ladder: "IconLadder",
   "ladder-off": "IconLadderOff",
   ladle: "IconLadle",
@@ -2560,11 +2666,17 @@ export const ICONS = {
   lasso: "IconLasso",
   "lasso-off": "IconLassoOff",
   "lasso-polygon": "IconLassoPolygon",
+  "laurel-wreath": "IconLaurelWreath",
+  "laurel-wreath-1": "IconLaurelWreath1",
+  "laurel-wreath-2": "IconLaurelWreath2",
+  "laurel-wreath-3": "IconLaurelWreath3",
   "layers-difference": "IconLayersDifference",
   "layers-intersect": "IconLayersIntersect",
   "layers-intersect-2": "IconLayersIntersect2",
   "layers-linked": "IconLayersLinked",
   "layers-off": "IconLayersOff",
+  "layers-selected": "IconLayersSelected",
+  "layers-selected-bottom": "IconLayersSelectedBottom",
   "layers-subtract": "IconLayersSubtract",
   "layers-union": "IconLayersUnion",
   layout: "IconLayout",
@@ -2607,6 +2719,7 @@ export const ICONS = {
   "layout-sidebar-right-expand": "IconLayoutSidebarRightExpand",
   "layout-sidebar-right-inactive": "IconLayoutSidebarRightInactive",
   leaf: "IconLeaf",
+  "leaf-2": "IconLeaf2",
   "leaf-off": "IconLeafOff",
   lego: "IconLego",
   "lego-off": "IconLegoOff",
@@ -2728,6 +2841,7 @@ export const ICONS = {
   lock: "IconLock",
   "lock-access": "IconLockAccess",
   "lock-access-off": "IconLockAccessOff",
+  "lock-bitcoin": "IconLockBitcoin",
   "lock-bolt": "IconLockBolt",
   "lock-cancel": "IconLockCancel",
   "lock-check": "IconLockCheck",
@@ -2740,6 +2854,7 @@ export const ICONS = {
   "lock-minus": "IconLockMinus",
   "lock-off": "IconLockOff",
   "lock-open": "IconLockOpen",
+  "lock-open-2": "IconLockOpen2",
   "lock-open-off": "IconLockOpenOff",
   "lock-pause": "IconLockPause",
   "lock-pin": "IconLockPin",
@@ -2764,6 +2879,7 @@ export const ICONS = {
   "login-2": "IconLogin2",
   logout: "IconLogout",
   "logout-2": "IconLogout2",
+  logs: "IconLogs",
   lollipop: "IconLollipop",
   "lollipop-off": "IconLollipopOff",
   luggage: "IconLuggage",
@@ -2777,6 +2893,7 @@ export const ICONS = {
   magnetic: "IconMagnetic",
   mail: "IconMail",
   "mail-ai": "IconMailAi",
+  "mail-bitcoin": "IconMailBitcoin",
   "mail-bolt": "IconMailBolt",
   "mail-cancel": "IconMailCancel",
   "mail-check": "IconMailCheck",
@@ -2870,6 +2987,8 @@ export const ICONS = {
   "math-1-divide-2": "IconMath1Divide2",
   "math-1-divide-3": "IconMath1Divide3",
   "math-avg": "IconMathAvg",
+  "math-cos": "IconMathCos",
+  "math-ctg": "IconMathCtg",
   "math-equal-greater": "IconMathEqualGreater",
   "math-equal-lower": "IconMathEqualLower",
   "math-function": "IconMathFunction",
@@ -2881,12 +3000,16 @@ export const ICONS = {
   "math-integrals": "IconMathIntegrals",
   "math-lower": "IconMathLower",
   "math-max": "IconMathMax",
+  "math-max-min": "IconMathMaxMin",
   "math-min": "IconMathMin",
   "math-not": "IconMathNot",
   "math-off": "IconMathOff",
   "math-pi": "IconMathPi",
   "math-pi-divide-2": "IconMathPiDivide2",
+  "math-sec": "IconMathSec",
+  "math-sin": "IconMathSin",
   "math-symbols": "IconMathSymbols",
+  "math-tg": "IconMathTg",
   "math-x-divide-2": "IconMathXDivide2",
   "math-x-divide-y": "IconMathXDivideY",
   "math-x-divide-y-2": "IconMathXDivideY2",
@@ -2912,6 +3035,8 @@ export const ICONS = {
   menorah: "IconMenorah",
   menu: "IconMenu",
   "menu-2": "IconMenu2",
+  "menu-3": "IconMenu3",
+  "menu-4": "IconMenu4",
   "menu-deep": "IconMenuDeep",
   "menu-order": "IconMenuOrder",
   message: "IconMessage",
@@ -2941,7 +3066,6 @@ export const ICONS = {
   "message-chatbot": "IconMessageChatbot",
   "message-check": "IconMessageCheck",
   "message-circle": "IconMessageCircle",
-  "message-circle-2": "IconMessageCircle2",
   "message-circle-bolt": "IconMessageCircleBolt",
   "message-circle-cancel": "IconMessageCircleCancel",
   "message-circle-check": "IconMessageCircleCheck",
@@ -2961,6 +3085,7 @@ export const ICONS = {
   "message-circle-share": "IconMessageCircleShare",
   "message-circle-star": "IconMessageCircleStar",
   "message-circle-up": "IconMessageCircleUp",
+  "message-circle-user": "IconMessageCircleUser",
   "message-circle-x": "IconMessageCircleX",
   "message-code": "IconMessageCode",
   "message-cog": "IconMessageCog",
@@ -2983,6 +3108,7 @@ export const ICONS = {
   "message-share": "IconMessageShare",
   "message-star": "IconMessageStar",
   "message-up": "IconMessageUp",
+  "message-user": "IconMessageUser",
   "message-x": "IconMessageX",
   messages: "IconMessages",
   "messages-off": "IconMessagesOff",
@@ -3016,9 +3142,11 @@ export const ICONS = {
   mobiledata: "IconMobiledata",
   "mobiledata-off": "IconMobiledataOff",
   moneybag: "IconMoneybag",
+  monkeybar: "IconMonkeybar",
   "mood-angry": "IconMoodAngry",
   "mood-annoyed": "IconMoodAnnoyed",
   "mood-annoyed-2": "IconMoodAnnoyed2",
+  "mood-bitcoin": "IconMoodBitcoin",
   "mood-boy": "IconMoodBoy",
   "mood-check": "IconMoodCheck",
   "mood-cog": "IconMoodCog",
@@ -3055,7 +3183,7 @@ export const ICONS = {
   "mood-smile": "IconMoodSmile",
   "mood-smile-beam": "IconMoodSmileBeam",
   "mood-smile-dizzy": "IconMoodSmileDizzy",
-  "mood-suprised": "IconMoodSuprised",
+  "mood-surprised": "IconMoodSurprised",
   "mood-tongue": "IconMoodTongue",
   "mood-tongue-wink": "IconMoodTongueWink",
   "mood-tongue-wink-2": "IconMoodTongueWink2",
@@ -3164,6 +3292,7 @@ export const ICONS = {
   "number-1": "IconNumber1",
   "number-10-small": "IconNumber10Small",
   "number-11-small": "IconNumber11Small",
+  "number-123": "IconNumber123",
   "number-12-small": "IconNumber12Small",
   "number-13-small": "IconNumber13Small",
   "number-14-small": "IconNumber14Small",
@@ -3202,6 +3331,7 @@ export const ICONS = {
   numbers: "IconNumbers",
   nurse: "IconNurse",
   nut: "IconNut",
+  "object-scan": "IconObjectScan",
   octagon: "IconOctagon",
   "octagon-minus": "IconOctagonMinus",
   "octagon-minus-2": "IconOctagonMinus2",
@@ -3281,6 +3411,7 @@ export const ICONS = {
   "pennant-2": "IconPennant2",
   "pennant-off": "IconPennantOff",
   pentagon: "IconPentagon",
+  "pentagon-minus": "IconPentagonMinus",
   "pentagon-number-0": "IconPentagonNumber0",
   "pentagon-number-1": "IconPentagonNumber1",
   "pentagon-number-2": "IconPentagonNumber2",
@@ -3298,6 +3429,21 @@ export const ICONS = {
   pepper: "IconPepper",
   "pepper-off": "IconPepperOff",
   percentage: "IconPercentage",
+  "percentage-0": "IconPercentage0",
+  "percentage-10": "IconPercentage10",
+  "percentage-100": "IconPercentage100",
+  "percentage-20": "IconPercentage20",
+  "percentage-25": "IconPercentage25",
+  "percentage-30": "IconPercentage30",
+  "percentage-33": "IconPercentage33",
+  "percentage-40": "IconPercentage40",
+  "percentage-50": "IconPercentage50",
+  "percentage-60": "IconPercentage60",
+  "percentage-66": "IconPercentage66",
+  "percentage-70": "IconPercentage70",
+  "percentage-75": "IconPercentage75",
+  "percentage-80": "IconPercentage80",
+  "percentage-90": "IconPercentage90",
   perfume: "IconPerfume",
   perspective: "IconPerspective",
   "perspective-off": "IconPerspectiveOff",
@@ -3313,6 +3459,7 @@ export const ICONS = {
   "phone-x": "IconPhoneX",
   photo: "IconPhoto",
   "photo-ai": "IconPhotoAi",
+  "photo-bitcoin": "IconPhotoBitcoin",
   "photo-bolt": "IconPhotoBolt",
   "photo-cancel": "IconPhotoCancel",
   "photo-check": "IconPhotoCheck",
@@ -3349,6 +3496,7 @@ export const ICONS = {
   physotherapist: "IconPhysotherapist",
   piano: "IconPiano",
   pick: "IconPick",
+  "picnic-table": "IconPicnicTable",
   "picture-in-picture": "IconPictureInPicture",
   "picture-in-picture-off": "IconPictureInPictureOff",
   "picture-in-picture-on": "IconPictureInPictureOn",
@@ -3459,6 +3607,7 @@ export const ICONS = {
   printer: "IconPrinter",
   "printer-off": "IconPrinterOff",
   prism: "IconPrism",
+  "prism-light": "IconPrismLight",
   "prism-off": "IconPrismOff",
   "prism-plus": "IconPrismPlus",
   prison: "IconPrison",
@@ -3470,6 +3619,7 @@ export const ICONS = {
   "progress-help": "IconProgressHelp",
   "progress-x": "IconProgressX",
   prompt: "IconPrompt",
+  prong: "IconProng",
   propeller: "IconPropeller",
   "propeller-off": "IconPropellerOff",
   protocol: "IconProtocol",
@@ -3588,6 +3738,10 @@ export const ICONS = {
   rollercoaster: "IconRollercoaster",
   "rollercoaster-off": "IconRollercoasterOff",
   rosette: "IconRosette",
+  "rosette-discount": "IconRosetteDiscount",
+  "rosette-discount-check": "IconRosetteDiscountCheck",
+  "rosette-discount-check-off": "IconRosetteDiscountCheckOff",
+  "rosette-discount-off": "IconRosetteDiscountOff",
   "rosette-number-0": "IconRosetteNumber0",
   "rosette-number-1": "IconRosetteNumber1",
   "rosette-number-2": "IconRosetteNumber2",
@@ -3601,6 +3755,7 @@ export const ICONS = {
   rotate: "IconRotate",
   "rotate-2": "IconRotate2",
   "rotate-360": "IconRotate360",
+  "rotate-3-d": "IconRotate3d",
   "rotate-clockwise": "IconRotateClockwise",
   "rotate-clockwise-2": "IconRotateClockwise2",
   "rotate-dot": "IconRotateDot",
@@ -3628,6 +3783,7 @@ export const ICONS = {
   "ruler-2-off": "IconRuler2Off",
   "ruler-3": "IconRuler3",
   "ruler-measure": "IconRulerMeasure",
+  "ruler-measure-2": "IconRulerMeasure2",
   "ruler-off": "IconRulerOff",
   run: "IconRun",
   "rv-truck": "IconRvTruck",
@@ -3650,6 +3806,7 @@ export const ICONS = {
   "scale-outline-off": "IconScaleOutlineOff",
   scan: "IconScan",
   "scan-eye": "IconScanEye",
+  "scan-position": "IconScanPosition",
   schema: "IconSchema",
   "schema-off": "IconSchemaOff",
   school: "IconSchool",
@@ -3670,6 +3827,7 @@ export const ICONS = {
   "script-plus": "IconScriptPlus",
   "script-x": "IconScriptX",
   "scuba-diving": "IconScubaDiving",
+  "scuba-diving-tank": "IconScubaDivingTank",
   "scuba-mask": "IconScubaMask",
   "scuba-mask-off": "IconScubaMaskOff",
   sdk: "IconSdk",
@@ -3728,7 +3886,7 @@ export const ICONS = {
   "share-2": "IconShare2",
   "share-3": "IconShare3",
   "share-off": "IconShareOff",
-  "shi-jumping": "IconShiJumping",
+  shareplay: "IconShareplay",
   shield: "IconShield",
   "shield-bolt": "IconShieldBolt",
   "shield-cancel": "IconShieldCancel",
@@ -3766,6 +3924,7 @@ export const ICONS = {
   "shopping-bag-discount": "IconShoppingBagDiscount",
   "shopping-bag-edit": "IconShoppingBagEdit",
   "shopping-bag-exclamation": "IconShoppingBagExclamation",
+  "shopping-bag-heart": "IconShoppingBagHeart",
   "shopping-bag-minus": "IconShoppingBagMinus",
   "shopping-bag-plus": "IconShoppingBagPlus",
   "shopping-bag-search": "IconShoppingBagSearch",
@@ -3818,6 +3977,7 @@ export const ICONS = {
   skateboarding: "IconSkateboarding",
   "skew-x": "IconSkewX",
   "skew-y": "IconSkewY",
+  "ski-jumping": "IconSkiJumping",
   skull: "IconSkull",
   slash: "IconSlash",
   slashes: "IconSlashes",
@@ -3848,10 +4008,14 @@ export const ICONS = {
   "sort-ascending-2": "IconSortAscending2",
   "sort-ascending-letters": "IconSortAscendingLetters",
   "sort-ascending-numbers": "IconSortAscendingNumbers",
+  "sort-ascending-shapes": "IconSortAscendingShapes",
+  "sort-ascending-small-big": "IconSortAscendingSmallBig",
   "sort-descending": "IconSortDescending",
   "sort-descending-2": "IconSortDescending2",
   "sort-descending-letters": "IconSortDescendingLetters",
   "sort-descending-numbers": "IconSortDescendingNumbers",
+  "sort-descending-shapes": "IconSortDescendingShapes",
+  "sort-descending-small-big": "IconSortDescendingSmallBig",
   "sort-za": "IconSortZA",
   sos: "IconSos",
   soup: "IconSoup",
@@ -3859,6 +4023,7 @@ export const ICONS = {
   "source-code": "IconSourceCode",
   space: "IconSpace",
   "space-off": "IconSpaceOff",
+  spaces: "IconSpaces",
   "spacing-horizontal": "IconSpacingHorizontal",
   "spacing-vertical": "IconSpacingVertical",
   spade: "IconSpade",
@@ -4012,7 +4177,9 @@ export const ICONS = {
   "square-toggle": "IconSquareToggle",
   "square-toggle-horizontal": "IconSquareToggleHorizontal",
   "square-x": "IconSquareX",
+  squares: "IconSquares",
   "squares-diagonal": "IconSquaresDiagonal",
+  "squares-selected": "IconSquaresSelected",
   stack: "IconStack",
   "stack-2": "IconStack2",
   "stack-3": "IconStack3",
@@ -4107,6 +4274,9 @@ export const ICONS = {
   target: "IconTarget",
   "target-arrow": "IconTargetArrow",
   "target-off": "IconTargetOff",
+  tax: "IconTax",
+  "tax-euro": "IconTaxEuro",
+  "tax-pound": "IconTaxPound",
   teapot: "IconTeapot",
   telescope: "IconTelescope",
   "telescope-off": "IconTelescopeOff",
@@ -4116,6 +4286,8 @@ export const ICONS = {
   "temperature-minus": "IconTemperatureMinus",
   "temperature-off": "IconTemperatureOff",
   "temperature-plus": "IconTemperaturePlus",
+  "temperature-snow": "IconTemperatureSnow",
+  "temperature-sun": "IconTemperatureSun",
   template: "IconTemplate",
   "template-off": "IconTemplateOff",
   tent: "IconTent",
@@ -4141,6 +4313,7 @@ export const ICONS = {
   "text-size": "IconTextSize",
   "text-spellcheck": "IconTextSpellcheck",
   "text-wrap": "IconTextWrap",
+  "text-wrap-column": "IconTextWrapColumn",
   "text-wrap-disabled": "IconTextWrapDisabled",
   texture: "IconTexture",
   theater: "IconTheater",
@@ -4172,6 +4345,10 @@ export const ICONS = {
   "timeline-event-plus": "IconTimelineEventPlus",
   "timeline-event-text": "IconTimelineEventText",
   "timeline-event-x": "IconTimelineEventX",
+  timezone: "IconTimezone",
+  "tip-jar": "IconTipJar",
+  "tip-jar-euro": "IconTipJarEuro",
+  "tip-jar-pound": "IconTipJarPound",
   tir: "IconTir",
   "toggle-left": "IconToggleLeft",
   "toggle-right": "IconToggleRight",
@@ -4225,6 +4402,11 @@ export const ICONS = {
   "transfer-out": "IconTransferOut",
   "transfer-vertical": "IconTransferVertical",
   transform: "IconTransform",
+  "transform-point": "IconTransformPoint",
+  "transform-point-bottom-left": "IconTransformPointBottomLeft",
+  "transform-point-bottom-right": "IconTransformPointBottomRight",
+  "transform-point-top-left": "IconTransformPointTopLeft",
+  "transform-point-top-right": "IconTransformPointTopRight",
   "transition-bottom": "IconTransitionBottom",
   "transition-left": "IconTransitionLeft",
   "transition-right": "IconTransitionRight",
@@ -4262,11 +4444,17 @@ export const ICONS = {
   "truck-off": "IconTruckOff",
   "truck-return": "IconTruckReturn",
   txt: "IconTxt",
+  typeface: "IconTypeface",
   typography: "IconTypography",
   "typography-off": "IconTypographyOff",
+  "u-turn-left": "IconUTurnLeft",
+  "u-turn-right": "IconUTurnRight",
   ufo: "IconUfo",
   "ufo-off": "IconUfoOff",
   umbrella: "IconUmbrella",
+  "umbrella-2": "IconUmbrella2",
+  "umbrella-closed": "IconUmbrellaClosed",
+  "umbrella-closed-2": "IconUmbrellaClosed2",
   "umbrella-off": "IconUmbrellaOff",
   underline: "IconUnderline",
   universe: "IconUniverse",
@@ -4275,6 +4463,7 @@ export const ICONS = {
   urgent: "IconUrgent",
   usb: "IconUsb",
   user: "IconUser",
+  "user-bitcoin": "IconUserBitcoin",
   "user-bolt": "IconUserBolt",
   "user-cancel": "IconUserCancel",
   "user-check": "IconUserCheck",
@@ -4295,6 +4484,7 @@ export const ICONS = {
   "user-plus": "IconUserPlus",
   "user-question": "IconUserQuestion",
   "user-scan": "IconUserScan",
+  "user-screen": "IconUserScreen",
   "user-search": "IconUserSearch",
   "user-share": "IconUserShare",
   "user-shield": "IconUserShield",
@@ -4335,10 +4525,14 @@ export const ICONS = {
   "video-off": "IconVideoOff",
   "video-plus": "IconVideoPlus",
   "view-360": "IconView360",
+  "view-360-arrow": "IconView360Arrow",
+  "view-360-number": "IconView360Number",
   "view-360-off": "IconView360Off",
   viewfinder: "IconViewfinder",
   "viewfinder-off": "IconViewfinderOff",
   "viewport-narrow": "IconViewportNarrow",
+  "viewport-short": "IconViewportShort",
+  "viewport-tall": "IconViewportTall",
   "viewport-wide": "IconViewportWide",
   vinyl: "IconVinyl",
   vip: "IconVip",
@@ -4479,6 +4673,7 @@ export const ICONS = {
   "zodiac-scorpio": "IconZodiacScorpio",
   "zodiac-taurus": "IconZodiacTaurus",
   "zodiac-virgo": "IconZodiacVirgo",
+  zoom: "IconZoom",
   "zoom-cancel": "IconZoomCancel",
   "zoom-check": "IconZoomCheck",
   "zoom-code": "IconZoomCode",

app/client/packages/design-system/widgets/src/components/Icon/src/styles.module.css

@@ -1,3 +1,5 @@
+@import "../../../shared/colors/colors.module.css";
+
 .icon {
   &[data-size="small"] {
     inline-size: var(--icon-size-1);
@@ -16,4 +18,10 @@
     block-size: var(--icon-size-3);
     stroke-width: var(--stroke-width-3);
   }
+
+  @each $color in colors {
+    &[data-color="$(color)"] {
+      color: var(--color-fg-$(color));
+    }
+  }
 }

app/client/packages/design-system/widgets/src/components/Icon/src/types.ts

@@ -1,24 +1,30 @@
-import type { ComponentType } from "react";
+import type { AriaLabelingProps, DOMProps } from "@react-types/shared";
-import type { IconProps as HeadlessIconProps } from "@design-system/headless";
-
 import type { ICONS } from "./icons";
-import type { SIZES } from "../../../shared";
+import type { COLORS, SIZES } from "../../../shared";
 
-export type IconProps = Omit<HeadlessIconProps, "children"> & {
+export interface IconProps extends DOMProps, AriaLabelingProps {
   /** Size of the icon
    * @default medium
    *
    * Note: we need large size for the icon only
    */
   size?: keyof typeof SIZES;
-  /** custom icon component
+  /** Color of the Icon
-   * Note: if custom icon is provided, name prop will be ignored
+   * @default inherit
    */
-  icon?: ComponentType;
+  color?: keyof typeof COLORS;
   /** Name of the icon*/
-  name?: keyof typeof ICONS;
+  name: keyof typeof ICONS;
-  /** storke width */
+  /** Storke width */
   stroke?: number;
-  /** filled variant */
+  /** Filled variant */
   filled?: boolean;
-};
+  /** Defines a string value that labels the current element. */
+  "aria-label"?: string;
+  /** Defines the role of an element.  */
+  role?: string;
+  /** Sets the CSS className  for the content popover. Only use as a **last resort**. */
+  className?: string;
+  /** The aria-hidden state indicates whether the element is exposed to an accessibility API. */
+  "aria-hidden"?: boolean | "false" | "true";
+}

app/client/packages/design-system/widgets/src/components/Icon/stories/Icon.stories.tsx

@@ -42,6 +42,7 @@ export const Sizes: Story = {
 export const CustomIcon: Story = {
   render: () => (
     <Icon
+      // @ts-expect-error we don't want to cast a type here
       icon={(props) => {
         return (
           <svg fill="currentColor" viewBox="0 0 24 24" {...props}>

app/client/packages/design-system/widgets/src/scripts/build-icons.ts

@@ -3,11 +3,11 @@ import fs from "fs-extra";
 import prettier from "prettier";
 import kebabCase from "lodash/kebabCase";
 
-import * as ICONS from "@tabler/icons-react";
+import { icons } from "@tabler/icons-react";
 
 let content = `export const ICONS = {`;
 
-Object.keys(ICONS)
+Object.keys(icons)
   .filter((name) => name !== "createReactComponent")
   .filter((name) => !name.endsWith("Filled"))
   .map((name) => {

app/client/src/widgets/wds/WDSStatsWidget/component/index.tsx

@@ -23,7 +23,11 @@ export const StatsComponent = (props: StatsComponentProps) => {
       isInner
     >
       {iconName && iconName !== "(none)" && (
-        <Icon name={iconName} size="large" />
+        <Icon
+          color={valueColor === "default" ? undefined : valueColor}
+          name={iconName}
+          size="large"
+        />
       )}
       <Flex direction="column" flexGrow={1} gap="spacing-3" isInner>
         {label && (
@@ -40,7 +44,7 @@ export const StatsComponent = (props: StatsComponentProps) => {
             maxWidth="calc(100% - var(--sizing-1))"
           >
             <Text
-              color={valueColor}
+              color={valueColor === "default" ? undefined : valueColor}
               fontWeight={500}
               lineClamp={1}
               size="subtitle"

app/client/src/widgets/wds/WDSStatsWidget/config/propertyPaneConfig/contentConfig.ts

@@ -32,20 +32,19 @@ export const propertyPaneContentConfig = [
         controlType: "DROP_DOWN",
         fullWidth: true,
         helpText: "Emphasizes the value's semantic impact",
-        options: Object.values(COLORS).map((semantic) => ({
+        options: [
+          {
+            label: "Default",
+            value: "default",
+          },
+          ...Object.values(COLORS).map((semantic) => ({
             label: capitalize(semantic),
             value: semantic,
           })),
+        ],
         isJSConvertible: true,
         isBindProperty: true,
         isTriggerProperty: false,
-        validation: {
-          type: ValidationTypes.TEXT,
-          params: {
-            allowedValues: Object.values(COLORS),
-            default: COLORS.accent,
-          },
-        },
       },
     ],
   },

app/client/src/widgets/wds/WDSStatsWidget/widget/types.ts

@@ -8,6 +8,6 @@ export interface StatsWidgetProps extends WidgetProps {
   iconAlign?: "start" | "end";
   valueChange?: string;
   valueChangeColor: keyof typeof COLORS;
-  valueColor?: keyof typeof COLORS;
+  valueColor?: "default" | keyof typeof COLORS;
   caption?: string;
 }

app/client/yarn.lock

@@ -3104,7 +3104,7 @@ __metadata:
     "@react-aria/visually-hidden": ^3.8.0
     "@react-types/actiongroup": ^3.4.6
     "@react-types/shared": ^3.23.1
-    "@tabler/icons-react": ^2.45.0
+    "@tabler/icons-react": ^3.10.0
     "@types/fs-extra": ^11.0.4
     clsx: ^2.0.0
     colorjs.io: ^0.4.3
@@ -10202,22 +10202,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tabler/icons-react@npm:^2.45.0":
+"@tabler/icons-react@npm:^3.10.0":
-  version: 2.45.0
+  version: 3.10.0
-  resolution: "@tabler/icons-react@npm:2.45.0"
+  resolution: "@tabler/icons-react@npm:3.10.0"
   dependencies:
-    "@tabler/icons": 2.45.0
+    "@tabler/icons": 3.10.0
-    prop-types: ^15.7.2
   peerDependencies:
-    react: ^16.5.1 || ^17.0.0 || ^18.0.0
+    react: ">= 16"
-  checksum: 2cc887b98a98abc09f353363c3d19a8173d2b2a6b7723d92bf752413e131a073f6c05613277af353935c9173b339475d5349c669a4a983c035426eabc0e2a642
+  checksum: 2bda44e263acf3ea932b28136dac4792520a50e23cdf2c307cab8fdf60f5c823f0e6921dc209a0b7645ad8a4b407a171e611be6257044558ab8863d9d2eb8a09
   languageName: node
   linkType: hard
 
-"@tabler/icons@npm:2.45.0":
+"@tabler/icons@npm:3.10.0":
-  version: 2.45.0
+  version: 3.10.0
-  resolution: "@tabler/icons@npm:2.45.0"
+  resolution: "@tabler/icons@npm:3.10.0"
-  checksum: 01359255e2a1e3314262dc28891d39c984eaaa9d6f148de1a2a7c5de824e5da02f43cd29a735cb2a3ebcda1f801cb394f06cf5b4ecf5dd22ca0131d1cebe6ed3
+  checksum: dbb2a8442acbcc11f4b19174bc625c66f8af36999ecb06cfdd85b90e1288b28b2092fbcc5d1346d827a3e43b9ff6300929c605555971e1490f7be93da506015e
   languageName: node
   linkType: hard