From a8faba4b8616283ad00a41c09d50be53a03b04d7 Mon Sep 17 00:00:00 2001
From: Dhruvik Neharia <dhruvik@appsmith.com>
Date: Sat, 22 Jul 2023 11:27:18 +0530
Subject: [PATCH] feat: Widget Discoverability (#24934)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description
Grouping the widgets into categories to make it easier for people to
find widgets. This will be behind the feature flag
`release_widgetdiscovery_enabled`

<img
src="https://github.com/appsmithorg/appsmith/assets/22471214/4932a091-1831-4d95-b722-3301580fb6be"
height="300px" />

Project home [here on
Notion](https://www.notion.so/appsmith/Widget-Discoverability-755cf059a1904950888304b90b74106f?d=8bc3059134984787900a69963dd13d90#27967092cfa74505bab55bd163d28c18).

#### PR fixes following issue(s)
#24865
#24867
#24868
#24869

#### Media
> A video or a GIF is preferred. when using Loom, don’t embed because it
looks like it’s a GIF. instead, just link to the video
>
>
#### Type of change
> Please delete options that are not relevant.
- Bug fix (non-breaking change which fixes an issue)
- New feature (non-breaking change which adds functionality)
- Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- Chore (housekeeping or task changes that don't impact user perception)
- This change requires a documentation update
>
>
>
## Testing
>
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [x] Manual
- [ ] Jest
- [x] Cypress
>
>
#### Test Plan
> (https://github.com/appsmithorg/TestSmith/issues/2440)
>
>
#### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
>
>
>
## Checklist:
#### Dev activity
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [x] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [x] Test plan has been peer reviewed by project stakeholders and other
QA members
- [x] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [x] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
---
 .../ExplorerTests/Widgets_Sidebar.ts          | 198 ++++++++++++++++++
 ...Listv2_BasicChildWidgetInteraction_spec.js |   1 +
 .../Widgets/Modal/Modal_focus_spec.js         |   8 +-
 .../cypress/support/Objects/CommonLocators.ts |   3 +
 .../cypress/support/Pages/EntityExplorer.ts   |   6 +
 app/client/cypress/support/commands.js        |   4 +
 app/client/package.json                       |   2 +-
 app/client/src/ce/entities/FeatureFlag.ts     |   2 +
 app/client/src/constants/WidgetConstants.tsx  |  29 +++
 .../src/pages/Editor/Explorer/Pages/index.tsx |   8 +-
 .../src/pages/Editor/Explorer/index.tsx       |  16 +-
 app/client/src/pages/Editor/WidgetCard.tsx    |  31 +--
 app/client/src/pages/Editor/WidgetSidebar.tsx |   1 -
 .../pages/Editor/WidgetSidebarWithTags.tsx    | 160 ++++++++++++++
 app/client/src/pages/Editor/utils.ts          |  29 ++-
 app/client/src/selectors/editorSelectors.tsx  |   2 +
 .../src/utils/WidgetRegisterHelpers.tsx       |   1 +
 .../src/widgets/AudioRecorderWidget/icon.svg  |   5 +-
 .../src/widgets/AudioRecorderWidget/index.ts  |   3 +-
 app/client/src/widgets/AudioWidget/icon.svg   |   9 +-
 app/client/src/widgets/AudioWidget/index.tsx  |   3 +-
 .../src/widgets/BaseInputWidget/icon.svg      |   5 +-
 app/client/src/widgets/BaseWidget.tsx         |   2 +
 .../src/widgets/ButtonGroupWidget/icon.svg    |  10 +-
 .../src/widgets/ButtonGroupWidget/index.ts    |   2 +
 app/client/src/widgets/ButtonWidget/icon.svg  |   4 +-
 app/client/src/widgets/ButtonWidget/index.ts  |   3 +-
 app/client/src/widgets/CameraWidget/icon.svg  |   4 +-
 app/client/src/widgets/CameraWidget/index.ts  |   2 +
 .../src/widgets/CategorySliderWidget/icon.svg |  10 +-
 .../src/widgets/CategorySliderWidget/index.ts |   3 +-
 app/client/src/widgets/ChartWidget/icon.svg   |   6 +-
 app/client/src/widgets/ChartWidget/index.ts   |   3 +-
 .../src/widgets/CheckboxGroupWidget/icon.svg  |   8 +-
 .../src/widgets/CheckboxGroupWidget/index.ts  |   3 +-
 .../src/widgets/CheckboxWidget/icon.svg       |   4 +-
 .../src/widgets/CheckboxWidget/index.ts       |   3 +-
 .../src/widgets/CodeScannerWidget/icon.svg    |   4 +-
 .../src/widgets/CodeScannerWidget/index.ts    |   2 +
 .../src/widgets/ContainerWidget/icon.svg      |  15 +-
 .../src/widgets/ContainerWidget/index.ts      |   7 +-
 .../src/widgets/CurrencyInputWidget/icon.svg  |   5 +-
 .../src/widgets/CurrencyInputWidget/index.ts  |   3 +-
 .../src/widgets/DatePickerWidget2/icon.svg    |  13 +-
 .../src/widgets/DatePickerWidget2/index.ts    |   3 +-
 app/client/src/widgets/DividerWidget/icon.svg |   4 +-
 app/client/src/widgets/DividerWidget/index.ts |   3 +-
 .../src/widgets/DocumentViewerWidget/icon.svg |   7 +-
 .../src/widgets/DocumentViewerWidget/index.ts |   2 +
 .../src/widgets/FilePickerWidgetV2/icon.svg   |   4 +-
 .../src/widgets/FilePickerWidgetV2/index.ts   |   3 +-
 app/client/src/widgets/FormWidget/icon.svg    |   8 +-
 app/client/src/widgets/FormWidget/index.ts    |   3 +-
 .../src/widgets/IconButtonWidget/icon.svg     |   4 +-
 .../src/widgets/IconButtonWidget/index.ts     |   2 +
 app/client/src/widgets/IframeWidget/icon.svg  |   4 +-
 app/client/src/widgets/IframeWidget/index.ts  |   2 +
 app/client/src/widgets/ImageWidget/icon.svg   |   6 +-
 app/client/src/widgets/ImageWidget/index.ts   |   2 +
 app/client/src/widgets/InputWidgetV2/icon.svg |   5 +-
 app/client/src/widgets/InputWidgetV2/index.ts |   2 +
 .../src/widgets/JSONFormWidget/icon.svg       |   8 +-
 .../src/widgets/JSONFormWidget/index.ts       |   2 +
 app/client/src/widgets/ListWidgetV2/icon.svg  |   4 +-
 app/client/src/widgets/ListWidgetV2/index.ts  |   3 +-
 .../src/widgets/MapChartWidget/icon.svg       |   7 +-
 .../src/widgets/MapChartWidget/index.ts       |   3 +-
 app/client/src/widgets/MapWidget/icon.svg     |   5 +-
 app/client/src/widgets/MapWidget/index.ts     |   3 +-
 .../src/widgets/MenuButtonWidget/icon.svg     |   6 +-
 .../src/widgets/MenuButtonWidget/index.ts     |   2 +
 app/client/src/widgets/ModalWidget/icon.svg   |   6 +-
 app/client/src/widgets/ModalWidget/index.ts   |   4 +-
 .../widgets/MultiSelectTreeWidget/icon.svg    |   9 +-
 .../widgets/MultiSelectTreeWidget/index.ts    |   3 +-
 .../src/widgets/MultiSelectWidgetV2/icon.svg  |  11 +-
 .../src/widgets/MultiSelectWidgetV2/index.ts  |   3 +-
 .../src/widgets/NumberSliderWidget/icon.svg   |  10 +-
 .../src/widgets/NumberSliderWidget/index.ts   |   3 +-
 .../src/widgets/PhoneInputWidget/icon.svg     |   5 +-
 .../src/widgets/PhoneInputWidget/index.ts     |   3 +-
 .../src/widgets/ProgressWidget/icon.svg       |   9 +-
 .../src/widgets/ProgressWidget/index.ts       |   2 +
 .../src/widgets/RadioGroupWidget/icon.svg     |   5 +-
 .../src/widgets/RadioGroupWidget/index.ts     |   3 +-
 .../src/widgets/RangeSliderWidget/icon.svg    |  12 +-
 .../src/widgets/RangeSliderWidget/index.ts    |   3 +-
 app/client/src/widgets/RateWidget/icon.svg    |   4 +-
 app/client/src/widgets/RateWidget/index.ts    |   2 +
 .../src/widgets/RichTextEditorWidget/icon.svg |   4 +-
 .../src/widgets/RichTextEditorWidget/index.ts |   3 +-
 app/client/src/widgets/SelectWidget/icon.svg  |   4 +-
 app/client/src/widgets/SelectWidget/index.ts  |   2 +
 .../widgets/SingleSelectTreeWidget/icon.svg   |   4 +-
 .../widgets/SingleSelectTreeWidget/index.ts   |   3 +-
 app/client/src/widgets/StatboxWidget/icon.svg |   4 +-
 app/client/src/widgets/StatboxWidget/index.ts |   4 +-
 .../src/widgets/SwitchGroupWidget/icon.svg    |  10 +-
 .../src/widgets/SwitchGroupWidget/index.ts    |   3 +-
 app/client/src/widgets/SwitchWidget/icon.svg  |   5 +-
 app/client/src/widgets/SwitchWidget/index.ts  |   3 +-
 app/client/src/widgets/TableWidgetV2/icon.svg |   8 +-
 app/client/src/widgets/TableWidgetV2/index.ts |   2 +
 app/client/src/widgets/TabsWidget/icon.svg    |   4 +-
 app/client/src/widgets/TabsWidget/index.ts    |   8 +-
 app/client/src/widgets/TextWidget/icon.svg    |   4 +-
 app/client/src/widgets/TextWidget/index.ts    |   3 +-
 app/client/src/widgets/VideoWidget/icon.svg   |   5 +-
 app/client/src/widgets/VideoWidget/index.ts   |   2 +
 app/client/src/widgets/constants.ts           |   2 +
 app/client/yarn.lock                          |  10 +-
 111 files changed, 816 insertions(+), 127 deletions(-)
 create mode 100644 app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Widgets_Sidebar.ts
 create mode 100644 app/client/src/pages/Editor/WidgetSidebarWithTags.tsx
 mode change 100755 => 100644 app/client/src/widgets/CameraWidget/icon.svg
 mode change 100755 => 100644 app/client/src/widgets/MapChartWidget/icon.svg
 mode change 100755 => 100644 app/client/src/widgets/SwitchGroupWidget/icon.svg

diff --git a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Widgets_Sidebar.ts b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Widgets_Sidebar.ts
new file mode 100644
index 0000000000..c2e7f6e5d3
--- /dev/null
+++ b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Widgets_Sidebar.ts
@@ -0,0 +1,198 @@
+import { featureFlagIntercept } from "../../../../support/Objects/FeatureFlags";
+import {
+  entityExplorer,
+  agHelper,
+  locators,
+} from "../../../../support/Objects/ObjectsCore";
+
+describe("Entity explorer tests related to widgets and validation", function () {
+  // Taken from here appsmith/app/client/src/constants/WidgetConstants.tsx
+  const WIDGET_TAGS: Record<string, string> = {
+    SUGGESTED_WIDGETS: "Suggested",
+    INPUTS: "Inputs",
+    BUTTONS: "Buttons",
+    SELECT: "Select",
+    DISPLAY: "Display",
+    LAYOUT: "Layout",
+    MEDIA: "Media",
+    TOGGLES: "Toggles",
+    SLIDERS: "Sliders",
+    CONTENT: "Content",
+    EXTERNAL: "External",
+  };
+
+  // Taken from here appsmith/app/client/src/constants/WidgetConstants.tsx
+  const SUGGESTED_WIDGETS_ORDER: Record<string, number> = {
+    TABLE_WIDGET_V2: 1,
+    JSON_FORM_WIDGET: 2,
+    INPUT_WIDGET_V2: 3,
+    TEXT_WIDGET: 4,
+    SELECT_WIDGET: 5,
+    LIST_WIDGET_V2: 6,
+  };
+
+  // When adding a new widget or tag, we need to manually add it to this list.
+  const WIDGETS_CATALOG: Record<string, string[]> = {
+    Suggested: ["Input", "JSON Form", "List", "Select", "Table", "Text"],
+    Inputs: [
+      "Currency Input",
+      "DatePicker",
+      "FilePicker",
+      "Input",
+      "Phone Input",
+      "Rich Text Editor",
+    ],
+    Buttons: ["Button", "Button Group", "Icon button", "Menu button"],
+    Select: ["Multi TreeSelect", "MultiSelect", "Select", "TreeSelect"],
+    Display: ["Chart", "Iframe", "List", "Map Chart", "Stats Box", "Table"],
+    Layout: ["Container", "Divider", "Form", "JSON Form", "Modal", "Tabs"],
+    Media: ["Audio", "Document Viewer", "Image", "Video"],
+    Toggles: [
+      "Checkbox",
+      "Checkbox Group",
+      "Radio Group",
+      "Switch",
+      "Switch Group",
+    ],
+    Sliders: ["Category Slider", "Number Slider", "Range Slider"],
+    Content: ["Map", "Progress", "Rating", "Text"],
+    External: ["Audio Recorder", "Camera", "Code Scanner"],
+  };
+
+  before(() => {
+    featureFlagIntercept(
+      {
+        release_widgetdiscovery_enabled: true,
+      },
+      false,
+    );
+    agHelper.RefreshPage();
+  });
+
+  const getTotalNumberOfWidgets = () => {
+    return Object.values(WIDGETS_CATALOG).reduce(
+      (totalLength, widgets) => totalLength + widgets.length,
+      0,
+    );
+  };
+
+  it("1. All widget tags should be visible and open by default.", () => {
+    entityExplorer.NavigateToSwitcher("Widgets");
+
+    agHelper.AssertElementLength(
+      entityExplorer._widgetTagsList,
+      Object.keys(WIDGET_TAGS).length,
+    );
+
+    agHelper.GetElement(entityExplorer._widgetTagsList).each(($widgetTag) => {
+      cy.wrap($widgetTag)
+        .find(locators._adsV2Content)
+        .should("have.css", "display", "flex");
+    });
+  });
+
+  it("2. All widgets should be present within their tags and these tags should be collapsible", () => {
+    agHelper.GetElement(entityExplorer._widgetTagsList).each(($widgetTag) => {
+      // check that tags are collapsible
+      cy.wrap($widgetTag).find(locators._adsV2CollapsibleHeader).click({
+        force: true,
+      });
+      cy.wrap($widgetTag)
+        .find(locators._adsV2Content)
+        .should("have.css", "display", "none");
+      cy.wrap($widgetTag).find(locators._adsV2CollapsibleHeader).click({
+        force: true,
+      });
+
+      // check that all widgets are present within their tags
+      const widgetsInThisTag: string[] = [];
+
+      cy.wrap($widgetTag)
+        .find(entityExplorer._widgetCardTitle)
+        .each(($widgetName) => {
+          const value = $widgetName.text();
+
+          widgetsInThisTag.push(value);
+        })
+        .then(() => {
+          cy.wrap($widgetTag)
+            .find(
+              `${locators._adsV2CollapsibleHeader} span${locators._adsV2Text}`,
+            )
+            .then(($widgetTagTitle) => {
+              const expectedWidgetsInThisTag =
+                WIDGETS_CATALOG[$widgetTagTitle.text()].sort();
+              widgetsInThisTag.sort();
+
+              expect(widgetsInThisTag).to.deep.eq(expectedWidgetsInThisTag);
+            });
+        });
+    });
+  });
+
+  it("3. All widgets should be ordered alphabetically within their tags, except Essential widgets, which should be sorted by their static rank.", () => {
+    agHelper
+      .GetElement(
+        `${entityExplorer._widgetTagsList}:not(${entityExplorer._widgetTagSuggestedWidgets})`,
+      )
+      .each(($widgetTag) => {
+        const widgetsInThisTag: string[] = [];
+
+        cy.wrap($widgetTag)
+          .find(entityExplorer._widgetCardTitle)
+          .each(($widgetName) => {
+            const value = $widgetName.text();
+
+            widgetsInThisTag.push(value);
+          })
+          .then(() => {
+            const sortedWidgetsInThisTag = [...widgetsInThisTag].sort();
+
+            expect(widgetsInThisTag).to.deep.eq(sortedWidgetsInThisTag);
+          });
+      });
+
+    const widgetsInEssentialWidgetsTag: string[] = [];
+    agHelper
+      .GetElement(
+        `${entityExplorer._widgetTagsList}${entityExplorer._widgetTagSuggestedWidgets}`,
+      )
+      .find(entityExplorer._widgetCardTitle)
+      .each(($widgetName) => {
+        const value = $widgetName.text();
+
+        widgetsInEssentialWidgetsTag.push(value);
+      })
+      .then(() => {
+        const sortedWidgetsInEssentialWidgetsTag = [
+          ...widgetsInEssentialWidgetsTag,
+        ].sort(
+          (a, b) => SUGGESTED_WIDGETS_ORDER[a] - SUGGESTED_WIDGETS_ORDER[b],
+        );
+
+        expect(widgetsInEssentialWidgetsTag).to.deep.eq(
+          sortedWidgetsInEssentialWidgetsTag,
+        );
+      });
+  });
+
+  it("4. Widget search should work", () => {
+    agHelper.TypeText(entityExplorer._widgetSearchInput, "text");
+    agHelper.AssertElementLength(entityExplorer._widgetCards, 3);
+
+    agHelper.TypeText(entityExplorer._widgetSearchInput, "p");
+    agHelper.AssertElementLength(entityExplorer._widgetCards, 2);
+
+    agHelper.ClearTextField(entityExplorer._widgetSearchInput);
+
+    agHelper.TypeText(entityExplorer._widgetSearchInput, "cypress");
+    agHelper.AssertElementLength(entityExplorer._widgetCards, 0);
+
+    agHelper.ClearTextField(entityExplorer._widgetSearchInput);
+
+    agHelper.AssertElementLength(
+      entityExplorer._widgetCards,
+      getTotalNumberOfWidgets(),
+    );
+  });
+});
diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/ListV2/Listv2_BasicChildWidgetInteraction_spec.js b/app/client/cypress/e2e/Regression/ClientSide/Widgets/ListV2/Listv2_BasicChildWidgetInteraction_spec.js
index 8228188d87..49beb328a4 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/ListV2/Listv2_BasicChildWidgetInteraction_spec.js
+++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/ListV2/Listv2_BasicChildWidgetInteraction_spec.js
@@ -10,6 +10,7 @@ function dragAndDropToWidget(widgetType, destinationWidget, { x, y }) {
   const selector = `.t--widget-card-draggable-${widgetType}`;
   cy.wait(800);
   cy.get(selector)
+    .first()
     .scrollIntoView()
     .trigger("dragstart", { force: true })
     .trigger("mousemove", x, y, { force: true });
diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Modal/Modal_focus_spec.js b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Modal/Modal_focus_spec.js
index 502d6b37f5..856828265f 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Modal/Modal_focus_spec.js
+++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Modal/Modal_focus_spec.js
@@ -23,9 +23,11 @@ describe("Modal focus", function () {
 
     cy.wait(500);
     //drag input field into modal
-    cy.get(".t--widget-card-draggable-inputwidgetv2").trigger("dragstart", {
-      force: true,
-    });
+    cy.get(".t--widget-card-draggable-inputwidgetv2")
+      .first()
+      .trigger("dragstart", {
+        force: true,
+      });
 
     cy.get(widgets.modalWidget)
       .scrollIntoView()
diff --git a/app/client/cypress/support/Objects/CommonLocators.ts b/app/client/cypress/support/Objects/CommonLocators.ts
index 1d8c0bda1c..6b0f70e545 100644
--- a/app/client/cypress/support/Objects/CommonLocators.ts
+++ b/app/client/cypress/support/Objects/CommonLocators.ts
@@ -259,6 +259,9 @@ export class CommonLocators {
   _pagination = ".rc-pagination";
   _controlOption = ".t--property-control-options";
   _canvasBody = "[data-testid='div-selection-0']";
+  _adsV2Content = ".ads-v2__content";
+  _adsV2CollapsibleHeader = ".ads-v2-collapsible__header";
+  _adsV2Text = ".ads-v2-text";
   _svg = "svg";
 
   public ds_editor_env_filter = (envName: string) =>
diff --git a/app/client/cypress/support/Pages/EntityExplorer.ts b/app/client/cypress/support/Pages/EntityExplorer.ts
index 1de036be78..b1d84293c7 100644
--- a/app/client/cypress/support/Pages/EntityExplorer.ts
+++ b/app/client/cypress/support/Pages/EntityExplorer.ts
@@ -86,6 +86,12 @@ export class EntityExplorer {
     "//span[text()='" +
     dbName +
     "']/following-sibling::div[contains(@class, 't--entity') and contains(@class, 'action')]//div[contains(@class, 't--entity-name')]";
+  _widgetTagsList =
+    "[data-testid='widget-sidebar-scrollable-wrapper'] .widget-tag-collapisble";
+  _widgetCards = ".t--widget-card-draggable";
+  _widgetSearchInput = "#entity-explorer-search";
+  _widgetCardTitle = ".t--widget-card-draggable span.ads-v2-text";
+  _widgetTagSuggestedWidgets = ".widget-tag-collapisble-suggested";
 
   public SelectEntityByName(
     entityNameinLeftSidebar: string,
diff --git a/app/client/cypress/support/commands.js b/app/client/cypress/support/commands.js
index 290ea2b3af..3570a24235 100644
--- a/app/client/cypress/support/commands.js
+++ b/app/client/cypress/support/commands.js
@@ -788,6 +788,7 @@ Cypress.Commands.add("dragAndDropToCanvas", (widgetType, { x, y }) => {
   const selector = `.t--widget-card-draggable-${widgetType}`;
   cy.wait(500);
   cy.get(selector)
+    .first()
     .trigger("dragstart", { force: true })
     .trigger("mousemove", x, y, { force: true });
 
@@ -806,11 +807,13 @@ Cypress.Commands.add(
     const selector = `.t--widget-card-draggable-${widgetType}`;
     cy.wait(800);
     cy.get(selector)
+      .first()
       .scrollIntoView()
       .trigger("dragstart", { force: true })
       .trigger("mousemove", x, y, { force: true });
     const selector2 = `.t--draggable-${destinationWidget}`;
     cy.get(selector2)
+      .first()
       .scrollIntoView()
       .trigger("mousemove", x, y, { eventConstructor: "MouseEvent" })
       .trigger("mousemove", x, y, { eventConstructor: "MouseEvent" })
@@ -824,6 +827,7 @@ Cypress.Commands.add(
     const selector = `.t--widget-card-draggable-${widgetType}`;
     cy.wait(800);
     cy.get(selector)
+      .first()
       .scrollIntoView()
       .trigger("dragstart", { force: true })
       .trigger("mousemove", x, y, { force: true });
diff --git a/app/client/package.json b/app/client/package.json
index 7fe053b007..f8c534063e 100644
--- a/app/client/package.json
+++ b/app/client/package.json
@@ -93,7 +93,7 @@
     "cypress-log-to-output": "^1.1.2",
     "dayjs": "^1.10.6",
     "deep-diff": "^1.0.2",
-    "design-system": "npm:@appsmithorg/design-system@2.1.16",
+    "design-system": "npm:@appsmithorg/design-system@2.1.17",
     "design-system-old": "npm:@appsmithorg/design-system-old@1.1.11",
     "downloadjs": "^1.4.7",
     "fast-deep-equal": "^3.1.3",
diff --git a/app/client/src/ce/entities/FeatureFlag.ts b/app/client/src/ce/entities/FeatureFlag.ts
index 42fd4f7039..f42f174173 100644
--- a/app/client/src/ce/entities/FeatureFlag.ts
+++ b/app/client/src/ce/entities/FeatureFlag.ts
@@ -13,6 +13,7 @@ export const FEATURE_FLAG = {
   ab_ds_schema_enabled: "ab_ds_schema_enabled",
   ab_ds_binding_enabled: "ab_ds_binding_enabled",
   release_scim_provisioning_enabled: "release_scim_provisioning_enabled",
+  release_widgetdiscovery_enabled: "release_widgetdiscovery_enabled",
 } as const;
 
 export type FeatureFlag = keyof typeof FEATURE_FLAG;
@@ -30,6 +31,7 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = {
   ab_ds_schema_enabled: false,
   ab_ds_binding_enabled: false,
   release_scim_provisioning_enabled: false,
+  release_widgetdiscovery_enabled: false,
 };
 
 export const AB_TESTING_EVENT_KEYS = {
diff --git a/app/client/src/constants/WidgetConstants.tsx b/app/client/src/constants/WidgetConstants.tsx
index 000e4c29bd..38b7ee6213 100644
--- a/app/client/src/constants/WidgetConstants.tsx
+++ b/app/client/src/constants/WidgetConstants.tsx
@@ -1,6 +1,7 @@
 import type { SupportedLayouts } from "reducers/entityReducers/pageListReducer";
 import type { WidgetType as FactoryWidgetType } from "utils/WidgetFactory";
 import { THEMEING_TEXT_SIZES } from "./ThemeConstants";
+import type { WidgetCardProps } from "widgets/BaseWidget";
 export type WidgetType = FactoryWidgetType;
 
 export const SKELETON_WIDGET_TYPE = "SKELETON_WIDGET";
@@ -209,6 +210,7 @@ export const WIDGET_PROPS_TO_SKIP_FROM_EVAL = {
   displayName: true,
   topRowBeforeCollapse: false,
   bottomRowBeforeCollapse: false,
+  tags: false,
 };
 
 /**
@@ -223,3 +225,30 @@ export const FLEXBOX_PADDING = 4;
 export const MAX_MODAL_WIDTH_FROM_MAIN_WIDTH = 0.95;
 
 export const FILE_SIZE_LIMIT_FOR_BLOBS = 5000 * 1024; // 5MB
+
+export const WIDGET_TAGS = {
+  SUGGESTED_WIDGETS: "Suggested",
+  INPUTS: "Inputs",
+  BUTTONS: "Buttons",
+  SELECT: "Select",
+  DISPLAY: "Display",
+  LAYOUT: "Layout",
+  MEDIA: "Media",
+  TOGGLES: "Toggles",
+  SLIDERS: "Sliders",
+  CONTENT: "Content",
+  EXTERNAL: "External",
+} as const;
+
+export type WidgetTags = (typeof WIDGET_TAGS)[keyof typeof WIDGET_TAGS];
+
+export type WidgetCardsGroupedByTags = Record<WidgetTags, WidgetCardProps[]>;
+
+export const SUGGESTED_WIDGETS_ORDER: Record<WidgetType, number> = {
+  TABLE_WIDGET_V2: 1,
+  JSON_FORM_WIDGET: 2,
+  INPUT_WIDGET_V2: 3,
+  TEXT_WIDGET: 4,
+  SELECT_WIDGET: 5,
+  LIST_WIDGET_V2: 6,
+};
diff --git a/app/client/src/pages/Editor/Explorer/Pages/index.tsx b/app/client/src/pages/Editor/Explorer/Pages/index.tsx
index 6329109798..36c8ec22e7 100644
--- a/app/client/src/pages/Editor/Explorer/Pages/index.tsx
+++ b/app/client/src/pages/Editor/Explorer/Pages/index.tsx
@@ -43,6 +43,8 @@ import {
 import type { AppState } from "@appsmith/reducers";
 import { getCurrentWorkspaceId } from "@appsmith/selectors/workspaceSelectors";
 import { getInstanceId } from "@appsmith//selectors/tenantSelectors";
+import classNames from "classnames";
+import { selectFeatureFlags } from "@appsmith/selectors/featureFlagsSelectors";
 
 const ENTITY_HEIGHT = 36;
 const MIN_PAGES_HEIGHT = 60;
@@ -94,6 +96,7 @@ function Pages() {
   const storedHeightKey = "pagesContainerHeight_" + applicationId;
   const storedHeight = localStorage.getItem(storedHeightKey);
   const location = useLocation();
+  const featureFlags = useSelector(selectFeatureFlags);
 
   const resizeAfterCallback = (data: CallbackResponseType) => {
     localStorage.setItem(storedHeightKey, data.height.toString());
@@ -223,7 +226,10 @@ function Pages() {
       <StyledEntity
         addButtonHelptext={createMessage(ADD_PAGE_TOOLTIP)}
         alwaysShowRightIcon
-        className="group pages"
+        className={classNames({
+          "group pages": true,
+          "p-3 pb-0": featureFlags.release_widgetdiscovery_enabled,
+        })}
         collapseRef={pageResizeRef}
         customAddButton={
           <AddPageContextMenu
diff --git a/app/client/src/pages/Editor/Explorer/index.tsx b/app/client/src/pages/Editor/Explorer/index.tsx
index f3cfe6575d..3c535ae237 100644
--- a/app/client/src/pages/Editor/Explorer/index.tsx
+++ b/app/client/src/pages/Editor/Explorer/index.tsx
@@ -16,6 +16,8 @@ import WidgetSidebar from "../WidgetSidebar";
 import EntityExplorer from "./EntityExplorer";
 import { getExplorerSwitchIndex } from "selectors/editorContextSelectors";
 import { setExplorerSwitchIndex } from "actions/editorContextActions";
+import { selectFeatureFlags } from "@appsmith/selectors/featureFlagsSelectors";
+import WidgetSidebarWithTags from "../WidgetSidebarWithTags";
 
 const selectForceOpenWidgetPanel = (state: AppState) =>
   state.ui.onBoarding.forceOpenWidgetPanel;
@@ -39,6 +41,7 @@ function ExplorerContent() {
   const pageId = useSelector(getCurrentPageId);
   const location = useLocation();
   const activeSwitchIndex = useSelector(getExplorerSwitchIndex);
+  const featureFlags = useSelector(selectFeatureFlags);
 
   const setActiveSwitchIndex = (index: number) => {
     dispatch(setExplorerSwitchIndex(index));
@@ -79,14 +82,23 @@ function ExplorerContent() {
     <div
       className={`flex-1 flex flex-col overflow-hidden ${tailwindLayers.entityExplorer}`}
     >
-      <div className={`flex-shrink-0 px-2 mt-1 py-2 border-t`}>
+      <div
+        className="flex-shrink-0 p-3 pb-2 mt-1 border-t"
+        data-testid="explorer-tab-options"
+      >
         <SegmentedControl
           onChange={onChange}
           options={options}
           value={activeOption}
         />
       </div>
-      <WidgetSidebar isActive={activeOption === "widgets"} />
+
+      {featureFlags.release_widgetdiscovery_enabled ? (
+        <WidgetSidebarWithTags isActive={activeOption === "widgets"} />
+      ) : (
+        <WidgetSidebar isActive={activeOption === "widgets"} />
+      )}
+
       <EntityExplorer isActive={activeOption === "explorer"} />
     </div>
   );
diff --git a/app/client/src/pages/Editor/WidgetCard.tsx b/app/client/src/pages/Editor/WidgetCard.tsx
index b236f0e99b..bbf35b5c9d 100644
--- a/app/client/src/pages/Editor/WidgetCard.tsx
+++ b/app/client/src/pages/Editor/WidgetCard.tsx
@@ -6,22 +6,23 @@ import AnalyticsUtil from "utils/AnalyticsUtil";
 import { generateReactKey } from "utils/generators";
 import { useWidgetSelection } from "utils/hooks/useWidgetSelection";
 import { IconWrapper } from "constants/IconConstants";
+import { Text } from "design-system";
 
 type CardProps = {
   details: WidgetCardProps;
 };
 
 export const Wrapper = styled.div`
-  padding: 10px 5px 10px 5px;
   border-radius: var(--ads-v2-border-radius);
   border: none;
   position: relative;
   color: var(--ads-v2-color-fg);
-  height: 72px;
+  min-height: 70px;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
   cursor: grab;
+
   img {
     cursor: grab;
   }
@@ -31,6 +32,8 @@ export const Wrapper = styled.div`
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    margin-bottom: 2px;
+    text-align: center;
   }
 
   &:hover {
@@ -54,21 +57,6 @@ export const BetaLabel = styled.div`
   right: -2%;
 `;
 
-export const IconLabel = styled.h5`
-  min-height: 32px;
-  text-align: center;
-  margin: 0;
-  /* text-transform: uppercase; */
-  font-weight: ${(props) => props.theme.fontWeights[1]};
-  flex-shrink: 1;
-  font-size: 11px;
-  line-height: ${(props) => props.theme.lineHeights[2]}px;
-
-  &::selection {
-    background: none;
-  }
-`;
-
 function WidgetCard(props: CardProps) {
   const { setDraggingNewWidget } = useWidgetDragResize();
   const { deselectAll } = useWidgetSelection();
@@ -89,7 +77,8 @@ function WidgetCard(props: CardProps) {
   };
 
   const type = `${props.details.type.split("_").join("").toLowerCase()}`;
-  const className = `t--widget-card-draggable-${type}`;
+  const className = `t--widget-card-draggable t--widget-card-draggable-${type}`;
+
   return (
     <Wrapper
       className={className}
@@ -97,11 +86,11 @@ function WidgetCard(props: CardProps) {
       draggable
       onDragStart={onDragStart}
     >
-      <div>
+      <div className="gap-2 mt-2">
         <IconWrapper>
           <img className="w-6 h-6" src={props.details.icon} />
         </IconWrapper>
-        <IconLabel>{props.details.displayName}</IconLabel>
+        <Text kind="body-s">{props.details.displayName}</Text>
         {props.details.isBeta && <BetaLabel>Beta</BetaLabel>}
       </div>
     </Wrapper>
diff --git a/app/client/src/pages/Editor/WidgetSidebar.tsx b/app/client/src/pages/Editor/WidgetSidebar.tsx
index 36f4c0a4b0..c652f7eb38 100644
--- a/app/client/src/pages/Editor/WidgetSidebar.tsx
+++ b/app/client/src/pages/Editor/WidgetSidebar.tsx
@@ -3,7 +3,6 @@ import { useSelector } from "react-redux";
 import WidgetCard from "./WidgetCard";
 import { getWidgetCards } from "selectors/editorSelectors";
 import { SearchInput } from "design-system";
-
 import { ENTITY_EXPLORER_SEARCH_ID } from "constants/Explorer";
 import { debounce } from "lodash";
 import {
diff --git a/app/client/src/pages/Editor/WidgetSidebarWithTags.tsx b/app/client/src/pages/Editor/WidgetSidebarWithTags.tsx
new file mode 100644
index 0000000000..a1b1c52d17
--- /dev/null
+++ b/app/client/src/pages/Editor/WidgetSidebarWithTags.tsx
@@ -0,0 +1,160 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useSelector } from "react-redux";
+import WidgetCard from "./WidgetCard";
+import { getWidgetCards } from "selectors/editorSelectors";
+import { ENTITY_EXPLORER_SEARCH_ID } from "constants/Explorer";
+import { debounce, sortBy } from "lodash";
+import Fuse from "fuse.js";
+import type { WidgetCardProps } from "widgets/BaseWidget";
+import AnalyticsUtil from "utils/AnalyticsUtil";
+import {
+  SUGGESTED_WIDGETS_ORDER,
+  WIDGET_TAGS,
+  type WidgetCardsGroupedByTags,
+  type WidgetTags,
+} from "constants/WidgetConstants";
+import { groupWidgetCardsByTags } from "./utils";
+import {
+  Collapsible,
+  CollapsibleHeader,
+  CollapsibleContent,
+  SearchInput,
+  Text,
+} from "design-system";
+
+function WidgetSidebarWithTags({ isActive }: { isActive: boolean }) {
+  const cards = useSelector(getWidgetCards);
+  const groupedCards = useMemo(() => groupWidgetCardsByTags(cards), [cards]);
+  const [filteredCards, setFilteredCards] =
+    useState<WidgetCardsGroupedByTags>(groupedCards);
+  const searchInputRef = useRef<HTMLInputElement | null>(null);
+  const [isSearching, setIsSearching] = useState(false);
+
+  const fuse = useMemo(() => {
+    const options = {
+      keys: [
+        {
+          name: "displayName",
+          weight: 0.8,
+        },
+        {
+          name: "searchTags",
+          weight: 0.1,
+        },
+        {
+          name: "tags",
+          weight: 0.1,
+        },
+      ],
+      threshold: 0.2,
+      distance: 100,
+    };
+
+    return new Fuse(cards, options);
+  }, [cards]);
+
+  const sendWidgetSearchAnalytics = debounce((value: string) => {
+    if (value !== "") {
+      AnalyticsUtil.logEvent("WIDGET_SEARCH", { value });
+    }
+  }, 1000);
+
+  const filterCards = (keyword: string) => {
+    setIsSearching(true);
+    sendWidgetSearchAnalytics(keyword);
+
+    if (keyword.trim().length > 0) {
+      const searchResult = fuse.search(keyword);
+      setFilteredCards(groupWidgetCardsByTags(searchResult));
+    } else {
+      setFilteredCards(groupedCards);
+      setIsSearching(false);
+    }
+  };
+
+  useEffect(() => {
+    if (isActive) searchInputRef.current?.focus();
+  }, [isActive]);
+
+  const search = debounce((value: string) => {
+    filterCards(value.toLowerCase());
+  }, 300);
+
+  return (
+    <div
+      className={`flex flex-col t--widget-sidebar overflow-hidden ${
+        isActive ? "" : "hidden"
+      }`}
+    >
+      <div className="sticky top-0 px-3 mt-0.5">
+        <SearchInput
+          autoComplete="off"
+          autoFocus
+          id={ENTITY_EXPLORER_SEARCH_ID}
+          onChange={search}
+          placeholder="Search widgets"
+          ref={searchInputRef}
+          type="text"
+        />
+      </div>
+      <div
+        className="flex-grow px-3 mt-2 overflow-y-scroll"
+        data-testid="widget-sidebar-scrollable-wrapper"
+      >
+        <div>
+          {Object.keys(filteredCards).map((tag) => {
+            const cardsForThisTag: WidgetCardProps[] =
+              filteredCards[tag as WidgetTags];
+
+            if (!cardsForThisTag?.length) {
+              return null;
+            }
+
+            // We don't need to show suggested widgets when the user is searching
+            if (isSearching && tag === WIDGET_TAGS.SUGGESTED_WIDGETS) {
+              return null;
+            }
+
+            return (
+              <Collapsible
+                className={`pb-2 widget-tag-collapisble widget-tag-collapisble-${tag
+                  .toLowerCase()
+                  .replace(/ /g, "-")}`}
+                isOpen
+                key={tag}
+              >
+                <CollapsibleHeader arrowPosition="start">
+                  <Text
+                    className="select-none"
+                    color="var(--ads-v2-color-gray-600)"
+                    kind="heading-xs"
+                  >
+                    {tag}
+                  </Text>
+                </CollapsibleHeader>
+
+                <CollapsibleContent>
+                  <div className="grid items-stretch grid-cols-3 gap-x-2 gap-y-1 justify-items-stretch">
+                    {tag === WIDGET_TAGS.SUGGESTED_WIDGETS
+                      ? sortBy(cardsForThisTag, (widget) => {
+                          return SUGGESTED_WIDGETS_ORDER[widget.type];
+                        }).map((card) => (
+                          <WidgetCard details={card} key={card.key} />
+                        ))
+                      : cardsForThisTag.map((card) => (
+                          <WidgetCard details={card} key={card.key} />
+                        ))}
+                  </div>
+                </CollapsibleContent>
+              </Collapsible>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+WidgetSidebarWithTags.displayName = "WidgetSidebarWithTags";
+
+export default WidgetSidebarWithTags;
diff --git a/app/client/src/pages/Editor/utils.ts b/app/client/src/pages/Editor/utils.ts
index c2a3d2b544..6d20da013a 100644
--- a/app/client/src/pages/Editor/utils.ts
+++ b/app/client/src/pages/Editor/utils.ts
@@ -3,7 +3,12 @@ import _, { debounce, random } from "lodash";
 import { useEffect, useMemo, useState } from "react";
 import ReactDOM from "react-dom";
 import { useLocation } from "react-router";
-import type { WidgetType } from "constants/WidgetConstants";
+import type {
+  WidgetCardsGroupedByTags,
+  WidgetTags,
+  WidgetType,
+} from "constants/WidgetConstants";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 import ResizeObserver from "resize-observer-polyfill";
 import WidgetFactory from "utils/WidgetFactory";
 import {
@@ -13,6 +18,7 @@ import {
 import type { URLBuilderParams } from "RouteBuilder";
 import { useSelector } from "react-redux";
 import { getCurrentPageId } from "selectors/editorSelectors";
+import type { WidgetCardProps } from "widgets/BaseWidget";
 
 export const draggableElement = (
   id: string,
@@ -305,3 +311,24 @@ export const generateRandomNumbers = (
 ) => {
   return random(lowerBound, upperBound, allowFloating);
 };
+
+export const groupWidgetCardsByTags = (widgetCards: WidgetCardProps[]) => {
+  const tagsOrder = Object.values(WIDGET_TAGS);
+  const groupedCards: WidgetCardsGroupedByTags = {} as WidgetCardsGroupedByTags;
+
+  tagsOrder.forEach((tag: WidgetTags) => {
+    groupedCards[tag] = [];
+  });
+
+  widgetCards.forEach((item) => {
+    if (item.tags) {
+      item.tags.forEach((tag) => {
+        if (groupedCards[tag]) {
+          groupedCards[tag].push(item);
+        }
+      });
+    }
+  });
+
+  return groupedCards;
+};
diff --git a/app/client/src/selectors/editorSelectors.tsx b/app/client/src/selectors/editorSelectors.tsx
index 39dddac3b7..2b75733d34 100644
--- a/app/client/src/selectors/editorSelectors.tsx
+++ b/app/client/src/selectors/editorSelectors.tsx
@@ -349,6 +349,7 @@ export const getWidgetCards = createSelector(
         iconSVG,
         key,
         searchTags,
+        tags,
         type,
       } = config;
       let { columns, rows } = config;
@@ -368,6 +369,7 @@ export const getWidgetCards = createSelector(
         displayName,
         icon: iconSVG,
         searchTags,
+        tags,
         isDynamicHeight: isAutoHeightEnabledForWidget(config as WidgetProps),
       };
     });
diff --git a/app/client/src/utils/WidgetRegisterHelpers.tsx b/app/client/src/utils/WidgetRegisterHelpers.tsx
index 3f7c3259f9..8d381ec588 100644
--- a/app/client/src/utils/WidgetRegisterHelpers.tsx
+++ b/app/client/src/utils/WidgetRegisterHelpers.tsx
@@ -91,6 +91,7 @@ export const configureWidget = (config: WidgetConfiguration) => {
     ...config.defaults,
     ...features,
     searchTags: config.searchTags,
+    tags: config.tags,
     type: config.type,
     hideCard: !!config.hideCard || !config.iconSVG,
     isDeprecated: !!config.isDeprecated,
diff --git a/app/client/src/widgets/AudioRecorderWidget/icon.svg b/app/client/src/widgets/AudioRecorderWidget/icon.svg
index 08ba4a1a48..7bdf175b62 100644
--- a/app/client/src/widgets/AudioRecorderWidget/icon.svg
+++ b/app/client/src/widgets/AudioRecorderWidget/icon.svg
@@ -1 +1,4 @@
-<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path d="m23.7299 14.3547c0-.6242-.4316-1.1349-.9592-1.1349-.5275 0-.9591.5107-.9591 1.1349 0 3.9148-2.6856 7.0354-5.9467 7.0354-3.261 0-5.94663-3.1206-5.94663-7.0354 0-.6242-.4316-1.1349-.95914-1.1349-.52752 0-.95913.5107-.95913 1.1349 0 4.7658 3.0213 8.6808 6.9057 9.1914v3.5178h-2.158c-.5275 0-.9591.5106-.9591 1.1346 0 .6242.4316 1.1348.9591 1.1348h6.1864c.5276 0 .9592-.5106.9592-1.1348 0-.624-.4316-1.1346-.9592-1.1346h-2.1101v-3.5178c3.8845-.5106 6.9059-4.4256 6.9059-9.1914z"/><path d="m16.0088 2.66666h-.2879c-2.206 0-4.0283 2.15602-4.0283 4.76596v6.86528c0 2.61 1.8223 4.766 4.0283 4.766h.2879c2.206 0 4.0283-2.156 4.0283-4.766v-6.86528c0-2.60994-1.8223-4.76596-4.0283-4.76596z"/></g></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.5179 10.6427C18.5179 10.1277 18.147 9.70636 17.6936 9.70636C17.2403 9.70636 16.8694 10.1277 16.8694 10.6427C16.8694 13.8724 14.5614 16.4469 11.7589 16.4469C8.95648 16.4469 6.64851 13.8724 6.64851 10.6427C6.64851 10.1277 6.27761 9.70636 5.82425 9.70636C5.37092 9.70636 5 10.1277 5 10.6427C5 14.5744 7.59643 17.8043 10.9346 18.2256V21.1278H9.08006C8.62674 21.1278 8.25583 21.549 8.25583 22.0638C8.25583 22.5788 8.62674 23 9.08006 23H14.3965C14.8499 23 15.2208 22.5788 15.2208 22.0638C15.2208 21.549 14.8499 21.1278 14.3965 21.1278H12.5831V18.2256C15.9214 17.8043 18.5179 14.5744 18.5179 10.6427Z" fill="#4C5664"/>
+<path d="M11.8823 1.00002H11.6349C9.73914 1.00002 8.1731 2.77873 8.1731 4.93194V10.5958C8.1731 12.749 9.73914 14.5278 11.6349 14.5278H11.8823C13.7781 14.5278 15.3442 12.749 15.3442 10.5958V4.93194C15.3442 2.77873 13.7781 1.00002 11.8823 1.00002Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/AudioRecorderWidget/index.ts b/app/client/src/widgets/AudioRecorderWidget/index.ts
index 51079a3d1f..c0af9ce64f 100644
--- a/app/client/src/widgets/AudioRecorderWidget/index.ts
+++ b/app/client/src/widgets/AudioRecorderWidget/index.ts
@@ -1,13 +1,14 @@
 import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
 import { ResponsiveBehavior } from "utils/autoLayout/constants";
-
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Audio Recorder",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.EXTERNAL],
   needsMeta: true,
   searchTags: ["sound recorder", "voice recorder"],
   defaults: {
diff --git a/app/client/src/widgets/AudioWidget/icon.svg b/app/client/src/widgets/AudioWidget/icon.svg
index d3479b78da..3f260be11a 100644
--- a/app/client/src/widgets/AudioWidget/icon.svg
+++ b/app/client/src/widgets/AudioWidget/icon.svg
@@ -1 +1,8 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" fill="none" viewBox="0 0 18 14"><path fill="#4c5664" d="M0.5 11V3H2.5V11H0.5Z"/><path fill="#4c5664" d="M3.5 13V1H5.5V13H3.5Z"/><path fill="#4c5664" d="M6.5 10V5H8.5V10H6.5Z"/><path fill="#4c5664" d="M9.5 14V0H11.5V14H9.5Z"/><path fill="#4c5664" d="M12.5 12V2H14.5V12H12.5Z"/><path fill="#4c5664" d="M15.5 10V4H17.5V10H15.5Z"/></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 16V8H5V16H3Z" fill="#4C5664"/>
+<path d="M6 18V6H8V18H6Z" fill="#4C5664"/>
+<path d="M9 15V10H11V15H9Z" fill="#4C5664"/>
+<path d="M12 19V5H14V19H12Z" fill="#4C5664"/>
+<path d="M15 17V7H17V17H15Z" fill="#4C5664"/>
+<path d="M18 15V9H20V15H18Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/AudioWidget/index.tsx b/app/client/src/widgets/AudioWidget/index.tsx
index b25fc97a61..e6dccf0658 100644
--- a/app/client/src/widgets/AudioWidget/index.tsx
+++ b/app/client/src/widgets/AudioWidget/index.tsx
@@ -1,15 +1,16 @@
 import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
 import { ResponsiveBehavior } from "utils/autoLayout/constants";
-
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
 import { ASSETS_CDN_URL } from "constants/ThirdPartyConstants";
 import { getAssetUrl } from "@appsmith/utils/airgapHelpers";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Audio",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.MEDIA],
   needsMeta: true,
   searchTags: ["mp3", "sound", "wave", "player"],
   defaults: {
diff --git a/app/client/src/widgets/BaseInputWidget/icon.svg b/app/client/src/widgets/BaseInputWidget/icon.svg
index 0a1b6d938f..6e3c1fdaef 100644
--- a/app/client/src/widgets/BaseInputWidget/icon.svg
+++ b/app/client/src/widgets/BaseInputWidget/icon.svg
@@ -1 +1,4 @@
-<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path clip-rule="evenodd" d="m2.66675 8h26.66665v16h-26.66665zm2.66666 13.3333v-10.6666h21.33329v10.6666z" fill-rule="evenodd"/><path d="m6.66675 20v-8h1.33333v8z"/></g></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 5H23V18.2H1V5ZM3.2 16V7.20003H20.8V16H3.2Z" fill="#4B4848"/>
+<path d="M4.30005 14.9V8.29999H5.40005V14.9H4.30005Z" fill="#4B4848"/>
+</svg>
diff --git a/app/client/src/widgets/BaseWidget.tsx b/app/client/src/widgets/BaseWidget.tsx
index e0d15e9049..a7d5b777e1 100644
--- a/app/client/src/widgets/BaseWidget.tsx
+++ b/app/client/src/widgets/BaseWidget.tsx
@@ -22,6 +22,7 @@ import type {
   CSSUnit,
   PositionType,
   RenderMode,
+  WidgetTags,
   WidgetType,
 } from "constants/WidgetConstants";
 import { FLEXBOX_PADDING } from "constants/WidgetConstants";
@@ -911,6 +912,7 @@ export interface WidgetCardProps {
   displayName: string;
   icon: string;
   isBeta?: boolean;
+  tags?: WidgetTags[];
 }
 
 export const WidgetOperations = {
diff --git a/app/client/src/widgets/ButtonGroupWidget/icon.svg b/app/client/src/widgets/ButtonGroupWidget/icon.svg
index 9e40c5f3b7..f7a2e1551b 100644
--- a/app/client/src/widgets/ButtonGroupWidget/icon.svg
+++ b/app/client/src/widgets/ButtonGroupWidget/icon.svg
@@ -1 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="13" fill="none" viewBox="0 0 32 13"><mask id="path-1-inside-1" fill="#fff"><path fill-rule="evenodd" d="M0 2C0 0.895431 0.895431 0 2 0H9.5V13H2C0.895431 13 0 12.1046 0 11V2ZM11 13V0H21V13H11ZM22.5 13H30C31.1046 13 32 12.1046 32 11V2C32 0.895431 31.1046 0 30 0H22.5V13Z" clip-rule="evenodd"/></mask><path fill="#4c5664" fill-rule="evenodd" d="M0 2C0 0.895431 0.895431 0 2 0H9.5V13H2C0.895431 13 0 12.1046 0 11V2ZM11 13V0H21V13H11ZM22.5 13H30C31.1046 13 32 12.1046 32 11V2C32 0.895431 31.1046 0 30 0H22.5V13Z" clip-rule="evenodd"/><path fill="#4c5664" d="M9.5 0H10.5V-1H9.5V0ZM9.5 13V14H10.5V13H9.5ZM11 0V-1H10V0H11ZM11 13H10V14H11V13ZM21 0H22V-1H21V0ZM21 13V14H22V13H21ZM22.5 13H21.5V14H22.5V13ZM22.5 0V-1H21.5V0H22.5ZM2 -1C0.343146 -1 -1 0.343146 -1 2H1C1 1.44772 1.44772 1 2 1V-1ZM9.5 -1H2V1H9.5V-1ZM10.5 13V0H8.5V13H10.5ZM2 14H9.5V12H2V14ZM-1 11C-1 12.6569 0.343146 14 2 14V12C1.44772 12 1 11.5523 1 11H-1ZM-1 2V11H1V2H-1ZM10 0V13H12V0H10ZM21 -1H11V1H21V-1ZM22 13V0H20V13H22ZM11 14H21V12H11V14ZM22.5 14H30V12H22.5V14ZM30 14C31.6569 14 33 12.6569 33 11H31C31 11.5523 30.5523 12 30 12V14ZM33 11V2H31V11H33ZM33 2C33 0.343146 31.6569 -1 30 -1V1C30.5523 1 31 1.44772 31 2H33ZM30 -1H22.5V1H30V-1ZM21.5 0V13H23.5V0H21.5Z" mask="url(#path-1-inside-1)"/></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_35_3375" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="8" width="22" height="9">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 9.375C1 8.61561 1.61561 8 2.375 8H7.53125V16.9375H2.375C1.61561 16.9375 1 16.3219 1 15.5625V9.375ZM8.5625 16.9375V8H15.4375V16.9375H8.5625ZM16.4688 16.9375H21.625C22.3844 16.9375 23 16.3219 23 15.5625V9.375C23 8.61561 22.3844 8 21.625 8H16.4688V16.9375Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_35_3375)">
+<path d="M7.53125 8H8.21875V7.3125H7.53125V8ZM7.53125 16.9375V17.625H8.21875V16.9375H7.53125ZM8.5625 8V7.3125H7.875V8H8.5625ZM8.5625 16.9375H7.875V17.625H8.5625V16.9375ZM15.4375 8H16.125V7.3125H15.4375V8ZM15.4375 16.9375V17.625H16.125V16.9375H15.4375ZM16.4688 16.9375H15.7812V17.625H16.4688V16.9375ZM16.4688 8V7.3125H15.7812V8H16.4688ZM2.375 7.3125C1.23591 7.3125 0.3125 8.23591 0.3125 9.375H1.6875C1.6875 8.99531 1.99531 8.6875 2.375 8.6875V7.3125ZM7.53125 7.3125H2.375V8.6875H7.53125V7.3125ZM8.21875 16.9375V8H6.84375V16.9375H8.21875ZM2.375 17.625H7.53125V16.25H2.375V17.625ZM0.3125 15.5625C0.3125 16.7016 1.23591 17.625 2.375 17.625V16.25C1.99531 16.25 1.6875 15.9422 1.6875 15.5625H0.3125ZM0.3125 9.375V15.5625H1.6875V9.375H0.3125ZM7.875 8V16.9375H9.25V8H7.875ZM15.4375 7.3125H8.5625V8.6875H15.4375V7.3125ZM16.125 16.9375V8H14.75V16.9375H16.125ZM8.5625 17.625H15.4375V16.25H8.5625V17.625ZM16.4688 17.625H21.625V16.25H16.4688V17.625ZM21.625 17.625C22.7641 17.625 23.6875 16.7016 23.6875 15.5625H22.3125C22.3125 15.9422 22.0047 16.25 21.625 16.25V17.625ZM23.6875 15.5625V9.375H22.3125V15.5625H23.6875ZM23.6875 9.375C23.6875 8.23591 22.7641 7.3125 21.625 7.3125V8.6875C22.0047 8.6875 22.3125 8.99531 22.3125 9.375H23.6875ZM21.625 7.3125H16.4688V8.6875H21.625V7.3125ZM15.7812 8V16.9375H17.1562V8H15.7812Z" fill="#4C5664"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 9.375C1 8.61561 1.61561 8 2.375 8H7.53125V16.9375H2.375C1.61561 16.9375 1 16.3219 1 15.5625V9.375ZM8.5625 16.9375V8H15.4375V16.9375H8.5625ZM16.4688 16.9375H21.625C22.3844 16.9375 23 16.3219 23 15.5625V9.375C23 8.61561 22.3844 8 21.625 8H16.4688V16.9375Z" fill="#4C5664"/>
+</g>
+</svg>
diff --git a/app/client/src/widgets/ButtonGroupWidget/index.ts b/app/client/src/widgets/ButtonGroupWidget/index.ts
index 777f81705f..a8e2673b90 100644
--- a/app/client/src/widgets/ButtonGroupWidget/index.ts
+++ b/app/client/src/widgets/ButtonGroupWidget/index.ts
@@ -8,6 +8,7 @@ import { BlueprintOperationTypes } from "widgets/constants";
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
 import type { ButtonGroupWidgetProps } from "./widget";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   type: Widget.getWidgetType(),
@@ -16,6 +17,7 @@ export const CONFIG = {
   needsMeta: false, // Defines if this widget adds any meta properties
   isCanvas: false, // Defines if this widget has a canvas within in which we can drop other widgets
   searchTags: ["click", "submit"],
+  tags: [WIDGET_TAGS.BUTTONS],
   defaults: {
     rows: 4,
     columns: 24,
diff --git a/app/client/src/widgets/ButtonWidget/icon.svg b/app/client/src/widgets/ButtonWidget/icon.svg
index 9693e6f256..4ab2c2bf20 100644
--- a/app/client/src/widgets/ButtonWidget/icon.svg
+++ b/app/client/src/widgets/ButtonWidget/icon.svg
@@ -1 +1,3 @@
-<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m24 19v-8h-16v10h8v-2h-6v-6h12v6zm-9.4727 3.0555c1.1911-.4051 1.3299-.3724 2.2775.6936.0151.0138.0302.0277.0453.0416.239.2192.4717.4326.7838.3138.3327-.1256.4008-.3158.4008-.6439v-6.4815c0-.4464.5133-.953 1.0043-.953.4911 0 .9938.5066.9938.953v3.4791l2.7653 1.2297c.4139.184.6524.6233.5813 1.0707l-.5152 3.2414h-6.8642l-.4913-1z" fill="#4c5664" fill-rule="evenodd"/></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21 14V4H1V16.5H11V14H3.5V6.5H18.5V14H21ZM9.15912 17.8194C10.648 17.313 10.8215 17.3539 12.006 18.6864C12.0249 18.7036 12.0437 18.721 12.0626 18.7384C12.3614 19.0124 12.6522 19.2791 13.0424 19.1306C13.4583 18.9736 13.5434 18.7359 13.5434 18.3258V10.2239C13.5434 9.66588 14.185 9.03263 14.7987 9.03263C15.4126 9.03263 16.041 9.66588 16.041 10.2239V14.5728L19.4976 16.1099C20.015 16.3399 20.3131 16.889 20.2243 17.4482L19.5802 21.5H11L10.3859 20.25L9.15912 17.8194Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/ButtonWidget/index.ts b/app/client/src/widgets/ButtonWidget/index.ts
index 45d487f558..2e5593744c 100644
--- a/app/client/src/widgets/ButtonWidget/index.ts
+++ b/app/client/src/widgets/ButtonWidget/index.ts
@@ -5,14 +5,15 @@ import {
 } from "components/constants";
 import { BUTTON_MIN_WIDTH } from "constants/minWidthConstants";
 import { ResponsiveBehavior } from "utils/autoLayout/constants";
-
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Button",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.BUTTONS],
   needsMeta: true,
   searchTags: ["click", "submit"],
   defaults: {
diff --git a/app/client/src/widgets/CameraWidget/icon.svg b/app/client/src/widgets/CameraWidget/icon.svg
old mode 100755
new mode 100644
index fd82880c93..f43f27bdde
--- a/app/client/src/widgets/CameraWidget/icon.svg
+++ b/app/client/src/widgets/CameraWidget/icon.svg
@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="#4c5664"><path fill="none" d="M0 0h24v24H0z"/><path d="M9 3h6l2 2h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h4l2-2zm3 16a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm0-2a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/></g></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 3H15L17 5H21C21.2652 5 21.5196 5.10536 21.7071 5.29289C21.8946 5.48043 22 5.73478 22 6V20C22 20.2652 21.8946 20.5196 21.7071 20.7071C21.5196 20.8946 21.2652 21 21 21H3C2.73478 21 2.48043 20.8946 2.29289 20.7071C2.10536 20.5196 2 20.2652 2 20V6C2 5.73478 2.10536 5.48043 2.29289 5.29289C2.48043 5.10536 2.73478 5 3 5H7L9 3ZM12 19C13.5913 19 15.1174 18.3679 16.2426 17.2426C17.3679 16.1174 18 14.5913 18 13C18 11.4087 17.3679 9.88258 16.2426 8.75736C15.1174 7.63214 13.5913 7 12 7C10.4087 7 8.88258 7.63214 7.75736 8.75736C6.63214 9.88258 6 11.4087 6 13C6 14.5913 6.63214 16.1174 7.75736 17.2426C8.88258 18.3679 10.4087 19 12 19ZM12 17C10.9391 17 9.92172 16.5786 9.17157 15.8284C8.42143 15.0783 8 14.0609 8 13C8 11.9391 8.42143 10.9217 9.17157 10.1716C9.92172 9.42143 10.9391 9 12 9C13.0609 9 14.0783 9.42143 14.8284 10.1716C15.5786 10.9217 16 11.9391 16 13C16 14.0609 15.5786 15.0783 14.8284 15.8284C14.0783 16.5786 13.0609 17 12 17Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/CameraWidget/index.ts b/app/client/src/widgets/CameraWidget/index.ts
index 7623becfb8..6fbb8da877 100644
--- a/app/client/src/widgets/CameraWidget/index.ts
+++ b/app/client/src/widgets/CameraWidget/index.ts
@@ -2,11 +2,13 @@ import { ResponsiveBehavior } from "utils/autoLayout/constants";
 import { CameraModeTypes } from "./constants";
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Camera", // The display name which will be made in uppercase and show in the widgets panel ( can have spaces )
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.EXTERNAL],
   needsMeta: true, // Defines if this widget adds any meta properties
   isCanvas: false, // Defines if this widget has a canvas within in which we can drop other widgets
   searchTags: ["photo", "video recorder"],
diff --git a/app/client/src/widgets/CategorySliderWidget/icon.svg b/app/client/src/widgets/CategorySliderWidget/icon.svg
index 404f252df2..e3cc799f5a 100644
--- a/app/client/src/widgets/CategorySliderWidget/icon.svg
+++ b/app/client/src/widgets/CategorySliderWidget/icon.svg
@@ -1,6 +1,6 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M26.0117 13.5V7.5H28.3069C28.8558 7.5 29.2882 7.63444 29.6042 7.90333C29.923 8.17221 30.0824 8.53673 30.0824 8.99688C30.0824 9.30735 29.9812 9.58732 29.7789 9.8368C29.5793 10.0863 29.3353 10.2374 29.0471 10.29V10.3565C29.4573 10.4092 29.783 10.5672 30.0242 10.8306C30.2654 11.0911 30.3859 11.4196 30.3859 11.816C30.3859 12.3455 30.2058 12.7585 29.8454 13.0551C29.4878 13.3517 28.9902 13.5 28.3527 13.5H26.0117ZM26.7602 12.8389H28.2404C28.6922 12.8389 29.0346 12.7488 29.2674 12.5686C29.5003 12.3884 29.6167 12.1251 29.6167 11.7786C29.6167 11.08 29.1344 10.7308 28.1697 10.7308H26.7602V12.8389ZM26.7602 10.0863H27.9577C28.8697 10.0863 29.3256 9.76611 29.3256 9.12578C29.3256 8.82086 29.2217 8.58385 29.0138 8.41476C28.8087 8.24567 28.5204 8.16112 28.1489 8.16112H26.7602V10.0863Z" fill="#4c5664" stroke="#4C5664" stroke-width="0.3"/>
-<path d="M1.61719 13.5L4.18724 7.5H5.04714L7.61719 13.5H6.70414L6.00366 11.7827H3.23071L2.53023 13.5H1.61719ZM3.48675 11.1466H5.74762L4.65583 8.46882H4.57854L3.48675 11.1466Z" fill="#4c5664" stroke="#4C5664" stroke-width="0.3"/>
-<path d="M30 18.5H2V21.5H30V18.5Z" fill="#4c5664"/>
-<circle cx="19.5" cy="20" r="4.5" fill="#4c5664"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.655 10.5883V6H21.4102C21.8299 6 22.1606 6.10281 22.4022 6.30843C22.646 6.51405 22.7679 6.79281 22.7679 7.14469C22.7679 7.38211 22.6905 7.59621 22.5358 7.787C22.3832 7.97779 22.1966 8.09334 21.9762 8.13357V8.18442C22.2899 8.22472 22.539 8.34555 22.7234 8.54697C22.9079 8.74618 23 8.99739 23 9.30053C23 9.70545 22.8623 10.0213 22.5867 10.2481C22.3132 10.4749 21.9327 10.5883 21.4452 10.5883H19.655ZM20.2274 10.0828H21.3593C21.7048 10.0828 21.9666 10.0139 22.1447 9.87606C22.3228 9.73825 22.4118 9.5369 22.4118 9.27193C22.4118 8.73769 22.043 8.47065 21.3052 8.47065H20.2274V10.0828ZM20.2274 7.97779H21.1431C21.8405 7.97779 22.1892 7.73294 22.1892 7.24327C22.1892 7.01009 22.1097 6.82884 21.9507 6.69953C21.7939 6.57023 21.5734 6.50557 21.2893 6.50557H20.2274V7.97779Z" fill="#4C5664" stroke="#4C5664" stroke-width="0.3"/>
+<path d="M1 10.5883L2.96537 6H3.62295L5.58832 10.5883H4.89009L4.35442 9.27506H2.23389L1.69822 10.5883H1ZM2.42969 8.78862H4.15862L3.32371 6.74087H3.2646L2.42969 8.78862Z" fill="#4C5664" stroke="#4C5664" stroke-width="0.3"/>
+<path d="M22.7049 14.4119H1.29272V16.7061H22.7049V14.4119Z" fill="#4C5664"/>
+<path d="M14.6753 19.0002C16.5758 19.0002 18.1165 17.4595 18.1165 15.559C18.1165 13.6584 16.5758 12.1178 14.6753 12.1178C12.7748 12.1178 11.2341 13.6584 11.2341 15.559C11.2341 17.4595 12.7748 19.0002 14.6753 19.0002Z" fill="#4C5664"/>
 </svg>
diff --git a/app/client/src/widgets/CategorySliderWidget/index.ts b/app/client/src/widgets/CategorySliderWidget/index.ts
index 782ffb6f60..ef36c6c212 100644
--- a/app/client/src/widgets/CategorySliderWidget/index.ts
+++ b/app/client/src/widgets/CategorySliderWidget/index.ts
@@ -1,9 +1,9 @@
 import { Alignment } from "@blueprintjs/core";
 import { LabelPosition } from "components/constants";
 import { ResponsiveBehavior } from "utils/autoLayout/constants";
-
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   type: Widget.getWidgetType(),
@@ -11,6 +11,7 @@ export const CONFIG = {
   needsMeta: true,
   searchTags: ["range"],
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.SLIDERS],
   defaults: {
     options: [
       { label: "xs", value: "xs" },
diff --git a/app/client/src/widgets/ChartWidget/icon.svg b/app/client/src/widgets/ChartWidget/icon.svg
index 99d96c3943..4a7a52081f 100644
--- a/app/client/src/widgets/ChartWidget/icon.svg
+++ b/app/client/src/widgets/ChartWidget/icon.svg
@@ -1 +1,5 @@
-<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path d="m10.6666 22.6667v6.6666h-5.33335v-6.6666z"/><path d="m18.6666 16v13.3333h-5.3333v-13.3333z"/><path d="m26.6666 2.66666v26.66664h-5.3333v-26.66664z"/></g></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.40002 16.5V22H3V16.5H7.40002Z" fill="#4C5664"/>
+<path d="M14 11V22H9.60004V11H14Z" fill="#4C5664"/>
+<path d="M20.6002 1.99997V22H16.2002V1.99997H20.6002Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/ChartWidget/index.ts b/app/client/src/widgets/ChartWidget/index.ts
index cca85c6846..486a3d6589 100644
--- a/app/client/src/widgets/ChartWidget/index.ts
+++ b/app/client/src/widgets/ChartWidget/index.ts
@@ -1,16 +1,17 @@
 import { Colors } from "constants/Colors";
 import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
 import { ResponsiveBehavior } from "utils/autoLayout/constants";
-
 import { generateReactKey } from "widgets/WidgetUtils";
 import { LabelOrientation } from "./constants";
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Chart",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.DISPLAY],
   needsMeta: true,
   searchTags: ["graph", "visuals", "visualisations"],
   defaults: {
diff --git a/app/client/src/widgets/CheckboxGroupWidget/icon.svg b/app/client/src/widgets/CheckboxGroupWidget/icon.svg
index 41f4be4a23..a0a3a45d85 100644
--- a/app/client/src/widgets/CheckboxGroupWidget/icon.svg
+++ b/app/client/src/widgets/CheckboxGroupWidget/icon.svg
@@ -1 +1,7 @@
-<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path d="m4.8147 16.815 1.14288-1.1428 1.14286 1.1428 2.85719-2.8571 1.14287 1.1428-4.00006 4.0001z"/><path d="m4.8147 8.00004 1.14288-1.14287 1.14286 1.14287 2.85719-2.85719 1.14287 1.14288-4.00006 4.00007z"/><path d="m26.6666 6.66666h-13.3333v2.66666h13.3333z"/><path d="m26.6666 14.6667h-13.3333v2.6666h13.3333z"/><path d="m26.6666 22.6667h-13.3333v2.6666h13.3333z"/></g></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 13.7513L2.15063 12.6007L3.30123 13.7513L6.17779 10.8748L7.3284 12.0253L3.30123 16.0526L1 13.7513Z" fill="#4C5664"/>
+<path d="M1 4.87655L2.15063 3.72594L3.30123 4.87655L6.17779 2L7.3284 3.15063L3.30123 7.17781L1 4.87655Z" fill="#4C5664"/>
+<path d="M22.9998 3.53413H9.57617V6.21887H22.9998V3.53413Z" fill="#4C5664"/>
+<path d="M22.9998 11.5883H9.57617V14.273H22.9998V11.5883Z" fill="#4C5664"/>
+<path d="M22.9998 19.6426H9.57617V22.3273H22.9998V19.6426Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/CheckboxGroupWidget/index.ts b/app/client/src/widgets/CheckboxGroupWidget/index.ts
index 69ed7038a4..c2b526d1d5 100644
--- a/app/client/src/widgets/CheckboxGroupWidget/index.ts
+++ b/app/client/src/widgets/CheckboxGroupWidget/index.ts
@@ -1,8 +1,8 @@
 import { Alignment } from "@blueprintjs/core";
 import { LabelPosition } from "components/constants";
-
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   features: {
@@ -14,6 +14,7 @@ export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Checkbox Group",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.TOGGLES],
   needsMeta: true,
   defaults: {
     rows: 6,
diff --git a/app/client/src/widgets/CheckboxWidget/icon.svg b/app/client/src/widgets/CheckboxWidget/icon.svg
index c11a95f19d..a56d336f43 100644
--- a/app/client/src/widgets/CheckboxWidget/icon.svg
+++ b/app/client/src/widgets/CheckboxWidget/icon.svg
@@ -1 +1,3 @@
-<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m25.3334 25.3333v-18.66664h-18.66665v18.66664zm-15.99999-15.99998v13.33338h13.33329v-13.33338zm3.21889 5.42618-1.8856 1.8856 3.7712 3.7712 6.5997-6.5997-1.8856-1.8856-4.7141 4.7141z" fill="#4c5664" fill-rule="evenodd"/></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23 23V0.999969H1V23H23ZM4.14285 4.14282V19.8572H19.8571V4.14282H4.14285ZM7.93655 10.538L5.71423 12.7603L10.1589 17.2049L17.9371 9.42669L15.7148 7.20438L10.1589 12.7603L7.93655 10.538Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/CheckboxWidget/index.ts b/app/client/src/widgets/CheckboxWidget/index.ts
index bde08937ce..da20f1e752 100644
--- a/app/client/src/widgets/CheckboxWidget/index.ts
+++ b/app/client/src/widgets/CheckboxWidget/index.ts
@@ -2,9 +2,9 @@ import { LabelPosition } from "components/constants";
 import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
 import { ResponsiveBehavior } from "utils/autoLayout/constants";
 import { AlignWidgetTypes } from "widgets/constants";
-
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   features: {
@@ -16,6 +16,7 @@ export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Checkbox",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.TOGGLES],
   needsMeta: true,
   searchTags: ["boolean"],
   defaults: {
diff --git a/app/client/src/widgets/CodeScannerWidget/icon.svg b/app/client/src/widgets/CodeScannerWidget/icon.svg
index 6cc3351836..a0adb33dc3 100644
--- a/app/client/src/widgets/CodeScannerWidget/icon.svg
+++ b/app/client/src/widgets/CodeScannerWidget/icon.svg
@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><path fill="none" d="M0 0h24v24H0z"/><path d="M15 3h6v5h-2V5h-4V3zM9 3v2H5v3H3V3h6zm6 18v-2h4v-3h2v5h-6zm-6 0H3v-5h2v3h4v2zM3 11h18v2H3v-2z"/></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.6667 1H23V7.11111H20.5556V3.44444H15.6667V1ZM8.33333 1V3.44444H3.44444V7.11111H1V1H8.33333ZM15.6667 23V20.5556H20.5556V16.8889H23V23H15.6667ZM8.33333 23H1V16.8889H3.44444V20.5556H8.33333V23ZM1 10.7778H23V13.2222H1V10.7778Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/CodeScannerWidget/index.ts b/app/client/src/widgets/CodeScannerWidget/index.ts
index cc0daf2bcc..656583cf70 100644
--- a/app/client/src/widgets/CodeScannerWidget/index.ts
+++ b/app/client/src/widgets/CodeScannerWidget/index.ts
@@ -3,11 +3,13 @@ import Widget from "./widget";
 import { ButtonPlacementTypes } from "components/constants";
 import { ScannerLayout } from "./constants";
 import { ResponsiveBehavior } from "utils/autoLayout/constants";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Code Scanner",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.EXTERNAL],
   needsMeta: true,
   searchTags: [
     "barcode scanner",
diff --git a/app/client/src/widgets/ContainerWidget/icon.svg b/app/client/src/widgets/ContainerWidget/icon.svg
index f640b365e1..2fa53849eb 100644
--- a/app/client/src/widgets/ContainerWidget/icon.svg
+++ b/app/client/src/widgets/ContainerWidget/icon.svg
@@ -1 +1,14 @@
-<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path d="m2.66658 2.66666h5.33334v2.66666h-2.66667v2.66667h-2.66667z"/><path d="m29.3333 29.3333h-5.3334v-2.6666h2.6667v-2.6667h2.6667z"/><path d="m2.66658 29.3333v-5.3333h2.66667v2.6667h2.66667v2.6666z"/><path d="m2.66658 14.6667v-4h2.66667v4z"/><path d="m26.6666 14.6667v-4h2.6667v4z"/><path d="m14.6666 5.33332h-4v-2.66666h4z"/><path d="m14.6666 29.3333h-4v-2.6666h4z"/><path d="m2.66658 21.3333v-4h2.66667v4z"/><path d="m26.6666 21.3333v-4h2.6667v4z"/><path d="m21.3332 5.33332h-4l.0001-2.66666h4z"/><path d="m21.3333 29.3333h-4v-2.6666h3.9999z"/><path d="m29.3333 7.99999v-5.33333h-5.3334v2.66666h2.6667v2.66667z"/></g></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 0.999969H5.4V3.19996H3.2V5.39996H1V0.999969Z" fill="#4C5664"/>
+<path d="M22.9997 22.9999H18.5997V20.7999H20.7997V18.5999H22.9997V22.9999Z" fill="#4C5664"/>
+<path d="M1 22.9999V18.5999H3.2V20.7999H5.4V22.9999H1Z" fill="#4C5664"/>
+<path d="M1 10.9V7.60001H3.2V10.9H1Z" fill="#4C5664"/>
+<path d="M20.8 10.9V7.60001H23V10.9H20.8Z" fill="#4C5664"/>
+<path d="M10.9 3.19996H7.59998V0.999969H10.9V3.19996Z" fill="#4C5664"/>
+<path d="M10.9 22.9999H7.59998V20.8H10.9V22.9999Z" fill="#4C5664"/>
+<path d="M1 16.3999V13.0999H3.2V16.3999H1Z" fill="#4C5664"/>
+<path d="M20.8 16.3999V13.0999H23V16.3999H20.8Z" fill="#4C5664"/>
+<path d="M16.4002 3.19996H13.1002L13.1003 0.999969H16.4003L16.4002 3.19996Z" fill="#4C5664"/>
+<path d="M16.4002 22.9999H13.1002V20.8H16.4001L16.4002 22.9999Z" fill="#4C5664"/>
+<path d="M22.9997 5.39996V0.999969H18.5997V3.19996H20.7997V5.39996H22.9997Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/ContainerWidget/index.ts b/app/client/src/widgets/ContainerWidget/index.ts
index b070471e9d..eee14756d8 100644
--- a/app/client/src/widgets/ContainerWidget/index.ts
+++ b/app/client/src/widgets/ContainerWidget/index.ts
@@ -1,7 +1,11 @@
 import { ButtonBoxShadowTypes } from "components/constants";
 import { Colors } from "constants/Colors";
 import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
-import { GridDefaults, WidgetHeightLimits } from "constants/WidgetConstants";
+import {
+  GridDefaults,
+  WIDGET_TAGS,
+  WidgetHeightLimits,
+} from "constants/WidgetConstants";
 import {
   FlexVerticalAlignment,
   ResponsiveBehavior,
@@ -15,6 +19,7 @@ export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Container",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.LAYOUT],
   isCanvas: true,
   features: {
     dynamicHeight: {
diff --git a/app/client/src/widgets/CurrencyInputWidget/icon.svg b/app/client/src/widgets/CurrencyInputWidget/icon.svg
index cf52885dcd..d723545078 100644
--- a/app/client/src/widgets/CurrencyInputWidget/icon.svg
+++ b/app/client/src/widgets/CurrencyInputWidget/icon.svg
@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" fill="none" viewBox="0 0 20 12"><path fill="#4c5664" fill-rule="evenodd" d="M0 0H20V12H0V0ZM2 10V2H18V10H2Z" clip-rule="evenodd"/><path fill="#4c5664" d="M4.81348 8.41895H5.15625V7.93262C5.93555 7.87695 6.52441 7.46094 6.52441 6.74023V6.73438C6.52441 6.10156 6.10254 5.78516 5.32031 5.60352L5.15625 5.56543V4.42871C5.50781 4.47852 5.75098 4.68652 5.78906 5.0293L5.79199 5.03516L6.47168 5.03223V5.0293C6.44531 4.3584 5.91797 3.90137 5.15625 3.83984V3.34766H4.81348V3.83984C4.04883 3.89258 3.50098 4.3291 3.50098 5V5.00586C3.50098 5.61523 3.91113 5.95508 4.66406 6.12793L4.81348 6.16309V7.34668C4.37402 7.2998 4.15723 7.07129 4.10742 6.75195L4.10449 6.74609L3.4248 6.74902L3.42188 6.75195C3.44531 7.46094 4.03711 7.88281 4.81348 7.93262V8.41895ZM4.20703 4.95312V4.94727C4.20703 4.69531 4.41504 4.47559 4.81348 4.42871V5.48633C4.37988 5.37207 4.20703 5.19922 4.20703 4.95312ZM5.81836 6.80469V6.81055C5.81836 7.10059 5.61328 7.30859 5.15625 7.34668V6.24219C5.65723 6.36816 5.81836 6.52637 5.81836 6.80469Z"/></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 5H23V18.2H1V5ZM3.2 16V7.2H20.8V16H3.2Z" fill="#4C5664"/>
+<path d="M6.29443 14.2608H6.67148V13.7258C7.52871 13.6646 8.17645 13.207 8.17645 12.4142V12.4078C8.17645 11.7117 7.7124 11.3636 6.85194 11.1638L6.67148 11.1219V9.87153C7.05819 9.92632 7.32568 10.1551 7.36757 10.5322L7.37079 10.5386L8.11845 10.5354V10.5322C8.08945 9.79419 7.50937 9.29145 6.67148 9.22377V8.68237H6.29443V9.22377C5.45332 9.28178 4.85068 9.76196 4.85068 10.4999V10.5064C4.85068 11.1767 5.30185 11.5505 6.13007 11.7407L6.29443 11.7793V13.0813C5.81103 13.0297 5.57256 12.7784 5.51777 12.4271L5.51454 12.4206L4.76688 12.4239L4.76367 12.4271C4.78944 13.207 5.44042 13.671 6.29443 13.7258V14.2608ZM5.62734 10.4484V10.4419C5.62734 10.1648 5.85615 9.9231 6.29443 9.87153V11.0349C5.81747 10.9092 5.62734 10.7191 5.62734 10.4484ZM7.3998 12.4851V12.4916C7.3998 12.8106 7.17421 13.0394 6.67148 13.0813V11.8664C7.22256 12.0049 7.3998 12.179 7.3998 12.4851Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/CurrencyInputWidget/index.ts b/app/client/src/widgets/CurrencyInputWidget/index.ts
index da32522a39..dbb54436f0 100644
--- a/app/client/src/widgets/CurrencyInputWidget/index.ts
+++ b/app/client/src/widgets/CurrencyInputWidget/index.ts
@@ -3,10 +3,10 @@ import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
 import { ResponsiveBehavior } from "utils/autoLayout/constants";
 import { DynamicHeight } from "utils/WidgetFeatures";
 import { CONFIG as BaseConfig } from "widgets/BaseInputWidget";
-
 import { getDefaultCurrency } from "./component/CurrencyCodeDropdown";
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   features: {
@@ -19,6 +19,7 @@ export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Currency Input",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.INPUTS],
   needsMeta: true,
   searchTags: ["amount", "total"],
   defaults: {
diff --git a/app/client/src/widgets/DatePickerWidget2/icon.svg b/app/client/src/widgets/DatePickerWidget2/icon.svg
index 34c6eb2658..5ed7be4cb4 100644
--- a/app/client/src/widgets/DatePickerWidget2/icon.svg
+++ b/app/client/src/widgets/DatePickerWidget2/icon.svg
@@ -1 +1,12 @@
-<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path clip-rule="evenodd" d="m2.66675 5.33335h7.99995 10.6667 2.6667 5.3333v24.00005h-26.66665zm2.66666 21.33335v-13.3333-2.6667-2.66668h21.33329v2.66668 2.6667 13.3333z" fill-rule="evenodd"/><path d="m8.00008 2.66669v2.66666h2.66662v-2.66666z"/><path d="m21.3334 2.66669v2.66666h2.6667v-2.66666z"/><path d="m5.33341 13.3334h21.33329v-2.6667h-21.33329z"/><path d="m9.33342 18.6667v-2.6667h2.66668v2.6667z"/><path d="m9.33342 24v-2.6666h2.66668v2.6666z"/><path d="m14.6667 18.6667v-2.6667h2.6667v2.6667z"/><path d="m14.6667 24v-2.6666h2.6667v2.6666z"/><path d="m20.0001 18.6667v-2.6667h2.6666v2.6667z"/><path d="m20.0001 24v-2.6666h2.6666v2.6666z"/></g></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 3.20001H7.59996H16.4H18.6H23V23.0001H1V3.20001ZM3.2 20.8V9.80006V7.60003V5.40002H20.8V7.60003V9.80006V20.8H3.2Z" fill="#4C5664"/>
+<path d="M5.39978 1V3.2H7.59974V1H5.39978Z" fill="#4C5664"/>
+<path d="M16.4003 1V3.2H18.6003V1H16.4003Z" fill="#4C5664"/>
+<path d="M3.20032 9.80003H20.8003V7.60001H3.20032V9.80003Z" fill="#4C5664"/>
+<path d="M6.50024 14.2V12H8.70026V14.2H6.50024Z" fill="#4C5664"/>
+<path d="M6.50024 18.6V16.4H8.70026V18.6H6.50024Z" fill="#4C5664"/>
+<path d="M10.9 14.2V12H13.1001V14.2H10.9Z" fill="#4C5664"/>
+<path d="M10.9 18.6V16.4H13.1001V18.6H10.9Z" fill="#4C5664"/>
+<path d="M15.2997 14.2V12H17.4996V14.2H15.2997Z" fill="#4C5664"/>
+<path d="M15.2997 18.6V16.4H17.4996V18.6H15.2997Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/DatePickerWidget2/index.ts b/app/client/src/widgets/DatePickerWidget2/index.ts
index 3d09c11aa6..2d6df97373 100644
--- a/app/client/src/widgets/DatePickerWidget2/index.ts
+++ b/app/client/src/widgets/DatePickerWidget2/index.ts
@@ -4,10 +4,10 @@ import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
 import moment from "moment";
 import { ResponsiveBehavior } from "utils/autoLayout/constants";
 import { DynamicHeight } from "utils/WidgetFeatures";
-
 import { TimePrecision } from "./constants";
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   features: {
@@ -20,6 +20,7 @@ export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "DatePicker",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.INPUTS],
   needsMeta: true,
   searchTags: ["calendar"],
   defaults: {
diff --git a/app/client/src/widgets/DividerWidget/icon.svg b/app/client/src/widgets/DividerWidget/icon.svg
index 50ead98217..01a001920d 100644
--- a/app/client/src/widgets/DividerWidget/icon.svg
+++ b/app/client/src/widgets/DividerWidget/icon.svg
@@ -1 +1,3 @@
-<svg width="20" height="4" viewBox="0 0 20 4" fill="#4c5664" xmlns="http://www.w3.org/2000/svg"><rect width="20" height="3"/></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 10.7778H23V13.2222H1V10.7778Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/DividerWidget/index.ts b/app/client/src/widgets/DividerWidget/index.ts
index fab597e67b..0c9e5fdc75 100644
--- a/app/client/src/widgets/DividerWidget/index.ts
+++ b/app/client/src/widgets/DividerWidget/index.ts
@@ -1,14 +1,15 @@
 import { Colors } from "constants/Colors";
 import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
 import { ResponsiveBehavior } from "utils/autoLayout/constants";
-
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Divider",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.LAYOUT],
   searchTags: ["line"],
   defaults: {
     rows: 4,
diff --git a/app/client/src/widgets/DocumentViewerWidget/icon.svg b/app/client/src/widgets/DocumentViewerWidget/icon.svg
index 3e55ae9a89..c653707541 100644
--- a/app/client/src/widgets/DocumentViewerWidget/icon.svg
+++ b/app/client/src/widgets/DocumentViewerWidget/icon.svg
@@ -1 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="22" height="27" fill="#4c5664" viewBox="0 0 22 27"><path d="M4.66675 16.2654H5.69897V14.7103H6.70044C7.7395 14.7103 8.43335 14.0403 8.43335 13.0252V13.0184C8.43335 12.0032 7.7395 11.3333 6.70044 11.3333H4.66675V16.2654ZM6.44751 12.1502C7.03882 12.1502 7.38745 12.4612 7.38745 13.0218V13.0286C7.38745 13.5892 7.03882 13.9036 6.44751 13.9036H5.69897V12.1502H6.44751Z"/><path d="M9.16201 16.2654H11.1034C12.58 16.2654 13.4174 15.3631 13.4174 13.7703V13.7635C13.4174 12.2186 12.5697 11.3333 11.1034 11.3333H9.16201V16.2654ZM10.1942 15.4144V12.1844H10.9394C11.8349 12.1844 12.3646 12.7654 12.3646 13.7806V13.7874C12.3646 14.8401 11.8519 15.4144 10.9394 15.4144H10.1942Z"/><path d="M14.1768 16.2654H15.209V14.324H17.2154V13.5071H15.209V12.1844H17.4068V11.3333H14.1768V16.2654Z"/><path fill-rule="evenodd" d="M0 26.6667H21.3333V0H4.80651L0 4.83331V26.6667ZM18.6667 24H2.66667V6.33331L6.16675 2.66667H18.6667V24Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.85034 14.4189H7.70192V13.1359H8.52813C9.38536 13.1359 9.95778 12.5832 9.95778 11.7457V11.7401C9.95778 10.9026 9.38536 10.3499 8.52813 10.3499H6.85034V14.4189ZM8.31947 11.0239C8.8073 11.0239 9.09492 11.2804 9.09492 11.7429V11.7485C9.09492 12.211 8.8073 12.4704 8.31947 12.4704H7.70192V11.0239H8.31947Z" fill="#4C5664"/>
+<path d="M10.5588 14.4189H12.1605C13.3787 14.4189 14.0695 13.6745 14.0695 12.3604V12.3548C14.0695 11.0803 13.3702 10.3499 12.1605 10.3499H10.5588V14.4189ZM11.4104 13.7168V11.0521H12.0252C12.764 11.0521 13.201 11.5314 13.201 12.3689V12.3745C13.201 13.243 12.778 13.7168 12.0252 13.7168H11.4104Z" fill="#4C5664"/>
+<path d="M14.6958 14.4189H15.5474V12.8172H17.2026V12.1433H15.5474V11.0521H17.3605V10.3499H14.6958V14.4189Z" fill="#4C5664"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 23H20.6V1H6.96537L3 4.98748V23ZM18.4 20.8H5.2V6.22497L8.08756 3.2H18.4V20.8Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/DocumentViewerWidget/index.ts b/app/client/src/widgets/DocumentViewerWidget/index.ts
index 12453f71fe..c59e5cb9d0 100644
--- a/app/client/src/widgets/DocumentViewerWidget/index.ts
+++ b/app/client/src/widgets/DocumentViewerWidget/index.ts
@@ -2,6 +2,7 @@ import { ResponsiveBehavior } from "utils/autoLayout/constants";
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
 import { isAirgapped } from "@appsmith/utils/airgapHelpers";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 const isAirgappedInstance = isAirgapped();
 
@@ -9,6 +10,7 @@ export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Document Viewer", // The display name which will be made in uppercase and show in the widgets panel ( can have spaces )
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.MEDIA],
   needsMeta: false, // Defines if this widget adds any meta properties
   isCanvas: false, // Defines if this widget has a canvas within in which we can drop other widgets
   searchTags: ["pdf"],
diff --git a/app/client/src/widgets/FilePickerWidgetV2/icon.svg b/app/client/src/widgets/FilePickerWidgetV2/icon.svg
index efa2c15d91..4c70beb61c 100644
--- a/app/client/src/widgets/FilePickerWidgetV2/icon.svg
+++ b/app/client/src/widgets/FilePickerWidgetV2/icon.svg
@@ -1 +1,3 @@
-<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m24.7267 26.2857h-3.7402-3.1173v-7.4857h2.4942l-4.3636-5.4857-4.3636 5.4857h2.4927v7.4857h-3.1165-3.74023c-2.75408 0-4.98701-2.4563-4.98701-5.4858 0-2.5618 1.60457-4.6971 3.7627-5.2992.23937-5.4473 4.31754-9.78647 9.32824-9.78647 4.9546 0 8.999 4.24183 9.3194 9.60407 2.7965-.0219 5.0182 2.4686 5.0182 5.4816 0 3.0295-2.2329 5.4858-4.987 5.4858z" fill="#4c5664" fill-rule="evenodd"/></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 20.5001H16.0001H13.4997V14.4959H15.5003L12.0003 10.0959L8.50032 14.4959H10.4997V20.5001H7.99998H5C2.791 20.5001 1 18.5299 1 16.1C1 14.0452 2.287 12.3325 4.018 11.8496C4.21 7.48038 7.48103 4 11.5 4C15.474 4 18.718 7.40231 18.975 11.7033C21.218 11.6857 23 13.6833 23 16.1C23 18.5299 21.209 20.5001 19 20.5001Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/FilePickerWidgetV2/index.ts b/app/client/src/widgets/FilePickerWidgetV2/index.ts
index b2c069bdf7..2af2a05718 100644
--- a/app/client/src/widgets/FilePickerWidgetV2/index.ts
+++ b/app/client/src/widgets/FilePickerWidgetV2/index.ts
@@ -1,14 +1,15 @@
 import { BUTTON_MIN_WIDTH } from "constants/minWidthConstants";
 import { ResponsiveBehavior } from "utils/autoLayout/constants";
-
 import FileDataTypes from "./constants";
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "FilePicker",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.INPUTS],
   needsMeta: true,
   searchTags: ["upload"],
   defaults: {
diff --git a/app/client/src/widgets/FormWidget/icon.svg b/app/client/src/widgets/FormWidget/icon.svg
index f531012a99..3be596da65 100644
--- a/app/client/src/widgets/FormWidget/icon.svg
+++ b/app/client/src/widgets/FormWidget/icon.svg
@@ -1 +1,7 @@
-<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path clip-rule="evenodd" d="m5.33325 2.66669v26.66671h21.33335v-26.66671zm2.66667 24.00001v-21.33335h15.99998v21.33335z" fill-rule="evenodd"/><path d="m10.6666 10.6667v-2.66668h8v2.66668z"/><path d="m10.6666 14.6667v-2.6667h9.3333v2.6667z"/><path d="m10.6666 18.6667v-2.6667h8v2.6667z"/><path d="m15.9999 24.6667v-3.3333h5.3334v3.3333z"/></g></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0.999939V22.9999H20.6V0.999939H3ZM5.2 20.7999V3.19993H18.4V20.7999H5.2Z" fill="#4C5664"/>
+<path d="M7.39978 7.59997V5.39996H13.9998V7.59997H7.39978Z" fill="#4C5664"/>
+<path d="M7.39978 10.8999V8.69986H15.0997V10.8999H7.39978Z" fill="#4C5664"/>
+<path d="M7.39978 14.1999V11.9998H13.9998V14.1999H7.39978Z" fill="#4C5664"/>
+<path d="M11.8003 19.1499V16.4H16.2003V19.1499H11.8003Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/FormWidget/index.ts b/app/client/src/widgets/FormWidget/index.ts
index b3da849112..92899aa828 100644
--- a/app/client/src/widgets/FormWidget/index.ts
+++ b/app/client/src/widgets/FormWidget/index.ts
@@ -1,7 +1,7 @@
 import { ButtonVariantTypes, RecaptchaTypes } from "components/constants";
 import { Colors } from "constants/Colors";
 import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
-import { GridDefaults } from "constants/WidgetConstants";
+import { GridDefaults, WIDGET_TAGS } from "constants/WidgetConstants";
 import get from "lodash/get";
 import type { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer";
 import type { FlexLayer } from "utils/autoLayout/autoLayoutTypes";
@@ -22,6 +22,7 @@ export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Form",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.LAYOUT],
   needsMeta: true,
   isCanvas: true,
   features: {
diff --git a/app/client/src/widgets/IconButtonWidget/icon.svg b/app/client/src/widgets/IconButtonWidget/icon.svg
index c858edda82..5a7a953e1a 100644
--- a/app/client/src/widgets/IconButtonWidget/icon.svg
+++ b/app/client/src/widgets/IconButtonWidget/icon.svg
@@ -1 +1,3 @@
-<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m15.9999 30.6666c8.1001 0 14.6667-6.5665 14.6667-14.6666 0-8.10019-6.5666-14.66669-14.6667-14.66669-8.10016 0-14.66665 6.5665-14.66665 14.66669 0 8.1001 6.56649 14.6666 14.66665 14.6666zm1.3334-16v-5.99995h-2.6667v5.99995h-6.66668v2.6667h6.66668v6.6667h2.6667v-6.6667h6v-2.6667z" fill="#4c5664" fill-rule="evenodd"/></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 23.0001C18.0751 23.0001 23 18.0752 23 12.0001C23 5.92494 18.0751 1.00006 12 1.00006C5.92487 1.00006 1 5.92494 1 12.0001C1 18.0752 5.92487 23.0001 12 23.0001ZM13.0001 11V6.50007H11V11H6.00001V13.0001H11V18.0001H13.0001V13.0001H17.5001V11H13.0001Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/IconButtonWidget/index.ts b/app/client/src/widgets/IconButtonWidget/index.ts
index 7477c33660..b4fdda362e 100644
--- a/app/client/src/widgets/IconButtonWidget/index.ts
+++ b/app/client/src/widgets/IconButtonWidget/index.ts
@@ -4,11 +4,13 @@ import { ICON_BUTTON_MIN_WIDTH } from "constants/minWidthConstants";
 import { ResponsiveBehavior } from "utils/autoLayout/constants";
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Icon button",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.BUTTONS],
   searchTags: ["click", "submit"],
   defaults: {
     iconName: IconNames.PLUS,
diff --git a/app/client/src/widgets/IframeWidget/icon.svg b/app/client/src/widgets/IframeWidget/icon.svg
index 191660a4c8..2fa18b72d0 100644
--- a/app/client/src/widgets/IframeWidget/icon.svg
+++ b/app/client/src/widgets/IframeWidget/icon.svg
@@ -1 +1,3 @@
-<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m28.7999 3.20001v7.99999h-3.2v-4.79999h-19.19995v4.79999h-3.2v-7.99999zm-25.59995 25.59999v-8h3.2v4.8h19.19995v-4.8h3.2v8zm18.44255-16.7948.8447-.8278 3.8942 3.8942.8193.8361-.8193.8363-4.3842 4.3842-.8361-.8363-.8362-.8364 3.5478-3.5477-3.058-3.0583zm-11.4891 9.123.8447-.8279.8278-.8443-3.05808-3.0582 3.54778-3.5478-.8362-.8364-.8361-.8363-4.38417 4.3842-.81932.8363.81932.8361zm10.6821-12.51198-2.1496-.98653-6.9057 15.04761 2.1496.9866z" fill="#4c5664" fill-rule="evenodd"/></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23 1.00006V7.87506H20.25V3.75007H3.75001V7.87506H1V1.00006H23ZM1 23.0001V16.1251H3.75001V20.2501H20.25V16.1251H23V23.0001H1ZM16.8491 8.56704L17.575 7.85564L20.9216 11.2022L21.6257 11.9208L20.9216 12.6394L17.1539 16.4071L16.4354 15.6884L15.7168 14.9696L18.7657 11.9208L16.1377 9.29261L16.8491 8.56704ZM6.97563 16.4071L7.70155 15.6957L8.41294 14.9701L5.7849 12.3419L8.83378 9.29304L8.11517 8.57425L7.39664 7.85556L3.62899 11.6232L2.92488 12.3419L3.62899 13.0605L6.97563 16.4071ZM16.1556 5.65463L14.3083 4.80682L8.37367 17.7384L10.221 18.5863L16.1556 5.65463Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/IframeWidget/index.ts b/app/client/src/widgets/IframeWidget/index.ts
index d952a90287..1d06e97e58 100644
--- a/app/client/src/widgets/IframeWidget/index.ts
+++ b/app/client/src/widgets/IframeWidget/index.ts
@@ -2,6 +2,7 @@ import { ResponsiveBehavior } from "utils/autoLayout/constants";
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
 import { isAirgapped } from "@appsmith/utils/airgapHelpers";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 const isAirgappedInstance = isAirgapped();
 
@@ -13,6 +14,7 @@ export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Iframe",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.DISPLAY],
   needsMeta: true,
   searchTags: ["embed"],
   defaults: {
diff --git a/app/client/src/widgets/ImageWidget/icon.svg b/app/client/src/widgets/ImageWidget/icon.svg
index d31a19152f..326ddedaff 100644
--- a/app/client/src/widgets/ImageWidget/icon.svg
+++ b/app/client/src/widgets/ImageWidget/icon.svg
@@ -1 +1,5 @@
-<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path clip-rule="evenodd" d="m2.66675 2.66669h26.66665v26.66671h-26.66665zm2.66666 24.00001v-21.33335h21.33329v21.33335z" fill-rule="evenodd"/><path d="m13.3334 18.6667-7.99999 5.3333v3.3334h21.33329v-6l-5.3333-6.6667-5.3333 6.6667z"/><path d="m13.3334 10.6667c0 1.4727-1.1939 2.6667-2.6667 2.6667-1.47271 0-2.66662-1.194-2.66662-2.6667 0-1.47277 1.19391-2.66668 2.66662-2.66668 1.4728 0 2.6667 1.19391 2.6667 2.66668z"/></g></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 1H23V23H1V1ZM3.2 20.8V3.2H20.8V20.8H3.2Z" fill="#4C5664"/>
+<path d="M9.80031 14.2L3.20032 18.6V21.35H20.8003V16.4L16.4003 10.9L12.0003 16.4L9.80031 14.2Z" fill="#4C5664"/>
+<path d="M9.79977 7.59999C9.79977 8.81497 8.8148 9.80002 7.59974 9.80002C6.38476 9.80002 5.39978 8.81497 5.39978 7.59999C5.39978 6.38496 6.38476 5.39998 7.59974 5.39998C8.8148 5.39998 9.79977 6.38496 9.79977 7.59999Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/ImageWidget/index.ts b/app/client/src/widgets/ImageWidget/index.ts
index 6c9654c591..50839a7fab 100644
--- a/app/client/src/widgets/ImageWidget/index.ts
+++ b/app/client/src/widgets/ImageWidget/index.ts
@@ -2,11 +2,13 @@ import { ASSETS_CDN_URL } from "constants/ThirdPartyConstants";
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
 import { getAssetUrl } from "@appsmith/utils/airgapHelpers";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Image",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.MEDIA],
   defaults: {
     defaultImage: getAssetUrl(`${ASSETS_CDN_URL}/widgets/default.png`),
     imageShape: "RECTANGLE",
diff --git a/app/client/src/widgets/InputWidgetV2/icon.svg b/app/client/src/widgets/InputWidgetV2/icon.svg
index 0a1b6d938f..d0b51d3c4c 100644
--- a/app/client/src/widgets/InputWidgetV2/icon.svg
+++ b/app/client/src/widgets/InputWidgetV2/icon.svg
@@ -1 +1,4 @@
-<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path clip-rule="evenodd" d="m2.66675 8h26.66665v16h-26.66665zm2.66666 13.3333v-10.6666h21.33329v10.6666z" fill-rule="evenodd"/><path d="m6.66675 20v-8h1.33333v8z"/></g></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 5H23V18.2H1V5ZM3.2 16V7.20003H20.8V16H3.2Z" fill="#4C5664"/>
+<path d="M4.30005 14.9V8.3H5.40005V14.9H4.30005Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/InputWidgetV2/index.ts b/app/client/src/widgets/InputWidgetV2/index.ts
index d67f93f220..a6280f4e69 100644
--- a/app/client/src/widgets/InputWidgetV2/index.ts
+++ b/app/client/src/widgets/InputWidgetV2/index.ts
@@ -7,6 +7,7 @@ import type { BaseInputWidgetProps } from "widgets/BaseInputWidget/widget";
 
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   features: {
@@ -19,6 +20,7 @@ export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Input",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.SUGGESTED_WIDGETS, WIDGET_TAGS.INPUTS],
   needsMeta: true,
   searchTags: ["form", "text input", "number", "textarea"],
   defaults: {
diff --git a/app/client/src/widgets/JSONFormWidget/icon.svg b/app/client/src/widgets/JSONFormWidget/icon.svg
index 31b0490f7c..0f8c2b8e39 100644
--- a/app/client/src/widgets/JSONFormWidget/icon.svg
+++ b/app/client/src/widgets/JSONFormWidget/icon.svg
@@ -1 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32"><path fill="#4c5664" fill-rule="evenodd" d="M5.3335 2.6665V29.3332H26.6668V2.6665H5.3335ZM8.00016 26.6665V5.33317H24.0002V26.6665H8.00016Z" clip-rule="evenodd"/><path fill="#4c5664" d="M13 18.04V15H20.5V18.04H13Z"/><path fill="#4c5664" d="M17 23V20.2H22V23H17Z"/><path fill="#4c5664" d="M10 11V8H18V11H10Z"/><path stroke="#4C5664" stroke-width=".7" d="M13 13V10H20V13H13Z"/></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 1V23H20.6V1H3ZM5.19999 20.8V3.2H18.4V20.8H5.19999Z" fill="#4C5664"/>
+<path d="M9.32446 13.6831V11.1751H15.512V13.6831H9.32446Z" fill="#4C5664"/>
+<path d="M12.6245 17.7751V15.4651H16.7495V17.7751H12.6245Z" fill="#4C5664"/>
+<path d="M6.84949 7.87513V5.40013H13.4495V7.87513H6.84949Z" fill="#4C5664"/>
+<path d="M9.32446 9.52512V7.05013H15.0995V9.52512H9.32446Z" stroke="#4C5664" stroke-width="0.7"/>
+</svg>
diff --git a/app/client/src/widgets/JSONFormWidget/index.ts b/app/client/src/widgets/JSONFormWidget/index.ts
index 6a00d0a192..16f784650f 100644
--- a/app/client/src/widgets/JSONFormWidget/index.ts
+++ b/app/client/src/widgets/JSONFormWidget/index.ts
@@ -8,6 +8,7 @@ import { BlueprintOperationTypes } from "widgets/constants";
 import IconSVG from "./icon.svg";
 import type { JSONFormWidgetProps } from "./widget";
 import Widget from "./widget";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 const SUBMIT_BUTTON_DEFAULT_STYLES = {
   buttonVariant: ButtonVariantTypes.PRIMARY,
@@ -28,6 +29,7 @@ export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "JSON Form",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.SUGGESTED_WIDGETS, WIDGET_TAGS.LAYOUT],
   needsMeta: true,
   defaults: {
     responsiveBehavior: ResponsiveBehavior.Fill,
diff --git a/app/client/src/widgets/ListWidgetV2/icon.svg b/app/client/src/widgets/ListWidgetV2/icon.svg
index 30a7889027..dfc7c7458f 100644
--- a/app/client/src/widgets/ListWidgetV2/icon.svg
+++ b/app/client/src/widgets/ListWidgetV2/icon.svg
@@ -1 +1,3 @@
-<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m12.0001 5.33331h-5.33335v5.33329h5.33335zm13.3333 1.33334h-10.6667v2.66666h10.6667zm-10.6667 7.99995h10.6667v2.6667h-10.6667zm10.6667 8h-10.6667v2.6667h10.6667zm-18.66665-9.3333h5.33335v5.3333h-5.33335zm5.33335 8h-5.33335v5.3333h5.33335z" fill="#4c5664" fill-rule="evenodd"/></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.50003 1.00006H2V6.50003H7.50003V1.00006ZM21.25 2.37507H10.25V5.12507H21.25V2.37507ZM10.25 10.625H21.25V13.3751H10.25V10.625ZM21.25 18.8751H10.25V21.6251H21.25V18.8751ZM2 9.25007H7.50003V14.75H2V9.25007ZM7.50003 17.5001H2V23.0001H7.50003V17.5001Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/ListWidgetV2/index.ts b/app/client/src/widgets/ListWidgetV2/index.ts
index 5cf58099f0..fdd468cf07 100644
--- a/app/client/src/widgets/ListWidgetV2/index.ts
+++ b/app/client/src/widgets/ListWidgetV2/index.ts
@@ -12,7 +12,7 @@ import {
 } from "./widget/helper";
 import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
 import { getWidgetBluePrintUpdates } from "utils/WidgetBlueprintUtils";
-import { GridDefaults } from "constants/WidgetConstants";
+import { GridDefaults, WIDGET_TAGS } from "constants/WidgetConstants";
 import type { FlexLayer } from "utils/autoLayout/autoLayoutTypes";
 import type { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer";
 import {
@@ -48,6 +48,7 @@ export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "List",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.SUGGESTED_WIDGETS, WIDGET_TAGS.DISPLAY],
   needsMeta: true,
   isCanvas: true,
   defaults: {
diff --git a/app/client/src/widgets/MapChartWidget/icon.svg b/app/client/src/widgets/MapChartWidget/icon.svg
old mode 100755
new mode 100644
index 3dd1187871..9a46c04656
--- a/app/client/src/widgets/MapChartWidget/icon.svg
+++ b/app/client/src/widgets/MapChartWidget/icon.svg
@@ -1 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#4c5664" fill-rule="evenodd" d="M9.50001 11.8034V18.5L14.5 21V11.55L12 15C11.3917 14.2179 10.4119 12.9626 9.50001 11.8034Z" clip-rule="evenodd"/><path fill="#4c5664" fill-rule="evenodd" d="M15.5 10.17V21L20.5 18V6L17 8.1L15.5 10.17Z" clip-rule="evenodd"/><path fill="#4c5664" d="M3.5 9V21L8.5 18V10.5374C8.5 10.5374 7.83441 9.63336 7.5 9C7.12002 8.28033 6.72229 7.06662 6.72229 7.06662L3.5 9Z"/><path fill="#4c5664" fill-rule="evenodd" d="M9.1559 9.87818C8.30481 8.73014 7.6 7.67255 7.6 6.35454C7.6 3.95998 9.56392 2.01104 11.9821 2H12.0032C14.431 2 16.4065 3.95362 16.4065 6.35454C16.4065 7.67255 15.7017 8.73038 14.8506 9.87818C14.8506 9.87818 12.1182 13.3703 12.0069 13.5208L9.1559 9.87818Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.94727 12.3513V20.1053L14.7367 23V12.0579L11.842 16.0527C11.1376 15.1471 10.0031 13.6936 8.94727 12.3513Z" fill="#4C5664"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.8945 10.46V23L21.684 19.5263V5.63161L17.6314 8.06318L15.8945 10.46Z" fill="#4C5664"/>
+<path d="M2 9.10533V23L7.78946 19.5264V10.8855C7.78946 10.8855 7.01878 9.83869 6.63157 9.10533C6.1916 8.27203 5.73107 6.86668 5.73107 6.86668L2 9.10533Z" fill="#4C5664"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.54864 10.1221C7.56316 8.79278 6.74707 7.56821 6.74707 6.04209C6.74707 3.26945 9.02108 1.01278 11.8211 1H11.8455C14.6566 1 16.9441 3.26208 16.9441 6.04209C16.9441 7.56821 16.128 8.79306 15.1425 10.1221C15.1425 10.1221 11.9787 14.1656 11.8498 14.3399L8.54864 10.1221Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/MapChartWidget/index.ts b/app/client/src/widgets/MapChartWidget/index.ts
index 5ca523df7b..608afba08c 100644
--- a/app/client/src/widgets/MapChartWidget/index.ts
+++ b/app/client/src/widgets/MapChartWidget/index.ts
@@ -1,14 +1,15 @@
 import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
 import { ResponsiveBehavior } from "utils/autoLayout/constants";
-
 import { dataSetForWorld, MapTypes } from "./constants";
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Map Chart", // The display name which will be made in uppercase and show in the widgets panel ( can have spaces )
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.DISPLAY],
   needsMeta: true, // Defines if this widget adds any meta properties
   isCanvas: false, // Defines if this widget has a canvas within in which we can drop other widgets
   searchTags: ["graph", "visuals", "visualisations"],
diff --git a/app/client/src/widgets/MapWidget/icon.svg b/app/client/src/widgets/MapWidget/icon.svg
index fd3273cdd8..ffb0542f32 100644
--- a/app/client/src/widgets/MapWidget/icon.svg
+++ b/app/client/src/widgets/MapWidget/icon.svg
@@ -1 +1,4 @@
-<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path d="m16 15.6667c1.4728 0 2.6667-1.1939 2.6667-2.6667s-1.1939-2.6667-2.6667-2.6667-2.6667 1.1939-2.6667 2.6667 1.1939 2.6667 2.6667 2.6667z"/><path clip-rule="evenodd" d="m24 13c0 1.7856-.585 3.4345-1.5737 4.7656l-6.4264 8.5677-6.42616-8.5677c-.98876-1.3311-1.57374-2.98-1.57374-4.7656 0-4.41828 3.5817-8 8-8s8 3.58172 8 8zm-2.6667 0c0 1.1915-.3875 2.2847-1.0443 3.1709l-4.2891 5.7182-4.2888-5.7181c-.6569-.8862-1.0444-1.9795-1.0444-3.171 0-2.9455 2.3878-5.33333 5.3333-5.33333s5.3333 2.38783 5.3333 5.33333z" fill-rule="evenodd"/></g></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.2497 12.0001C13.7685 12.0001 14.9997 10.7689 14.9997 9.25002C14.9997 7.7312 13.7685 6.49998 12.2497 6.49998C10.7308 6.49998 9.49963 7.7312 9.49963 9.25002C9.49963 10.7689 10.7308 12.0001 12.2497 12.0001Z" fill="#4C5664"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 9.25001C20.5 11.0914 19.8967 12.7918 18.8771 14.1645L12.2499 23L5.62292 14.1645C4.60326 12.7918 4 11.0914 4 9.25001C4 4.69365 7.69363 1 12.25 1C16.8064 1 20.5 4.69365 20.5 9.25001ZM17.75 9.25001C17.75 10.4787 17.3504 11.6061 16.6731 12.52L12.2499 18.4169L7.82708 12.5201C7.14965 11.6062 6.75004 10.4787 6.75004 9.25001C6.75004 6.21246 9.21246 3.75001 12.25 3.75001C15.2876 3.75001 17.75 6.21246 17.75 9.25001Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/MapWidget/index.ts b/app/client/src/widgets/MapWidget/index.ts
index 059d323999..86b4dc2218 100644
--- a/app/client/src/widgets/MapWidget/index.ts
+++ b/app/client/src/widgets/MapWidget/index.ts
@@ -1,13 +1,14 @@
 import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
 import { ResponsiveBehavior } from "utils/autoLayout/constants";
-
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Map",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.CONTENT],
   needsMeta: true,
   defaults: {
     rows: 40,
diff --git a/app/client/src/widgets/MenuButtonWidget/icon.svg b/app/client/src/widgets/MenuButtonWidget/icon.svg
index dcf2c1c012..96b9ef06d9 100644
--- a/app/client/src/widgets/MenuButtonWidget/icon.svg
+++ b/app/client/src/widgets/MenuButtonWidget/icon.svg
@@ -1 +1,5 @@
-<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path d="m18.6666 5.33331h-5.3333v5.33329h5.3333z"/><path d="m18.6666 13.3333h-5.3333v5.3333h5.3333z"/><path d="m18.6666 21.3333h-5.3333v5.3333h5.3333z"/></g></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.5 1.00006H9V6.50003H14.5V1.00006Z" fill="#4C5664"/>
+<path d="M14.5 9.25008H9V14.7501H14.5V9.25008Z" fill="#4C5664"/>
+<path d="M14.5 17.5001H9V23.0001H14.5V17.5001Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/MenuButtonWidget/index.ts b/app/client/src/widgets/MenuButtonWidget/index.ts
index 90d7400b5d..ddb6448b4f 100644
--- a/app/client/src/widgets/MenuButtonWidget/index.ts
+++ b/app/client/src/widgets/MenuButtonWidget/index.ts
@@ -2,11 +2,13 @@ import Widget from "./widget";
 import IconSVG from "./icon.svg";
 import { ButtonPlacementTypes, ButtonVariantTypes } from "components/constants";
 import { MenuItemsSource } from "./constants";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Menu button",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.BUTTONS],
   defaults: {
     label: "Open Menu",
     menuVariant: ButtonVariantTypes.PRIMARY,
diff --git a/app/client/src/widgets/ModalWidget/icon.svg b/app/client/src/widgets/ModalWidget/icon.svg
index f0cc7fcc1b..f805488be7 100644
--- a/app/client/src/widgets/ModalWidget/icon.svg
+++ b/app/client/src/widgets/ModalWidget/icon.svg
@@ -1 +1,5 @@
-<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path clip-rule="evenodd" d="m2.66675 29.3334v-26.66671h26.66665v26.66671zm2.66666-2.6667v-21.33335h21.33329v21.33335z" fill-rule="evenodd"/><path d="m23.9334 15.152-6.5997-6.59967 1.8857-1.88562 6.5996 6.59969z"/><path d="m25.8188 8.55231-6.5996 6.59969-1.8857-1.8856 6.5997-6.5997z"/></g></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 23V1H23V23H1ZM3.2 20.8V3.2H20.8V20.8H3.2Z" fill="#4C5664"/>
+<path d="M18.545 11.3004L13.1002 5.85564L14.6559 4.3L20.1006 9.74475L18.545 11.3004Z" fill="#4C5664"/>
+<path d="M20.1006 5.85563L14.6559 11.3004L13.1002 9.74476L18.545 4.3L20.1006 5.85563Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/ModalWidget/index.ts b/app/client/src/widgets/ModalWidget/index.ts
index d525eda785..b50956e413 100644
--- a/app/client/src/widgets/ModalWidget/index.ts
+++ b/app/client/src/widgets/ModalWidget/index.ts
@@ -4,11 +4,10 @@ import {
   ButtonBorderRadiusTypes,
   ButtonVariantTypes,
 } from "components/constants";
-import { GridDefaults } from "constants/WidgetConstants";
+import { GridDefaults, WIDGET_TAGS } from "constants/WidgetConstants";
 import type { WidgetProps } from "widgets/BaseWidget";
 import type { FlattenedWidgetProps } from "widgets/constants";
 import { BlueprintOperationTypes } from "widgets/constants";
-
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
 import type { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer";
@@ -27,6 +26,7 @@ export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Modal",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.LAYOUT],
   needsMeta: true,
   isCanvas: true,
   features: {
diff --git a/app/client/src/widgets/MultiSelectTreeWidget/icon.svg b/app/client/src/widgets/MultiSelectTreeWidget/icon.svg
index 6070abfb26..8f1d1bb2b5 100644
--- a/app/client/src/widgets/MultiSelectTreeWidget/icon.svg
+++ b/app/client/src/widgets/MultiSelectTreeWidget/icon.svg
@@ -1 +1,8 @@
-<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path d="m2 2h20v8h-20z"/><path d="m9.99985 12.05h6.99995v1.5h-6.99995z"/><path d="m9.99985 16.75h5.99995v1.5h-5.99995z"/><path d="m7.99985 12.5h-3l1.5 1.5z"/><path d="m8 17h-3l1.5 1.5z"/><path clip-rule="evenodd" d="m2 8.5v13.5h18v-13.5zm1.5 12v-10.5h15v10.5z" fill-rule="evenodd"/></g></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1H23V9.8H1V1Z" fill="#4C5664"/>
+<path d="M9.80005 12.0551H17.5V13.7051H9.80005V12.0551Z" fill="#4C5664"/>
+<path d="M9.80005 17.225H16.4V18.875H9.80005V17.225Z" fill="#4C5664"/>
+<path d="M7.60005 12.55H4.30005L5.95005 14.2L7.60005 12.55Z" fill="#4C5664"/>
+<path d="M7.60005 17.5H4.30005L5.95005 19.15L7.60005 17.5Z" fill="#4C5664"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 8.14999V23H20.8V8.14999H1ZM2.65 21.35V9.79999H19.15V21.35H2.65Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/MultiSelectTreeWidget/index.ts b/app/client/src/widgets/MultiSelectTreeWidget/index.ts
index b37a9e116d..c113f9aa4a 100644
--- a/app/client/src/widgets/MultiSelectTreeWidget/index.ts
+++ b/app/client/src/widgets/MultiSelectTreeWidget/index.ts
@@ -3,9 +3,9 @@ import { LabelPosition } from "components/constants";
 import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
 import { ResponsiveBehavior } from "utils/autoLayout/constants";
 import { DynamicHeight } from "utils/WidgetFeatures";
-
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   features: {
@@ -18,6 +18,7 @@ export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Multi TreeSelect",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.SELECT],
   needsMeta: true,
   searchTags: ["dropdown", "multiselecttree"],
   defaults: {
diff --git a/app/client/src/widgets/MultiSelectWidgetV2/icon.svg b/app/client/src/widgets/MultiSelectWidgetV2/icon.svg
index 1e067f7c8a..616b798288 100644
--- a/app/client/src/widgets/MultiSelectWidgetV2/icon.svg
+++ b/app/client/src/widgets/MultiSelectWidgetV2/icon.svg
@@ -1 +1,10 @@
-<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m2.75 2.75h18.5v6.5h-18.5z" stroke="#4C5664" stroke-width="1.5"/><g fill="#4c5664"><path d="m9.99985 12.05h6.99995v1.5h-6.99995z"/><path d="m9.99985 16.75h5.99995v1.5h-5.99995z"/><path d="m7.99985 12.5h-3l1.5 1.5z"/><path d="m8 17h-3l1.5 1.5z"/><path clip-rule="evenodd" d="m2 8.5v13.5h18v-13.5zm1.5 12v-10.5h15v10.5z" fill-rule="evenodd"/><path d="m14 5.25h5v1.5h-5z"/><path clip-rule="evenodd" d="m7 5.25h-2v1.5h2zm1 1.5h5v-1.5h-5z" fill-rule="evenodd"/></g></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.85718 1H23V8.42857H1.85718V1Z" stroke="#4C5664" stroke-width="1.5"/>
+<path d="M10.1428 11.6286H18.1428V13.3429H10.1428V11.6286Z" fill="#4C5664"/>
+<path d="M10.1428 17H16.9999V18.7143H10.1428V17Z" fill="#4C5664"/>
+<path d="M7.85704 12.1429H4.42847L6.14275 13.8571L7.85704 12.1429Z" fill="#4C5664"/>
+<path d="M7.85704 17.2857H4.42847L6.14275 19L7.85704 17.2857Z" fill="#4C5664"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 7.57143V23H21.5714V7.57143H1ZM2.71429 21.2857V9.28571H19.8571V21.2857H2.71429Z" fill="#4C5664"/>
+<path d="M14.7144 3.85715H20.4286V5.57143H14.7144V3.85715Z" fill="#4C5664"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.71418 3.85715H4.42847V5.57143H6.71418V3.85715ZM7.85704 5.57143H13.5713V3.85715H7.85704V5.57143Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/MultiSelectWidgetV2/index.ts b/app/client/src/widgets/MultiSelectWidgetV2/index.ts
index a4ee15ef09..36be5e3db7 100644
--- a/app/client/src/widgets/MultiSelectWidgetV2/index.ts
+++ b/app/client/src/widgets/MultiSelectWidgetV2/index.ts
@@ -3,9 +3,9 @@ import { LabelPosition } from "components/constants";
 import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
 import { ResponsiveBehavior } from "utils/autoLayout/constants";
 import { DynamicHeight } from "utils/WidgetFeatures";
-
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   features: {
@@ -18,6 +18,7 @@ export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "MultiSelect",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.SELECT],
   needsMeta: true,
   searchTags: ["dropdown", "tags"],
   defaults: {
diff --git a/app/client/src/widgets/NumberSliderWidget/icon.svg b/app/client/src/widgets/NumberSliderWidget/icon.svg
index b9152342c6..16f934c8b2 100644
--- a/app/client/src/widgets/NumberSliderWidget/icon.svg
+++ b/app/client/src/widgets/NumberSliderWidget/icon.svg
@@ -1,6 +1,6 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M26.1172 11.7026H26.0106L26.0174 11.809C26.0515 12.3404 26.2604 12.7763 26.6448 13.1091L26.6452 13.1093C27.029 13.4388 27.5124 13.6006 28.0874 13.6006C28.7159 13.6006 29.2352 13.409 29.6357 13.0199L29.636 13.0196C30.0368 12.6274 30.2348 12.117 30.2348 11.4979C30.2348 10.899 30.0512 10.4017 29.6787 10.0149C29.3058 9.62763 28.8238 9.43582 28.2418 9.43582C27.7528 9.43582 27.3538 9.56707 27.0557 9.83747L27.1959 8.25464H29.8017H29.9017V8.15464V7.50061V7.40061H29.8017H26.5315H26.4407L26.432 7.491L26.1111 10.8139L26.1005 10.9236H26.2106H26.8971H26.9552L26.984 10.8732C27.0939 10.6809 27.2454 10.5331 27.4402 10.4282L27.4402 10.4282L27.441 10.4277C27.636 10.3202 27.8575 10.2655 28.1077 10.2655C28.4681 10.2655 28.7521 10.3824 28.9694 10.612L28.9694 10.612L28.9702 10.6128C29.1903 10.8404 29.3036 11.139 29.3036 11.5182C29.3036 11.8975 29.1903 12.1945 28.9705 12.4192L28.9701 12.4196C28.7535 12.6437 28.4654 12.7588 28.0955 12.7588C27.7717 12.7588 27.5068 12.6688 27.2944 12.4936C27.0854 12.3164 26.9657 12.0849 26.9357 11.7924L26.9265 11.7026H26.8362H26.1172Z" fill="#4c5664" stroke="#4C5664" stroke-width="0.2"/>
-<path d="M1.76328 9.43702V9.633L1.92197 9.51799L3.3558 8.47875V13.4994V13.5994H3.4558H4.20424H4.30424V13.4994V7.49939V7.39939H4.20424H3.45995H3.42775L3.40159 7.41819L1.80492 8.5658L1.76328 8.59572V8.647V9.43702Z" fill="#4c5664" stroke="#4C5664" stroke-width="0.2"/>
-<path d="M30 18.5006H2V21.5006H30V18.5006Z" fill="#4c5664"/>
-<circle cx="12.5" cy="20.0006" r="4.5" fill="#4c5664"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.8183 8.32513H19.7359L19.7412 8.40735C19.7675 8.81797 19.9289 9.15479 20.226 9.41195L20.2263 9.4121C20.5228 9.66671 20.8964 9.79173 21.3407 9.79173C21.8263 9.79173 22.2276 9.64368 22.537 9.34302L22.5373 9.34279C22.847 9.03973 23 8.64534 23 8.16696C23 7.70418 22.8581 7.31991 22.5703 7.02103C22.2821 6.72178 21.9097 6.57357 21.46 6.57357C21.0821 6.57357 20.7738 6.67499 20.5435 6.88393L20.6518 5.66086H22.6653H22.7426V5.58359V5.07822V5.00095H22.6653H20.1384H20.0682L20.0615 5.07079L19.8136 7.63843L19.8054 7.72319H19.8904H20.4209H20.4658L20.4881 7.68425C20.573 7.53566 20.69 7.42145 20.8406 7.34039L20.8412 7.34001C20.9919 7.25694 21.163 7.21467 21.3563 7.21467C21.6348 7.21467 21.8543 7.305 22.0222 7.48242L22.0228 7.48303C22.1929 7.6589 22.2804 7.88963 22.2804 8.18264C22.2804 8.47573 22.1929 8.70523 22.023 8.87885L22.0227 8.87916C21.8554 9.05233 21.6327 9.14127 21.3469 9.14127C21.0967 9.14127 20.892 9.07172 20.7279 8.93634C20.5664 8.79942 20.4739 8.62054 20.4507 8.39452L20.4436 8.32513H20.3739H19.8183Z" fill="#4C5664" stroke="#4C5664" stroke-width="0.2"/>
+<path d="M1 6.57449V6.72593L1.12262 6.63706L2.23055 5.83403V9.71353V9.7908H2.30782H2.88615H2.96342V9.71353V5.07727V5H2.88615H2.31103H2.28615L2.26594 5.01453L1.03218 5.90129L1 5.92441V5.96404V6.57449Z" fill="#4C5664" stroke="#4C5664" stroke-width="0.2"/>
+<path d="M22.8185 13.578H1.18262V15.8961H22.8185V13.578Z" fill="#4C5664"/>
+<path d="M7.75063 18.2143C9.67103 18.2143 11.2278 16.6575 11.2278 14.7371C11.2278 12.8167 9.67103 11.2599 7.75063 11.2599C5.83023 11.2599 4.27344 12.8167 4.27344 14.7371C4.27344 16.6575 5.83023 18.2143 7.75063 18.2143Z" fill="#4C5664"/>
 </svg>
diff --git a/app/client/src/widgets/NumberSliderWidget/index.ts b/app/client/src/widgets/NumberSliderWidget/index.ts
index 2ae47fc308..141eb77dcd 100644
--- a/app/client/src/widgets/NumberSliderWidget/index.ts
+++ b/app/client/src/widgets/NumberSliderWidget/index.ts
@@ -1,9 +1,9 @@
 import { Alignment } from "@blueprintjs/core";
 import { LabelPosition } from "components/constants";
 import { ResponsiveBehavior } from "utils/autoLayout/constants";
-
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   type: Widget.getWidgetType(),
@@ -11,6 +11,7 @@ export const CONFIG = {
   needsMeta: true,
   searchTags: ["range"],
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.SLIDERS],
   defaults: {
     min: 0,
     max: 100,
diff --git a/app/client/src/widgets/PhoneInputWidget/icon.svg b/app/client/src/widgets/PhoneInputWidget/icon.svg
index ef98535fdf..082afc9dde 100644
--- a/app/client/src/widgets/PhoneInputWidget/icon.svg
+++ b/app/client/src/widgets/PhoneInputWidget/icon.svg
@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" fill="none" viewBox="0 0 20 12"><path fill="#4c5664" fill-rule="evenodd" d="M0 0H20V12H0V0ZM2 10V2H18V10H2Z" clip-rule="evenodd"/><path fill="#4c5664" d="M4.5915 5.6705C4.82608 6.08262 5.16738 6.42392 5.5795 6.6585L5.8005 6.349C5.83604 6.29923 5.88859 6.26422 5.9482 6.25058C6.00781 6.23695 6.07036 6.24563 6.124 6.275C6.47758 6.46823 6.86805 6.58444 7.26975 6.616C7.33244 6.62097 7.39096 6.64938 7.43364 6.69558C7.47631 6.74178 7.50001 6.80236 7.5 6.86525V7.98075C7.50001 8.04265 7.47706 8.10235 7.43559 8.1483C7.39412 8.19425 7.33708 8.22319 7.2755 8.2295C7.143 8.24325 7.0095 8.25 6.875 8.25C4.735 8.25 3 6.515 3 4.375C3 4.2405 3.00675 4.107 3.0205 3.9745C3.02681 3.91292 3.05575 3.85588 3.1017 3.81441C3.14765 3.77294 3.20735 3.74999 3.26925 3.75H4.38475C4.44764 3.74999 4.50822 3.77369 4.55442 3.81636C4.60062 3.85904 4.62903 3.91756 4.634 3.98025C4.66556 4.38195 4.78177 4.77242 4.975 5.126C5.00437 5.17964 5.01305 5.24219 4.99942 5.3018C4.98578 5.36141 4.95077 5.41396 4.901 5.4495L4.5915 5.6705ZM3.961 5.50625L4.436 5.167C4.3012 4.87602 4.20884 4.56721 4.16175 4.25H3.5025C3.501 4.2915 3.50025 4.33325 3.50025 4.375C3.5 6.239 5.011 7.75 6.875 7.75C6.91675 7.75 6.9585 7.74925 7 7.7475V7.08825C6.68279 7.04116 6.37398 6.9488 6.083 6.814L5.74375 7.289C5.60717 7.23593 5.4745 7.17327 5.34675 7.1015L5.33225 7.09325C4.84189 6.81418 4.43582 6.40811 4.15675 5.91775L4.1485 5.90325C4.07673 5.7755 4.01407 5.64283 3.961 5.50625Z"/></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 5H23V18.2H1V5ZM3.2 16V7.2H20.8V16H3.2Z" fill="#4C5664"/>
+<path d="M6.0507 11.2375C6.30874 11.6909 6.68417 12.0663 7.1375 12.3243L7.3806 11.9839C7.41969 11.9292 7.4775 11.8906 7.54307 11.8756C7.60864 11.8606 7.67744 11.8702 7.73645 11.9025C8.12539 12.1151 8.5549 12.2429 8.99677 12.2776C9.06573 12.2831 9.1301 12.3143 9.17705 12.3651C9.22399 12.416 9.25006 12.4826 9.25005 12.5518V13.7788C9.25006 13.8469 9.22481 13.9126 9.1792 13.9631C9.13358 14.0137 9.07084 14.0455 9.0031 14.0524C8.85735 14.0676 8.7105 14.075 8.56255 14.075C6.20855 14.075 4.30005 12.1665 4.30005 9.8125C4.30005 9.66455 4.30747 9.5177 4.3226 9.37195C4.32954 9.30421 4.36137 9.24147 4.41192 9.19585C4.46246 9.15023 4.52813 9.12499 4.59622 9.125H5.82327C5.89245 9.12499 5.95909 9.15106 6.00991 9.198C6.06073 9.24494 6.09198 9.30932 6.09745 9.37827C6.13216 9.82014 6.26 10.2497 6.47255 10.6386C6.50486 10.6976 6.5144 10.7664 6.49941 10.832C6.48441 10.8976 6.4459 10.9554 6.39115 10.9944L6.0507 11.2375ZM5.35715 11.0569L5.87965 10.6837C5.73137 10.3636 5.62977 10.0239 5.57797 9.675H4.8528C4.85115 9.72065 4.85032 9.76657 4.85032 9.8125C4.85005 11.8629 6.51215 13.525 8.56255 13.525C8.60847 13.525 8.6544 13.5242 8.70005 13.5222V12.7971C8.35112 12.7453 8.01143 12.6437 7.69135 12.4954L7.31817 13.0179C7.16794 12.9595 7.022 12.8906 6.88147 12.8116L6.86552 12.8026C6.32613 12.4956 5.87945 12.0489 5.57247 11.5095L5.5634 11.4936C5.48445 11.353 5.41553 11.2071 5.35715 11.0569Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/PhoneInputWidget/index.ts b/app/client/src/widgets/PhoneInputWidget/index.ts
index 7217ab5ed1..5ee0ec5b77 100644
--- a/app/client/src/widgets/PhoneInputWidget/index.ts
+++ b/app/client/src/widgets/PhoneInputWidget/index.ts
@@ -3,10 +3,10 @@ import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
 import { ResponsiveBehavior } from "utils/autoLayout/constants";
 import { DynamicHeight } from "utils/WidgetFeatures";
 import { CONFIG as BaseConfig } from "widgets/BaseInputWidget";
-
 import { getDefaultISDCode } from "./component/ISDCodeDropdown";
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   features: {
@@ -19,6 +19,7 @@ export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Phone Input",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.INPUTS],
   needsMeta: true,
   searchTags: ["call"],
   defaults: {
diff --git a/app/client/src/widgets/ProgressWidget/icon.svg b/app/client/src/widgets/ProgressWidget/icon.svg
index c44feb9613..78063d6c8e 100644
--- a/app/client/src/widgets/ProgressWidget/icon.svg
+++ b/app/client/src/widgets/ProgressWidget/icon.svg
@@ -1 +1,8 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><g clip-path="url(#clip0_172_5437)"><path fill="#4c5664" d="M2 9H14V15H2V9Z"/><path fill="#4c5664" fill-rule="evenodd" d="M14 9.75L15 9H17L14 11.25V9.75Z" clip-rule="evenodd"/><path fill="#4c5664" fill-rule="evenodd" d="M14 12.75L19 9H21L14 14.25V12.75Z" clip-rule="evenodd"/><path fill="#4c5664" fill-rule="evenodd" d="M22 14.25V12.75L19 15H21L22 14.25Z" clip-rule="evenodd"/><path fill="#4c5664" fill-rule="evenodd" d="M22 11.25V9.75L15 15H17L22 11.25Z" clip-rule="evenodd"/><path fill="#4c5664" fill-rule="evenodd" d="M21 9H19L14 12.75V14.25L21 9ZM15 15H17L22 11.25V9.75L15 15ZM21 15H19L22 12.75V14.25L21 15ZM15 9H17L14 11.25V9.75L15 9Z" clip-rule="evenodd"/></g><defs><clipPath id="clip0_172_5437"><rect width="24" height="24" fill="#fff"/></clipPath></defs></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 9H14.2V15.6H1V9Z" fill="#4C5664"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2 9.825L15.3 9H17.5L14.2 11.475V9.825Z" fill="#4C5664"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2 13.125L19.7 9H21.9L14.2 14.775V13.125Z" fill="#4C5664"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23 14.775V13.125L19.7 15.6H21.9L23 14.775Z" fill="#4C5664"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23 11.475V9.825L15.3 15.6H17.5L23 11.475Z" fill="#4C5664"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.9 9H19.7L14.2 13.125V14.775L21.9 9ZM15.3 15.6H17.5L23 11.475V9.825L15.3 15.6ZM21.9 15.6H19.7L23 13.125V14.775L21.9 15.6ZM15.3 9H17.5L14.2 11.475V9.825L15.3 9Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/ProgressWidget/index.ts b/app/client/src/widgets/ProgressWidget/index.ts
index 67aa3c3fc3..eed53631bb 100644
--- a/app/client/src/widgets/ProgressWidget/index.ts
+++ b/app/client/src/widgets/ProgressWidget/index.ts
@@ -3,11 +3,13 @@ import IconSVG from "./icon.svg";
 import { ProgressType } from "./constants";
 import { Colors } from "constants/Colors";
 import { ResponsiveBehavior } from "utils/autoLayout/constants";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Progress", // The display name which will be made in uppercase and show in the widgets panel ( can have spaces )
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.CONTENT],
   needsMeta: false, // Defines if this widget adds any meta properties
   isCanvas: false, // Defines if this widget has a canvas within in which we can drop other widgets
   searchTags: ["percent"],
diff --git a/app/client/src/widgets/RadioGroupWidget/icon.svg b/app/client/src/widgets/RadioGroupWidget/icon.svg
index d37974e2cc..5a03e7ef7f 100644
--- a/app/client/src/widgets/RadioGroupWidget/icon.svg
+++ b/app/client/src/widgets/RadioGroupWidget/icon.svg
@@ -1 +1,4 @@
-<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path clip-rule="evenodd" d="m16.0001 6.66669c5.1546 0 9.3333 4.17871 9.3333 9.33331 0 5.1547-4.1787 9.3334-9.3333 9.3334-5.1547 0-9.33335-4.1787-9.33335-9.3334 0-5.1546 4.17865-9.33331 9.33335-9.33331zm0 16.00001c-3.6819 0-6.66669-2.9848-6.66669-6.6667s2.98479-6.66665 6.66669-6.66665 6.6666 2.98475 6.6666 6.66665-2.9847 6.6667-6.6666 6.6667z" fill-rule="evenodd"/><path d="m16.0001 20c-2.2092 0-4-1.7908-4-4 0-2.2091 1.7908-4 4-4 2.2091 0 4 1.7909 4 4 0 2.2092-1.7909 4-4 4z"/></g></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 1C18.0751 1 23 5.92491 23 12C23 18.0752 18.0751 23.0001 12 23.0001C5.92484 23.0001 1 18.0752 1 12C1 5.92491 5.92484 1 12 1ZM12 19.8572C7.66064 19.8572 4.14285 16.3394 4.14285 12C4.14285 7.6606 7.66064 4.14285 12 4.14285C16.3394 4.14285 19.8571 7.6606 19.8571 12C19.8571 16.3394 16.3394 19.8572 12 19.8572Z" fill="#4C5664"/>
+<path d="M11.9996 16.7143C9.39586 16.7143 7.28528 14.6037 7.28528 12C7.28528 9.3964 9.39586 7.28569 11.9996 7.28569C14.6032 7.28569 16.7139 9.3964 16.7139 12C16.7139 14.6037 14.6032 16.7143 11.9996 16.7143Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/RadioGroupWidget/index.ts b/app/client/src/widgets/RadioGroupWidget/index.ts
index 65c896d855..2064dcec98 100644
--- a/app/client/src/widgets/RadioGroupWidget/index.ts
+++ b/app/client/src/widgets/RadioGroupWidget/index.ts
@@ -1,13 +1,14 @@
 import { Alignment } from "@blueprintjs/core";
 import { LabelPosition } from "components/constants";
-
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Radio Group",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.TOGGLES],
   needsMeta: true,
   features: {
     dynamicHeight: {
diff --git a/app/client/src/widgets/RangeSliderWidget/icon.svg b/app/client/src/widgets/RangeSliderWidget/icon.svg
index 1217360de9..e975db3e75 100644
--- a/app/client/src/widgets/RangeSliderWidget/icon.svg
+++ b/app/client/src/widgets/RangeSliderWidget/icon.svg
@@ -1,7 +1,7 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M26.1172 11.7026H26.0106L26.0174 11.809C26.0515 12.3404 26.2604 12.7763 26.6448 13.1091L26.6452 13.1093C27.029 13.4388 27.5124 13.6006 28.0874 13.6006C28.7159 13.6006 29.2352 13.409 29.6357 13.0199L29.636 13.0196C30.0368 12.6274 30.2348 12.117 30.2348 11.4979C30.2348 10.899 30.0512 10.4017 29.6787 10.0149C29.3058 9.62763 28.8238 9.43582 28.2418 9.43582C27.7528 9.43582 27.3538 9.56707 27.0557 9.83747L27.1959 8.25464H29.8017H29.9017V8.15464V7.50061V7.40061H29.8017H26.5315H26.4407L26.432 7.491L26.1111 10.8139L26.1005 10.9236H26.2106H26.8971H26.9552L26.984 10.8732C27.0939 10.6809 27.2454 10.5331 27.4402 10.4282L27.4402 10.4282L27.441 10.4277C27.636 10.3202 27.8575 10.2655 28.1077 10.2655C28.4681 10.2655 28.7521 10.3824 28.9694 10.612L28.9694 10.612L28.9702 10.6128C29.1903 10.8404 29.3036 11.139 29.3036 11.5182C29.3036 11.8975 29.1903 12.1945 28.9705 12.4192L28.9701 12.4196C28.7535 12.6437 28.4654 12.7588 28.0955 12.7588C27.7717 12.7588 27.5068 12.6688 27.2944 12.4936C27.0854 12.3164 26.9657 12.0849 26.9357 11.7924L26.9265 11.7026H26.8362H26.1172Z" fill="#4c5664" stroke="#4C5664" stroke-width="0.2"/>
-<path d="M1.76328 9.43702V9.633L1.92197 9.51799L3.3558 8.47875V13.4994V13.5994H3.4558H4.20424H4.30424V13.4994V7.49939V7.39939H4.20424H3.45995H3.42775L3.40159 7.41819L1.80492 8.5658L1.76328 8.59572V8.647V9.43702Z" fill="#4c5664" stroke="#4C5664" stroke-width="0.2"/>
-<path d="M30 18.5006H2V21.5006H30V18.5006Z" fill="#4c5664"/>
-<circle cx="10.5" cy="20.0006" r="4.5" fill="#4c5664"/>
-<circle cx="21.5" cy="20.0006" r="4.5" fill="#4c5664"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.8183 8.32513H19.736L19.7412 8.40735C19.7676 8.81797 19.929 9.15479 20.226 9.41195L20.2263 9.4121C20.5229 9.66671 20.8964 9.79173 21.3407 9.79173C21.8264 9.79173 22.2276 9.64368 22.5371 9.34302L22.5373 9.34279C22.847 9.03973 23 8.64534 23 8.16696C23 7.70418 22.8582 7.31991 22.5703 7.02103C22.2822 6.72178 21.9097 6.57357 21.46 6.57357C21.0822 6.57357 20.7739 6.67499 20.5435 6.88393L20.6519 5.66086H22.6654H22.7426V5.58359V5.07822V5.00095H22.6654H20.1385H20.0683L20.0616 5.07079L19.8136 7.63843L19.8054 7.72319H19.8905H20.421H20.4659L20.4881 7.68425C20.573 7.53566 20.6901 7.42145 20.8406 7.34039L20.8412 7.34001C20.9919 7.25694 21.1631 7.21467 21.3564 7.21467C21.6349 7.21467 21.8543 7.305 22.0223 7.48242L22.0229 7.48303C22.1929 7.6589 22.2805 7.88963 22.2805 8.18264C22.2805 8.47573 22.1929 8.70523 22.0231 8.87885L22.0228 8.87916C21.8554 9.05233 21.6328 9.14127 21.347 9.14127C21.0968 9.14127 20.8921 9.07172 20.728 8.93634C20.5665 8.79942 20.474 8.62054 20.4508 8.39452L20.4437 8.32513H20.3739H19.8183Z" fill="#4C5664" stroke="#4C5664" stroke-width="0.2"/>
+<path d="M1 6.57449V6.72593L1.12262 6.63706L2.23055 5.83403V9.71353V9.7908H2.30782H2.88615H2.96342V9.71353V5.07727V5H2.88615H2.31103H2.28615L2.26594 5.01453L1.03218 5.90129L1 5.92441V5.96404V6.57449Z" fill="#4C5664" stroke="#4C5664" stroke-width="0.2"/>
+<path d="M22.8185 13.578H1.18262V15.8961H22.8185V13.578Z" fill="#4C5664"/>
+<path d="M7.75063 18.2143C9.67103 18.2143 11.2278 16.6575 11.2278 14.7371C11.2278 12.8167 9.67103 11.2599 7.75063 11.2599C5.83023 11.2599 4.27344 12.8167 4.27344 14.7371C4.27344 16.6575 5.83023 18.2143 7.75063 18.2143Z" fill="#4C5664"/>
+<path d="M16.2504 18.2143C18.1708 18.2143 19.7276 16.6575 19.7276 14.7371C19.7276 12.8167 18.1708 11.2599 16.2504 11.2599C14.33 11.2599 12.7732 12.8167 12.7732 14.7371C12.7732 16.6575 14.33 18.2143 16.2504 18.2143Z" fill="#4C5664"/>
 </svg>
diff --git a/app/client/src/widgets/RangeSliderWidget/index.ts b/app/client/src/widgets/RangeSliderWidget/index.ts
index 115d7f4ffe..e721f9b0f6 100644
--- a/app/client/src/widgets/RangeSliderWidget/index.ts
+++ b/app/client/src/widgets/RangeSliderWidget/index.ts
@@ -1,15 +1,16 @@
 import { Alignment } from "@blueprintjs/core";
 import { LabelPosition } from "components/constants";
 import { ResponsiveBehavior } from "utils/autoLayout/constants";
-
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Range Slider",
   needsMeta: true,
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.SLIDERS],
   defaults: {
     min: 0,
     max: 100,
diff --git a/app/client/src/widgets/RateWidget/icon.svg b/app/client/src/widgets/RateWidget/icon.svg
index 5983aec8d1..f37964d7fa 100644
--- a/app/client/src/widgets/RateWidget/icon.svg
+++ b/app/client/src/widgets/RateWidget/icon.svg
@@ -1 +1,3 @@
-<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path d="m15.8562 7.06976 2.6109 4.48144c.1811.3552.6601.6927 1.0644.7496l5.3058 1.0236-3.6923 3.7917c-.2928.2766-.4757.8223-.4066 1.2127l.6054 5.1131-4.8298-2.1397c-.3619-.1845-.9539-.1845-1.3159 0l-4.8294 2.1379.6053-5.113c.0691-.3904-.1137-.9366-.4065-1.2128l-3.59069-3.7917 5.20419-1.0236c.4047-.057.8837-.3944 1.0643-.7496z" fill="#4c5664"/></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9374 2L15.1534 7.5201C15.3765 7.95762 15.9665 8.37335 16.4645 8.44343L23 9.70427L18.4519 14.3748C18.0913 14.7155 17.866 15.3877 17.9511 15.8685L18.6968 22.1667L12.7476 19.5311C12.3018 19.3038 11.5726 19.3038 11.1267 19.5311L5.17803 22.1645L5.92362 15.8664C6.00873 15.3856 5.78356 14.7128 5.4229 14.3726L1 9.70206L7.41036 8.44122C7.90886 8.37101 8.49888 7.95541 8.72133 7.51788L11.9374 2Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/RateWidget/index.ts b/app/client/src/widgets/RateWidget/index.ts
index 15007fd5f2..b69c83b4db 100644
--- a/app/client/src/widgets/RateWidget/index.ts
+++ b/app/client/src/widgets/RateWidget/index.ts
@@ -2,6 +2,7 @@ import { Colors } from "constants/Colors";
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
 import type { RateWidgetProps } from "./widget";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   features: {
@@ -13,6 +14,7 @@ export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Rating",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.CONTENT],
   needsMeta: true,
   searchTags: ["stars"],
   defaults: {
diff --git a/app/client/src/widgets/RichTextEditorWidget/icon.svg b/app/client/src/widgets/RichTextEditorWidget/icon.svg
index e156dc53f6..34be522764 100644
--- a/app/client/src/widgets/RichTextEditorWidget/icon.svg
+++ b/app/client/src/widgets/RichTextEditorWidget/icon.svg
@@ -1 +1,3 @@
-<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m25.3334 6.66669h-18.66665v2.66666h18.66665zm-2.6667 5.33331h-15.99995v2.6667h15.99995zm-15.99995 5.3334h13.33335v2.6666h-13.33335zm18.66665 5.3333h-18.66665v2.6667h18.66665z" fill="#4c5664" fill-rule="evenodd"/></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23 0.999939H1V4.14279H23V0.999939ZM19.8571 7.28563H1V10.4285H19.8571V7.28563ZM1 13.5714H16.7143V16.7142H1V13.5714ZM23 19.8571H1V23H23V19.8571Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/RichTextEditorWidget/index.ts b/app/client/src/widgets/RichTextEditorWidget/index.ts
index 29d77cacec..92afa75f3a 100644
--- a/app/client/src/widgets/RichTextEditorWidget/index.ts
+++ b/app/client/src/widgets/RichTextEditorWidget/index.ts
@@ -3,14 +3,15 @@ import { LabelPosition } from "components/constants";
 import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
 import { ResponsiveBehavior } from "utils/autoLayout/constants";
 import { DynamicHeight } from "utils/WidgetFeatures";
-
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Rich Text Editor",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.INPUTS],
   needsMeta: true,
   searchTags: ["input", "rte"],
   features: {
diff --git a/app/client/src/widgets/SelectWidget/icon.svg b/app/client/src/widgets/SelectWidget/icon.svg
index 76103d58e5..2f000394a4 100644
--- a/app/client/src/widgets/SelectWidget/icon.svg
+++ b/app/client/src/widgets/SelectWidget/icon.svg
@@ -1 +1,3 @@
-<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m28 9.33331h-24v13.33329h24zm-21.33333 2.66669v8h18.66663v-8zm10.66773 3.0666 3.0666 3.0667 3.0667-3.0667-1.2267-1.2266-1.84 1.84-1.8399-1.84z" fill="#4c5664" fill-rule="evenodd"/></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23 6.00006H1V18.2222H23V6.00006ZM3.44445 8.44453V15.7779H20.5555V8.44453H3.44445ZM13.2232 11.2556L16.0342 14.0667L18.8454 11.2556L17.7209 10.1312L16.0342 11.8179L14.3477 10.1312L13.2232 11.2556Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/SelectWidget/index.ts b/app/client/src/widgets/SelectWidget/index.ts
index 1b2bc749df..56fa1beb54 100644
--- a/app/client/src/widgets/SelectWidget/index.ts
+++ b/app/client/src/widgets/SelectWidget/index.ts
@@ -6,6 +6,7 @@ import { DynamicHeight } from "utils/WidgetFeatures";
 
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   features: {
@@ -18,6 +19,7 @@ export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Select",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.SUGGESTED_WIDGETS, WIDGET_TAGS.SELECT],
   needsMeta: true,
   searchTags: ["dropdown"],
   defaults: {
diff --git a/app/client/src/widgets/SingleSelectTreeWidget/icon.svg b/app/client/src/widgets/SingleSelectTreeWidget/icon.svg
index 76103d58e5..2f000394a4 100644
--- a/app/client/src/widgets/SingleSelectTreeWidget/icon.svg
+++ b/app/client/src/widgets/SingleSelectTreeWidget/icon.svg
@@ -1 +1,3 @@
-<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m28 9.33331h-24v13.33329h24zm-21.33333 2.66669v8h18.66663v-8zm10.66773 3.0666 3.0666 3.0667 3.0667-3.0667-1.2267-1.2266-1.84 1.84-1.8399-1.84z" fill="#4c5664" fill-rule="evenodd"/></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23 6.00006H1V18.2222H23V6.00006ZM3.44445 8.44453V15.7779H20.5555V8.44453H3.44445ZM13.2232 11.2556L16.0342 14.0667L18.8454 11.2556L17.7209 10.1312L16.0342 11.8179L14.3477 10.1312L13.2232 11.2556Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/SingleSelectTreeWidget/index.ts b/app/client/src/widgets/SingleSelectTreeWidget/index.ts
index 140b0b28d0..ff70d5e876 100644
--- a/app/client/src/widgets/SingleSelectTreeWidget/index.ts
+++ b/app/client/src/widgets/SingleSelectTreeWidget/index.ts
@@ -3,9 +3,9 @@ import { LabelPosition } from "components/constants";
 import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
 import { ResponsiveBehavior } from "utils/autoLayout/constants";
 import { DynamicHeight } from "utils/WidgetFeatures";
-
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   features: {
@@ -19,6 +19,7 @@ export const CONFIG = {
   name: "TreeSelect",
   searchTags: ["dropdown", "singleselecttree"],
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.SELECT],
   needsMeta: true,
   defaults: {
     rows: 7,
diff --git a/app/client/src/widgets/StatboxWidget/icon.svg b/app/client/src/widgets/StatboxWidget/icon.svg
index 91f1ccc011..59ea1a42e9 100644
--- a/app/client/src/widgets/StatboxWidget/icon.svg
+++ b/app/client/src/widgets/StatboxWidget/icon.svg
@@ -1 +1,3 @@
-<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m0 10c0-1.10457.895431-2 2-2h28c1.1046 0 2 .89543 2 2v12c0 1.1046-.8954 2-2 2h-28c-1.104569 0-2-.8954-2-2zm22.9758 3.778c-.0012-.1311.0497-.2564.1416-.3485.0918-.092.2171-.1432.3482-.1422l4.1957.0306c.1311.001.2574.054.351.1474.0935.0934.1468.2195.148.3506l.0392 4.1956c-.0011.1296-.053.2528-.1446.343s-.2156.1402-.3453.1393c-.1296-.001-.2546-.0528-.3479-.1443-.0933-.0916-.1476-.2155-.151-.3452l-.028-3.002-4.0132 4.0214c-.0919.092-.2172.1432-.3483.1422-.1311-.0009-.2574-.0539-.351-.1473-.0936-.0935-.1469-.2196-.1481-.3507-.0012-.1312.0497-.2566.1416-.3486l4.0132-4.0214-3.0021-.0219c-.1311-.0009-.2573-.054-.3509-.1473-.0936-.0934-.1468-.2196-.1481-.3507zm-18.03439-.821v7.043h1.3125v-8.4551h-1.30664l-2.22657 1.5703v1.3418l2.1211-1.5zm5.29999-.873c-.53124.4922-.79687 1.1269-.79687 1.9043v.0176h1.24217v-.0176c0-.4531.1426-.8184.4278-1.0957.289-.2774.666-.416 1.1308-.416.4375 0 .8027.1289 1.0957.3867s.4395.5801.4395.9668c0 .3125-.0938.6191-.2813.9199-.1875.2969-.5625.7383-1.125 1.3242l-2.85936 2.9766v.9492h5.69536v-1.1777h-3.8672v-.0996l1.8808-1.9043c.7071-.7149 1.1914-1.2911 1.4532-1.7286.2656-.4414.3984-.8867.3984-1.3359 0-.6953-.2637-1.2715-.791-1.7285-.5274-.457-1.1934-.6856-1.9981-.6856-.832 0-1.5136.2481-2.0449.7442z" fill="#4c5664" fill-rule="evenodd"/></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 8.375C1 7.61561 1.61561 7 2.375 7H21.625C22.3844 7 23 7.61561 23 8.375V16.625C23 17.3844 22.3844 18 21.625 18H2.375C1.61561 18 1 17.3844 1 16.625V8.375ZM16.7959 10.9724C16.795 10.8822 16.83 10.7961 16.8932 10.7328C16.9563 10.6695 17.0425 10.6343 17.1326 10.635L20.0171 10.6561C20.1073 10.6567 20.1941 10.6932 20.2585 10.7574C20.3227 10.8216 20.3594 10.9083 20.3602 10.9984L20.3872 13.8829C20.3864 13.972 20.3507 14.0567 20.2877 14.1187C20.2248 14.1807 20.1395 14.2151 20.0504 14.2145C19.9613 14.2138 19.8753 14.1782 19.8112 14.1153C19.747 14.0523 19.7097 13.9671 19.7074 13.878L19.6881 11.8141L16.929 14.5788C16.8659 14.642 16.7797 14.6772 16.6896 14.6766C16.5994 14.6759 16.5126 14.6395 16.4483 14.5753C16.3839 14.511 16.3473 14.4243 16.3464 14.3342C16.3456 14.244 16.3806 14.1578 16.4438 14.0945L19.2029 11.3298L17.1389 11.3148C17.0488 11.3141 16.962 11.2776 16.8977 11.2135C16.8333 11.1493 16.7968 11.0625 16.7959 10.9724ZM4.39722 10.4079V15.25H5.29956V9.43712H4.40125L2.87048 10.5167V11.4392L4.32874 10.4079H4.39722ZM8.04096 9.80775C7.67573 10.1461 7.49311 10.5825 7.49311 11.117V11.1291H8.34711V11.117C8.34711 10.8055 8.44514 10.5543 8.64122 10.3637C8.83991 10.173 9.09909 10.0777 9.41864 10.0777C9.71943 10.0777 9.9705 10.1663 10.1719 10.3435C10.3734 10.5208 10.4741 10.7423 10.4741 11.0082C10.4741 11.223 10.4096 11.4338 10.2807 11.6406C10.1518 11.8447 9.89398 12.1482 9.50726 12.551L7.54145 14.5974V15.25H11.457V14.4403H8.79831V14.3719L10.0914 13.0626C10.5775 12.5712 10.9104 12.175 11.0904 11.8742C11.273 11.5708 11.3643 11.2646 11.3643 10.9558C11.3643 10.4778 11.183 10.0817 10.8205 9.76746C10.4579 9.45328 10.0001 9.29611 9.44683 9.29611C8.87483 9.29611 8.40623 9.46668 8.04096 9.80775Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/StatboxWidget/index.ts b/app/client/src/widgets/StatboxWidget/index.ts
index 54f9edb62b..d8972e258c 100644
--- a/app/client/src/widgets/StatboxWidget/index.ts
+++ b/app/client/src/widgets/StatboxWidget/index.ts
@@ -5,9 +5,8 @@ import {
   Positioning,
   ResponsiveBehavior,
 } from "utils/autoLayout/constants";
-import { GridDefaults } from "constants/WidgetConstants";
+import { GridDefaults, WIDGET_TAGS } from "constants/WidgetConstants";
 import type { WidgetProps } from "widgets/BaseWidget";
-
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
 import type { FlattenedWidgetProps } from "widgets/constants";
@@ -28,6 +27,7 @@ export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Stats Box",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.DISPLAY],
   needsMeta: true,
   searchTags: ["statbox"],
   isCanvas: true,
diff --git a/app/client/src/widgets/SwitchGroupWidget/icon.svg b/app/client/src/widgets/SwitchGroupWidget/icon.svg
old mode 100755
new mode 100644
index e54e2cfb73..7c7ac4a9e8
--- a/app/client/src/widgets/SwitchGroupWidget/icon.svg
+++ b/app/client/src/widgets/SwitchGroupWidget/icon.svg
@@ -1 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#4c5664" fill-rule="evenodd" d="M11 6C11 4.89543 10.1046 4 9 4H6C4.89543 4 4 4.89543 4 6C4 7.10457 4.89543 8 6 8H9C10.1046 8 11 7.10457 11 6ZM9 7C9.55228 7 10 6.55228 10 6C10 5.44772 9.55228 5 9 5C8.44772 5 8 5.44772 8 6C8 6.55228 8.44772 7 9 7Z" clip-rule="evenodd"/><path fill="#4c5664" d="M12.9998 5.80005C12.9998 5.38584 13.3355 5.05005 13.7498 5.05005L19.2498 5.05005C19.664 5.05005 19.9998 5.38584 19.9998 5.80005C19.9998 6.21426 19.664 6.55005 19.2498 6.55005L13.7498 6.55005C13.3355 6.55005 12.9998 6.21426 12.9998 5.80005Z"/><path fill="#4c5664" fill-rule="evenodd" d="M11 12C11 10.8954 10.1046 10 9 10H6C4.89543 10 4 10.8954 4 12C4 13.1046 4.89543 14 6 14H9C10.1046 14 11 13.1046 11 12ZM9 13C9.55228 13 10 12.5523 10 12C10 11.4477 9.55228 11 9 11C8.44772 11 8 11.4477 8 12C8 12.5523 8.44772 13 9 13Z" clip-rule="evenodd"/><path fill="#4c5664" d="M12.9998 11.8C12.9998 11.3858 13.3355 11.05 13.7498 11.05L19.2498 11.05C19.664 11.05 19.9998 11.3858 19.9998 11.8C19.9998 12.2143 19.664 12.55 19.2498 12.55L13.7498 12.55C13.3355 12.55 12.9998 12.2143 12.9998 11.8Z"/><circle cx="6" cy="18" r="1" fill="#4c5664"/><path stroke="#4C5664" stroke-width=".5" d="M4.25 18C4.25 17.0335 5.0335 16.25 6 16.25H9C9.9665 16.25 10.75 17.0335 10.75 18C10.75 18.9665 9.9665 19.75 9 19.75H6C5.0335 19.75 4.25 18.9665 4.25 18Z"/><path fill="#4c5664" d="M13 17.8C13 17.3858 13.3358 17.05 13.75 17.05L19.25 17.05C19.6642 17.05 20 17.3858 20 17.8C20 18.2143 19.6642 18.55 19.25 18.55L13.75 18.55C13.3358 18.55 13 18.2143 13 17.8Z"/></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.625 3.75C10.625 2.23122 9.39382 1 7.875 1H3.75C2.23122 1 1 2.23122 1 3.75C1 5.26878 2.23122 6.5 3.75 6.5H7.875C9.39382 6.5 10.625 5.26878 10.625 3.75ZM7.875 5.125C8.63439 5.125 9.25 4.50939 9.25 3.75C9.25 2.99062 8.63439 2.375 7.875 2.375C7.11561 2.375 6.5 2.99062 6.5 3.75C6.5 4.50939 7.11561 5.125 7.875 5.125Z" fill="#4C5664"/>
+<path d="M13.375 3.47507C13.375 2.90553 13.8366 2.44382 14.4062 2.44382H21.9688C22.5383 2.44382 23 2.90553 23 3.47507C23 4.04461 22.5383 4.50632 21.9688 4.50632H14.4062C13.8366 4.50632 13.375 4.04461 13.375 3.47507Z" fill="#4C5664"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.625 12C10.625 10.4812 9.39382 9.25 7.875 9.25H3.75C2.23122 9.25 1 10.4812 1 12C1 13.5188 2.23122 14.75 3.75 14.75H7.875C9.39382 14.75 10.625 13.5188 10.625 12ZM7.875 13.375C8.63439 13.375 9.25 12.7594 9.25 12C9.25 11.2406 8.63439 10.625 7.875 10.625C7.11561 10.625 6.5 11.2406 6.5 12C6.5 12.7594 7.11561 13.375 7.875 13.375Z" fill="#4C5664"/>
+<path d="M13.375 11.7251C13.375 11.1555 13.8366 10.6938 14.4062 10.6938H21.9688C22.5383 10.6938 23 11.1555 23 11.7251C23 12.2947 22.5383 12.7563 21.9688 12.7563H14.4062C13.8366 12.7563 13.375 12.2947 13.375 11.7251Z" fill="#4C5664"/>
+<path d="M3.75 21.625C4.50939 21.625 5.125 21.0094 5.125 20.25C5.125 19.4906 4.50939 18.875 3.75 18.875C2.99061 18.875 2.375 19.4906 2.375 20.25C2.375 21.0094 2.99061 21.625 3.75 21.625Z" fill="#4C5664"/>
+<path d="M1.34375 20.25C1.34375 18.9211 2.42106 17.8438 3.75 17.8438H7.875C9.20394 17.8438 10.2812 18.9211 10.2812 20.25C10.2812 21.5789 9.20394 22.6562 7.875 22.6562H3.75C2.42106 22.6562 1.34375 21.5789 1.34375 20.25Z" stroke="#4C5664" stroke-width="0.5"/>
+<path d="M13.375 19.9751C13.375 19.4055 13.8367 18.9438 14.4062 18.9438H21.9688C22.5383 18.9438 23 19.4055 23 19.9751C23 20.5447 22.5383 21.0063 21.9688 21.0063H14.4062C13.8367 21.0063 13.375 20.5447 13.375 19.9751Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/SwitchGroupWidget/index.ts b/app/client/src/widgets/SwitchGroupWidget/index.ts
index 503b38a3e5..6b3da47a40 100644
--- a/app/client/src/widgets/SwitchGroupWidget/index.ts
+++ b/app/client/src/widgets/SwitchGroupWidget/index.ts
@@ -1,8 +1,8 @@
 import { Alignment } from "@blueprintjs/core";
 import { LabelPosition } from "components/constants";
-
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   features: {
@@ -14,6 +14,7 @@ export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Switch Group", // The display name which will be made in uppercase and show in the widgets panel ( can have spaces )
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.TOGGLES],
   needsMeta: true, // Defines if this widget adds any meta properties
   isCanvas: false, // Defines if this widget has a canvas within in which we can drop other widgets
   defaults: {
diff --git a/app/client/src/widgets/SwitchWidget/icon.svg b/app/client/src/widgets/SwitchWidget/icon.svg
index 758b098d6c..7956f14c73 100644
--- a/app/client/src/widgets/SwitchWidget/icon.svg
+++ b/app/client/src/widgets/SwitchWidget/icon.svg
@@ -1 +1,4 @@
-<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path clip-rule="evenodd" d="m3 12c0-3.31371 2.68629-6 6-6h6c3.3137 0 6 2.68629 6 6 0 3.3137-2.6863 6-6 6h-6c-3.31371 0-6-2.6863-6-6zm6.25 4c-2.20914 0-4-1.7909-4-4 0-2.20914 1.79086-4 4-4h5.5c2.2091 0 4 1.79086 4 4 0 2.2091-1.7909 4-4 4z" fill-rule="evenodd"/><path d="m15 9c1.6569 0 3 1.3431 3 3s-1.3431 3-3 3-3-1.3431-3-3 1.3431-3 3-3z"/></g></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 12.3333C1 8.28324 4.28324 5 8.33333 5H15.6667C19.7167 5 23 8.28324 23 12.3333C23 16.3834 19.7167 19.6667 15.6667 19.6667H8.33333C4.28324 19.6667 1 16.3834 1 12.3333ZM8.63889 17.2222C5.93883 17.2222 3.75 15.0333 3.75 12.3333C3.75 9.63327 5.93883 7.44444 8.63889 7.44444H15.3611C18.0611 7.44444 20.25 9.63327 20.25 12.3333C20.25 15.0333 18.0611 17.2222 15.3611 17.2222H8.63889Z" fill="#4C5664"/>
+<path d="M15.6667 8.66667C17.6918 8.66667 19.3333 10.3082 19.3333 12.3333C19.3333 14.3584 17.6918 16 15.6667 16C13.6416 16 12 14.3584 12 12.3333C12 10.3082 13.6416 8.66667 15.6667 8.66667Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/SwitchWidget/index.ts b/app/client/src/widgets/SwitchWidget/index.ts
index 25fcb9394b..5a901a812b 100644
--- a/app/client/src/widgets/SwitchWidget/index.ts
+++ b/app/client/src/widgets/SwitchWidget/index.ts
@@ -1,9 +1,9 @@
 import { LabelPosition } from "components/constants";
 import { ResponsiveBehavior } from "utils/autoLayout/constants";
 import { AlignWidgetTypes } from "widgets/constants";
-
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   features: {
@@ -15,6 +15,7 @@ export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Switch",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.TOGGLES],
   needsMeta: true,
   searchTags: ["boolean"],
   defaults: {
diff --git a/app/client/src/widgets/TableWidgetV2/icon.svg b/app/client/src/widgets/TableWidgetV2/icon.svg
index 03b6cb5841..b295ad0a34 100644
--- a/app/client/src/widgets/TableWidgetV2/icon.svg
+++ b/app/client/src/widgets/TableWidgetV2/icon.svg
@@ -1 +1,7 @@
-<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path clip-rule="evenodd" d="m2.66675 2.66663v26.66667h26.66665v-26.66667zm2.66666 23.99997v-21.33331h21.33329v21.33331z" fill-rule="evenodd"/><path d="m14.6667 5.33329v21.33331h2.6667v-21.33331z"/><path d="m5.33341 16h21.33329v-2.6667h-21.33329z"/><path d="m5.33341 22.6666h21.33329v-2.6666h-21.33329z"/><path d="m5.33341 9.33329h21.33329v-4h-21.33329z"/></g></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 1V23H23V1H1ZM3.2 20.8V3.2H20.8V20.8H3.2Z" fill="#4C5664"/>
+<path d="M10.9 3.20001V20.8H13.1001V3.20001H10.9Z" fill="#4C5664"/>
+<path d="M3.20032 12H20.8003V9.80002H3.20032V12Z" fill="#4C5664"/>
+<path d="M3.20032 17.5H20.8003V15.3H3.20032V17.5Z" fill="#4C5664"/>
+<path d="M3.20032 6.50001H20.8003V3.20001H3.20032V6.50001Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/TableWidgetV2/index.ts b/app/client/src/widgets/TableWidgetV2/index.ts
index 61b9813f9b..1af42c05fb 100644
--- a/app/client/src/widgets/TableWidgetV2/index.ts
+++ b/app/client/src/widgets/TableWidgetV2/index.ts
@@ -10,11 +10,13 @@ import type {
   WidgetQueryConfig,
   WidgetQueryGenerationFormConfig,
 } from "WidgetQueryGenerators/types";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Table",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.SUGGESTED_WIDGETS, WIDGET_TAGS.DISPLAY],
   needsMeta: true,
   needsHeightForContent: true,
   defaults: {
diff --git a/app/client/src/widgets/TabsWidget/icon.svg b/app/client/src/widgets/TabsWidget/icon.svg
index 5c0317ba43..1710a90782 100644
--- a/app/client/src/widgets/TabsWidget/icon.svg
+++ b/app/client/src/widgets/TabsWidget/icon.svg
@@ -1 +1,3 @@
-<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m6.66675 12v-5.33337h7.99995v5.33337h10.6667v13.3333h-18.66665zm2.66666 2.6666v8h13.33329v-8zm6.66669-4h1 6 1v-.99997-.66667-1h-1-6-1v1 .66667zm7-1.66664v.66667h-6v-.66667z" fill="#4c5664" fill-rule="evenodd"/></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 8.33337V3H11V8.33337H21.6667V21.6667H3V8.33337ZM5.66666 11V19H19V11H5.66666ZM12.3333 6.99997H13.3333H19.3333H20.3333V6V5.33333V4.33333H19.3333H13.3333H12.3333V5.33333V6V6.99997ZM19.3333 5.33333V6H13.3333V5.33333H19.3333Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/TabsWidget/index.ts b/app/client/src/widgets/TabsWidget/index.ts
index 833b53a4bf..779db046fe 100644
--- a/app/client/src/widgets/TabsWidget/index.ts
+++ b/app/client/src/widgets/TabsWidget/index.ts
@@ -1,10 +1,13 @@
 import { Positioning, ResponsiveBehavior } from "utils/autoLayout/constants";
 import { Colors } from "constants/Colors";
 import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
-import { GridDefaults, WidgetHeightLimits } from "constants/WidgetConstants";
+import {
+  GridDefaults,
+  WIDGET_TAGS,
+  WidgetHeightLimits,
+} from "constants/WidgetConstants";
 import type { WidgetProps } from "widgets/BaseWidget";
 import { BlueprintOperationTypes } from "widgets/constants";
-
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
 
@@ -12,6 +15,7 @@ export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Tabs",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.LAYOUT],
   needsMeta: true,
   isCanvas: true,
   // TODO(abhinav): Default config like these are not serializable
diff --git a/app/client/src/widgets/TextWidget/icon.svg b/app/client/src/widgets/TextWidget/icon.svg
index 1ec6fd41ce..a4058c4d93 100644
--- a/app/client/src/widgets/TextWidget/icon.svg
+++ b/app/client/src/widgets/TextWidget/icon.svg
@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32"><path fill="#4c5664" d="M14.0001 22.6666V9.33329H9.33342V12H6.66675V6.66663H25.3334V12H22.6667V9.33329H18.0001V22.6666H20.6667V25.3333H11.3334V22.6666H14.0001Z"/></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.3334 19V5.66666H5.66667V8.33337H3V3H21.6667V8.33337H19V5.66666H14.3333V19H17V21.6667H7.66665V19H10.3334Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/TextWidget/index.ts b/app/client/src/widgets/TextWidget/index.ts
index fd4a7f79b0..439fb19a0d 100644
--- a/app/client/src/widgets/TextWidget/index.ts
+++ b/app/client/src/widgets/TextWidget/index.ts
@@ -1,5 +1,5 @@
 import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
-import { DEFAULT_FONT_SIZE } from "constants/WidgetConstants";
+import { DEFAULT_FONT_SIZE, WIDGET_TAGS } from "constants/WidgetConstants";
 import { ResponsiveBehavior } from "utils/autoLayout/constants";
 import { OverflowTypes } from "./constants";
 import IconSVG from "./icon.svg";
@@ -21,6 +21,7 @@ export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Text",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.SUGGESTED_WIDGETS, WIDGET_TAGS.CONTENT],
   searchTags: ["typography", "paragraph", "label"],
   defaults: {
     text: "Hello {{appsmith.user.name || appsmith.user.email}}",
diff --git a/app/client/src/widgets/VideoWidget/icon.svg b/app/client/src/widgets/VideoWidget/icon.svg
index 3b1de8947c..0bd8a81ab6 100644
--- a/app/client/src/widgets/VideoWidget/icon.svg
+++ b/app/client/src/widgets/VideoWidget/icon.svg
@@ -1 +1,4 @@
-<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="#4c5664"><path clip-rule="evenodd" d="m2.66675 2.66663h26.66665v26.66667h-26.66665zm2.66666 23.99997v-21.33331h21.33329v21.33331z" fill-rule="evenodd"/><path d="m10.6666 22.6667v-13.33333l10.6667 6.66663z"/></g></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 1H23V23H1V1ZM3.2 20.8V3.2H20.8V20.8H3.2Z" fill="#4C5664"/>
+<path d="M7.59998 17.5001V6.50008L16.4 12L7.59998 17.5001Z" fill="#4C5664"/>
+</svg>
diff --git a/app/client/src/widgets/VideoWidget/index.ts b/app/client/src/widgets/VideoWidget/index.ts
index fdb63f8172..23703202a4 100644
--- a/app/client/src/widgets/VideoWidget/index.ts
+++ b/app/client/src/widgets/VideoWidget/index.ts
@@ -3,11 +3,13 @@ import { ResponsiveBehavior } from "utils/autoLayout/constants";
 import IconSVG from "./icon.svg";
 import Widget from "./widget";
 import { getAssetUrl } from "@appsmith/utils/airgapHelpers";
+import { WIDGET_TAGS } from "constants/WidgetConstants";
 
 export const CONFIG = {
   type: Widget.getWidgetType(),
   name: "Video",
   iconSVG: IconSVG,
+  tags: [WIDGET_TAGS.MEDIA],
   needsMeta: true,
   searchTags: ["youtube"],
   defaults: {
diff --git a/app/client/src/widgets/constants.ts b/app/client/src/widgets/constants.ts
index 9c5e60c5ab..94fdcd9ff3 100644
--- a/app/client/src/widgets/constants.ts
+++ b/app/client/src/widgets/constants.ts
@@ -1,6 +1,7 @@
 import { IconNames } from "@blueprintjs/icons";
 import type { Theme } from "constants/DefaultTheme";
 import type { PropertyPaneConfig } from "constants/PropertyControlConstants";
+import type { WidgetTags } from "constants/WidgetConstants";
 import { WIDGET_STATIC_PROPS } from "constants/WidgetConstants";
 import type { Stylesheet } from "entities/AppTheming";
 import { omit } from "lodash";
@@ -62,6 +63,7 @@ export interface WidgetConfiguration {
   features?: WidgetFeatures;
   canvasHeightOffset?: (props: WidgetProps) => number;
   searchTags?: string[];
+  tags?: WidgetTags[];
   needsHeightForContent?: boolean;
   properties: {
     config?: PropertyPaneConfig[];
diff --git a/app/client/yarn.lock b/app/client/yarn.lock
index e3b4eae8ff..6054e01c72 100644
--- a/app/client/yarn.lock
+++ b/app/client/yarn.lock
@@ -9660,7 +9660,7 @@ __metadata:
     cypress-xpath: ^1.6.0
     dayjs: ^1.10.6
     deep-diff: ^1.0.2
-    design-system: "npm:@appsmithorg/design-system@2.1.16"
+    design-system: "npm:@appsmithorg/design-system@2.1.17"
     design-system-old: "npm:@appsmithorg/design-system-old@1.1.11"
     diff: ^5.0.0
     dotenv: ^8.1.0
@@ -13735,9 +13735,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"design-system@npm:@appsmithorg/design-system@2.1.16":
-  version: 2.1.16
-  resolution: "@appsmithorg/design-system@npm:2.1.16"
+"design-system@npm:@appsmithorg/design-system@2.1.17":
+  version: 2.1.17
+  resolution: "@appsmithorg/design-system@npm:2.1.17"
   dependencies:
     "@radix-ui/react-dialog": ^1.0.2
     "@radix-ui/react-dropdown-menu": ^2.0.4
@@ -13762,7 +13762,7 @@ __metadata:
     react-dom: ^17.0.2
     react-router-dom: ^5.0.0
     styled-components: ^5.3.6
-  checksum: 240eef526e8021a0f146430e89f1983e2e125d2a74835326240afcf72e1f4ee41d941f2fd2499345dff3cc9c603c2180971c079b78aeddc3c2a04cdcda96c433
+  checksum: d53278dbe53c0a827f1778851b41f9d84565a502fc99e192b9b312908061943aecfae523e3bc2c044d56997af650ac437b06083edc0d58ce58fe16b808d10391
   languageName: node
   linkType: hard