From 4b1de32e6b3ae740994260ba6c21bceaeb4a6cad Mon Sep 17 00:00:00 2001
From: Sameh16 <sameh_mohamed16@hotmail.com>
Date: Tue, 14 Jan 2025 13:27:27 +0200
Subject: [PATCH 01/16] Replace old icon with font-awesome one for admin module

Signed-off-by: Sameh16 <sameh_mohamed16@hotmail.com>
---
 .../modules/integration/components/integration-status.vue | 4 ++--
 .../components/status/integration-platform-select.vue     | 8 ++++----
 .../admin/modules/integration/config/status/connecting.ts | 3 ++-
 .../admin/modules/integration/config/status/done.ts       | 3 ++-
 .../admin/modules/integration/config/status/error.ts      | 3 ++-
 .../admin/modules/integration/config/status/index.ts      | 1 +
 .../integration/config/status/waiting-for-action.ts       | 3 ++-
 .../modules/integration/pages/integration-status.page.vue | 7 +++----
 .../projects/components/fragments/lf-project-count.vue    | 4 ++--
 .../contributor-details-work-history-item.vue             | 2 +-
 frontend/src/ui-kit/timeline/Timeline.stories.ts          | 3 ++-
 11 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/frontend/src/modules/admin/modules/integration/components/integration-status.vue b/frontend/src/modules/admin/modules/integration/components/integration-status.vue
index 8d9cdc317e..5b8f632acc 100644
--- a/frontend/src/modules/admin/modules/integration/components/integration-status.vue
+++ b/frontend/src/modules/admin/modules/integration/components/integration-status.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex items-center text-medium gap-1.5 whitespace-nowrap">
     <template v-if="status">
-      <lf-icon-old :name="status.status.icon" :class="status.status.color" :size="20" />
+      <lf-icon v-if="status.status.icon" :name="status.status.icon" :type="status.status.iconType" :class="status.status.color" :size="20" />
       <span class="font-semibold" :class="status.status.color">{{ status.status.text }}</span>
     </template>
   </div>
@@ -9,7 +9,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { getIntegrationStatus } from '@/modules/admin/modules/integration/config/status';
 
 const props = defineProps<{
diff --git a/frontend/src/modules/admin/modules/integration/components/status/integration-platform-select.vue b/frontend/src/modules/admin/modules/integration/components/status/integration-platform-select.vue
index 81a7b3545c..e9933f9f8f 100644
--- a/frontend/src/modules/admin/modules/integration/components/status/integration-platform-select.vue
+++ b/frontend/src/modules/admin/modules/integration/components/status/integration-platform-select.vue
@@ -3,20 +3,20 @@
     <template #trigger>
       <lf-button type="secondary" class="!font-normal">
         <template v-if="!model">
-          <lf-icon-old name="apps-2-line" :size="16" />
+          <lf-icon name="grid-round-2" type="regular" :size="16" />
           All integrations
         </template>
         <template v-else>
           <img :src="lfIntegrations[model]?.image" :alt="lfIntegrations[model]?.name" class="w-4 h-4 object-contain">
           {{ lfIntegrations[model]?.name }}
         </template>
-        <lf-icon-old name="arrow-down-s-line" :size="16" />
+        <lf-icon name="chevron-down" :size="16" />
       </lf-button>
     </template>
     <div class="max-h-80 overflow-y-scroll -m-2 p-2">
       <lf-dropdown-item :selected="!model" @click="model = ''">
         <div class="flex items-center gap-2">
-          <lf-icon-old name="apps-2-line" :size="16" />
+          <lf-icon name="grid-round-2" type="regular" :size="16" />
           All integrations
         </div>
       </lf-dropdown-item>
@@ -40,7 +40,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import LfButton from '@/ui-kit/button/Button.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfDropdown from '@/ui-kit/dropdown/Dropdown.vue';
 import LfDropdownItem from '@/ui-kit/dropdown/DropdownItem.vue';
 import LfDropdownSeparator from '@/ui-kit/dropdown/DropdownSeparator.vue';
diff --git a/frontend/src/modules/admin/modules/integration/config/status/connecting.ts b/frontend/src/modules/admin/modules/integration/config/status/connecting.ts
index 0270e8a13b..563e5d26f7 100644
--- a/frontend/src/modules/admin/modules/integration/config/status/connecting.ts
+++ b/frontend/src/modules/admin/modules/integration/config/status/connecting.ts
@@ -6,7 +6,8 @@ const connecting: IntegrationStatusConfig = {
   statuses: ['in-progress'],
   status: {
     text: 'Connecting',
-    icon: 'loader-4-line animate-spin',
+    icon: 'circle-notch animate-spin',
+    iconType:'solid',
     color: 'text-secondary-500',
   },
   actionBar: {
diff --git a/frontend/src/modules/admin/modules/integration/config/status/done.ts b/frontend/src/modules/admin/modules/integration/config/status/done.ts
index b7221d45bd..bdb0c6ce8d 100644
--- a/frontend/src/modules/admin/modules/integration/config/status/done.ts
+++ b/frontend/src/modules/admin/modules/integration/config/status/done.ts
@@ -6,7 +6,8 @@ const done: IntegrationStatusConfig = {
   statuses: ['done'],
   status: {
     text: 'Connected',
-    icon: 'checkbox-circle-fill',
+    icon: 'circle-check',
+    iconType: 'solid',
     color: 'text-green-600',
   },
   actionBar: {
diff --git a/frontend/src/modules/admin/modules/integration/config/status/error.ts b/frontend/src/modules/admin/modules/integration/config/status/error.ts
index 2588899aa9..41f9705fb9 100644
--- a/frontend/src/modules/admin/modules/integration/config/status/error.ts
+++ b/frontend/src/modules/admin/modules/integration/config/status/error.ts
@@ -6,7 +6,8 @@ const error: IntegrationStatusConfig = {
   statuses: ['error'],
   status: {
     text: 'Connection failed',
-    icon: 'error-warning-fill',
+    icon: 'circle-exclamation',
+    iconType: 'solid',
     color: 'text-red-500',
   },
   actionBar: {
diff --git a/frontend/src/modules/admin/modules/integration/config/status/index.ts b/frontend/src/modules/admin/modules/integration/config/status/index.ts
index b8901c9e69..41ddd8a2be 100644
--- a/frontend/src/modules/admin/modules/integration/config/status/index.ts
+++ b/frontend/src/modules/admin/modules/integration/config/status/index.ts
@@ -11,6 +11,7 @@ export interface IntegrationStatusConfig {
   status: {
     text: string;
     icon: string;
+    iconType?: string;
     color: string;
   },
   actionBar: {
diff --git a/frontend/src/modules/admin/modules/integration/config/status/waiting-for-action.ts b/frontend/src/modules/admin/modules/integration/config/status/waiting-for-action.ts
index 33bec2afa5..53f8994d8a 100644
--- a/frontend/src/modules/admin/modules/integration/config/status/waiting-for-action.ts
+++ b/frontend/src/modules/admin/modules/integration/config/status/waiting-for-action.ts
@@ -6,7 +6,8 @@ const waitingForAction: IntegrationStatusConfig = {
   statuses: ['pending-action', 'mapping'],
   status: {
     text: 'Action required',
-    icon: 'alert-fill',
+    icon: 'triangle-exclamation',
+    iconType: 'solid',
     color: 'text-yellow-600',
   },
   actionBar: {
diff --git a/frontend/src/modules/admin/modules/integration/pages/integration-status.page.vue b/frontend/src/modules/admin/modules/integration/pages/integration-status.page.vue
index c7923fe892..3746cb1391 100644
--- a/frontend/src/modules/admin/modules/integration/pages/integration-status.page.vue
+++ b/frontend/src/modules/admin/modules/integration/pages/integration-status.page.vue
@@ -64,7 +64,7 @@
                       <app-integration-progress-wrapper :segments="[integration.segmentId]">
                         <template #default="{ progress }">
                           <div class="flex items-center gap-1.5">
-                            <lf-icon-old name="loader-4-fill" class="text-gray-500 animate-spin" :size="16" />
+                            <lf-icon name="circle-notch" type="solid" class="text-gray-500 animate-spin" :size="16" />
                             <app-integration-progress-bar
                               :progress="progress.find((p) => p.platform === integration.platform)"
                               :hide-bar="true"
@@ -76,13 +76,13 @@
                     </template>
                     <template v-else-if="status === 'waitingForAction'">
                       <div class="flex items-center gap-1.5">
-                        <lf-icon-old name="alert-fill" class="text-yellow-600" :size="16" />
+                        <lf-icon name="triangle-exclamation" type="solid" class="text-yellow-600" :size="16" />
                         <span class="text-tiny text-yellow-600">Action required</span>
                       </div>
                     </template>
                     <template v-else-if="status === 'error'">
                       <div class="flex items-center gap-1.5">
-                        <lf-icon-old name="error-warning-fill" class="text-red-600" :size="16" />
+                        <lf-icon name="circle-exclamation" type="solid" class="text-red-600" :size="16" />
                         <span class="text-tiny text-red-600">Connection failed</span>
                       </div>
                     </template>
@@ -173,7 +173,6 @@ import LfTabs from '@/ui-kit/tabs/Tabs.vue';
 import LfTab from '@/ui-kit/tabs/Tab.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
 import AppIntegrationProgressBar from '@/modules/integration/components/integration-progress-bar.vue';
 import AppIntegrationProgressWrapper from '@/modules/integration/components/integration-progress-wrapper.vue';
 import LfDropdown from '@/ui-kit/dropdown/Dropdown.vue';
diff --git a/frontend/src/modules/admin/modules/projects/components/fragments/lf-project-count.vue b/frontend/src/modules/admin/modules/projects/components/fragments/lf-project-count.vue
index 59a10bc8f8..0da48aa40d 100644
--- a/frontend/src/modules/admin/modules/projects/components/fragments/lf-project-count.vue
+++ b/frontend/src/modules/admin/modules/projects/components/fragments/lf-project-count.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <lf-badge type="secondary" class="!flex items-center gap-1 w-full !rounded-full !px-2.5">
-      <lf-icon-old name="stack-line" />
+      <lf-icon name="layer-group" type="regular" />
       {{ pluralize('project', props.count, true) }}
     </lf-badge>
   </div>
@@ -9,7 +9,7 @@
 
 <script lang="ts" setup>
 import pluralize from 'pluralize';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfBadge from '@/ui-kit/badge/Badge.vue';
 
 const props = defineProps<{
diff --git a/frontend/src/modules/contributor/components/details/work-history/contributor-details-work-history-item.vue b/frontend/src/modules/contributor/components/details/work-history/contributor-details-work-history-item.vue
index d938f3c458..98c3df6d8d 100644
--- a/frontend/src/modules/contributor/components/details/work-history/contributor-details-work-history-item.vue
+++ b/frontend/src/modules/contributor/components/details/work-history/contributor-details-work-history-item.vue
@@ -12,7 +12,7 @@
           </p>
         </div>
         <p class="text-small text-gray-500 mb-1.5 flex items-center">
-          <lf-icon-old name="calendar-line" :size="16" class="mr-1.5 text-gray-400" />
+          <lf-icon name="calendar" :size="16" class="mr-1.5 text-gray-400" />
           {{ getDateRange(props.organization?.memberOrganizations?.dateStart, props.organization?.memberOrganizations?.dateEnd) }}
         </p>
       </div>
diff --git a/frontend/src/ui-kit/timeline/Timeline.stories.ts b/frontend/src/ui-kit/timeline/Timeline.stories.ts
index 6098d24582..79384f27f2 100644
--- a/frontend/src/ui-kit/timeline/Timeline.stories.ts
+++ b/frontend/src/ui-kit/timeline/Timeline.stories.ts
@@ -44,7 +44,8 @@ export const Regular = {
           </p>
         </div>
         <p class="text-small text-gray-500 mb-1.5 flex items-center">
-          <lf-icon-old name="calendar-line" :size="16" class="mr-1.5 text-gray-400" />
+        <i class="fa-sharp fa-light fa-calendar"></i>
+        <lf-icon name="calendar" :size="16" class="mr-1.5 text-gray-400" />
           {{ item.date }}
         </p>
       </lf-timeline-item>

From 7acec375a76ab34ef06ff07aa7df8f781cc6a8a3 Mon Sep 17 00:00:00 2001
From: Sameh16 <sameh_mohamed16@hotmail.com>
Date: Wed, 15 Jan 2025 12:07:07 +0200
Subject: [PATCH 02/16] Refactor icons to use updated icon components across
 contributor module

Signed-off-by: Sameh16 <sameh_mohamed16@hotmail.com>
---
 frontend/src/integrations/github/config.js       |  3 ++-
 frontend/src/integrations/linkedin/config.js     |  3 ++-
 .../details/contributor-details-actions.vue      |  5 +++--
 .../details/contributor-details-activities.vue   |  5 +++--
 .../details/contributor-details-work-history.vue |  3 +--
 .../contributor-details-header-profile-photo.vue |  4 ++--
 .../contributor-details-header-profiles.vue      |  9 +++++----
 ...contributor-details-identity-add-dropdown.vue |  9 +++++----
 .../contributor-details-identity-item.vue        | 16 +++++++++-------
 .../overview/contributor-details-attributes.vue  |  6 +++---
 .../overview/contributor-details-community.vue   |  6 +++---
 .../overview/contributor-details-projects.vue    | 15 +++++++--------
 .../contributor-details-projects-affiliation.vue |  6 +++---
 .../contributor-details-projects-sorting.vue     |  4 ++--
 .../contributor-details-work-history-item.vue    |  9 ++++-----
 .../contributor-affilations-edit-item.vue        |  6 +++---
 .../affilations/contributor-affilations-edit.vue | 12 ++++++------
 .../components/edit/contributor-add.vue          |  8 ++++----
 .../edit/contributor-edit-profile-photo.vue      |  7 ++++---
 .../edit/identity/contributor-identity-add.vue   | 15 ++++++++-------
 .../edit/identity/contributor-identity-edit.vue  | 11 ++++++-----
 .../contributor-work-history-edit.vue            |  6 +++---
 .../components/shared/contributor-dropdown.vue   | 11 ++++++-----
 .../shared/contributor-engagement-level.vue      |  4 ++--
 .../components/shared/contributor-sentiment.vue  | 10 +++++-----
 .../shared/contributor-syncing-activities.vue    |  4 ++--
 .../shared/contributor-work-position.vue         |  4 ++--
 .../pages/contributor-details.page.vue           |  8 ++++----
 28 files changed, 109 insertions(+), 100 deletions(-)

diff --git a/frontend/src/integrations/github/config.js b/frontend/src/integrations/github/config.js
index 1870a22da4..112e2d2058 100644
--- a/frontend/src/integrations/github/config.js
+++ b/frontend/src/integrations/github/config.js
@@ -14,7 +14,8 @@ export default {
   },
   image:
     'https://cdn-icons-png.flaticon.com/512/25/25231.png',
-  icon: 'github-fill',
+  icon: 'github',
+  iconType: 'brands',
   url: ({ username }) => (username ? `https://github.com/${username}` : null),
   chartColor: '#111827',
   showProfileLink: true,
diff --git a/frontend/src/integrations/linkedin/config.js b/frontend/src/integrations/linkedin/config.js
index bfd1929e84..762c1790b6 100644
--- a/frontend/src/integrations/linkedin/config.js
+++ b/frontend/src/integrations/linkedin/config.js
@@ -7,7 +7,8 @@ export default {
   description:
     "Connect LinkedIn to sync comments and reactions from your organization's posts.",
   image: '/images/integrations/linkedin.png',
-  icon: 'linkedin-box-fill',
+  icon: 'linkedin',
+  iconType: 'brands',
   reactions: {
     like: 'Like',
     praise: 'Celebrate',
diff --git a/frontend/src/modules/contributor/components/details/contributor-details-actions.vue b/frontend/src/modules/contributor/components/details/contributor-details-actions.vue
index 0225d1a64c..ddf21362db 100644
--- a/frontend/src/modules/contributor/components/details/contributor-details-actions.vue
+++ b/frontend/src/modules/contributor/components/details/contributor-details-actions.vue
@@ -8,7 +8,7 @@
           contributor: props.contributor,
         })"
       >
-        <lf-icon-old name="feedback-line" class="text-red-500" /> Report data issue
+        <lf-icon name="message-exclamation fa-sharp" class="text-red-500" /> Report data issue
       </lf-button>
       <lf-button
         v-if="mergeSuggestionsCount > 0 && hasPermission(LfPermission.mergeMembers)"
@@ -43,7 +43,7 @@
             :icon-only="true"
             :class="hasPermission(LfPermission.mergeMembers) ? '!rounded-l-none -ml-px' : ''"
           >
-            <lf-icon-old name="more-fill" />
+            <lf-icon name="ellipsis" />
           </lf-button>
         </template>
 
@@ -82,6 +82,7 @@
 
 <script setup lang="ts">
 import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import LfButtonGroup from '@/ui-kit/button/ButtonGroup.vue';
 import LfDropdown from '@/ui-kit/dropdown/Dropdown.vue';
diff --git a/frontend/src/modules/contributor/components/details/contributor-details-activities.vue b/frontend/src/modules/contributor/components/details/contributor-details-activities.vue
index 9520282716..1de4c5ed25 100644
--- a/frontend/src/modules/contributor/components/details/contributor-details-activities.vue
+++ b/frontend/src/modules/contributor/components/details/contributor-details-activities.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="props.contributor.activitySycning?.state === MergeActionState.IN_PROGRESS" class="pt-12 flex flex-col items-center">
-    <lf-icon-old name="loader-4-line" :size="40" class="text-gray-300 animate-spin" />
+    <lf-icon name="circle-notch" type="solid" :size="40" class="text-gray-300 animate-spin" />
     <h6 class="text-center py-3">
       Syncing activities...
     </h6>
@@ -11,7 +11,7 @@
     </p>
   </div>
   <div v-else-if="props.contributor.activitySycning?.state === MergeActionState.ERROR" class="pt-12 flex flex-col items-center">
-    <lf-icon-old name="error-warning-line" :size="40" class="text-gray-300" />
+    <lf-icon name="circle-exclamation" :size="40" class="text-gray-300" />
     <h6 class="text-center py-3">
       Error syncing activities
     </h6>
@@ -37,6 +37,7 @@ import AppActivityTimeline from '@/modules/activity/components/activity-timeline
 import { useRoute } from 'vue-router';
 import { MergeActionState } from '@/shared/modules/merge/types/MemberActions';
 import { ref } from 'vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const props = defineProps<{
   contributor: Contributor,
diff --git a/frontend/src/modules/contributor/components/details/contributor-details-work-history.vue b/frontend/src/modules/contributor/components/details/contributor-details-work-history.vue
index a5cdbbd70d..c7b95276ec 100644
--- a/frontend/src/modules/contributor/components/details/contributor-details-work-history.vue
+++ b/frontend/src/modules/contributor/components/details/contributor-details-work-history.vue
@@ -42,7 +42,7 @@
         </lf-timeline-item>
       </lf-timeline>
       <div v-if="orgGrouped.length === 0" class="pt-2 flex flex-col items-center">
-        <lf-icon-old name="survey-line" :size="40" class="text-gray-300" />
+        <lf-icon name="clipboard-list fa-sharp" :size="40" class="text-gray-300" />
         <p class="text-center pt-3 text-medium text-gray-400">
           No work experiences
         </p>
@@ -70,7 +70,6 @@
 
 <script setup lang="ts">
 import LfButton from '@/ui-kit/button/Button.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
 import { computed, ref } from 'vue';
 import usePermissions from '@/shared/modules/permissions/helpers/usePermissions';
 import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
diff --git a/frontend/src/modules/contributor/components/details/header/contributor-details-header-profile-photo.vue b/frontend/src/modules/contributor/components/details/header/contributor-details-header-profile-photo.vue
index 5a1870d5f8..d0d88a613f 100644
--- a/frontend/src/modules/contributor/components/details/header/contributor-details-header-profile-photo.vue
+++ b/frontend/src/modules/contributor/components/details/header/contributor-details-header-profile-photo.vue
@@ -10,7 +10,7 @@
       <template #overlay>
         <div class="absolute top-0 left-0 w-full h-full bg-secondary-500 opacity-50" />
         <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-          <lf-icon-old name="pencil-line" :size="24" class="text-white" />
+          <lf-icon name="pen fa-sharp"  :size="24" class="text-white" />
         </div>
       </template>
     </lf-avatar>
@@ -31,7 +31,7 @@
 
 <script setup lang="ts">
 import LfAvatar from '@/ui-kit/avatar/Avatar.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { ref } from 'vue';
 import { Contributor } from '@/modules/contributor/types/Contributor';
 import useContributorHelpers from '@/modules/contributor/helpers/contributor.helpers';
diff --git a/frontend/src/modules/contributor/components/details/header/contributor-details-header-profiles.vue b/frontend/src/modules/contributor/components/details/header/contributor-details-header-profiles.vue
index 6d2198bd89..1809e4cf62 100644
--- a/frontend/src/modules/contributor/components/details/header/contributor-details-header-profiles.vue
+++ b/frontend/src/modules/contributor/components/details/header/contributor-details-header-profiles.vue
@@ -17,7 +17,7 @@
             <p class="!text-white">
               {{ platformData(platform)?.name }} profile
             </p>
-            <lf-icon-old name="external-link-line" :size="14" class="text-gray-400" />
+            <lf-icon name="arrow-up-right-from-square" type="regular" :size="14" class="text-gray-400" />
           </a>
         </template>
         <a
@@ -29,8 +29,9 @@
           class="flex items-center gap-1"
           @click="idents.length > 1 ? $event.preventDefault() : null"
         >
-          <lf-icon-old
+          <lf-icon
             :name="platformData(platform)?.icon"
+            :type="platformData(platform)?.iconType"
             :size="20"
             :style="{ color: platformData(platform)?.brandColor }"
             class="platform-icon"
@@ -64,7 +65,7 @@ opacity-0 invisible transition group-hover:visible group-hover:opacity-100 z-30
               {{ identity.value }}
             </p>
           </div>
-          <lf-icon-old v-if="identity.url" name="external-link-line" :size="16" class="text-gray-300" />
+          <lf-icon v-if="identity.url" name="arrow-up-right-from-square" type="regular" :size="16" class="text-gray-300" />
         </a>
       </div>
     </div>
@@ -74,7 +75,7 @@ opacity-0 invisible transition group-hover:visible group-hover:opacity-100 z-30
 <script setup lang="ts">
 import { computed } from 'vue';
 import { CrowdIntegrations } from '@/integrations/integrations-config';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfTooltip from '@/ui-kit/tooltip/Tooltip.vue';
 import useContributorHelpers from '@/modules/contributor/helpers/contributor.helpers';
 import { contributorDetailsHeaderProfilePlatforms } from '@/modules/contributor/config/details-header-profile-platforms';
diff --git a/frontend/src/modules/contributor/components/details/identity/contributor-details-identity-add-dropdown.vue b/frontend/src/modules/contributor/components/details/identity/contributor-details-identity-add-dropdown.vue
index fb51250d7a..4209455158 100644
--- a/frontend/src/modules/contributor/components/details/identity/contributor-details-identity-add-dropdown.vue
+++ b/frontend/src/modules/contributor/components/details/identity/contributor-details-identity-add-dropdown.vue
@@ -11,9 +11,10 @@
           placeholder="Search..."
         >
           <template #suffix>
-            <lf-icon-old
+            <lf-icon
               v-if="search.length"
-              name="close-circle-line"
+              name="circle-xmark"
+              type="regular"
               :size="16"
               class="text-gray-400 cursor-pointer"
               @click="search = ''"
@@ -41,7 +42,7 @@
           })"
         >
           <div class="w-full flex items-center gap-2">
-            <lf-icon-old name="mail-line" :size="16" /> Email
+            <lf-icon name="envelope" type="regular" :size="16" /> Email
           </div>
         </lf-dropdown-item>
       </template>
@@ -57,7 +58,7 @@ import LfDropdown from '@/ui-kit/dropdown/Dropdown.vue';
 import LfDropdownItem from '@/ui-kit/dropdown/DropdownItem.vue';
 import { CrowdIntegrations } from '@/integrations/integrations-config';
 import LfDropdownSeparator from '@/ui-kit/dropdown/DropdownSeparator.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { ContributorIdentity } from '@/modules/contributor/types/Contributor';
 import LfInput from '@/ui-kit/input/Input.vue';
 import { computed, ref } from 'vue';
diff --git a/frontend/src/modules/contributor/components/details/identity/contributor-details-identity-item.vue b/frontend/src/modules/contributor/components/details/identity/contributor-details-identity-item.vue
index 7584952132..bfbe06f6ed 100644
--- a/frontend/src/modules/contributor/components/details/identity/contributor-details-identity-item.vue
+++ b/frontend/src/modules/contributor/components/details/identity/contributor-details-identity-item.vue
@@ -6,7 +6,7 @@
   >
     <div class="mt-0.5">
       <lf-tooltip v-if="props.identity.type === 'email'" content="Email" placement="top-start">
-        <lf-icon-old name="mail-line" :size="20" />
+        <lf-icon name="envelope" type="regular" :size="20" />
       </lf-tooltip>
       <lf-tooltip v-else-if="platform(props.identity.platform)" placement="top-start" :content="platform(props.identity.platform).name">
         <img
@@ -16,8 +16,9 @@
         />
       </lf-tooltip>
       <lf-tooltip v-else content="Custom identity" placement="top-start">
-        <lf-icon-old
-          name="fingerprint-fill"
+        <lf-icon
+          name="fingerprint"
+          type="solid"
           :size="20"
           class="text-gray-600"
         />
@@ -62,7 +63,7 @@
     <lf-dropdown v-show="hovered" placement="bottom-end" width="232px">
       <template #trigger>
         <lf-button type="secondary-ghost" size="small" :icon-only="true">
-          <lf-icon-old name="more-fill" />
+          <lf-icon name="ellipsis" />
         </lf-button>
       </template>
       <!-- Edit identity -->
@@ -81,7 +82,7 @@
           class="w-full"
           @click="emit('edit')"
         >
-          <lf-icon-old name="pencil-line" />Edit identity
+          <lf-icon name="pen fa-sharp" />Edit identity
         </lf-dropdown-item>
       </lf-tooltip>
 
@@ -100,7 +101,7 @@
           attribute: props.identity,
         })"
       >
-        <lf-icon-old name="feedback-line" class="!text-red-500" />Report issue
+        <lf-icon name="message-exclamation fa-sharp" class="!text-red-500" />Report issue
       </lf-dropdown-item>
 
       <template
@@ -122,7 +123,7 @@
             class="w-full"
             @click="removeIdentity"
           >
-            <lf-icon-old name="delete-bin-6-line" />Delete identity
+            <lf-icon name="trash-can" />Delete identity
           </lf-dropdown-item>
         </lf-tooltip>
       </template>
@@ -132,6 +133,7 @@
 
 <script setup lang="ts">
 import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { Contributor, ContributorIdentity } from '@/modules/contributor/types/Contributor';
 import { CrowdIntegrations } from '@/integrations/integrations-config';
 import LfTooltip from '@/ui-kit/tooltip/Tooltip.vue';
diff --git a/frontend/src/modules/contributor/components/details/overview/contributor-details-attributes.vue b/frontend/src/modules/contributor/components/details/overview/contributor-details-attributes.vue
index 4bd694d11a..b475b00352 100644
--- a/frontend/src/modules/contributor/components/details/overview/contributor-details-attributes.vue
+++ b/frontend/src/modules/contributor/components/details/overview/contributor-details-attributes.vue
@@ -10,7 +10,7 @@
         size="small"
         @click="edit = true"
       >
-        <lf-icon-old name="pencil-line" />
+        <lf-icon name="pen fa-sharp" />
         Edit attributes
       </lf-button>
     </div>
@@ -174,7 +174,7 @@
         && Object.keys(attributes).length === 0"
       class="pt-2 flex flex-col items-center w-full"
     >
-      <lf-icon-old name="list-view" :size="80" class="text-gray-300" />
+      <lf-icon name="rectangle-list" :size="80" class="text-gray-300" />
       <p class="text-center pt-3 text-medium text-gray-400">
         No profile details yet
       </p>
@@ -189,7 +189,7 @@
 
 <script setup lang="ts">
 import LfButton from '@/ui-kit/button/Button.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import AppMemberManageAttributesDrawer from '@/modules/member/components/member-manage-attributes-drawer.vue';
 import { computed, ref } from 'vue';
 import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
diff --git a/frontend/src/modules/contributor/components/details/overview/contributor-details-community.vue b/frontend/src/modules/contributor/components/details/overview/contributor-details-community.vue
index 262158e8b9..e21880ba5f 100644
--- a/frontend/src/modules/contributor/components/details/overview/contributor-details-community.vue
+++ b/frontend/src/modules/contributor/components/details/overview/contributor-details-community.vue
@@ -12,7 +12,7 @@
             </p>
             <el-popover placement="top" width="20rem">
               <template #reference>
-                <lf-icon-old name="question-line" :size="14" class="text-secondary-200 font-normal" />
+                <lf-icon name="circle-question" :size="14" class="text-secondary-200 font-normal" />
               </template>
               <div class="p-1">
                 <p class="text-small font-semibold mb-2 text-black">
@@ -44,7 +44,7 @@
                 Calculated based on the recency and importance<br> of a person's
                 activities in comparison<br> to the community.
               </template>
-              <lf-icon-old name="question-line" :size="14" class="text-secondary-200" />
+              <lf-icon name="circle-question" :size="14" class="text-secondary-200" />
             </el-tooltip>
           </div>
           <lf-contributor-engagement-level :contributor="props.contributor" />
@@ -87,7 +87,7 @@
 <script setup lang="ts">
 import LfCard from '@/ui-kit/card/Card.vue';
 import moment from 'moment';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { formatNumber } from '@/utils/number';
 import LfContributorEngagementLevel from '@/modules/contributor/components/shared/contributor-engagement-level.vue';
 import LfContributorSentiment from '@/modules/contributor/components/shared/contributor-sentiment.vue';
diff --git a/frontend/src/modules/contributor/components/details/overview/contributor-details-projects.vue b/frontend/src/modules/contributor/components/details/overview/contributor-details-projects.vue
index e9131068b6..29ee2105e3 100644
--- a/frontend/src/modules/contributor/components/details/overview/contributor-details-projects.vue
+++ b/frontend/src/modules/contributor/components/details/overview/contributor-details-projects.vue
@@ -14,7 +14,7 @@
               Affiliation
               <el-popover placement="top" width="20rem">
                 <template #reference>
-                  <lf-icon-old name="question-line" :size="14" class="text-secondary-200 font-normal" />
+                  <lf-icon name="circle-question" :size="14" class="text-secondary-200 font-normal" />
                 </template>
                 <div class="p-1">
                   <p class="text-small font-semibold mb-2 text-black">
@@ -33,7 +33,7 @@
               Role
               <el-popover placement="top" width="20rem">
                 <template #reference>
-                  <lf-icon-old name="question-line" :size="14" class="text-secondary-200 font-normal" />
+                  <lf-icon name="circle-question" :size="14" class="text-secondary-200 font-normal" />
                 </template>
                 <div class="p-1">
                   <p class="text-small font-semibold mb-2 text-black">
@@ -79,7 +79,7 @@
                   class="!text-primary-300 hover:!text-primary-600"
                   @click="isAffilationEditOpen = true"
                 >
-                  <lf-icon-old name="add-line" />Add affiliation
+                  <lf-icon name="plus" />Add affiliation
                 </lf-button>
               </div>
             </lf-table-cell>
@@ -90,14 +90,14 @@
               <lf-dropdown placement="bottom-end" width="160px">
                 <template #trigger>
                   <lf-button type="secondary-ghost" size="small" :icon-only="true">
-                    <lf-icon-old name="more-2-fill" />
+                    <lf-icon name="ellipsis-vertical" type="regular" />
                   </lf-button>
                 </template>
                 <lf-dropdown-item @click="viewActivity(project.id)">
-                  <lf-icon-old name="eye-line" />View activity
+                  <lf-icon name="eye" />View activity
                 </lf-dropdown-item>
                 <lf-dropdown-item v-if="hasPermission(LfPermission.memberEdit)" @click="isAffilationEditOpen = true">
-                  <lf-icon-old name="pencil-line" />Edit affiliation
+                  <lf-icon name="pen fa-sharp" />Edit affiliation
                 </lf-dropdown-item>
                 <lf-dropdown-item
                   @click="
@@ -108,7 +108,7 @@
                     })
                   "
                 >
-                  <lf-icon-old name="feedback-line" class="!text-red-500" />Report issue
+                  <lf-icon name="message-exclamation fa-sharp" class="!text-red-500" />Report issue
                 </lf-dropdown-item>
               </lf-dropdown>
             </lf-table-cell>
@@ -132,7 +132,6 @@
 <script setup lang="ts">
 import LfCard from '@/ui-kit/card/Card.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { computed, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
diff --git a/frontend/src/modules/contributor/components/details/overview/project/contributor-details-projects-affiliation.vue b/frontend/src/modules/contributor/components/details/overview/project/contributor-details-projects-affiliation.vue
index 54af6d053a..0a21732109 100644
--- a/frontend/src/modules/contributor/components/details/overview/project/contributor-details-projects-affiliation.vue
+++ b/frontend/src/modules/contributor/components/details/overview/project/contributor-details-projects-affiliation.vue
@@ -34,7 +34,7 @@
           >
             <template #placeholder>
               <div class="w-full h-full bg-gray-50 flex items-center justify-center">
-                <lf-icon-old name="community-line" :size="12" class="text-gray-400" />
+                <lf-icon name="house-building" :size="12" class="text-gray-400" />
               </div>
             </template>
           </lf-avatar>
@@ -85,7 +85,7 @@
               >
                 <template #placeholder>
                   <div class="w-full h-full bg-gray-50 flex items-center justify-center">
-                    <lf-icon-old name="community-line" :size="12" class="text-gray-400" />
+                    <lf-icon name="house-building" :size="12" class="text-gray-400" />
                   </div>
                 </template>
               </lf-avatar>
@@ -104,7 +104,7 @@
 </template>
 
 <script setup lang="ts">
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { ContributorAffiliation } from '@/modules/contributor/types/Contributor';
 import LfAvatar from '@/ui-kit/avatar/Avatar.vue';
 import { storeToRefs } from 'pinia';
diff --git a/frontend/src/modules/contributor/components/details/overview/project/contributor-details-projects-sorting.vue b/frontend/src/modules/contributor/components/details/overview/project/contributor-details-projects-sorting.vue
index eec10c36a1..d53d8b83bd 100644
--- a/frontend/src/modules/contributor/components/details/overview/project/contributor-details-projects-sorting.vue
+++ b/frontend/src/modules/contributor/components/details/overview/project/contributor-details-projects-sorting.vue
@@ -5,7 +5,7 @@
         <p class="text-small pr-1">
           <span class="font-semibold">Sort:</span> {{ label }}
         </p>
-        <lf-icon-old name="arrow-down-s-line" :size="16" />
+        <lf-icon name="chevron-down" :size="16" />
       </div>
     </template>
     <lf-dropdown-item
@@ -22,7 +22,7 @@
 import { computed } from 'vue';
 import LfDropdown from '@/ui-kit/dropdown/Dropdown.vue';
 import LfDropdownItem from '@/ui-kit/dropdown/DropdownItem.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const props = defineProps<{
   sorting: string,
diff --git a/frontend/src/modules/contributor/components/details/work-history/contributor-details-work-history-item.vue b/frontend/src/modules/contributor/components/details/work-history/contributor-details-work-history-item.vue
index 98c3df6d8d..8ebd2264cc 100644
--- a/frontend/src/modules/contributor/components/details/work-history/contributor-details-work-history-item.vue
+++ b/frontend/src/modules/contributor/components/details/work-history/contributor-details-work-history-item.vue
@@ -25,7 +25,7 @@
         </template>
 
         <lf-dropdown-item v-if="hasPermission(LfPermission.memberEdit)" @click="emit('edit')">
-          <lf-icon-old name="pencil-line" />Edit work experience
+          <lf-icon name="pen fa-sharp" />Edit work experience
         </lf-dropdown-item>
         <lf-dropdown-item
           @click="setReportDataModal({
@@ -34,12 +34,12 @@
             attribute: props.organization,
           })"
         >
-          <lf-icon-old name="feedback-line" class="!text-red-500" />Report issue
+          <lf-icon name="message-exclamation fa-sharp" class="!text-red-500" />Report issue
         </lf-dropdown-item>
         <template v-if="hasPermission(LfPermission.memberEdit)">
           <lf-dropdown-separator />
           <lf-dropdown-item type="danger" @click="removeWorkHistory">
-            <lf-icon-old name="delete-bin-6-line" />Delete work experience
+            <lf-icon name="trash-can" />Delete work experience
           </lf-dropdown-item>
         </template>
       </lf-dropdown>
@@ -48,7 +48,7 @@
 </template>
 
 <script setup lang="ts">
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/IconOld.vue';
 import { Contributor } from '@/modules/contributor/types/Contributor';
 import LfSvg from '@/shared/svg/svg.vue';
 import { Organization } from '@/modules/organization/types/Organization';
@@ -67,7 +67,6 @@ import usePermissions from '@/shared/modules/permissions/helpers/usePermissions'
 import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
 import { useSharedStore } from '@/shared/pinia/shared.store';
 import { ReportDataType } from '@/shared/modules/report-issue/constants/report-data-type.enum';
-import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const props = defineProps<{
   organization: Organization,
diff --git a/frontend/src/modules/contributor/components/edit/affilations/contributor-affilations-edit-item.vue b/frontend/src/modules/contributor/components/edit/affilations/contributor-affilations-edit-item.vue
index 8c4740fcee..38e5111b03 100644
--- a/frontend/src/modules/contributor/components/edit/affilations/contributor-affilations-edit-item.vue
+++ b/frontend/src/modules/contributor/components/edit/affilations/contributor-affilations-edit-item.vue
@@ -17,7 +17,7 @@
             >
               <template #placeholder>
                 <div class="w-full h-full bg-gray-50 flex items-center justify-center">
-                  <lf-icon-old name="community-line" :size="12" class="text-gray-400" />
+                  <lf-icon name="house-building" :size="12" class="text-gray-400" />
                 </div>
               </template>
             </lf-avatar>
@@ -40,7 +40,7 @@
             >
               <template #placeholder>
                 <div class="w-full h-full bg-gray-50 flex items-center justify-center">
-                  <lf-icon-old name="community-line" :size="12" class="text-gray-400" />
+                  <lf-icon name="house-building" :size="12" class="text-gray-400" />
                 </div>
               </template>
             </lf-avatar>
@@ -108,7 +108,7 @@ import moment from 'moment';
 import useVuelidate from '@vuelidate/core';
 import { Contributor } from '@/modules/contributor/types/Contributor';
 import useOrganizationHelpers from '@/modules/organization/helpers/organization.helpers';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfAvatar from '@/ui-kit/avatar/Avatar.vue';
 import LfFieldMessages from '@/ui-kit/field-messages/FieldMessages.vue';
 import LfCheckbox from '@/ui-kit/checkbox/Checkbox.vue';
diff --git a/frontend/src/modules/contributor/components/edit/affilations/contributor-affilations-edit.vue b/frontend/src/modules/contributor/components/edit/affilations/contributor-affilations-edit.vue
index b812811967..a42f9402bc 100644
--- a/frontend/src/modules/contributor/components/edit/affilations/contributor-affilations-edit.vue
+++ b/frontend/src/modules/contributor/components/edit/affilations/contributor-affilations-edit.vue
@@ -6,7 +6,7 @@
           Activities affiliation
         </h5>
         <lf-button type="secondary-ghost-light" :icon-only="true" @click="isModalOpen = false">
-          <lf-icon-old name="close-line" />
+          <lf-icon name="xmark" />
         </lf-button>
       </div>
       <p class="text-gray-500 text-medium">
@@ -61,19 +61,19 @@
                             class="ml-2 my-1"
                             :icon-only="true"
                           >
-                            <lf-icon-old name="more-fill" />
+                            <lf-icon name="ellipsis" type="regular" />
                           </lf-button>
                         </template>
                         <lf-dropdown-item
                           @click="copyToOtherProjects(ai)"
                         >
-                          <lf-icon-old name="file-copy-line" /> Apply to all projects
+                          <lf-icon name="copy" type="regular" /> Apply to all projects
                         </lf-dropdown-item>
                         <lf-dropdown-item
                           type="danger"
                           @click="form.splice(ai, 1)"
                         >
-                          <lf-icon-old name="delete-bin-6-line" /> Delete affiliation
+                          <lf-icon name="trash-can" /> Delete affiliation
                         </lf-dropdown-item>
                       </lf-dropdown>
                     </lf-contributor-edit-affilations-item>
@@ -87,7 +87,7 @@
                   class="mt-1"
                   @click="addAffiliation(subproject.id)"
                 >
-                  <lf-icon-old name="add-line" />
+                  <lf-icon name="plus" />
                   Add affiliation
                 </lf-button>
               </div>
@@ -113,7 +113,7 @@ import { useContributorStore } from '@/modules/contributor/store/contributor.sto
 import { Contributor, ContributorAffiliation } from '@/modules/contributor/types/Contributor';
 import { computed, onMounted, ref } from 'vue';
 import LfButton from '@/ui-kit/button/Button.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfContributorEditAffilationsItem
 , { AffilationForm } from '@/modules/contributor/components/edit/affilations/contributor-affilations-edit-item.vue';
 import useVuelidate from '@vuelidate/core';
diff --git a/frontend/src/modules/contributor/components/edit/contributor-add.vue b/frontend/src/modules/contributor/components/edit/contributor-add.vue
index e4de41c81a..3339b859cc 100644
--- a/frontend/src/modules/contributor/components/edit/contributor-add.vue
+++ b/frontend/src/modules/contributor/components/edit/contributor-add.vue
@@ -4,7 +4,7 @@
     <section class="py-4 pr-4 pl-6 flex justify-between items-center">
       <h5>Add person</h5>
       <lf-button type="secondary-ghost-light" :icon-only="true" @click="isModalOpen = false">
-        <lf-icon-old name="close-line" />
+        <lf-icon name="xmark" />
       </lf-button>
     </section>
 
@@ -54,7 +54,7 @@
                       :icon-only="true"
                       @click="form.email.splice(ei, 1)"
                     >
-                      <lf-icon-old name="delete-bin-6-line" />
+                      <lf-icon name="trash-can" />
                     </lf-button>
                   </div>
                 </lf-contributor-add-email-item>
@@ -65,7 +65,7 @@
               />
             </lf-field>
             <lf-button type="primary-link" size="small" class="mt-3" @click="form.email.push('')">
-              <lf-icon-old name="add-line" />
+              <lf-icon name="plus" />
               Add another email
             </lf-button>
           </article>
@@ -122,7 +122,7 @@ import {
   computed, reactive, ref,
 } from 'vue';
 import LfButton from '@/ui-kit/button/Button.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfInput from '@/ui-kit/input/Input.vue';
 import LfField from '@/ui-kit/field/Field.vue';
 import { CrowdIntegrations } from '@/integrations/integrations-config';
diff --git a/frontend/src/modules/contributor/components/edit/contributor-edit-profile-photo.vue b/frontend/src/modules/contributor/components/edit/contributor-edit-profile-photo.vue
index 8a77ea8bec..2aa095bde6 100644
--- a/frontend/src/modules/contributor/components/edit/contributor-edit-profile-photo.vue
+++ b/frontend/src/modules/contributor/components/edit/contributor-edit-profile-photo.vue
@@ -18,9 +18,10 @@
               @update:model-value="$v.profilePhoto.$touch()"
             >
               <template #suffix>
-                <lf-icon-old
+                <lf-icon
                   v-if="form.profilePhoto"
-                  name="close-circle-line"
+                  name="circle-xmark"
+                  type="regular"
                   :size="20"
                   class="text-gray-300 cursor-pointer"
                   @click="form.profilePhoto = ''"
@@ -68,7 +69,7 @@ import LfField from '@/ui-kit/field/Field.vue';
 import LfFieldMessage from '@/ui-kit/field-message/FieldMessage.vue';
 import LfFieldMessages from '@/ui-kit/field-messages/FieldMessages.vue';
 import Message from '@/shared/message/message';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { useContributorStore } from '@/modules/contributor/store/contributor.store';
 import useContributorHelpers from '@/modules/contributor/helpers/contributor.helpers';
 import { Contributor } from '@/modules/contributor/types/Contributor';
diff --git a/frontend/src/modules/contributor/components/edit/identity/contributor-identity-add.vue b/frontend/src/modules/contributor/components/edit/identity/contributor-identity-add.vue
index 0390e7f375..d3d0c2204d 100644
--- a/frontend/src/modules/contributor/components/edit/identity/contributor-identity-add.vue
+++ b/frontend/src/modules/contributor/components/edit/identity/contributor-identity-add.vue
@@ -5,7 +5,7 @@
         <div class="flex items-center justify-between pb-6">
           <h5>Add identity</h5>
           <lf-button type="secondary-ghost-light" :icon-only="true" @click="close">
-            <lf-icon-old name="close-line" />
+            <lf-icon name="xmark" />
           </lf-button>
         </div>
 
@@ -23,16 +23,17 @@
                   <template #prefix>
                     <div class="flex items-center flex-nowrap whitespace-nowrap">
                       <div class="min-w-5">
-                        <lf-icon-old v-if="identity.type === 'email'" name="mail-line" class="text-black" :size="20" />
+                        <lf-icon v-if="identity.type === 'email'" name="envelope" type="regular" class="text-black" :size="20" />
                         <img
                           v-else-if="platform(identity.platform)"
                           :src="platform(identity.platform)?.image"
                           class="h-5 w-5 object-contain"
                           :alt="identity.value"
                         />
-                        <lf-icon-old
+                        <lf-icon
                           v-else
-                          name="fingerprint-fill"
+                          name="fingerprint"
+                          type="solid"
                           :size="20"
                           class="text-gray-600"
                         />
@@ -54,7 +55,7 @@
                   :icon-only="true"
                   @click="form.splice(ii, 1)"
                 >
-                  <lf-icon-old name="delete-bin-6-line" />
+                  <lf-icon name="trash-can" />
                 </lf-button>
               </div>
               <lf-field-messages
@@ -74,7 +75,7 @@
             })"
           >
             <lf-button type="primary-link" size="small">
-              <lf-icon-old name="add-line" />
+              <lf-icon name="plus" />
               Add identity
             </lf-button>
           </lf-contributor-details-identity-add-dropdown>
@@ -104,7 +105,7 @@ import {
 } from 'vue';
 import { Contributor, ContributorIdentity } from '@/modules/contributor/types/Contributor';
 import LfButton from '@/ui-kit/button/Button.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfInput from '@/ui-kit/input/Input.vue';
 import { CrowdIntegrations } from '@/integrations/integrations-config';
 import { useContributorStore } from '@/modules/contributor/store/contributor.store';
diff --git a/frontend/src/modules/contributor/components/edit/identity/contributor-identity-edit.vue b/frontend/src/modules/contributor/components/edit/identity/contributor-identity-edit.vue
index a4829674e5..05c8c9a924 100644
--- a/frontend/src/modules/contributor/components/edit/identity/contributor-identity-edit.vue
+++ b/frontend/src/modules/contributor/components/edit/identity/contributor-identity-edit.vue
@@ -5,7 +5,7 @@
         <div class="flex items-center justify-between pb-6">
           <h5>Edit identity</h5>
           <lf-button type="secondary-ghost-light" :icon-only="true" @click="close">
-            <lf-icon-old name="close-line" />
+            <lf-icon name="xmark" />
           </lf-button>
         </div>
 
@@ -14,16 +14,17 @@
             <template #prefix>
               <div class="flex items-center flex-nowrap whitespace-nowrap">
                 <div class="min-w-5">
-                  <lf-icon-old v-if="form.type === 'email'" name="mail-line" class="text-black" :size="20" />
+                  <lf-icon v-if="form.type === 'email'" name="envelope" type="regular" class="text-black" :size="20" />
                   <img
                     v-else-if="platform"
                     :src="platform?.image"
                     class="h-5 w-5 object-contain"
                     :alt="form.value"
                   />
-                  <lf-icon-old
+                  <lf-icon
                     v-else
-                    name="fingerprint-fill"
+                    name="fingerprint"
+                    type="solid"
                     :size="20"
                     class="text-gray-600"
                   />
@@ -64,7 +65,7 @@ import {
 } from 'vue';
 import { Contributor, ContributorIdentity } from '@/modules/contributor/types/Contributor';
 import LfButton from '@/ui-kit/button/Button.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfInput from '@/ui-kit/input/Input.vue';
 import { CrowdIntegrations } from '@/integrations/integrations-config';
 import { useContributorStore } from '@/modules/contributor/store/contributor.store';
diff --git a/frontend/src/modules/contributor/components/edit/work-history/contributor-work-history-edit.vue b/frontend/src/modules/contributor/components/edit/work-history/contributor-work-history-edit.vue
index 8e4e2b0b8a..7e36346f5c 100644
--- a/frontend/src/modules/contributor/components/edit/work-history/contributor-work-history-edit.vue
+++ b/frontend/src/modules/contributor/components/edit/work-history/contributor-work-history-edit.vue
@@ -5,7 +5,7 @@
         <div class="flex items-center justify-between pb-6">
           <h5>{{ isEdit ? 'Edit' : 'Add' }} work experience</h5>
           <lf-button type="secondary-ghost-light" :icon-only="true" @click="close">
-            <lf-icon-old name="close-line" />
+            <lf-icon name="xmark" />
           </lf-button>
         </div>
 
@@ -74,7 +74,7 @@
       </div>
       <div class="px-6 pb-10 flex">
         <div class="mt-0.5">
-          <lf-icon-old name="information-line" :size="16" class="text-gray-600" />
+          <lf-icon name="circle-info" :size="16" class="text-gray-600" />
         </div>
         <div class="flex-grow pl-2 text-xs text-gray-500">
           <span class="font-semibold">Activities affiliation</span> with a certain organization is automatically defined
@@ -111,7 +111,7 @@ import {
 } from 'vue';
 import { Contributor } from '@/modules/contributor/types/Contributor';
 import LfButton from '@/ui-kit/button/Button.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfInput from '@/ui-kit/input/Input.vue';
 import LfCheckbox from '@/ui-kit/checkbox/Checkbox.vue';
 import { useContributorStore } from '@/modules/contributor/store/contributor.store';
diff --git a/frontend/src/modules/contributor/components/shared/contributor-dropdown.vue b/frontend/src/modules/contributor/components/shared/contributor-dropdown.vue
index f2981d4cd2..a7d2f18af9 100644
--- a/frontend/src/modules/contributor/components/shared/contributor-dropdown.vue
+++ b/frontend/src/modules/contributor/components/shared/contributor-dropdown.vue
@@ -12,21 +12,21 @@
     :disabled="!!props.contributor.username?.github"
     @click="emit('findGithub')"
   >
-    <lf-icon-old name="github-fill" />
+    <lf-icon name="github" type="brands" />
     Find GitHub
   </lf-dropdown-item>
   <lf-dropdown-item v-if="hasPermission(LfPermission.memberEdit)" @click="markTeamMember(!isTeamMember(props.contributor))">
-    <lf-icon-old name="team-line" />
+    <lf-icon name="people-group" />
     {{ isTeamMember(props.contributor) ? 'Unmark' : 'Mark' }} as team member
   </lf-dropdown-item>
   <lf-dropdown-item v-if="hasPermission(LfPermission.memberEdit)" @click="markBot(!isBot(props.contributor))">
-    <lf-icon-old name="robot-line" />
+    <lf-icon name="robot" />
     {{ isBot(props.contributor) ? 'Unmark' : 'Mark' }} as bot
   </lf-dropdown-item>
   <template v-if="hasPermission(LfPermission.memberDestroy)">
     <lf-dropdown-separator />
     <lf-dropdown-item type="danger" @click="deleteContributor()">
-      <lf-icon-old name="delete-bin-6-line" />
+      <lf-icon name="trash-can" />
       Delete profile
     </lf-dropdown-item>
   </template>
@@ -34,6 +34,7 @@
 
 <script setup lang="ts">
 import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfDropdownItem from '@/ui-kit/dropdown/DropdownItem.vue';
 import LfDropdownSeparator from '@/ui-kit/dropdown/DropdownSeparator.vue';
 import usePermissions from '@/shared/modules/permissions/helpers/usePermissions';
@@ -44,7 +45,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { MemberService } from '@/modules/member/member-service';
 import { doManualAction } from '@/shared/helpers/manualAction.helpers';
 import ConfirmDialog from '@/shared/dialog/confirm-dialog';
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import useContributorHelpers from '@/modules/contributor/helpers/contributor.helpers';
 import { Contributor } from '@/modules/contributor/types/Contributor';
 import { useContributorStore } from '@/modules/contributor/store/contributor.store';
diff --git a/frontend/src/modules/contributor/components/shared/contributor-engagement-level.vue b/frontend/src/modules/contributor/components/shared/contributor-engagement-level.vue
index ac57186242..53d9679a08 100644
--- a/frontend/src/modules/contributor/components/shared/contributor-engagement-level.vue
+++ b/frontend/src/modules/contributor/components/shared/contributor-engagement-level.vue
@@ -2,7 +2,7 @@
   <div class="flex items-center gap-1.5 font-semibold text-small">
     <div v-if="!data" class="flex items-center text-secondary-400">
       <div class="animate-spin mr-1.5">
-        <lf-icon-old name="loader-4-fill" :size="16" class="text-secondary-400" />
+        <lf-icon name="circle-notch" type="solid" :size="16" class="text-secondary-400" />
       </div>
       Calculating
     </div>
@@ -19,7 +19,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { Contributor } from '@/modules/contributor/types/Contributor';
 
 const props = defineProps<{
diff --git a/frontend/src/modules/contributor/components/shared/contributor-sentiment.vue b/frontend/src/modules/contributor/components/shared/contributor-sentiment.vue
index 9affe49d49..4ce7ef7348 100644
--- a/frontend/src/modules/contributor/components/shared/contributor-sentiment.vue
+++ b/frontend/src/modules/contributor/components/shared/contributor-sentiment.vue
@@ -1,7 +1,7 @@
 <template>
   <lf-tooltip v-if="data" :content="`Score: ${props.contributor.averageSentiment}`">
     <div class="flex items-center gap-1.5" :class="data.class">
-      <lf-icon-old
+      <lf-icon
         :size="16"
         :name="data.icon"
       />
@@ -14,7 +14,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfTooltip from '@/ui-kit/tooltip/Tooltip.vue';
 import { Contributor } from '@/modules/contributor/types/Contributor';
 
@@ -32,20 +32,20 @@ const data = computed<{
   }
   if (props.contributor.averageSentiment >= 67) {
     return {
-      icon: 'emotion-happy-line',
+      icon: 'face-smile',
       label: 'Positive',
       class: 'text-green-600',
     };
   }
   if (props.contributor.averageSentiment <= 33) {
     return {
-      icon: 'emotion-unhappy-line',
+      icon: 'face-frown',
       label: 'Negative',
       class: 'text-red-500',
     };
   }
   return {
-    icon: 'emotion-normal-line',
+    icon: 'face-meh',
     label: 'Neutral',
     class: 'text-gray-400',
   };
diff --git a/frontend/src/modules/contributor/components/shared/contributor-syncing-activities.vue b/frontend/src/modules/contributor/components/shared/contributor-syncing-activities.vue
index 0b9ce33486..5aeef235c5 100644
--- a/frontend/src/modules/contributor/components/shared/contributor-syncing-activities.vue
+++ b/frontend/src/modules/contributor/components/shared/contributor-syncing-activities.vue
@@ -6,7 +6,7 @@
       ${ props.contributor.activitySycning?.operationType === 'merge' ? 'merged' : 'unmerged' }. This process may take some minutes.`"
     >
       <div class="flex items-center gap-1.5 cursor-default">
-        <lf-icon-old name="loader-4-fill" :size="16" class="text-secondary-400 animate-spin" />
+        <lf-icon name="circle-notch" type="solid" :size="16" class="text-secondary-400 animate-spin" />
         <p class="text-small text-secondary-400 font-semibold">
           Syncing activities...
         </p>
@@ -20,7 +20,7 @@ import LfTooltip from '@/ui-kit/tooltip/Tooltip.vue';
 import { Contributor } from '@/modules/contributor/types/Contributor';
 import { computed } from 'vue';
 import { MergeActionState } from '@/shared/modules/merge/types/MemberActions';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const props = defineProps<{
   contributor: Contributor,
diff --git a/frontend/src/modules/contributor/components/shared/contributor-work-position.vue b/frontend/src/modules/contributor/components/shared/contributor-work-position.vue
index bb45c9ce1f..94d69aed82 100644
--- a/frontend/src/modules/contributor/components/shared/contributor-work-position.vue
+++ b/frontend/src/modules/contributor/components/shared/contributor-work-position.vue
@@ -12,7 +12,7 @@
     >
       <template #placeholder>
         <div class="w-full h-full bg-gray-50 flex items-center justify-center">
-          <lf-icon-old name="community-line" :size="14" class="text-gray-400" />
+          <lf-icon name="house-building" :size="14" class="text-gray-400" />
         </div>
       </template>
     </lf-avatar>
@@ -39,7 +39,7 @@ import { computed } from 'vue';
 import { useLfSegmentsStore } from '@/modules/lf/segments/store';
 import { storeToRefs } from 'pinia';
 import LfAvatar from '@/ui-kit/avatar/Avatar.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { Contributor } from '@/modules/contributor/types/Contributor';
 
 const props = defineProps<{
diff --git a/frontend/src/modules/contributor/pages/contributor-details.page.vue b/frontend/src/modules/contributor/pages/contributor-details.page.vue
index 47f9338c46..5f0d30cf56 100644
--- a/frontend/src/modules/contributor/pages/contributor-details.page.vue
+++ b/frontend/src/modules/contributor/pages/contributor-details.page.vue
@@ -13,7 +13,7 @@
         <div class="flex items-center">
           <lf-back :to="{ path: '/people' }" class="mr-2" @mouseover.stop @mouseout.stop>
             <lf-button type="secondary-ghost" :icon-only="true">
-              <lf-icon-old name="arrow-left-s-line" />
+              <lf-icon name="chevron-left" />
             </lf-button>
           </lf-back>
           <lf-contributor-details-header :contributor="contributor" />
@@ -51,9 +51,9 @@
               <lf-tab v-model="tabs" name="activities">
                 <div class="flex items-center gap-1">
                   Activities
-                  <lf-icon-old
+                  <lf-icon
                     v-if="contributor.activitySycning?.state === MergeActionState.ERROR"
-                    name="error-warning-line"
+                    name="circle-exclamation"
                     :size="16"
                     class="text-red-500"
                   />
@@ -85,7 +85,7 @@ import LfTab from '@/ui-kit/tabs/Tab.vue';
 import { onMounted, ref } from 'vue';
 import LfBack from '@/ui-kit/back/Back.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { useRoute } from 'vue-router';
 import LfSpinner from '@/ui-kit/spinner/Spinner.vue';
 import { useMemberStore } from '@/modules/member/store/pinia';

From 1ef00d27bc7cc2a32e5bb6dbd7dc35cdab908844 Mon Sep 17 00:00:00 2001
From: Sameh16 <sameh_mohamed16@hotmail.com>
Date: Wed, 15 Jan 2025 12:14:58 +0200
Subject: [PATCH 03/16] Replace old icon components with updated ones across
 data quality module

Signed-off-by: Sameh16 <sameh_mohamed16@hotmail.com>
---
 .../components/member/data-quality-member-issues.vue        | 4 ++--
 .../member/data-quality-member-merge-suggestions-item.vue   | 4 ++--
 .../member/data-quality-member-merge-suggestions.vue        | 4 ++--
 .../data-quality-organization-merge-suggestions-item.vue    | 6 +++---
 .../data-quality-organization-merge-suggestions.vue         | 4 ++--
 .../components/shared/data-quality-project-dropdown.vue     | 6 +++---
 6 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/frontend/src/modules/data-quality/components/member/data-quality-member-issues.vue b/frontend/src/modules/data-quality/components/member/data-quality-member-issues.vue
index 4694414c6d..1b9d15deb7 100644
--- a/frontend/src/modules/data-quality/components/member/data-quality-member-issues.vue
+++ b/frontend/src/modules/data-quality/components/member/data-quality-member-issues.vue
@@ -21,7 +21,7 @@
             @click="trackReviewProfile(member.id)"
           >
             <lf-button type="secondary" size="small">
-              <lf-icon-old name="external-link-line" />Review profile
+              <lf-icon name="arrow-up-right-from-square" />Review profile
             </lf-button>
           </router-link>
         </template>
@@ -59,7 +59,7 @@ import { DataIssueType } from '@/modules/data-quality/types/DataIssueType';
 import { DataQualityApiService } from '@/modules/data-quality/services/data-quality.api.service';
 import LfDataQualityMemberIssuesItem
   from '@/modules/data-quality/components/member/data-quality-member-issues-item.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { storeToRefs } from 'pinia';
 import { useLfSegmentsStore } from '@/modules/lf/segments/store';
 import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
diff --git a/frontend/src/modules/data-quality/components/member/data-quality-member-merge-suggestions-item.vue b/frontend/src/modules/data-quality/components/member/data-quality-member-merge-suggestions-item.vue
index 170055e931..854be5332f 100644
--- a/frontend/src/modules/data-quality/components/member/data-quality-member-merge-suggestions-item.vue
+++ b/frontend/src/modules/data-quality/components/member/data-quality-member-merge-suggestions-item.vue
@@ -3,7 +3,7 @@
     <div class="flex items-center gap-4">
       <template v-for="(member, mi) of props.suggestion.members" :key="member.id">
         <div v-if="mi > 0">
-          <lf-icon-old name="arrow-left-line" :size="16" class="text-gray-400" />
+          <lf-icon name="arrow-left" :size="16" class="text-gray-400" />
         </div>
         <div class="flex items-center gap-3">
           <lf-avatar
@@ -34,7 +34,7 @@
 
 <script lang="ts" setup>
 import LfAvatar from '@/ui-kit/avatar/Avatar.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfBadge from '@/ui-kit/badge/Badge.vue';
 import AppMemberMergeSimilarity from '@/modules/member/components/suggestions/member-merge-similarity.vue';
 
diff --git a/frontend/src/modules/data-quality/components/member/data-quality-member-merge-suggestions.vue b/frontend/src/modules/data-quality/components/member/data-quality-member-merge-suggestions.vue
index 2ddc158622..e478abb62b 100644
--- a/frontend/src/modules/data-quality/components/member/data-quality-member-merge-suggestions.vue
+++ b/frontend/src/modules/data-quality/components/member/data-quality-member-merge-suggestions.vue
@@ -12,7 +12,7 @@
         <template #action>
           <div class="flex gap-3">
             <lf-button type="secondary" size="small" @click="isModalOpen = true; detailsOffset = si">
-              <lf-icon-old name="eye-line" />View suggestion
+              <lf-icon name="eye" />View suggestion
             </lf-button>
             <lf-member-merge-suggestion-dropdown :suggestion="suggestion" @reload="reload()" />
           </div>
@@ -62,7 +62,7 @@ import LfDataQualityMemberMergeSuggestionsItem
   from '@/modules/data-quality/components/member/data-quality-member-merge-suggestions-item.vue';
 import LfSpinner from '@/ui-kit/spinner/Spinner.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import AppMemberMergeSuggestionsDialog from '@/modules/member/components/member-merge-suggestions-dialog.vue';
 import { storeToRefs } from 'pinia';
 import { useLfSegmentsStore } from '@/modules/lf/segments/store';
diff --git a/frontend/src/modules/data-quality/components/organization/data-quality-organization-merge-suggestions-item.vue b/frontend/src/modules/data-quality/components/organization/data-quality-organization-merge-suggestions-item.vue
index a08508f0ad..968954e6a6 100644
--- a/frontend/src/modules/data-quality/components/organization/data-quality-organization-merge-suggestions-item.vue
+++ b/frontend/src/modules/data-quality/components/organization/data-quality-organization-merge-suggestions-item.vue
@@ -3,7 +3,7 @@
     <div class="flex items-center gap-4">
       <template v-for="(organization, mi) of props.suggestion.organizations" :key="organization.id">
         <div v-if="mi > 0">
-          <lf-icon-old name="arrow-left-line" :size="16" class="text-gray-400" />
+          <lf-icon name="arrow-left" :size="16" class="text-gray-400" />
         </div>
         <div class="flex items-center gap-3">
           <lf-avatar
@@ -14,7 +14,7 @@
           >
             <template #placeholder>
               <div class="w-full h-full bg-gray-50 flex items-center justify-center">
-                <lf-icon-old name="community-line" :size="16" class="text-gray-400" />
+                <lf-icon name="house-building" :size="16" class="text-gray-400" />
               </div>
             </template>
           </lf-avatar>
@@ -36,7 +36,7 @@
 
 <script lang="ts" setup>
 import LfAvatar from '@/ui-kit/avatar/Avatar.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfBadge from '@/ui-kit/badge/Badge.vue';
 import AppMemberMergeSimilarity from '@/modules/member/components/suggestions/member-merge-similarity.vue';
 
diff --git a/frontend/src/modules/data-quality/components/organization/data-quality-organization-merge-suggestions.vue b/frontend/src/modules/data-quality/components/organization/data-quality-organization-merge-suggestions.vue
index a7522f3103..65e6f2844a 100644
--- a/frontend/src/modules/data-quality/components/organization/data-quality-organization-merge-suggestions.vue
+++ b/frontend/src/modules/data-quality/components/organization/data-quality-organization-merge-suggestions.vue
@@ -11,7 +11,7 @@
       >
         <template #action>
           <lf-button type="secondary" size="small" @click="isModalOpen = true; detailsOffset = si">
-            <lf-icon-old name="eye-line" />View merge suggestion
+            <lf-icon name="eye" />View merge suggestion
           </lf-button>
         </template>
       </lf-data-quality-organization-merge-suggestions-item>
@@ -54,7 +54,7 @@
 import { computed, onMounted, ref } from 'vue';
 import LfSpinner from '@/ui-kit/spinner/Spinner.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { OrganizationService } from '@/modules/organization/organization-service';
 import LfDataQualityOrganizationMergeSuggestionsItem
   from '@/modules/data-quality/components/organization/data-quality-organization-merge-suggestions-item.vue';
diff --git a/frontend/src/modules/data-quality/components/shared/data-quality-project-dropdown.vue b/frontend/src/modules/data-quality/components/shared/data-quality-project-dropdown.vue
index 56632983cd..3f3ade7d13 100644
--- a/frontend/src/modules/data-quality/components/shared/data-quality-project-dropdown.vue
+++ b/frontend/src/modules/data-quality/components/shared/data-quality-project-dropdown.vue
@@ -2,7 +2,7 @@
   <lf-dropdown>
     <template #trigger>
       <lf-button type="secondary">
-        <lf-icon-old name="stack-line" />
+        <lf-icon name="layer-group" />
         <div class="truncate" style="max-width: 28ch;">
           {{ getProjectName }}
         </div>
@@ -15,7 +15,7 @@
         class=" !border-0 !rounded-none shadow-none"
       >
         <template #prefix>
-          <lf-icon-old name="search-line" />
+          <lf-icon name="magnifying-glass" />
         </template>
       </lf-input>
     </div>
@@ -36,7 +36,7 @@
 <script lang="ts" setup>
 import LfButton from '@/ui-kit/button/Button.vue';
 import { computed, ref } from 'vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfDropdown from '@/ui-kit/dropdown/Dropdown.vue';
 import LfDropdownItem from '@/ui-kit/dropdown/DropdownItem.vue';
 import { storeToRefs } from 'pinia';

From 82cf93d78aa28b4ba4c68aba9cb6181a18c30618 Mon Sep 17 00:00:00 2001
From: Sameh16 <sameh_mohamed16@hotmail.com>
Date: Wed, 15 Jan 2025 12:16:46 +0200
Subject: [PATCH 04/16] Replace old loader icon with updated icon component in
 project group selection

Signed-off-by: Sameh16 <sameh_mohamed16@hotmail.com>
---
 .../lf/layout/components/lf-menu-project-group-selection.vue  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/modules/lf/layout/components/lf-menu-project-group-selection.vue b/frontend/src/modules/lf/layout/components/lf-menu-project-group-selection.vue
index b18b253c60..f7185b489a 100644
--- a/frontend/src/modules/lf/layout/components/lf-menu-project-group-selection.vue
+++ b/frontend/src/modules/lf/layout/components/lf-menu-project-group-selection.vue
@@ -33,7 +33,7 @@
 
     <div>
       <div v-if="loading" class="text-gray-400 px-3 h-20 flex items-center justify-center">
-        <lf-icon-old name="loader-4-line" class="animate-spin text-gray-400" :size="16" />
+        <lf-icon name="circle-notch" class="animate-spin text-gray-400" :size="16" />
         <span class="text-tiny ml-1 text-gray-400">
           Loading project groups...
         </span>
@@ -80,7 +80,7 @@ import pluralize from 'pluralize';
 import debounce from 'lodash/debounce';
 import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
 import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const SearchIcon = h(
   'i', // type

From 59257f585f423a7f0b6d57df66dd2709ea651167 Mon Sep 17 00:00:00 2001
From: Sameh16 <sameh_mohamed16@hotmail.com>
Date: Wed, 15 Jan 2025 12:21:15 +0200
Subject: [PATCH 05/16] Replace old icon components with updated ones across
 contributor and member modules

Signed-off-by: Sameh16 <sameh_mohamed16@hotmail.com>
---
 .../identity/contributor-details-identity-item.vue     |  1 -
 .../edit/identity/contributor-identity-add.vue         |  1 -
 .../edit/identity/contributor-identity-edit.vue        |  1 -
 .../member/components/list/member-list-table.vue       |  4 ++--
 .../member/components/member-unmerge-dialog.vue        | 10 +++++-----
 .../suggestions/member-merge-suggestion-dropdown.vue   |  4 ++--
 6 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/frontend/src/modules/contributor/components/details/identity/contributor-details-identity-item.vue b/frontend/src/modules/contributor/components/details/identity/contributor-details-identity-item.vue
index bfbe06f6ed..172139252e 100644
--- a/frontend/src/modules/contributor/components/details/identity/contributor-details-identity-item.vue
+++ b/frontend/src/modules/contributor/components/details/identity/contributor-details-identity-item.vue
@@ -18,7 +18,6 @@
       <lf-tooltip v-else content="Custom identity" placement="top-start">
         <lf-icon
           name="fingerprint"
-          type="solid"
           :size="20"
           class="text-gray-600"
         />
diff --git a/frontend/src/modules/contributor/components/edit/identity/contributor-identity-add.vue b/frontend/src/modules/contributor/components/edit/identity/contributor-identity-add.vue
index d3d0c2204d..6cbf07cc24 100644
--- a/frontend/src/modules/contributor/components/edit/identity/contributor-identity-add.vue
+++ b/frontend/src/modules/contributor/components/edit/identity/contributor-identity-add.vue
@@ -33,7 +33,6 @@
                         <lf-icon
                           v-else
                           name="fingerprint"
-                          type="solid"
                           :size="20"
                           class="text-gray-600"
                         />
diff --git a/frontend/src/modules/contributor/components/edit/identity/contributor-identity-edit.vue b/frontend/src/modules/contributor/components/edit/identity/contributor-identity-edit.vue
index 05c8c9a924..fcec79e1ed 100644
--- a/frontend/src/modules/contributor/components/edit/identity/contributor-identity-edit.vue
+++ b/frontend/src/modules/contributor/components/edit/identity/contributor-identity-edit.vue
@@ -24,7 +24,6 @@
                   <lf-icon
                     v-else
                     name="fingerprint"
-                    type="solid"
                     :size="20"
                     class="text-gray-600"
                   />
diff --git a/frontend/src/modules/member/components/list/member-list-table.vue b/frontend/src/modules/member/components/list/member-list-table.vue
index 7b380b7738..ae4bd1a33c 100644
--- a/frontend/src/modules/member/components/list/member-list-table.vue
+++ b/frontend/src/modules/member/components/list/member-list-table.vue
@@ -278,7 +278,7 @@
                         Contributions require that code was successfully merged into a repository.
                       </p>
                       <div class="flex gap-1">
-                        <lf-icon-old name="information-line" :size="16" class="text-gray-400" />
+                        <lf-icon name="circle-info" :size="16" class="text-gray-400" />
                         <p class="text-tiny text-gray-400">
                           Roles are automatically assigned based on data from connected integrations and individual activities on behalf of a project.
                         </p>
@@ -794,7 +794,7 @@ import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/ev
 import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
 import LfContributorDetailsProjectsMaintainer
   from '@/modules/contributor/components/details/overview/project/contributor-details-projects-maintainer.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import AppMemberBadge from '../member-badge.vue';
 import AppMemberDropdownContent from '../member-dropdown-content.vue';
 import AppMemberReach from '../member-reach.vue';
diff --git a/frontend/src/modules/member/components/member-unmerge-dialog.vue b/frontend/src/modules/member/components/member-unmerge-dialog.vue
index dcde3c94da..fe7005787b 100644
--- a/frontend/src/modules/member/components/member-unmerge-dialog.vue
+++ b/frontend/src/modules/member/components/member-unmerge-dialog.vue
@@ -163,9 +163,9 @@
                                 :alt="platformDetails(i.platform)?.name"
                                 :src="platformDetails(i.platform)?.image"
                               />
-                              <lf-icon-old
+                              <lf-icon
                                 v-else
-                                name="fingerprint-fill"
+                                name="fingerprint"
                                 :size="20"
                                 class="text-gray-600 mr-2"
                               />
@@ -237,9 +237,9 @@
                       :alt="platformDetails(i.platform)?.name"
                       :src="platformDetails(i.platform)?.image"
                     />
-                    <lf-icon-old
+                    <lf-icon
                       v-else
-                      name="fingerprint-fill"
+                      name="fingerprint"
                       :size="20"
                       class="text-gray-600 mr-2"
                     />
@@ -266,7 +266,7 @@ import { CrowdIntegrations } from '@/integrations/integrations-config';
 import AppMemberOrganizationList from '@/modules/member/components/suggestions/member-organizations-list.vue';
 import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
 import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { useContributorStore } from '@/modules/contributor/store/contributor.store';
 import { useRouter } from 'vue-router';
 import AppMemberSuggestionsDetails from './suggestions/member-merge-suggestions-details.vue';
diff --git a/frontend/src/modules/member/components/suggestions/member-merge-suggestion-dropdown.vue b/frontend/src/modules/member/components/suggestions/member-merge-suggestion-dropdown.vue
index 62dcb1894b..d42d83c3a7 100644
--- a/frontend/src/modules/member/components/suggestions/member-merge-suggestion-dropdown.vue
+++ b/frontend/src/modules/member/components/suggestions/member-merge-suggestion-dropdown.vue
@@ -6,7 +6,7 @@
         type="secondary-ghost"
         :icon-only="true"
       >
-        <lf-icon-old name="more-fill" />
+        <lf-icon name="ellipsis" />
       </lf-button>
     </template>
 
@@ -29,7 +29,7 @@ import useMemberMergeMessage from '@/shared/modules/merge/config/useMemberMergeM
 import { MemberService } from '@/modules/member/member-service';
 import Message from '@/shared/message/message';
 import { ref } from 'vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
 
 const props = defineProps<{

From bf227cb47e0a7414d83c074c6e9e802cf2bd3014 Mon Sep 17 00:00:00 2001
From: Sameh16 <sameh_mohamed16@hotmail.com>
Date: Wed, 15 Jan 2025 13:25:22 +0200
Subject: [PATCH 06/16] Update icon components across organization module for
 consistency

Signed-off-by: Sameh16 <sameh_mohamed16@hotmail.com>
---
 .../domains/organization-details-domain-item.vue | 13 +++++++------
 .../email/organization-details-email-item.vue    | 15 ++++++++-------
 .../header/organization-details-header-logo.vue  |  6 +++---
 .../organization-details-header-profiles.vue     |  9 +++++----
 .../organization-details-identity-item.vue       | 13 +++++++------
 .../details/organization-details-actions.vue     |  5 +++--
 .../details/organization-details-activities.vue  |  6 +++---
 .../organization-details-contributors.vue        |  7 ++++---
 .../details/organization-details-domains.vue     |  6 +++---
 .../details/organization-details-emails.vue      |  6 +++---
 .../details/organization-details-header.vue      |  4 ++--
 .../details/organization-details-identities.vue  |  6 +++---
 .../organization-details-phone-numbers.vue       |  6 +++---
 ...nization-details-community-project-select.vue |  6 +++---
 .../overview/organization-details-attributes.vue |  4 ++--
 .../edit/domain/organization-domain-add.vue      | 10 +++++-----
 .../edit/domain/organization-domain-edit.vue     |  6 +++---
 .../edit/email/organization-email-add.vue        | 10 +++++-----
 .../edit/email/organization-email-edit.vue       |  6 +++---
 .../edit/identity/organization-identity-add.vue  | 12 ++++++------
 .../edit/identity/organization-identity-edit.vue |  8 ++++----
 .../components/edit/organization-add.vue         |  4 ++--
 .../components/edit/organization-edit-logo.vue   |  8 ++++----
 .../list/organization-common-list-table.vue      | 10 +++++-----
 .../components/list/organization-list-table.vue  |  6 +++---
 .../list/organization-list-toolbar.vue           |  2 +-
 .../components/organization-dropdown-content.vue |  4 +++-
 .../components/organization-dropdown.vue         |  3 ++-
 .../organization-merge-suggestions-dialog.vue    |  3 ++-
 .../components/organization-name.vue             |  3 ++-
 .../organization-selection-dropdown.vue          |  5 ++---
 .../components/organization-unmerge-dialog.vue   | 16 ++++++++--------
 .../components/shared/organization-dropdown.vue  |  5 +++--
 .../components/shared/organization-select.vue    |  6 +++---
 .../shared/organization-syncing-activities.vue   |  4 ++--
 .../annualRevenue/AnnualRevenueFilter.vue        |  2 +-
 .../pages/organization-details.page.vue          |  8 ++++----
 .../pages/organization-form-page.vue             |  2 +-
 .../organization-merge-suggestions-page.vue      |  4 ++--
 39 files changed, 135 insertions(+), 124 deletions(-)

diff --git a/frontend/src/modules/organization/components/details/domains/organization-details-domain-item.vue b/frontend/src/modules/organization/components/details/domains/organization-details-domain-item.vue
index d1539d44b9..c17a8a0122 100644
--- a/frontend/src/modules/organization/components/details/domains/organization-details-domain-item.vue
+++ b/frontend/src/modules/organization/components/details/domains/organization-details-domain-item.vue
@@ -5,7 +5,7 @@
   >
     <div class="flex items-center justify-between min-h-7">
       <div class="flex items-center">
-        <lf-icon-old name="link" :size="20" class="text-gray-500 mr-2" />
+        <lf-icon name="link" :size="20" class="text-gray-500 mr-2" />
         <lf-tooltip
           :content="props.domain.value"
           :disabled="props.domain.value.length < 25"
@@ -22,7 +22,7 @@
           </a>
         </lf-tooltip>
         <lf-tooltip v-if="props.domain.verified" content="Verified domain" class="ml-1.5">
-          <lf-icon-old name="verified-badge-line" :size="16" class="text-primary-500" />
+          <lf-icon name="badge-check" :size="16" class="text-primary-500" />
         </lf-tooltip>
       </div>
       <lf-dropdown
@@ -33,7 +33,7 @@
       >
         <template #trigger>
           <lf-button type="secondary-ghost" size="small" :icon-only="true">
-            <lf-icon-old name="more-fill" />
+            <lf-icon name="ellipsis" type="regular" />
           </lf-button>
         </template>
 
@@ -42,7 +42,7 @@
           class="w-full"
           @click="emit('edit')"
         >
-          <lf-icon-old name="pencil-line" />Edit domain
+          <lf-icon name="pen fa-sharp" />Edit domain
         </lf-dropdown-item>
 
         <!-- Unmerge -->
@@ -60,7 +60,7 @@
             attribute: props.domain,
           })"
         >
-          <lf-icon name="feedback-line" class="!text-red-500" />Report issue
+          <lf-icon name="message-exclamation" class="!text-red-500" />Report issue
         </lf-dropdown-item>
 
         <lf-dropdown-separator
@@ -72,7 +72,7 @@
           class="w-full"
           @click="removeDomain()"
         >
-          <lf-icon-old name="delete-bin-6-line" />Delete domain
+          <lf-icon name="trash-can" />Delete domain
         </lf-dropdown-item>
       </lf-dropdown>
     </div>
@@ -92,6 +92,7 @@ import {
   OrganizationIdentityType,
 } from '@/modules/organization/types/Organization';
 import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { withHttp } from '@/utils/string';
 import LfTooltip from '@/ui-kit/tooltip/Tooltip.vue';
 import { CrowdIntegrations } from '@/integrations/integrations-config';
diff --git a/frontend/src/modules/organization/components/details/email/organization-details-email-item.vue b/frontend/src/modules/organization/components/details/email/organization-details-email-item.vue
index 76c68a466b..589643b2d7 100644
--- a/frontend/src/modules/organization/components/details/email/organization-details-email-item.vue
+++ b/frontend/src/modules/organization/components/details/email/organization-details-email-item.vue
@@ -5,7 +5,7 @@
     @mouseleave="hovered = false"
   >
     <div class="flex items-start">
-      <lf-icon-old name="mail-line" :size="20" class="text-gray-500" />
+      <lf-icon name="envelope" :size="20" class="text-gray-500" />
       <div class="pl-2">
         <div class="flex items-center">
           <lf-tooltip
@@ -24,8 +24,8 @@
             </a>
           </lf-tooltip>
           <lf-tooltip v-if="props.email.verified" content="Verified email">
-            <lf-icon-old
-              name="verified-badge-line"
+            <lf-icon
+              name="badge-check"
               :size="16"
               class="ml-1 text-primary-500"
             />
@@ -42,7 +42,7 @@
     <lf-dropdown v-show="hovered" placement="bottom-end" width="232px">
       <template #trigger>
         <lf-button type="secondary-ghost" size="small" :icon-only="true">
-          <lf-icon-old name="more-fill" />
+          <lf-icon name="ellipsis" type="regular" />
         </lf-button>
       </template>
       <!-- Edit identity -->
@@ -51,7 +51,7 @@
         class="w-full"
         @click="emit('edit')"
       >
-        <lf-icon-old name="pencil-line" />Edit email
+        <lf-icon name="pen fa-sharp" />Edit email
       </lf-dropdown-item>
       <!-- Unmerge -->
       <lf-dropdown-item
@@ -68,7 +68,7 @@
           attribute: props.organization,
         })"
       >
-        <lf-icon name="feedback-line" class="!text-red-500" />Report issue
+        <lf-icon name="message-exclamation" class="!text-red-500" />Report issue
       </lf-dropdown-item>
 
       <lf-dropdown-separator
@@ -80,7 +80,7 @@
         class="w-full"
         @click="removeEmail"
       >
-        <lf-icon-old name="delete-bin-6-line" />Delete email
+        <lf-icon name="trash-can" />Delete email
       </lf-dropdown-item>
     </lf-dropdown>
   </article>
@@ -88,6 +88,7 @@
 
 <script setup lang="ts">
 import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { CrowdIntegrations } from '@/integrations/integrations-config';
 import LfTooltip from '@/ui-kit/tooltip/Tooltip.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
diff --git a/frontend/src/modules/organization/components/details/header/organization-details-header-logo.vue b/frontend/src/modules/organization/components/details/header/organization-details-header-logo.vue
index 956916f844..e5605de3c8 100644
--- a/frontend/src/modules/organization/components/details/header/organization-details-header-logo.vue
+++ b/frontend/src/modules/organization/components/details/header/organization-details-header-logo.vue
@@ -10,13 +10,13 @@
     >
       <template #placeholder>
         <div class="w-full h-full bg-gray-50 flex items-center justify-center">
-          <lf-icon-old name="community-line" :size="32" class="text-gray-300" />
+          <lf-icon name="house-building" :size="32" class="text-gray-300" />
         </div>
       </template>
       <template #overlay>
         <div class="absolute top-0 left-0 w-full h-full bg-secondary-500 opacity-50" />
         <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-          <lf-icon-old name="pencil-line" :size="24" class="text-white" />
+          <lf-icon name="pen fa-sharp" :size="24" class="text-white" />
         </div>
       </template>
     </lf-avatar>
@@ -37,7 +37,7 @@
 
 <script setup lang="ts">
 import LfAvatar from '@/ui-kit/avatar/Avatar.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { ref } from 'vue';
 import { Organization } from '@/modules/organization/types/Organization';
 import useOrganizationHelpers from '@/modules/organization/helpers/organization.helpers';
diff --git a/frontend/src/modules/organization/components/details/header/organization-details-header-profiles.vue b/frontend/src/modules/organization/components/details/header/organization-details-header-profiles.vue
index ae4469a468..fe168f1dd4 100644
--- a/frontend/src/modules/organization/components/details/header/organization-details-header-profiles.vue
+++ b/frontend/src/modules/organization/components/details/header/organization-details-header-profiles.vue
@@ -17,7 +17,7 @@
             <p class="!text-white">
               {{ platformData(platform)?.name }} profile
             </p>
-            <lf-icon-old name="external-link-line" :size="14" class="text-gray-400" />
+            <lf-icon name="arrow-up-right-from-square" :size="14" class="text-gray-400" />
           </a>
         </template>
         <a
@@ -29,8 +29,9 @@
           class="flex items-center gap-1"
           @click="idents.length > 1 ? $event.preventDefault() : null"
         >
-          <lf-icon-old
+          <lf-icon
             :name="platformData(platform)?.icon"
+            :type="platformData(platform)?.iconType"
             :size="20"
             :style="{ color: platformData(platform)?.brandColor }"
             class="platform-icon"
@@ -64,7 +65,7 @@
               {{ identity.value }}
             </p>
           </div>
-          <lf-icon-old v-if="identity.url" name="external-link-line" :size="16" class="text-gray-300" />
+          <lf-icon v-if="identity.url" name="arrow-up-right-from-square" :size="16" class="text-gray-300" />
         </a>
       </div>
     </div>
@@ -74,7 +75,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { CrowdIntegrations } from '@/integrations/integrations-config';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfTooltip from '@/ui-kit/tooltip/Tooltip.vue';
 import useOrganizationHelpers from '@/modules/organization/helpers/organization.helpers';
 import {
diff --git a/frontend/src/modules/organization/components/details/identity/organization-details-identity-item.vue b/frontend/src/modules/organization/components/details/identity/organization-details-identity-item.vue
index d348fe0d26..3fe595b5ed 100644
--- a/frontend/src/modules/organization/components/details/identity/organization-details-identity-item.vue
+++ b/frontend/src/modules/organization/components/details/identity/organization-details-identity-item.vue
@@ -17,8 +17,8 @@
         />
       </lf-tooltip>
       <lf-tooltip v-else content="Custom identity" placement="top-start">
-        <lf-icon-old
-          name="fingerprint-fill"
+        <lf-icon
+          name="fingerprint"
           :size="20"
           class="text-gray-600"
         />
@@ -50,7 +50,7 @@
     <lf-dropdown v-show="hovered" placement="bottom-end" width="232px">
       <template #trigger>
         <lf-button type="secondary-ghost" size="small" :icon-only="true">
-          <lf-icon-old name="more-fill" />
+          <lf-icon name="ellipsis" type="regular" />
         </lf-button>
       </template>
       <!-- Edit identity -->
@@ -59,7 +59,7 @@
         class="w-full"
         @click="emit('edit')"
       >
-        <lf-icon-old name="pencil-line" />Edit identity
+        <lf-icon name="pen fa-sharp" />Edit identity
       </lf-dropdown-item>
 
       <!-- Unmerge -->
@@ -77,7 +77,7 @@
           attribute: props.identity,
         })"
       >
-        <lf-icon name="feedback-line" class="!text-red-500" />Report issue
+        <lf-icon name="message-exclamation" class="!text-red-500" />Report issue
       </lf-dropdown-item>
 
       <lf-dropdown-separator
@@ -89,7 +89,7 @@
         class="w-full"
         @click="removeIdentity"
       >
-        <lf-icon-old name="delete-bin-6-line" />Delete identity
+        <lf-icon name="trash-can" />Delete identity
       </lf-dropdown-item>
     </lf-dropdown>
   </article>
@@ -97,6 +97,7 @@
 
 <script setup lang="ts">
 import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { CrowdIntegrations } from '@/integrations/integrations-config';
 import LfTooltip from '@/ui-kit/tooltip/Tooltip.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
diff --git a/frontend/src/modules/organization/components/details/organization-details-actions.vue b/frontend/src/modules/organization/components/details/organization-details-actions.vue
index 7703858711..809d20a19f 100644
--- a/frontend/src/modules/organization/components/details/organization-details-actions.vue
+++ b/frontend/src/modules/organization/components/details/organization-details-actions.vue
@@ -7,7 +7,7 @@
           organization: props.organization,
         })"
       >
-        <lf-icon-old name="feedback-line" class="text-red-500" /> Report data issue
+        <lf-icon name="message-exclamation" class="text-red-500" /> Report data issue
       </lf-button>
       <template v-if="hasSegments">
         <!-- Merge suggestions -->
@@ -41,7 +41,7 @@
             :icon-only="true"
             :class="hasSegments && hasPermission(LfPermission.mergeOrganizations) ? '!rounded-l-none -ml-px' : ''"
           >
-            <lf-icon-old name="more-fill" />
+            <lf-icon name="ellipsis" type="regular" />
           </lf-button>
         </template>
 
@@ -69,6 +69,7 @@
 
 <script setup lang="ts">
 import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import LfButtonGroup from '@/ui-kit/button/ButtonGroup.vue';
 import LfDropdown from '@/ui-kit/dropdown/Dropdown.vue';
diff --git a/frontend/src/modules/organization/components/details/organization-details-activities.vue b/frontend/src/modules/organization/components/details/organization-details-activities.vue
index c1eaa8d045..16071b43ef 100644
--- a/frontend/src/modules/organization/components/details/organization-details-activities.vue
+++ b/frontend/src/modules/organization/components/details/organization-details-activities.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="props.organization.activitySycning?.state === MergeActionState.IN_PROGRESS" class="pt-12 flex flex-col items-center">
-    <lf-icon-old name="loader-4-line" :size="40" class="text-gray-300 animate-spin" />
+    <lf-icon name="circle-notch" :size="40" class="text-gray-300 animate-spin" />
     <h6 class="text-center py-3">
       Syncing activities...
     </h6>
@@ -11,7 +11,7 @@
     </p>
   </div>
   <div v-else-if="props.organization.activitySycning?.state === MergeActionState.ERROR" class="pt-12 flex flex-col items-center">
-    <lf-icon-old name="error-warning-line" :size="40" class="text-gray-300" />
+    <lf-icon name="circle-exclamation" :size="40" class="text-gray-300" />
     <h6 class="text-center py-3">
       Error syncing activities
     </h6>
@@ -35,7 +35,7 @@
 <script setup lang="ts">
 import { Organization } from '@/modules/organization/types/Organization';
 import AppActivityTimeline from '@/modules/activity/components/activity-timeline.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { MergeActionState } from '@/shared/modules/merge/types/MemberActions';
 import { ref } from 'vue';
 
diff --git a/frontend/src/modules/organization/components/details/organization-details-contributors.vue b/frontend/src/modules/organization/components/details/organization-details-contributors.vue
index 10944a52be..29466c5742 100644
--- a/frontend/src/modules/organization/components/details/organization-details-contributors.vue
+++ b/frontend/src/modules/organization/components/details/organization-details-contributors.vue
@@ -23,7 +23,7 @@
             <span class="font-semibold"> Sort: </span>
             {{ sorters[sort] }}
           </p>
-          <lf-icon-old name="arrow-down-s-line" :size="16" />
+          <lf-icon name="chevron-down" :size="16" />
         </div>
       </template>
 
@@ -35,7 +35,7 @@
         @click="onSortChange(key)"
       >
         <span>{{ label }}</span>
-        <lf-icon-old v-if="sort === key" name="check-line" :size="16" class="text-primary-500" />
+        <lf-icon v-if="sort === key" name="check" :size="16" class="text-primary-500" />
       </lf-dropdown-item>
     </lf-dropdown>
   </div>
@@ -85,7 +85,7 @@
             <template #badge>
               <div>
                 <div class="h-6 flex items-center px-2 border border-gray-200 rounded-md gap-1.5 whitespace-nowrap">
-                  <lf-icon-old name="fingerprint-line" :size="16" />
+                  <lf-icon name="fingerprint" :size="16" />
                   <p class="text-small text-gray-600 whitespace-nowrap">
                     {{ pluralize('identity', identities(contributor).length, true) }}
                   </p>
@@ -136,6 +136,7 @@ import { Pagination } from '@/shared/types/Pagination';
 import { Member } from '@/modules/member/types/Member';
 import LfAvatar from '@/ui-kit/avatar/Avatar.vue';
 import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfDropdown from '@/ui-kit/dropdown/Dropdown.vue';
 import LfDropdownItem from '@/ui-kit/dropdown/DropdownItem.vue';
 import { useLfSegmentsStore } from '@/modules/lf/segments/store';
diff --git a/frontend/src/modules/organization/components/details/organization-details-domains.vue b/frontend/src/modules/organization/components/details/organization-details-domains.vue
index 9706ebd620..2d3517e78f 100644
--- a/frontend/src/modules/organization/components/details/organization-details-domains.vue
+++ b/frontend/src/modules/organization/components/details/organization-details-domains.vue
@@ -12,7 +12,7 @@
             size="small"
             :icon-only="true"
           >
-            <lf-icon-old name="add-fill" />
+            <lf-icon name="plus" type="regular" />
           </lf-button>
         </lf-tooltip>
       </lf-organization-details-domains-add-dropdown>
@@ -35,7 +35,7 @@
     </div>
 
     <div v-if="!domains(props.organization).length" class="pt-2 flex flex-col items-center w-full">
-      <lf-icon-old name="link" :size="40" class="text-gray-300" />
+      <lf-icon name="link" :size="40" class="text-gray-300" />
       <p class="text-center pt-3 text-medium text-gray-400">
         No domains
       </p>
@@ -57,7 +57,7 @@
 
 <script setup lang="ts">
 import LfButton from '@/ui-kit/button/Button.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { ref } from 'vue';
 import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
 import usePermissions from '@/shared/modules/permissions/helpers/usePermissions';
diff --git a/frontend/src/modules/organization/components/details/organization-details-emails.vue b/frontend/src/modules/organization/components/details/organization-details-emails.vue
index b767125249..8e7056239e 100644
--- a/frontend/src/modules/organization/components/details/organization-details-emails.vue
+++ b/frontend/src/modules/organization/components/details/organization-details-emails.vue
@@ -12,7 +12,7 @@
           class="my-1"
           @click="addEmail = true"
         >
-          <lf-icon-old name="add-fill" />
+          <lf-icon name="plus" type="regular" />
         </lf-button>
       </lf-tooltip>
     </div>
@@ -29,7 +29,7 @@
     </div>
     <div>
       <div v-if="emailList.length === 0" class="pt-2 flex flex-col items-center w-full">
-        <lf-icon-old name="at-line" :size="40" class="text-gray-300" />
+        <lf-icon name="at" :size="40" class="text-gray-300" />
         <p class="text-center pt-3 text-medium text-gray-400">
           No emails
         </p>
@@ -65,7 +65,7 @@
 
 <script setup lang="ts">
 import LfButton from '@/ui-kit/button/Button.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { computed, ref } from 'vue';
 import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
 import usePermissions from '@/shared/modules/permissions/helpers/usePermissions';
diff --git a/frontend/src/modules/organization/components/details/organization-details-header.vue b/frontend/src/modules/organization/components/details/organization-details-header.vue
index 4045a18b34..d1ba1685d2 100644
--- a/frontend/src/modules/organization/components/details/organization-details-header.vue
+++ b/frontend/src/modules/organization/components/details/organization-details-header.vue
@@ -25,7 +25,7 @@
           target="_blank"
           rel="noopener noreferrer"
         >
-          <lf-icon-old name="link" :size="16" class="text-gray-400" />
+          <lf-icon name="link" :size="16" class="text-gray-400" />
           <div class="text-gray-500 text-small truncate hover:text-primary-500" style="max-width: 20ch">
             {{ websiteCom.value }}
           </div>
@@ -42,7 +42,7 @@
 <script setup lang="ts">
 import LfBadge from '@/ui-kit/badge/Badge.vue';
 import { Organization } from '@/modules/organization/types/Organization';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import useOrganizationHelpers from '@/modules/organization/helpers/organization.helpers';
 import LfOrganizationMembership from '@/modules/organization/components/shared/organization-membership.vue';
 import { withHttp } from '@/utils/string';
diff --git a/frontend/src/modules/organization/components/details/organization-details-identities.vue b/frontend/src/modules/organization/components/details/organization-details-identities.vue
index d888b64a6e..aaff83263c 100644
--- a/frontend/src/modules/organization/components/details/organization-details-identities.vue
+++ b/frontend/src/modules/organization/components/details/organization-details-identities.vue
@@ -16,7 +16,7 @@
             :icon-only="true"
             class="my-1"
           >
-            <lf-icon-old name="add-fill" />
+            <lf-icon name="plus" type="regular" />
           </lf-button>
         </lf-tooltip>
       </lf-organization-details-identity-add-dropdown>
@@ -33,7 +33,7 @@
         @unmerge="unmerge(identity)"
       />
       <div v-if="identityList.length === 0" class="pt-2 flex flex-col items-center w-full">
-        <lf-icon-old name="fingerprint-fill" :size="40" class="text-gray-300" />
+        <lf-icon name="fingerprint" :size="40" class="text-gray-300" />
         <p class="text-center pt-3 text-medium text-gray-400">
           No identities
         </p>
@@ -70,7 +70,7 @@
 
 <script setup lang="ts">
 import LfButton from '@/ui-kit/button/Button.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { computed, ref } from 'vue';
 import LfTooltip from '@/ui-kit/tooltip/Tooltip.vue';
 import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
diff --git a/frontend/src/modules/organization/components/details/organization-details-phone-numbers.vue b/frontend/src/modules/organization/components/details/organization-details-phone-numbers.vue
index e396f6e65c..b895276aa0 100644
--- a/frontend/src/modules/organization/components/details/organization-details-phone-numbers.vue
+++ b/frontend/src/modules/organization/components/details/organization-details-phone-numbers.vue
@@ -11,7 +11,7 @@
         :icon-only="true"
         @click="edit = true"
       >
-        <lf-icon-old name="pencil-line" />
+        <lf-icon name="pen fa-sharp" />
       </lf-button>
     </div>
 
@@ -32,7 +32,7 @@
       </lf-tooltip>
 
       <div v-if="phoneNumbersList.length === 0" class="pt-2 flex flex-col items-center w-full">
-        <lf-icon-old name="phone-line" :size="40" class="text-gray-300" />
+        <lf-icon name="phone" :size="40" class="text-gray-300" />
         <p class="text-center pt-3 text-medium text-gray-400">
           No phone numbers
         </p>
@@ -60,7 +60,7 @@
 
 <script setup lang="ts">
 import LfButton from '@/ui-kit/button/Button.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { computed, ref } from 'vue';
 import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
 import usePermissions from '@/shared/modules/permissions/helpers/usePermissions';
diff --git a/frontend/src/modules/organization/components/details/overview/community/organization-details-community-project-select.vue b/frontend/src/modules/organization/components/details/overview/community/organization-details-community-project-select.vue
index 1df8874247..5141377673 100644
--- a/frontend/src/modules/organization/components/details/overview/community/organization-details-community-project-select.vue
+++ b/frontend/src/modules/organization/components/details/overview/community/organization-details-community-project-select.vue
@@ -3,7 +3,7 @@
     <template #trigger="{ open }">
       <lf-button type="secondary-link">
         {{ selectedSegmentName }}
-        <lf-icon-old name="arrow-up-s-line" :size="16" class="transition" :class="{ 'rotate-180': open }" />
+        <lf-icon name="chevron-up" :size="16" class="transition" :class="{ 'rotate-180': open }" />
       </lf-button>
     </template>
     <lf-dropdown-item
@@ -21,7 +21,7 @@
           placeholder="Search project groups..."
         >
           <template #prefix>
-            <lf-icon-old name="search-line" :size="16" />
+            <lf-icon name="magnifying-glass" :size="16" />
           </template>
         </lf-input>
       </div>
@@ -54,7 +54,7 @@ import LfDropdownSeparator from '@/ui-kit/dropdown/DropdownSeparator.vue';
 import { Organization } from '@/modules/organization/types/Organization';
 import { computed, ref } from 'vue';
 import LfInput from '@/ui-kit/input/Input.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 
 const props = defineProps<{
diff --git a/frontend/src/modules/organization/components/details/overview/organization-details-attributes.vue b/frontend/src/modules/organization/components/details/overview/organization-details-attributes.vue
index fffd274f71..236e76c64f 100644
--- a/frontend/src/modules/organization/components/details/overview/organization-details-attributes.vue
+++ b/frontend/src/modules/organization/components/details/overview/organization-details-attributes.vue
@@ -58,7 +58,7 @@
       </article>
 
       <div v-if="Object.keys(visibleAttributes).length === 0" class="pt-2 flex flex-col items-center w-full">
-        <lf-icon-old name="list-view" :size="80" class="text-gray-300" />
+        <lf-icon name="rectangle-list" :size="80" class="text-gray-300" />
         <p class="text-center pt-3 text-medium text-gray-400">
           No organization details yet
         </p>
@@ -78,7 +78,7 @@ import LfOrganizationAttributeArray
   from '@/modules/organization/components/details/overview/attributes/organization-attribute-array.vue';
 import LfOrganizationAttributeJson
   from '@/modules/organization/components/details/overview/attributes/organization-attribute-json.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfOrganizationAttributeSource
   from '@/modules/organization/components/details/overview/attributes/organization-attribute-source.vue';
 import useOrganizationHelpers from '@/modules/organization/helpers/organization.helpers';
diff --git a/frontend/src/modules/organization/components/edit/domain/organization-domain-add.vue b/frontend/src/modules/organization/components/edit/domain/organization-domain-add.vue
index 24a5cb6a31..22f10b7588 100644
--- a/frontend/src/modules/organization/components/edit/domain/organization-domain-add.vue
+++ b/frontend/src/modules/organization/components/edit/domain/organization-domain-add.vue
@@ -5,7 +5,7 @@
         <div class="flex items-center justify-between pb-6">
           <h5>Add {{ modelValue?.type?.replace('-', ' ') }}</h5>
           <lf-button type="secondary-ghost-light" :icon-only="true" @click="close">
-            <lf-icon-old name="close-line" />
+            <lf-icon name="xmark" />
           </lf-button>
         </div>
 
@@ -21,7 +21,7 @@
                   @blur="$v.form[di].value.$touch()"
                 >
                   <template #prefix>
-                    <lf-icon-old name="link" class="text-black" :size="20" />
+                    <lf-icon name="link" class="text-black" :size="20" />
                   </template>
                 </lf-input>
                 <lf-button
@@ -31,7 +31,7 @@
                   :icon-only="true"
                   @click="form.splice(di, 1)"
                 >
-                  <lf-icon-old name="delete-bin-6-line" />
+                  <lf-icon name="trash-can" />
                 </lf-button>
               </div>
               <lf-field-messages
@@ -50,7 +50,7 @@
               ...props.modelValue,
             })"
           >
-            <lf-icon-old name="add-line" />
+            <lf-icon name="plus" />
             Add domain
           </lf-button>
         </div>
@@ -76,7 +76,7 @@
 import LfModal from '@/ui-kit/modal/Modal.vue';
 import { computed, reactive, ref } from 'vue';
 import LfButton from '@/ui-kit/button/Button.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfInput from '@/ui-kit/input/Input.vue';
 import Message from '@/shared/message/message';
 import pluralize from 'pluralize';
diff --git a/frontend/src/modules/organization/components/edit/domain/organization-domain-edit.vue b/frontend/src/modules/organization/components/edit/domain/organization-domain-edit.vue
index 38ea590c25..0e9a137813 100644
--- a/frontend/src/modules/organization/components/edit/domain/organization-domain-edit.vue
+++ b/frontend/src/modules/organization/components/edit/domain/organization-domain-edit.vue
@@ -5,7 +5,7 @@
         Update {{ modelValue?.type?.replace('-', ' ') }}
       </h5>
       <lf-button type="secondary-ghost-light" :icon-only="true" @click="isModalOpen = false">
-        <lf-icon-old name="close-line" />
+        <lf-icon name="xmark" />
       </lf-button>
     </div>
     <div class="pt-2 pb-10 px-6 w-full">
@@ -18,7 +18,7 @@
           <template #prefix>
             <div class="flex items-center flex-nowrap whitespace-nowrap">
               <div class="min-w-5">
-                <lf-icon-old name="link" class="text-black" :size="20" />
+                <lf-icon name="link" class="text-black" :size="20" />
               </div>
             </div>
           </template>
@@ -50,7 +50,7 @@ import {
 import { computed, reactive, ref } from 'vue';
 import LfModal from '@/ui-kit/modal/Modal.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { required } from '@vuelidate/validators';
 import useVuelidate from '@vuelidate/core';
 import LfInput from '@/ui-kit/input/Input.vue';
diff --git a/frontend/src/modules/organization/components/edit/email/organization-email-add.vue b/frontend/src/modules/organization/components/edit/email/organization-email-add.vue
index a8ba832959..4985468e98 100644
--- a/frontend/src/modules/organization/components/edit/email/organization-email-add.vue
+++ b/frontend/src/modules/organization/components/edit/email/organization-email-add.vue
@@ -5,7 +5,7 @@
         <div class="flex items-center justify-between pb-6">
           <h5>Add emails</h5>
           <lf-button type="secondary-ghost-light" :icon-only="true" @click="close">
-            <lf-icon-old name="close-line" />
+            <lf-icon name="xmark" />
           </lf-button>
         </div>
 
@@ -22,7 +22,7 @@
                 >
                   <template #prefix>
                     <div class="min-w-5">
-                      <lf-icon-old name="mail-line" class="text-black" :size="20" />
+                      <lf-icon name="envelope" class="text-black" :size="20" />
                     </div>
                   </template>
                 </lf-input>
@@ -33,7 +33,7 @@
                   :icon-only="true"
                   @click="form.splice(ii, 1)"
                 >
-                  <lf-icon-old name="delete-bin-6-line" />
+                  <lf-icon name="trash-can" />
                 </lf-button>
               </div>
               <lf-field-messages
@@ -47,7 +47,7 @@
           </article>
 
           <lf-button type="primary-link" size="small" @click="form.push({ ...defaultForm })">
-            <lf-icon-old name="add-line" />
+            <lf-icon name="plus" />
             Add email
           </lf-button>
         </div>
@@ -73,7 +73,7 @@
 import LfModal from '@/ui-kit/modal/Modal.vue';
 import { computed, reactive, ref } from 'vue';
 import LfButton from '@/ui-kit/button/Button.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfInput from '@/ui-kit/input/Input.vue';
 import Message from '@/shared/message/message';
 import pluralize from 'pluralize';
diff --git a/frontend/src/modules/organization/components/edit/email/organization-email-edit.vue b/frontend/src/modules/organization/components/edit/email/organization-email-edit.vue
index 8fba9bd306..db0a084f75 100644
--- a/frontend/src/modules/organization/components/edit/email/organization-email-edit.vue
+++ b/frontend/src/modules/organization/components/edit/email/organization-email-edit.vue
@@ -5,7 +5,7 @@
         <div class="flex items-center justify-between pb-6">
           <h5>Edit email</h5>
           <lf-button type="secondary-ghost-light" :icon-only="true" @click="close">
-            <lf-icon-old name="close-line" />
+            <lf-icon name="xmark" />
           </lf-button>
         </div>
 
@@ -20,7 +20,7 @@
             >
               <template #prefix>
                 <div class="min-w-5">
-                  <lf-icon-old name="mail-line" class="text-black" :size="20" />
+                  <lf-icon name="envelope" class="text-black" :size="20" />
                 </div>
               </template>
             </lf-input>
@@ -55,7 +55,7 @@
 import LfModal from '@/ui-kit/modal/Modal.vue';
 import { computed, reactive, ref } from 'vue';
 import LfButton from '@/ui-kit/button/Button.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfInput from '@/ui-kit/input/Input.vue';
 import Message from '@/shared/message/message';
 import { email, required } from '@vuelidate/validators';
diff --git a/frontend/src/modules/organization/components/edit/identity/organization-identity-add.vue b/frontend/src/modules/organization/components/edit/identity/organization-identity-add.vue
index 7890a06493..ab8af2afb0 100644
--- a/frontend/src/modules/organization/components/edit/identity/organization-identity-add.vue
+++ b/frontend/src/modules/organization/components/edit/identity/organization-identity-add.vue
@@ -5,7 +5,7 @@
         <div class="flex items-center justify-between pb-6">
           <h5>Add identity</h5>
           <lf-button type="secondary-ghost-light" :icon-only="true" @click="close">
-            <lf-icon-old name="close-line" />
+            <lf-icon name="xmark" />
           </lf-button>
         </div>
 
@@ -29,9 +29,9 @@
                           class="h-5 w-5 object-contain"
                           :alt="identity.value"
                         />
-                        <lf-icon-old
+                        <lf-icon
                           v-else
-                          name="fingerprint-fill"
+                          name="fingerprint"
                           :size="20"
                           class="text-gray-600"
                         />
@@ -53,7 +53,7 @@
                   :icon-only="true"
                   @click="form.splice(ii, 1)"
                 >
-                  <lf-icon-old name="delete-bin-6-line" />
+                  <lf-icon name="trash-can" />
                 </lf-button>
               </div>
               <lf-field-messages
@@ -73,7 +73,7 @@
             })"
           >
             <lf-button type="primary-link" size="small">
-              <lf-icon-old name="add-line" />
+              <lf-icon name="plus" />
               Add identity
             </lf-button>
           </lf-organization-details-identity-add-dropdown>
@@ -100,7 +100,7 @@
 import LfModal from '@/ui-kit/modal/Modal.vue';
 import { computed, reactive, ref } from 'vue';
 import LfButton from '@/ui-kit/button/Button.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfInput from '@/ui-kit/input/Input.vue';
 import { CrowdIntegrations } from '@/integrations/integrations-config';
 import Message from '@/shared/message/message';
diff --git a/frontend/src/modules/organization/components/edit/identity/organization-identity-edit.vue b/frontend/src/modules/organization/components/edit/identity/organization-identity-edit.vue
index 31b8070659..ac62a4456d 100644
--- a/frontend/src/modules/organization/components/edit/identity/organization-identity-edit.vue
+++ b/frontend/src/modules/organization/components/edit/identity/organization-identity-edit.vue
@@ -5,7 +5,7 @@
         <div class="flex items-center justify-between pb-6">
           <h5>Edit identity</h5>
           <lf-button type="secondary-ghost-light" :icon-only="true" @click="close">
-            <lf-icon-old name="close-line" />
+            <lf-icon name="xmark" />
           </lf-button>
         </div>
 
@@ -20,9 +20,9 @@
                     class="h-5 w-5 object-contain"
                     :alt="form.value"
                   />
-                  <lf-icon-old
+                  <lf-icon
                     v-else
-                    name="fingerprint-fill"
+                    name="fingerprint"
                     :size="20"
                     class="text-gray-600"
                   />
@@ -60,7 +60,7 @@
 import LfModal from '@/ui-kit/modal/Modal.vue';
 import { computed, reactive, ref } from 'vue';
 import LfButton from '@/ui-kit/button/Button.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfInput from '@/ui-kit/input/Input.vue';
 import { CrowdIntegrations } from '@/integrations/integrations-config';
 import Message from '@/shared/message/message';
diff --git a/frontend/src/modules/organization/components/edit/organization-add.vue b/frontend/src/modules/organization/components/edit/organization-add.vue
index 2e51fcde92..5ad29a9788 100644
--- a/frontend/src/modules/organization/components/edit/organization-add.vue
+++ b/frontend/src/modules/organization/components/edit/organization-add.vue
@@ -4,7 +4,7 @@
     <section class="py-4 pr-4 pl-6 flex justify-between items-center">
       <h5>Add organization</h5>
       <lf-button type="secondary-ghost-light" :icon-only="true" @click="isModalOpen = false">
-        <lf-icon-old name="close-line" />
+        <lf-icon name="xmark" />
       </lf-button>
     </section>
 
@@ -97,7 +97,7 @@
 import LfModal from '@/ui-kit/modal/Modal.vue';
 import { computed, reactive, ref } from 'vue';
 import LfButton from '@/ui-kit/button/Button.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfInput from '@/ui-kit/input/Input.vue';
 import LfField from '@/ui-kit/field/Field.vue';
 import { CrowdIntegrations } from '@/integrations/integrations-config';
diff --git a/frontend/src/modules/organization/components/edit/organization-edit-logo.vue b/frontend/src/modules/organization/components/edit/organization-edit-logo.vue
index 2d7e848990..b9c538ee01 100644
--- a/frontend/src/modules/organization/components/edit/organization-edit-logo.vue
+++ b/frontend/src/modules/organization/components/edit/organization-edit-logo.vue
@@ -12,7 +12,7 @@
           >
             <template #placeholder>
               <div class="w-full h-full bg-gray-50 flex items-center justify-center">
-                <lf-icon-old name="community-line" :size="48" class="text-gray-300" />
+                <lf-icon name="house-building" :size="48" class="text-gray-300" />
               </div>
             </template>
           </lf-avatar>
@@ -26,9 +26,9 @@
               @update:model-value="$v.logo.$touch()"
             >
               <template #suffix>
-                <lf-icon-old
+                <lf-icon
                   v-if="form.logo"
-                  name="close-circle-line"
+                  name="circle-xmark"
                   :size="20"
                   class="text-gray-300 cursor-pointer"
                   @click="form.logo = ''"
@@ -77,7 +77,7 @@ import LfField from '@/ui-kit/field/Field.vue';
 import LfFieldMessage from '@/ui-kit/field-message/FieldMessage.vue';
 import LfFieldMessages from '@/ui-kit/field-messages/FieldMessages.vue';
 import Message from '@/shared/message/message';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { Organization } from '@/modules/organization/types/Organization';
 import { useOrganizationStore } from '@/modules/organization/store/pinia';
 import useOrganizationHelpers from '@/modules/organization/helpers/organization.helpers';
diff --git a/frontend/src/modules/organization/components/list/organization-common-list-table.vue b/frontend/src/modules/organization/components/list/organization-common-list-table.vue
index 315d1b0354..a0dc2d47d0 100644
--- a/frontend/src/modules/organization/components/list/organization-common-list-table.vue
+++ b/frontend/src/modules/organization/components/list/organization-common-list-table.vue
@@ -34,7 +34,7 @@
               <el-popover v-if="getSegments(org.segments).length > 0" placement="top-start" width="264px">
                 <template #reference>
                   <div class="border border-gray-200 h-6 px-1.5 rounded-md bg-white text-small gap-1 flex items-center whitespace-nowrap text-black">
-                    <lf-icon-old name="folders-line" :size="14" />
+                    <lf-icon name="folders" :size="14" />
                     {{ pluralize('project group', getSegments(org.segments).length, true) }}
                   </div>
                 </template>
@@ -48,7 +48,7 @@
                       :key="segment.id"
                       class="flex items-center gap-2"
                     >
-                      <lf-icon-old name="folder-line" :size="16" class="text-gray-400" />
+                      <lf-icon name="folder" :size="16" class="text-gray-400" />
                       <span class="text-small text-black">{{ segment.name }}</span>
                     </div>
                   </div>
@@ -83,7 +83,7 @@
                 </lf-dropdown-item>
                 <lf-dropdown-separator />
                 <lf-dropdown-item type="danger" @click="deleteOrganization(org)">
-                  <i class="ri-delete-bin-6-line" />
+                  <lf-icon name="trash-can" />
                   Delete organization
                 </lf-dropdown-item>
               </lf-dropdown>
@@ -104,7 +104,7 @@
   </div>
   <app-empty-state-cta
     v-else
-    icon="ri-community-line"
+    icon="ri-house-building"
     title="No organizations found"
     description="We couldn't find any results that match your search criteria, please try a different query."
   />
@@ -127,7 +127,7 @@ import Message from '@/shared/message/message';
 import ConfirmDialog from '@/shared/dialog/confirm-dialog';
 import pluralize from 'pluralize';
 import { getSegmentName } from '@/utils/segments';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const props = defineProps<{
   sorting: string,
diff --git a/frontend/src/modules/organization/components/list/organization-list-table.vue b/frontend/src/modules/organization/components/list/organization-list-table.vue
index f90f85ed63..4939f65c17 100644
--- a/frontend/src/modules/organization/components/list/organization-list-table.vue
+++ b/frontend/src/modules/organization/components/list/organization-list-table.vue
@@ -13,7 +13,7 @@
         <!-- Empty State -->
         <app-empty-state-cta
           v-if="!hasOrganizations"
-          icon="ri-community-line"
+          icon="ri-house-building"
           title="No organizations yet"
           :description="`We couldn't track any organizations related to all the people who interacted with ${selectedProjectGroup.name} projects.`"
           cta-btn="Add organization"
@@ -22,7 +22,7 @@
 
         <app-empty-state-cta
           v-else-if="hasOrganizations && !totalOrganizations"
-          icon="ri-community-line"
+          icon="ri-house-building"
           title="No organizations found"
           description="We couldn't find any results that match your search criteria, please try a different query."
         />
@@ -736,7 +736,7 @@
                       >
                         <i
                           :id="`buttonRefIcon-${scope.row.id}`"
-                          class="text-xl ri-more-fill"
+                          class="text-xl ri-ellipsis" type="regular"
                         />
                       </button>
                     </router-link>
diff --git a/frontend/src/modules/organization/components/list/organization-list-toolbar.vue b/frontend/src/modules/organization/components/list/organization-list-toolbar.vue
index a23f3ed328..84f06e6c20 100644
--- a/frontend/src/modules/organization/components/list/organization-list-toolbar.vue
+++ b/frontend/src/modules/organization/components/list/organization-list-toolbar.vue
@@ -13,7 +13,7 @@
     <el-dropdown trigger="click" @command="handleCommand">
       <button type="button" class="btn btn--secondary btn--sm">
         <span class="mr-2">Actions</span>
-        <i class="ri-xl ri-arrow-down-s-line" />
+        <i class="ri-xl ri-chevron-down" />
       </button>
       <template #dropdown>
         <el-dropdown-item :command="{ action: 'export' }">
diff --git a/frontend/src/modules/organization/components/organization-dropdown-content.vue b/frontend/src/modules/organization/components/organization-dropdown-content.vue
index 83573fc94e..cd01155286 100644
--- a/frontend/src/modules/organization/components/organization-dropdown-content.vue
+++ b/frontend/src/modules/organization/components/organization-dropdown-content.vue
@@ -31,7 +31,8 @@
       class="h-10 el-dropdown-menu__item w-full"
       type="button"
     >
-      <i class="ri-pencil-line text-base mr-2" /><span class="text-xs">Edit organization</span>
+    <lf-icon name="pen fa-sharp" class="text-base mr-2" />
+      <span class="text-xs">Edit organization</span>
     </button>
   </router-link>
 
@@ -164,6 +165,7 @@ import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
 import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
 import { OrganizationService } from '../organization-service';
 import { Organization } from '../types/Organization';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 enum Actions {
   DELETE_ORGANIZATION = 'deleteOrganization',
diff --git a/frontend/src/modules/organization/components/organization-dropdown.vue b/frontend/src/modules/organization/components/organization-dropdown.vue
index 18a28bcf47..736bad4da6 100644
--- a/frontend/src/modules/organization/components/organization-dropdown.vue
+++ b/frontend/src/modules/organization/components/organization-dropdown.vue
@@ -11,7 +11,7 @@
         type="button"
         @click.prevent.stop
       >
-        <i class="text-xl ri-more-fill" />
+      <lf-icon name="ellipsis" type="regular" :size="24" />
       </button>
     </slot>
     <template #dropdown>
@@ -32,6 +32,7 @@ import { computed, ref } from 'vue';
 import usePermissions from '@/shared/modules/permissions/helpers/usePermissions';
 import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
 import AppOrganizationDropdownContent from './organization-dropdown-content.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 defineProps({
   organization: {
diff --git a/frontend/src/modules/organization/components/organization-merge-suggestions-dialog.vue b/frontend/src/modules/organization/components/organization-merge-suggestions-dialog.vue
index 54a832c8b3..11d7aae2da 100644
--- a/frontend/src/modules/organization/components/organization-merge-suggestions-dialog.vue
+++ b/frontend/src/modules/organization/components/organization-merge-suggestions-dialog.vue
@@ -16,7 +16,7 @@
         >
           <template #actions>
             <lf-button type="secondary-ghost-light" :icon-only="true" @click="isModalOpen = false">
-              <i class="ri-close-line" />
+              <lf-icon name="xmark" />
             </lf-button>
           </template>
         </app-organization-merge-suggestions>
@@ -30,6 +30,7 @@ import { computed } from 'vue';
 import AppOrganizationMergeSuggestions from '@/modules/organization/components/organization-merge-suggestions.vue';
 import AppDialog from '@/shared/dialog/dialog.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const props = withDefaults(defineProps<{
   modelValue: boolean,
diff --git a/frontend/src/modules/organization/components/organization-name.vue b/frontend/src/modules/organization/components/organization-name.vue
index 7f91c66c63..a26a992035 100644
--- a/frontend/src/modules/organization/components/organization-name.vue
+++ b/frontend/src/modules/organization/components/organization-name.vue
@@ -12,7 +12,7 @@
           :src="organization.logo"
           class="max-h-8"
         >
-          <i class="ri-community-line text-lg text-gray-300" />
+          <lf-icon name="house-building" :size="20" class="text-gray-300" />
         </app-avatar-image>
         <app-avatar-new-badge
           :entity="organization"
@@ -57,6 +57,7 @@ import AppOrganizationBadge from '@/modules/organization/components/organization
 import AppAvatarNewBadge from '@/shared/avatar/avatar-new-badge.vue';
 import AppAvatarImage from '@/shared/avatar-image/avatar-image.vue';
 import LfOrganizationLfMemberTag from '@/modules/organization/components/lf-member/organization-lf-member-tag.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 defineProps({
   organization: {
diff --git a/frontend/src/modules/organization/components/organization-selection-dropdown.vue b/frontend/src/modules/organization/components/organization-selection-dropdown.vue
index a17364a834..00bb414135 100644
--- a/frontend/src/modules/organization/components/organization-selection-dropdown.vue
+++ b/frontend/src/modules/organization/components/organization-selection-dropdown.vue
@@ -1,9 +1,7 @@
 <template>
   <div class="pt-16">
     <div class="flex justify-center">
-      <i
-        class="ri-community-line text-gray-200 account-icon text-center h-16 flex items-center"
-      />
+      <lf-icon name="house-building" class="text-gray-200 account-icon text-center h-16 flex items-center" />
     </div>
     <div class="text-gray-600 text-sm text-center py-4">
       Select the organization you want to merge with
@@ -55,6 +53,7 @@ import AppAutocompleteOneInput from '@/shared/form/autocomplete-one-input.vue';
 import AppAvatar from '@/shared/avatar/avatar.vue';
 import { OrganizationService } from '@/modules/organization/organization-service';
 import { useRoute } from 'vue-router';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const emit = defineEmits('update:modelValue');
 const props = defineProps({
diff --git a/frontend/src/modules/organization/components/organization-unmerge-dialog.vue b/frontend/src/modules/organization/components/organization-unmerge-dialog.vue
index 8ee613d84f..2ca500cc0f 100644
--- a/frontend/src/modules/organization/components/organization-unmerge-dialog.vue
+++ b/frontend/src/modules/organization/components/organization-unmerge-dialog.vue
@@ -106,7 +106,7 @@
                               :label="i.displayValue"
                               @click="fetchPreview(i)"
                             >
-                              <i v-if="i.type === 'email'" class="text-gray-900 text-lg leading-5 mr-2 ri-mail-line" />
+                              <i v-if="i.type === 'email'" class="text-gray-900 text-lg leading-5 mr-2 ri-envelope" />
                               <i
                                 v-else-if="['primary-domain', 'alternative-domain', 'affiliated-profile'].includes(i.type)"
                                 class="text-gray-900 text-lg leading-5 mr-2 ri-window-line"
@@ -117,9 +117,9 @@
                                 :alt="platformDetails(i.platform)?.value"
                                 :src="platformDetails(i.platform)?.image"
                               />
-                              <lf-icon-old
+                              <lf-icon
                                 v-else
-                                name="fingerprint-fill"
+                                name="fingerprint"
                                 :size="20"
                                 class="text-gray-600 mr-2"
                               />
@@ -136,7 +136,7 @@
             <!-- Identity selection -->
             <div v-else class="pt-14">
               <div class="flex justify-center pb-5">
-                <div class="ri-fingerprint-line text-5xl text-gray-200" />
+                <lf-icon name="fingerprint" :size="64" class="text-gray-200" />
               </div>
               <p class="text-center text-xs leading-5 text-gray-500">
                 Select the organization identity you want to unmerge
@@ -154,7 +154,7 @@
                     :value="i"
                     :label="i.displayValue"
                   >
-                    <i v-if="i.type === 'email'" class="text-gray-900 text-lg leading-5 mr-2 ri-mail-line" />
+                    <i v-if="i.type === 'email'" class="text-gray-900 text-lg leading-5 mr-2 ri-envelope" />
                     <i
                       v-else-if="['primary-domain', 'alternative-domain', 'affiliated-profile'].includes(i.type)"
                       class="text-gray-900 text-lg leading-5 mr-2 ri-window-line"
@@ -165,9 +165,9 @@
                       :alt="platformDetails(i.platform)?.value"
                       :src="platformDetails(i.platform)?.image"
                     />
-                    <lf-icon-old
+                    <lf-icon
                       v-else
-                      name="fingerprint-fill"
+                      name="fingerprint"
                       :size="20"
                       class="text-gray-600 mr-2"
                     />
@@ -195,7 +195,7 @@ import AppOrganizationMergeSuggestionsDetails
 import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
 import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
 import { Platform } from '@/shared/modules/platform/types/Platform';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { useOrganizationStore } from '@/modules/organization/store/pinia';
 
 const props = defineProps({
diff --git a/frontend/src/modules/organization/components/shared/organization-dropdown.vue b/frontend/src/modules/organization/components/shared/organization-dropdown.vue
index 2e18e6a59c..82a164c8b5 100644
--- a/frontend/src/modules/organization/components/shared/organization-dropdown.vue
+++ b/frontend/src/modules/organization/components/shared/organization-dropdown.vue
@@ -10,14 +10,14 @@
     v-if="hasPermission(LfPermission.organizationEdit)"
     @click="markTeamOrganization(!props.organization.isTeamOrganization)"
   >
-    <lf-icon-old name="team-line" />
+    <lf-icon name="people-group" />
     {{ props.organization.isTeamOrganization ? 'Unmark' : 'Mark' }} as team organization
   </lf-dropdown-item>
 
   <template v-if="hasPermission(LfPermission.organizationDestroy)">
     <lf-dropdown-separator />
     <lf-dropdown-item type="danger" @click="deleteOrganization()">
-      <lf-icon-old name="delete-bin-6-line" />
+      <lf-icon name="trash-can" />
       Delete organization
     </lf-dropdown-item>
   </template>
@@ -30,6 +30,7 @@
 
 <script setup lang="ts">
 import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfDropdownItem from '@/ui-kit/dropdown/DropdownItem.vue';
 import LfDropdownSeparator from '@/ui-kit/dropdown/DropdownSeparator.vue';
 import usePermissions from '@/shared/modules/permissions/helpers/usePermissions';
diff --git a/frontend/src/modules/organization/components/shared/organization-select.vue b/frontend/src/modules/organization/components/shared/organization-select.vue
index 4439032e64..53566e37ab 100644
--- a/frontend/src/modules/organization/components/shared/organization-select.vue
+++ b/frontend/src/modules/organization/components/shared/organization-select.vue
@@ -24,7 +24,7 @@
         >
           <template #placeholder>
             <div class="w-full h-full bg-gray-50 flex items-center justify-center">
-              <lf-icon-old name="community-line" :size="12" class="text-gray-400" />
+              <lf-icon name="house-building" :size="12" class="text-gray-400" />
             </div>
           </template>
         </lf-avatar>
@@ -41,7 +41,7 @@
           >
             <template #placeholder>
               <div class="w-full h-full bg-gray-50 flex items-center justify-center">
-                <lf-icon-old name="community-line" :size="12" class="text-gray-400" />
+                <lf-icon name="house-building" :size="12" class="text-gray-400" />
               </div>
             </template>
           </lf-avatar>
@@ -59,7 +59,7 @@ import { ref, computed, onMounted } from 'vue';
 import { OrganizationService } from '@/modules/organization/organization-service';
 import { Organization } from '@/modules/organization/types/Organization';
 import LfAvatar from '@/ui-kit/avatar/Avatar.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfProjectGroupsTags from '@/shared/modules/project-groups/components/project-groups-tags.vue';
 import AppAutocompleteOneInput from '@/shared/form/autocomplete-one-input.vue';
 import { storeToRefs } from 'pinia';
diff --git a/frontend/src/modules/organization/components/shared/organization-syncing-activities.vue b/frontend/src/modules/organization/components/shared/organization-syncing-activities.vue
index c76b55646a..9b9a9130a1 100644
--- a/frontend/src/modules/organization/components/shared/organization-syncing-activities.vue
+++ b/frontend/src/modules/organization/components/shared/organization-syncing-activities.vue
@@ -6,7 +6,7 @@
       ${props.organization.activitySycning?.operationType === 'merge' ? 'merged' : 'unmerged'}. This process may take some minutes.`"
     >
       <div class="flex items-center gap-1.5 cursor-default">
-        <lf-icon-old name="loader-4-fill" :size="16" class="text-secondary-400 animate-spin" />
+        <lf-icon name="circle-notch" :size="16" class="text-secondary-400 animate-spin" />
         <p class="text-small text-secondary-400 font-semibold">
           Syncing activities...
         </p>
@@ -18,7 +18,7 @@
 <script setup lang="ts">
 import LfTooltip from '@/ui-kit/tooltip/Tooltip.vue';
 import { MergeActionState } from '@/shared/modules/merge/types/MemberActions';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { Organization } from '@/modules/organization/types/Organization';
 
 const props = defineProps<{
diff --git a/frontend/src/modules/organization/config/filters/annualRevenue/AnnualRevenueFilter.vue b/frontend/src/modules/organization/config/filters/annualRevenue/AnnualRevenueFilter.vue
index ea2d2bc048..f14e1c7161 100644
--- a/frontend/src/modules/organization/config/filters/annualRevenue/AnnualRevenueFilter.vue
+++ b/frontend/src/modules/organization/config/filters/annualRevenue/AnnualRevenueFilter.vue
@@ -47,7 +47,7 @@
       </div>
       <app-form-errors
         :validation="$v"
-        error-icon="ri-error-warning-line"
+        error-icon="ri-circle-exclamation"
         error-class="relative pt-0"
         :error-messages="{
           'valueTo-minValue': `Number should be higher than “From” field`,
diff --git a/frontend/src/modules/organization/pages/organization-details.page.vue b/frontend/src/modules/organization/pages/organization-details.page.vue
index de535fd714..491a7d5eaa 100644
--- a/frontend/src/modules/organization/pages/organization-details.page.vue
+++ b/frontend/src/modules/organization/pages/organization-details.page.vue
@@ -13,7 +13,7 @@
         <div class="flex items-center flex-grow">
           <lf-back :to="{ path: hasSegments ? '/organizations' : '/admin' }" class="mr-2" @mouseover.stop @mouseout.stop>
             <lf-button type="secondary-ghost" :icon-only="true">
-              <lf-icon-old name="arrow-left-s-line" />
+              <lf-icon name="chevron-left" />
             </lf-button>
           </lf-back>
           <lf-organization-details-header :organization="organization" />
@@ -67,9 +67,9 @@
               <lf-tab v-model="tabs" name="activities">
                 <div class="flex items-center gap-1">
                   Activities
-                  <lf-icon-old
+                  <lf-icon
                     v-if="organization.activitySycning?.state === MergeActionState.ERROR"
-                    name="error-warning-line"
+                    name="circle-exclamation"
                     :size="16"
                     class="text-red-500"
                   />
@@ -106,7 +106,7 @@ import LfTab from '@/ui-kit/tabs/Tab.vue';
 import { computed, onMounted, ref } from 'vue';
 import LfBack from '@/ui-kit/back/Back.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { useRoute } from 'vue-router';
 import { useLfSegmentsStore } from '@/modules/lf/segments/store';
 import { storeToRefs } from 'pinia';
diff --git a/frontend/src/modules/organization/pages/organization-form-page.vue b/frontend/src/modules/organization/pages/organization-form-page.vue
index 1f768003e9..3b1a88ab33 100644
--- a/frontend/src/modules/organization/pages/organization-form-page.vue
+++ b/frontend/src/modules/organization/pages/organization-form-page.vue
@@ -168,7 +168,7 @@ import { useOrganizationStore } from '../store/pinia';
 const LoaderIcon = h(
   'i',
   {
-    class: 'ri-loader-4-fill text-sm text-white',
+    class: 'ri-circle-notch text-sm text-white',
   },
   [],
 );
diff --git a/frontend/src/modules/organization/pages/organization-merge-suggestions-page.vue b/frontend/src/modules/organization/pages/organization-merge-suggestions-page.vue
index 934deb6e6d..1b0936ddca 100644
--- a/frontend/src/modules/organization/pages/organization-merge-suggestions-page.vue
+++ b/frontend/src/modules/organization/pages/organization-merge-suggestions-page.vue
@@ -133,7 +133,7 @@
                       :loading="sending === `${suggestion.organizations[0].id}:${suggestion.organizations[1].id}`"
                       :icon-only="true"
                     >
-                      <i class="ri-more-fill" />
+                      <i class="ri-ellipsis" type="regular" />
                     </lf-button>
                   </template>
 
@@ -142,7 +142,7 @@
                   </lf-dropdown-item>
 
                   <lf-dropdown-item @click="ignore(suggestion)">
-                    <i class="ri-close-circle-line" />Ignore suggestion
+                    <i class="ri-circle-xmark" />Ignore suggestion
                   </lf-dropdown-item>
                 </lf-dropdown>
               </div>

From d85965eeede60ca6d7af99ad59e1a8a4e16c3889 Mon Sep 17 00:00:00 2001
From: Sameh16 <sameh_mohamed16@hotmail.com>
Date: Wed, 15 Jan 2025 13:33:11 +0200
Subject: [PATCH 07/16] Replace old icon components with updated ones in
 various settings and report issue components

Signed-off-by: Sameh16 <sameh_mohamed16@hotmail.com>
---
 .../settings/github-settings-add-repository-modal.vue       | 2 +-
 .../github/components/settings/github-settings-org-item.vue | 5 ++---
 .../identities/components/verified-identity-badge.vue       | 6 +++---
 .../report-issue/component/report-data-issue-modal.vue      | 6 +++---
 4 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/frontend/src/config/integrations/github/components/settings/github-settings-add-repository-modal.vue b/frontend/src/config/integrations/github/components/settings/github-settings-add-repository-modal.vue
index 771b14d064..83a14e896b 100644
--- a/frontend/src/config/integrations/github/components/settings/github-settings-add-repository-modal.vue
+++ b/frontend/src/config/integrations/github/components/settings/github-settings-add-repository-modal.vue
@@ -103,7 +103,7 @@
                   <lf-avatar :name="org.name" :src="org.logo" :size="32" class="!rounded border border-gray-200">
                     <template #placeholder>
                       <div class="w-full h-full bg-gray-50 flex items-center justify-center">
-                        <lf-icon-old name="community-line" :size="12" class="text-gray-400" />
+                        <lf-icon name="house-building" :size="12" class="text-gray-400" />
                       </div>
                     </template>
                   </lf-avatar>
diff --git a/frontend/src/config/integrations/github/components/settings/github-settings-org-item.vue b/frontend/src/config/integrations/github/components/settings/github-settings-org-item.vue
index a3412a6f8d..9611615d17 100644
--- a/frontend/src/config/integrations/github/components/settings/github-settings-org-item.vue
+++ b/frontend/src/config/integrations/github/components/settings/github-settings-org-item.vue
@@ -6,7 +6,7 @@
         <lf-avatar :name="props.organization.name" :src="props.organization.logo" :size="24" class="!rounded border border-gray-200">
           <template #placeholder>
             <div class="w-full h-full bg-gray-50 flex items-center justify-center">
-              <lf-icon-old name="community-line" :size="12" class="text-gray-400" />
+              <lf-icon name="house-building" :size="12" class="text-gray-400" />
             </div>
           </template>
         </lf-avatar>
@@ -17,7 +17,7 @@
 
       <div class="flex items-center gap-2">
         <lf-badge v-if="isSynced" type="primary" class="!flex items-center gap-1 !rounded-full !px-2">
-          <lf-icon-old name="loop-right-line" />
+          <lf-icon name="arrows-rotate" />
           Synced
         </lf-badge>
         <lf-dropdown placement="bottom-end" width="11.125rem">
@@ -70,7 +70,6 @@ import {
   GitHubSettingsRepository,
 } from '@/config/integrations/github/types/GithubSettings';
 import LfAvatar from '@/ui-kit/avatar/Avatar.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfBadge from '@/ui-kit/badge/Badge.vue';
diff --git a/frontend/src/shared/modules/identities/components/verified-identity-badge.vue b/frontend/src/shared/modules/identities/components/verified-identity-badge.vue
index 79f5bd286d..e4fd026e5f 100644
--- a/frontend/src/shared/modules/identities/components/verified-identity-badge.vue
+++ b/frontend/src/shared/modules/identities/components/verified-identity-badge.vue
@@ -14,8 +14,8 @@
       </span>
     </template>
 
-    <lf-icon-old
-      name="verified-badge-line"
+    <lf-icon
+      name="badge-check"
       :size="16"
       class="ml-1 text-primary-500"
     />
@@ -23,5 +23,5 @@
 </template>
 
 <script setup lang="ts">
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 </script>
diff --git a/frontend/src/shared/modules/report-issue/component/report-data-issue-modal.vue b/frontend/src/shared/modules/report-issue/component/report-data-issue-modal.vue
index 1de08823bb..264c4c3b93 100644
--- a/frontend/src/shared/modules/report-issue/component/report-data-issue-modal.vue
+++ b/frontend/src/shared/modules/report-issue/component/report-data-issue-modal.vue
@@ -7,7 +7,7 @@
     <!-- header -->
     <section class="px-6 pt-4 pb-6 flex justify-between items-center">
       <div class="flex items-center gap-3">
-        <lf-icon-old name="feedback-line" class="text-red-500" :size="24" />
+        <lf-icon name="circle-exclamation" class="text-red-500" :size="24" />
         <h5>Report data issue</h5>
       </div>
       <lf-button
@@ -15,7 +15,7 @@
         :icon-only="true"
         @click="isModalOpen = false;reset()"
       >
-        <lf-icon-old name="close-line" />
+        <lf-icon name="xmark" />
       </lf-button>
     </section>
 
@@ -134,7 +134,7 @@ import { ReportDataType } from '@/shared/modules/report-issue/constants/report-d
 import { AuthService } from '@/modules/auth/services/auth.service';
 import authAxios from '@/shared/axios/auth-axios';
 import Message from '@/shared/message/message';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const props = defineProps<{
   modelValue: boolean,

From 8e7c9f87dd25b6c458889afd46a39151ca12739f Mon Sep 17 00:00:00 2001
From: Sameh16 <sameh_mohamed16@hotmail.com>
Date: Wed, 15 Jan 2025 15:45:22 +0200
Subject: [PATCH 08/16] Replace old icon components with updated ones across
 organization module

Signed-off-by: Sameh16 <sameh_mohamed16@hotmail.com>
---
 .../list/organization-common-list-table.vue   |  2 +-
 .../list/organization-list-table.vue          | 10 ++++------
 .../list/organization-list-toolbar.vue        | 20 ++++++++-----------
 .../organization-unmerge-dialog.vue           | 18 ++++++++---------
 .../annualRevenue/AnnualRevenueFilter.vue     |  2 +-
 .../pages/organization-form-page.vue          |  2 +-
 .../organization-merge-suggestions-page.vue   | 17 ++++++++--------
 7 files changed, 31 insertions(+), 40 deletions(-)

diff --git a/frontend/src/modules/organization/components/list/organization-common-list-table.vue b/frontend/src/modules/organization/components/list/organization-common-list-table.vue
index a0dc2d47d0..6dd0f1bba4 100644
--- a/frontend/src/modules/organization/components/list/organization-common-list-table.vue
+++ b/frontend/src/modules/organization/components/list/organization-common-list-table.vue
@@ -104,7 +104,7 @@
   </div>
   <app-empty-state-cta
     v-else
-    icon="ri-house-building"
+    icon="ri-community-line"
     title="No organizations found"
     description="We couldn't find any results that match your search criteria, please try a different query."
   />
diff --git a/frontend/src/modules/organization/components/list/organization-list-table.vue b/frontend/src/modules/organization/components/list/organization-list-table.vue
index 4939f65c17..2d1c77d89f 100644
--- a/frontend/src/modules/organization/components/list/organization-list-table.vue
+++ b/frontend/src/modules/organization/components/list/organization-list-table.vue
@@ -13,7 +13,7 @@
         <!-- Empty State -->
         <app-empty-state-cta
           v-if="!hasOrganizations"
-          icon="ri-house-building"
+          icon="ri-community-line"
           title="No organizations yet"
           :description="`We couldn't track any organizations related to all the people who interacted with ${selectedProjectGroup.name} projects.`"
           cta-btn="Add organization"
@@ -22,7 +22,7 @@
 
         <app-empty-state-cta
           v-else-if="hasOrganizations && !totalOrganizations"
-          icon="ri-house-building"
+          icon="ri-community-line"
           title="No organizations found"
           description="We couldn't find any results that match your search criteria, please try a different query."
         />
@@ -734,10 +734,7 @@
                         type="button"
                         @click.prevent.stop="() => onActionBtnClick(scope.row)"
                       >
-                        <i
-                          :id="`buttonRefIcon-${scope.row.id}`"
-                          class="text-xl ri-ellipsis" type="regular"
-                        />
+                        <lf-icon :id="`buttonRefIcon-${scope.row.id}`" name="ellipsis" type="regular" :size="24"  />
                       </button>
                     </router-link>
                   </template>
@@ -834,6 +831,7 @@ import AppOrganizationListToolbar from './organization-list-toolbar.vue';
 import AppOrganizationName from '../organization-name.vue';
 import AppOrganizationDropdownContent from '../organization-dropdown-content.vue';
 import { organizationSavedViews } from '../../config/saved-views/main';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const { trackEvent } = useProductTracking();
 const router = useRouter();
diff --git a/frontend/src/modules/organization/components/list/organization-list-toolbar.vue b/frontend/src/modules/organization/components/list/organization-list-toolbar.vue
index 84f06e6c20..bbecaf393f 100644
--- a/frontend/src/modules/organization/components/list/organization-list-toolbar.vue
+++ b/frontend/src/modules/organization/components/list/organization-list-toolbar.vue
@@ -13,11 +13,11 @@
     <el-dropdown trigger="click" @command="handleCommand">
       <button type="button" class="btn btn--secondary btn--sm">
         <span class="mr-2">Actions</span>
-        <i class="ri-xl ri-chevron-down" />
+        <lf-icon name="chevron-down" :size="24" />
       </button>
       <template #dropdown>
         <el-dropdown-item :command="{ action: 'export' }">
-          <i class="ri-lg ri-file-download-line mr-1" />
+          <lf-icon name="file-arrow-down" :size="20" class="mr-1" />
           Export to CSV
         </el-dropdown-item>
 
@@ -38,9 +38,7 @@
                   || !hasPermission(LfPermission.mergeOrganizations)
               "
             >
-              <i
-                class="ri-lg mr-1 ri-shuffle-line"
-              />
+              <lf-icon name="shuffling" :size="20" class="mr-1" />
               Merge organizations
             </el-dropdown-item>
           </span>
@@ -53,10 +51,7 @@
             value: markAsTeamOrganizationOptions.value,
           }"
         >
-          <i
-            class="ri-lg mr-1"
-            :class="markAsTeamOrganizationOptions.icon"
-          />
+          <lf-icon :name="markAsTeamOrganizationOptions.icon" :size="20" class="mr-1" />
           {{ markAsTeamOrganizationOptions.copy }}
         </el-dropdown-item>
 
@@ -70,7 +65,7 @@
             <div
               class="flex items-center text-red-500"
             >
-              <i class="ri-lg ri-delete-bin-line mr-2" />
+              <lf-icon name="trash-can" :size="20" class="mr-2" />
               <span>Delete organizations</span>
             </div>
           </el-dropdown-item>
@@ -99,6 +94,7 @@ import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
 import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
 import AppOrganizationMergeDialog from '@/modules/organization/components/organization-merge-dialog.vue';
 import { OrganizationService } from '../../organization-service';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const { trackEvent } = useProductTracking();
 
@@ -129,14 +125,14 @@ const markAsTeamOrganizationOptions = computed(() => {
 
   if (isTeamView) {
     return {
-      icon: 'ri-bookmark-2-line',
+      icon: 'bookmark-slash',
       copy: `Unmark as team ${organizationsCopy}`,
       value: false,
     };
   }
 
   return {
-    icon: 'ri-bookmark-line',
+    icon: 'bookmark',
     copy: `Mark as team ${organizationsCopy}`,
     value: true,
   };
diff --git a/frontend/src/modules/organization/components/organization-unmerge-dialog.vue b/frontend/src/modules/organization/components/organization-unmerge-dialog.vue
index 2ca500cc0f..555f4bfadd 100644
--- a/frontend/src/modules/organization/components/organization-unmerge-dialog.vue
+++ b/frontend/src/modules/organization/components/organization-unmerge-dialog.vue
@@ -106,11 +106,10 @@
                               :label="i.displayValue"
                               @click="fetchPreview(i)"
                             >
-                              <i v-if="i.type === 'email'" class="text-gray-900 text-lg leading-5 mr-2 ri-envelope" />
-                              <i
-                                v-else-if="['primary-domain', 'alternative-domain', 'affiliated-profile'].includes(i.type)"
-                                class="text-gray-900 text-lg leading-5 mr-2 ri-window-line"
-                              />
+                            <lf-icon v-if="i.type === 'email'" name="envelope" :size="20" class="text-gray-900 leading-5 mr-2" />
+                            <lf-icon 
+                            v-else-if="['primary-domain', 'alternative-domain', 'affiliated-profile'].includes(i.type)" 
+                              name="window" size="20" class="text-gray-900 text-lg leading-5 mr-2" />  
                               <img
                                 v-else-if="platformDetails(i.platform)"
                                 class="h-5 w-5 mr-2"
@@ -154,11 +153,10 @@
                     :value="i"
                     :label="i.displayValue"
                   >
-                    <i v-if="i.type === 'email'" class="text-gray-900 text-lg leading-5 mr-2 ri-envelope" />
-                    <i
-                      v-else-if="['primary-domain', 'alternative-domain', 'affiliated-profile'].includes(i.type)"
-                      class="text-gray-900 text-lg leading-5 mr-2 ri-window-line"
-                    />
+                    <lf-icon v-if="i.type === 'email'" name="envelope" :size="20" class="text-gray-900 leading-5 mr-2" />
+                    <lf-icon 
+                      v-else-if="['primary-domain', 'alternative-domain', 'affiliated-profile'].includes(i.type)" 
+                      name="window" size="20" class="text-gray-900 text-lg leading-5 mr-2" />  
                     <img
                       v-else-if="platformDetails(i.platform)"
                       class="h-5 w-5 mr-2"
diff --git a/frontend/src/modules/organization/config/filters/annualRevenue/AnnualRevenueFilter.vue b/frontend/src/modules/organization/config/filters/annualRevenue/AnnualRevenueFilter.vue
index f14e1c7161..ea2d2bc048 100644
--- a/frontend/src/modules/organization/config/filters/annualRevenue/AnnualRevenueFilter.vue
+++ b/frontend/src/modules/organization/config/filters/annualRevenue/AnnualRevenueFilter.vue
@@ -47,7 +47,7 @@
       </div>
       <app-form-errors
         :validation="$v"
-        error-icon="ri-circle-exclamation"
+        error-icon="ri-error-warning-line"
         error-class="relative pt-0"
         :error-messages="{
           'valueTo-minValue': `Number should be higher than “From” field`,
diff --git a/frontend/src/modules/organization/pages/organization-form-page.vue b/frontend/src/modules/organization/pages/organization-form-page.vue
index 3b1a88ab33..1f768003e9 100644
--- a/frontend/src/modules/organization/pages/organization-form-page.vue
+++ b/frontend/src/modules/organization/pages/organization-form-page.vue
@@ -168,7 +168,7 @@ import { useOrganizationStore } from '../store/pinia';
 const LoaderIcon = h(
   'i',
   {
-    class: 'ri-circle-notch text-sm text-white',
+    class: 'ri-loader-4-fill text-sm text-white',
   },
   [],
 );
diff --git a/frontend/src/modules/organization/pages/organization-merge-suggestions-page.vue b/frontend/src/modules/organization/pages/organization-merge-suggestions-page.vue
index 1b0936ddca..0d2ecd25c0 100644
--- a/frontend/src/modules/organization/pages/organization-merge-suggestions-page.vue
+++ b/frontend/src/modules/organization/pages/organization-merge-suggestions-page.vue
@@ -20,7 +20,7 @@
           placement="top"
           content="LFX is constantly checking your community for duplicate organizations. Here you can check all the merging suggestions."
         >
-          <i class="ri-question-line text-lg text-gray-500 flex items-center ml-2 h-5" />
+        <lf-icon name="circle-question" :size="20" class="text-gray-500 flex items-center ml-2 h-5" />
         </el-tooltip>
       </div>
 
@@ -93,7 +93,7 @@
                   class="text-black hover:text-primary-500"
                 >
                   <div class="flex items-center gap-2">
-                    <i class="text-xl ri-subtract-line text-gray-300" />
+                    <lf-icon name="minus" :size="24" class="text-gray-300" />
                     <app-avatar
                       size="xs"
                       :entity="{
@@ -133,16 +133,16 @@
                       :loading="sending === `${suggestion.organizations[0].id}:${suggestion.organizations[1].id}`"
                       :icon-only="true"
                     >
-                      <i class="ri-ellipsis" type="regular" />
+                      <lf-icon name="ellipsis" type="regular" /> 
                     </lf-button>
                   </template>
 
                   <lf-dropdown-item @click="merge(suggestion)">
-                    <i class="ri-shuffle-line" /> Merge suggestion
+                    <lf-icon name="shuffle" /> Merge suggestion
                   </lf-dropdown-item>
 
                   <lf-dropdown-item @click="ignore(suggestion)">
-                    <i class="ri-circle-xmark" />Ignore suggestion
+                    <lf-icon name="circle-xmark" />Ignore suggestion
                   </lf-dropdown-item>
                 </lf-dropdown>
               </div>
@@ -151,9 +151,7 @@
         </tbody>
       </lf-table>
       <div v-else class="py-20 flex flex-col items-center">
-        <div
-          class="ri-shuffle-line text-gray-200 text-10xl h-40 flex items-center mb-8"
-        />
+        <lf-icon name="shuffle" :size="160" class="text-gray-200 flex items-center mb-8" />
         <h5 class="text-center text-lg font-semibold mb-4">
           No merge suggestions
         </h5>
@@ -164,7 +162,7 @@
 
       <div v-if="total > mergeSuggestions.length" class="mt-6 flex justify-center">
         <lf-button type="primary-ghost" size="small" :loading="loading" @click="loadMore()">
-          <i class="ri-arrow-down-line" />Load more
+          <lf-icon name="arrow-down" />Load more
         </lf-button>
       </div>
     </div>
@@ -202,6 +200,7 @@ import AppMergeSuggestionsFilters from '@/modules/member/components/suggestions/
 import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
 import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
 import LfOrganizationLfMemberTag from '@/modules/organization/components/lf-member/organization-lf-member-tag.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const { selectedProjectGroup } = storeToRefs(useLfSegmentsStore());
 

From 1db3741538256fa90190a3e5f23de640e99e5b74 Mon Sep 17 00:00:00 2001
From: Sameh16 <sameh_mohamed16@hotmail.com>
Date: Fri, 17 Jan 2025 16:16:11 +0200
Subject: [PATCH 09/16] Replace old icon components with updated ones across
 organization and contributor modules

Signed-off-by: Sameh16 <sameh_mohamed16@hotmail.com>
---
 .../details/contributor-details-actions.vue   |  3 +-
 .../contributor-details-identity-item.vue     |  3 +-
 .../contributor-details-work-history-item.vue |  4 +--
 .../shared/contributor-dropdown.vue           |  3 +-
 .../components/member-dropdown-content.vue    | 31 +++++++++++--------
 .../organization-details-domain-item.vue      |  3 +-
 .../email/organization-details-email-item.vue |  3 +-
 .../organization-details-identity-item.vue    |  3 +-
 .../form/organization-form-emails.vue         |  4 +--
 .../form/organization-form-identities.vue     |  5 +--
 .../form/organization-form-phone-number.vue   |  4 +--
 .../list/organization-common-list-table.vue   |  4 +--
 .../components/organization-badge.vue         |  3 +-
 .../organization-dropdown-content.vue         |  5 ++-
 .../organization-merge-suggestions.vue        |  6 ++--
 .../shared/organization-dropdown.vue          |  3 +-
 .../pages/organization-form-page.vue          |  3 +-
 17 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/frontend/src/modules/contributor/components/details/contributor-details-actions.vue b/frontend/src/modules/contributor/components/details/contributor-details-actions.vue
index ddf21362db..3be6aa9add 100644
--- a/frontend/src/modules/contributor/components/details/contributor-details-actions.vue
+++ b/frontend/src/modules/contributor/components/details/contributor-details-actions.vue
@@ -27,7 +27,7 @@
         type="secondary"
         @click="isMergeDialogOpen = props.contributor"
       >
-        <lf-icon-old name="p2p-line" />
+        <lf-icon name="merge" />
         Merge profile
       </lf-button>
 
@@ -81,7 +81,6 @@
 </template>
 
 <script setup lang="ts">
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import LfButtonGroup from '@/ui-kit/button/ButtonGroup.vue';
diff --git a/frontend/src/modules/contributor/components/details/identity/contributor-details-identity-item.vue b/frontend/src/modules/contributor/components/details/identity/contributor-details-identity-item.vue
index 172139252e..be07003170 100644
--- a/frontend/src/modules/contributor/components/details/identity/contributor-details-identity-item.vue
+++ b/frontend/src/modules/contributor/components/details/identity/contributor-details-identity-item.vue
@@ -90,7 +90,7 @@
         v-if="hasPermission(LfPermission.memberEdit)"
         @click="emit('unmerge')"
       >
-        <lf-icon-old name="link-unlink" />Unmerge identity
+        <lf-icon name="link-simple-slash" />Unmerge identity
       </lf-dropdown-item>
 
       <lf-dropdown-item
@@ -131,7 +131,6 @@
 </template>
 
 <script setup lang="ts">
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { Contributor, ContributorIdentity } from '@/modules/contributor/types/Contributor';
 import { CrowdIntegrations } from '@/integrations/integrations-config';
diff --git a/frontend/src/modules/contributor/components/details/work-history/contributor-details-work-history-item.vue b/frontend/src/modules/contributor/components/details/work-history/contributor-details-work-history-item.vue
index 8ebd2264cc..e81b066c40 100644
--- a/frontend/src/modules/contributor/components/details/work-history/contributor-details-work-history-item.vue
+++ b/frontend/src/modules/contributor/components/details/work-history/contributor-details-work-history-item.vue
@@ -20,7 +20,7 @@
       <lf-dropdown v-show="hovered || isGroupHover" placement="bottom-end" width="14.5rem">
         <template #trigger>
           <lf-button type="secondary-ghost" size="small" :icon-only="true">
-            <lf-icon name="ellipsis" />
+            <lf-icon name="ellipsis" type="regular" />
           </lf-button>
         </template>
 
@@ -48,7 +48,7 @@
 </template>
 
 <script setup lang="ts">
-import LfIcon from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { Contributor } from '@/modules/contributor/types/Contributor';
 import LfSvg from '@/shared/svg/svg.vue';
 import { Organization } from '@/modules/organization/types/Organization';
diff --git a/frontend/src/modules/contributor/components/shared/contributor-dropdown.vue b/frontend/src/modules/contributor/components/shared/contributor-dropdown.vue
index a7d2f18af9..08d6672972 100644
--- a/frontend/src/modules/contributor/components/shared/contributor-dropdown.vue
+++ b/frontend/src/modules/contributor/components/shared/contributor-dropdown.vue
@@ -4,7 +4,7 @@
       && hasPermission(LfPermission.memberEdit)"
     @click="emit('unmerge')"
   >
-    <lf-icon-old name="link-unlink" />
+    <lf-icon name="link-simple-slash" />
     Unmerge profile
   </lf-dropdown-item>
   <lf-dropdown-item
@@ -33,7 +33,6 @@
 </template>
 
 <script setup lang="ts">
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfDropdownItem from '@/ui-kit/dropdown/DropdownItem.vue';
 import LfDropdownSeparator from '@/ui-kit/dropdown/DropdownSeparator.vue';
diff --git a/frontend/src/modules/member/components/member-dropdown-content.vue b/frontend/src/modules/member/components/member-dropdown-content.vue
index 0c1c01ffec..65d789587c 100644
--- a/frontend/src/modules/member/components/member-dropdown-content.vue
+++ b/frontend/src/modules/member/components/member-dropdown-content.vue
@@ -8,7 +8,8 @@
         member,
       })"
     >
-      <i class="ri-link-unlink-m text-base mr-2" /><span class="text-xs">Unmerge identity</span>
+    <lf-icon name="link-simple-slash" class="mr-2" />
+      <span class="text-xs">Unmerge identity</span>
     </button>
     <el-divider class="border-gray-200" />
   </template>
@@ -26,7 +27,7 @@
       class="h-10 el-dropdown-menu__item w-full mb-1"
       type="button"
     >
-      <i class="ri-pencil-line text-base mr-2" />
+      <lf-icon name="pen fa-sharp" class="mr-2" />
       <span class="text-xs">Edit profile</span>
     </button>
   </router-link>
@@ -42,7 +43,8 @@
     <span
       class="max-w-[16px]"
       color="#9CA3AF"
-    ><i class="ri-github-fill" /></span>
+    >
+    <lf-icon name="github" type="brands" /></span>
     <span class="ml-2 text-xs"> Find GitHub </span>
   </button>
 
@@ -58,7 +60,8 @@
       })
     "
   >
-    <i class="ri-group-line text-base mr-2" /><span class="text-xs">Merge profile</span>
+  <lf-icon name="user-group" class="mr-2" />
+  <span class="text-xs">Merge profile</span>
   </button>
 
   <!-- Hubspot -->
@@ -114,7 +117,8 @@
             })
           "
         >
-          <i class="ri-bookmark-line text-base mr-2" /><span class="text-xs">Mark as team member</span>
+        <lf-icon name="bookmark" class="mr-2" />
+        <span class="text-xs">Mark as team member</span>
         </button>
       </span>
     </el-tooltip>
@@ -130,7 +134,8 @@
         })
       "
     >
-      <i class="ri-bookmark-2-line text-base mr-2" /><span class="text-xs">Unmark as team member</span>
+        <lf-icon name="bookmark-slash" class="mr-2" />
+        <span class="text-xs">Unmark as team member</span>
     </button>
     <button
       v-if="!member.attributes.isBot?.default"
@@ -143,7 +148,8 @@
         })
       "
     >
-      <i class="ri-robot-line text-base mr-2" /><span class="text-xs">Mark as bot</span>
+    <lf-icon name="robot" class="mr-2" />
+    <span class="text-xs">Mark as bot</span>
     </button>
     <button
       v-if="member.attributes.isBot?.default"
@@ -156,7 +162,8 @@
         })
       "
     >
-      <i class="ri-robot-line text-base mr-2" /><span class="text-xs">Unmark as bot</span>
+    <lf-icon name="robot" class="mr-2" />
+    <span class="text-xs">Unmark as bot</span>
     </button>
   </template>
   <template v-if="hasPermission(LfPermission.memberDestroy)">
@@ -171,11 +178,8 @@
         })
       "
     >
-      <i
-        class="ri-delete-bin-line text-base mr-2 text-red-500"
-      /><span
-        class="text-xs text-red-500"
-      >Delete profile</span>
+    <lf-icon name="trash-can" class="mr-2 text-red-500" />
+    <span class="text-xs text-red-500">Delete profile</span>
     </button>
   </template>
 </template>
@@ -196,6 +200,7 @@ import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
 import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
 import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
 import { Member } from '../types/Member';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 enum Actions {
   DELETE_CONTACT = 'deleteContact',
diff --git a/frontend/src/modules/organization/components/details/domains/organization-details-domain-item.vue b/frontend/src/modules/organization/components/details/domains/organization-details-domain-item.vue
index c17a8a0122..410caa2c0b 100644
--- a/frontend/src/modules/organization/components/details/domains/organization-details-domain-item.vue
+++ b/frontend/src/modules/organization/components/details/domains/organization-details-domain-item.vue
@@ -50,7 +50,7 @@
           v-if="hasPermission(LfPermission.memberEdit)"
           @click="emit('unmerge')"
         >
-          <lf-icon-old name="link-unlink" />Unmerge domain
+          <lf-icon name="link-simple-slash" />Unmerge domain
         </lf-dropdown-item>
 
         <lf-dropdown-item
@@ -91,7 +91,6 @@ import {
   OrganizationIdentity,
   OrganizationIdentityType,
 } from '@/modules/organization/types/Organization';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { withHttp } from '@/utils/string';
 import LfTooltip from '@/ui-kit/tooltip/Tooltip.vue';
diff --git a/frontend/src/modules/organization/components/details/email/organization-details-email-item.vue b/frontend/src/modules/organization/components/details/email/organization-details-email-item.vue
index 589643b2d7..21823e3862 100644
--- a/frontend/src/modules/organization/components/details/email/organization-details-email-item.vue
+++ b/frontend/src/modules/organization/components/details/email/organization-details-email-item.vue
@@ -58,7 +58,7 @@
         v-if="hasPermission(LfPermission.organizationEdit)"
         @click="emit('unmerge')"
       >
-        <lf-icon-old name="link-unlink" />Unmerge email
+        <lf-icon name="link-simple-slash" />Unmerge email
       </lf-dropdown-item>
 
       <lf-dropdown-item
@@ -87,7 +87,6 @@
 </template>
 
 <script setup lang="ts">
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { CrowdIntegrations } from '@/integrations/integrations-config';
 import LfTooltip from '@/ui-kit/tooltip/Tooltip.vue';
diff --git a/frontend/src/modules/organization/components/details/identity/organization-details-identity-item.vue b/frontend/src/modules/organization/components/details/identity/organization-details-identity-item.vue
index 3fe595b5ed..9f942b5006 100644
--- a/frontend/src/modules/organization/components/details/identity/organization-details-identity-item.vue
+++ b/frontend/src/modules/organization/components/details/identity/organization-details-identity-item.vue
@@ -67,7 +67,7 @@
         v-if="hasPermission(LfPermission.organizationEdit)"
         @click="emit('unmerge')"
       >
-        <lf-icon-old name="link-unlink" />Unmerge identity
+        <lf-icon name="link-simple-slash" />Unmerge identity
       </lf-dropdown-item>
 
       <lf-dropdown-item
@@ -96,7 +96,6 @@
 </template>
 
 <script setup lang="ts">
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { CrowdIntegrations } from '@/integrations/integrations-config';
 import LfTooltip from '@/ui-kit/tooltip/Tooltip.vue';
diff --git a/frontend/src/modules/organization/components/form/organization-form-emails.vue b/frontend/src/modules/organization/components/form/organization-form-emails.vue
index 77e6f2fbcc..1193047ff7 100644
--- a/frontend/src/modules/organization/components/form/organization-form-emails.vue
+++ b/frontend/src/modules/organization/components/form/organization-form-emails.vue
@@ -13,7 +13,7 @@
             class="btn btn--md btn--transparent w-10 h-10"
             @click="removeEmail(ei)"
           >
-            <i class="ri-delete-bin-line text-lg" />
+          <lf-icon name="trash-can" :size="20" />
           </el-button>
         </template>
       </app-organization-form-emails-item>
@@ -33,7 +33,7 @@ import {
 import AppOrganizationFormEmailsItem from '@/modules/organization/components/form/organization-form-emails-item.vue';
 import { Platform } from '@/shared/modules/platform/types/Platform';
 import { Organization, OrganizationIdentityType, OrganizationIdentity } from '../../types/Organization';
-
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 const emit = defineEmits<{(e: 'update:modelValue', value: Organization): void }>();
 
 const props = defineProps<{
diff --git a/frontend/src/modules/organization/components/form/organization-form-identities.vue b/frontend/src/modules/organization/components/form/organization-form-identities.vue
index 51acb28047..72edd63331 100644
--- a/frontend/src/modules/organization/components/form/organization-form-identities.vue
+++ b/frontend/src/modules/organization/components/form/organization-form-identities.vue
@@ -52,7 +52,8 @@
                 class="btn btn--md btn--transparent w-8 !h-8"
                 @click="removeUsername(ii)"
               >
-                <i class="ri-delete-bin-line text-lg" />
+                <lf-icon name="trash-can" :size="20" />
+
               </el-button>
             </article>
           </template>
@@ -68,7 +69,7 @@ import {
 } from 'vue';
 import { CrowdIntegrations } from '@/integrations/integrations-config';
 import { OrganizationIdentityType } from '../../types/Organization';
-
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 const emit = defineEmits(['update:modelValue', 'unmerge']);
 
 const props = defineProps({
diff --git a/frontend/src/modules/organization/components/form/organization-form-phone-number.vue b/frontend/src/modules/organization/components/form/organization-form-phone-number.vue
index 88b00911ba..793250e190 100644
--- a/frontend/src/modules/organization/components/form/organization-form-phone-number.vue
+++ b/frontend/src/modules/organization/components/form/organization-form-phone-number.vue
@@ -13,7 +13,7 @@
             class="btn btn--md btn--transparent w-10 h-10"
             @click="removePhoneNumber(ei)"
           >
-            <i class="ri-delete-bin-line text-lg" />
+            <lf-icon name="trash-can" :size="20" />
           </el-button>
         </template>
       </app-organization-form-phone-number-item>
@@ -32,7 +32,7 @@ import {
 } from 'vue';
 import AppOrganizationFormPhoneNumberItem
   from '@/modules/organization/components/form/organization-form-phone-number-item.vue';
-
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 const emit = defineEmits(['update:modelValue']);
 
 const props = defineProps({
diff --git a/frontend/src/modules/organization/components/list/organization-common-list-table.vue b/frontend/src/modules/organization/components/list/organization-common-list-table.vue
index 6dd0f1bba4..08a4001cee 100644
--- a/frontend/src/modules/organization/components/list/organization-common-list-table.vue
+++ b/frontend/src/modules/organization/components/list/organization-common-list-table.vue
@@ -72,13 +72,13 @@
               <lf-dropdown placement="bottom-end" @click.stop.prevent>
                 <template #trigger>
                   <lf-button type="secondary-ghost-light" :icon-only="true" size="small" @click.prevent>
-                    <i class="ri-more-fill !text-lg" />
+                    <lf-icon name="ellipsis" :size="20" />
                   </lf-button>
                 </template>
                 <lf-dropdown-item
                   @click="markAsTeamOrganization(org)"
                 >
-                  <i class="ri-team-line" />
+                  <lf-icon name="people-group" />
                   {{ org.isTeamOrganization ? 'Unmark' : 'Mark' }} as team organization
                 </lf-dropdown-item>
                 <lf-dropdown-separator />
diff --git a/frontend/src/modules/organization/components/organization-badge.vue b/frontend/src/modules/organization/components/organization-badge.vue
index e04af0de4b..3981510e62 100644
--- a/frontend/src/modules/organization/components/organization-badge.vue
+++ b/frontend/src/modules/organization/components/organization-badge.vue
@@ -8,7 +8,7 @@
       content="Your own organization"
     >
       <div class="px-2 py-0.5 flex items-center text-2xs font-medium bg-gray-200 text-gray-600 rounded-md gap-1">
-        <i class="ri-team-line text-2xs" />Team
+        <lf-icon name="people-group" :size="12" />Team
       </div>
     </el-tooltip>
   </div>
@@ -16,6 +16,7 @@
 
 <script setup>
 import { computed } from 'vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const props = defineProps({
   organization: {
diff --git a/frontend/src/modules/organization/components/organization-dropdown-content.vue b/frontend/src/modules/organization/components/organization-dropdown-content.vue
index cd01155286..8be13f85a3 100644
--- a/frontend/src/modules/organization/components/organization-dropdown-content.vue
+++ b/frontend/src/modules/organization/components/organization-dropdown-content.vue
@@ -144,9 +144,8 @@
         })
       "
     >
-      <i
-        class="ri-delete-bin-line text-base mr-2 text-red-500"
-      /><span
+    <lf-icon name="trash-can" :size="16" class="mr-2 text-red-500" />
+      <span
         class="text-xs text-red-500"
       >Delete organization</span>
     </button>
diff --git a/frontend/src/modules/organization/components/organization-merge-suggestions.vue b/frontend/src/modules/organization/components/organization-merge-suggestions.vue
index eb87c43aa1..55c1499f19 100644
--- a/frontend/src/modules/organization/components/organization-merge-suggestions.vue
+++ b/frontend/src/modules/organization/components/organization-merge-suggestions.vue
@@ -11,7 +11,7 @@
             :icon-only="true"
             @click="fetch(offset - 1)"
           >
-            <i class="ri-arrow-left-s-line" />
+          <lf-icon name="chevron-left" />
           </lf-button>
           <lf-button
             type="secondary"
@@ -20,7 +20,7 @@
             :icon-only="true"
             @click="fetch(offset + 1)"
           >
-            <i class="ri-arrow-right-s-line" />
+          <lf-icon name="chevron-right" />
           </lf-button>
         </div>
 
@@ -153,7 +153,7 @@ import AppMemberMergeSimilarity from '@/modules/member/components/suggestions/me
 import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
 import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
 import { OrganizationService } from '../organization-service';
-
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 const props = defineProps({
   query: {
     type: Object,
diff --git a/frontend/src/modules/organization/components/shared/organization-dropdown.vue b/frontend/src/modules/organization/components/shared/organization-dropdown.vue
index 82a164c8b5..ca42e77d93 100644
--- a/frontend/src/modules/organization/components/shared/organization-dropdown.vue
+++ b/frontend/src/modules/organization/components/shared/organization-dropdown.vue
@@ -3,7 +3,7 @@
     v-if="hasPermission(LfPermission.organizationEdit) && props.organization.identities.length > 1"
     @click="unmerge = props.organization"
   >
-    <lf-icon-old name="link-unlink-m" />
+    <lf-icon name="link-simple-slash" />
     Unmerge identity
   </lf-dropdown-item>
   <lf-dropdown-item
@@ -29,7 +29,6 @@
 </template>
 
 <script setup lang="ts">
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfDropdownItem from '@/ui-kit/dropdown/DropdownItem.vue';
 import LfDropdownSeparator from '@/ui-kit/dropdown/DropdownSeparator.vue';
diff --git a/frontend/src/modules/organization/pages/organization-form-page.vue b/frontend/src/modules/organization/pages/organization-form-page.vue
index 1f768003e9..f8837c26c1 100644
--- a/frontend/src/modules/organization/pages/organization-form-page.vue
+++ b/frontend/src/modules/organization/pages/organization-form-page.vue
@@ -35,7 +35,7 @@
                 :disabled="isFormSubmitting"
                 @click="onReset"
               >
-                <i class="ri-arrow-go-back-line" />
+              <lf-icon name="arrow-turn-left" />
                 <span>Reset changes</span>
               </el-button>
               <div
@@ -164,6 +164,7 @@ import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
 import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
 import AppLfSubProjectsListDropdown from '@/modules/admin/modules/projects/components/lf-sub-projects-list-dropdown.vue';
 import { useOrganizationStore } from '../store/pinia';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const LoaderIcon = h(
   'i',

From 354d1e98bd3218776b26e37e89c3f0e227919be2 Mon Sep 17 00:00:00 2001
From: Sameh16 <sameh_mohamed16@hotmail.com>
Date: Fri, 17 Jan 2025 16:20:39 +0200
Subject: [PATCH 10/16] Replace old icon components with updated ones in
 organization details and membership views

Signed-off-by: Sameh16 <sameh_mohamed16@hotmail.com>
---
 .../components/details/organization-details-actions.vue       | 2 +-
 .../components/details/organization-details-contributors.vue  | 2 +-
 .../components/lf-member/organization-lf-member-tag.vue       | 3 ++-
 .../organization/components/organization-dropdown-content.vue | 2 +-
 .../components/shared/organization-membership.vue             | 4 ++--
 5 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/src/modules/organization/components/details/organization-details-actions.vue b/frontend/src/modules/organization/components/details/organization-details-actions.vue
index 809d20a19f..7ca98d72ba 100644
--- a/frontend/src/modules/organization/components/details/organization-details-actions.vue
+++ b/frontend/src/modules/organization/components/details/organization-details-actions.vue
@@ -24,7 +24,7 @@
 
         <!-- Merge -->
         <lf-button v-else-if="hasPermission(LfPermission.mergeOrganizations)" type="secondary" @click="isMergeDialogOpen = props.organization">
-          <lf-icon-old name="exchange-2-line" />
+          <lf-icon name="merge" />
           Merge organization
         </lf-button>
       </template>
diff --git a/frontend/src/modules/organization/components/details/organization-details-contributors.vue b/frontend/src/modules/organization/components/details/organization-details-contributors.vue
index 29466c5742..9cfd372d69 100644
--- a/frontend/src/modules/organization/components/details/organization-details-contributors.vue
+++ b/frontend/src/modules/organization/components/details/organization-details-contributors.vue
@@ -98,7 +98,7 @@
     </div>
     <div v-if="!loading && !contributors.length">
       <div class="flex justify-center pb-8">
-        <lf-icon-old name="group-2-line" :size="80" class="text-gray-200" />
+        <lf-icon name="people-group" :size="80" class="text-gray-200" />
       </div>
       <h5 class="text-center text-h5">
         No people found
diff --git a/frontend/src/modules/organization/components/lf-member/organization-lf-member-tag.vue b/frontend/src/modules/organization/components/lf-member/organization-lf-member-tag.vue
index 111da38c7f..1702cc2cfe 100644
--- a/frontend/src/modules/organization/components/lf-member/organization-lf-member-tag.vue
+++ b/frontend/src/modules/organization/components/lf-member/organization-lf-member-tag.vue
@@ -1,7 +1,7 @@
 <template>
   <el-tooltip v-if="!!organization.lfxMembership" content="Active member organization of the LF or one of its projects" placement="top">
     <div class="text-primary-500 flex items-center gap-1 flex-nowrap">
-      <i :class="`ri-bookmark-3-fill ${iconFontSize}`" />
+      <lf-icon name="circle-bookmark" :class="iconFontSize" />
       <span v-if="!onlyShowIcon" class="font-semibold text-xs whitespace-nowrap">Member</span>
     </div>
   </el-tooltip>
@@ -9,6 +9,7 @@
 
 <script setup lang="ts">
 import { Organization } from '../../types/Organization';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 withDefaults(
   defineProps<{
diff --git a/frontend/src/modules/organization/components/organization-dropdown-content.vue b/frontend/src/modules/organization/components/organization-dropdown-content.vue
index 8be13f85a3..a341b9f123 100644
--- a/frontend/src/modules/organization/components/organization-dropdown-content.vue
+++ b/frontend/src/modules/organization/components/organization-dropdown-content.vue
@@ -126,7 +126,7 @@
         })
       "
     >
-      <i class="ri-bookmark-2-line text-base mr-2" /><span class="text-xs">Unmark as team organization</span>
+    <lf-icon name="bookmark-slash" class="mr-2" /><span class="text-xs">Unmark as team organization</span>
     </button>
   </template>
 
diff --git a/frontend/src/modules/organization/components/shared/organization-membership.vue b/frontend/src/modules/organization/components/shared/organization-membership.vue
index aacb1a27b5..3064414887 100644
--- a/frontend/src/modules/organization/components/shared/organization-membership.vue
+++ b/frontend/src/modules/organization/components/shared/organization-membership.vue
@@ -4,7 +4,7 @@
     content="Active member organization of the LF or one of its projects"
   >
     <div class="text-primary-500 flex items-center gap-1 flex-nowrap">
-      <lf-icon-old name="bookmark-3-fill" :size="16" />
+      <lf-icon name="circle-bookmark" />
       <span class="font-semibold text-tiny whitespace-nowrap" v-bind="$attrs">Member</span>
     </div>
   </lf-tooltip>
@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import LfTooltip from '@/ui-kit/tooltip/Tooltip.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { Organization } from '../../types/Organization';
 
 const props = withDefaults(

From 00f1ad1703b1d2a812d053b6ba4aa2d6ae3e921a Mon Sep 17 00:00:00 2001
From: Sameh16 <sameh_mohamed16@hotmail.com>
Date: Mon, 20 Jan 2025 13:30:34 +0200
Subject: [PATCH 11/16] Replace old icon components with updated ones in
 Confluence, Dev.to, Discourse, and Jira integration views

Signed-off-by: Sameh16 <sameh_mohamed16@hotmail.com>
---
 .../confluence/components/confluence-params.vue  | 13 +++++--------
 .../devto/components/devto-connect-drawer.vue    |  6 +++---
 .../devto/components/devto-params.vue            | 16 ++++------------
 .../discourse/components/discourse-params.vue    | 10 +++-------
 .../integrations/jira/components/jira-params.vue | 10 +++-------
 5 files changed, 18 insertions(+), 37 deletions(-)

diff --git a/frontend/src/config/integrations/confluence/components/confluence-params.vue b/frontend/src/config/integrations/confluence/components/confluence-params.vue
index 16d2e99c7a..9a589456cc 100644
--- a/frontend/src/config/integrations/confluence/components/confluence-params.vue
+++ b/frontend/src/config/integrations/confluence/components/confluence-params.vue
@@ -7,9 +7,7 @@
             <div
               class="text-gray-600 text-2xs flex items-center leading-5 font-medium"
             >
-              <i
-                class="ri-folders-line text-base !text-gray-600 mr-1 h-4 flex items-center"
-              />
+              <lf-icon name="folders" class="!text-gray-600 mr-1 h-4 flex items-center" />
               1 organization
             </div>
             •
@@ -26,8 +24,8 @@
             Confluence organizations
           </p>
           <article class="flex items-center flex-nowrap mb-4 last:mb-0">
-            <i
-              class="ri-community-line text-[16px] mr-1 h-4 flex items-center"
+            <lf-icon
+              name="house-building" class="mr-1 h-4 flex items-center"
             />
 
             <span class="text-gray-900 text-sm max-w-3xs truncate">{{
@@ -40,9 +38,7 @@
           </p>
 
           <article class="flex items-center flex-nowrap mb-4 last:mb-0">
-            <div
-              class="ri-folder-line text-[16px] mr-1 h-4 flex items-center"
-            />
+            <lf-icon name="folder" class="mr-1 h-4 flex items-center"/>
 
             <span class="text-gray-900 text-sm max-w-3xs truncate">{{
               space?.name || space?.key || "Unnamed space"
@@ -56,6 +52,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const props = defineProps({
   integration: {
diff --git a/frontend/src/config/integrations/devto/components/devto-connect-drawer.vue b/frontend/src/config/integrations/devto/components/devto-connect-drawer.vue
index e3cd6f2388..27c95c77a4 100644
--- a/frontend/src/config/integrations/devto/components/devto-connect-drawer.vue
+++ b/frontend/src/config/integrations/devto/components/devto-connect-drawer.vue
@@ -85,7 +85,7 @@
                 class="btn btn-link btn-link--md btn-link--primary w-10 h-10"
                 @click="removeOrganization(org.id)"
               >
-                <i class="ri-delete-bin-line text-lg text-black" />
+              <lf-icon name="trash-can" :size="20" class="text-black" />
               </el-button>
             </div>
             <span
@@ -142,7 +142,7 @@
                 class="btn btn-link btn-link--md btn-link--primary w-10 h-10"
                 @click="removeUser(user.id)"
               >
-                <i class="ri-delete-bin-line text-lg text-black" />
+              <lf-icon name="trash-can" :size="20" class="text-black" />
               </el-button>
             </div>
             <span
@@ -201,7 +201,7 @@ import useVuelidate from '@vuelidate/core';
 import AppDrawer from '@/shared/drawer/drawer.vue';
 import { mapActions } from '@/shared/vuex/vuex.helpers';
 import AppFormItem from '@/shared/form/form-item.vue';
-// import elementChangeDetector from '@/shared/form/element-change';
+import LfIcon from '@/ui-kit/icon/icon.vue';
 import { IntegrationService } from '@/modules/integration/integration-service';
 import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
 import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
diff --git a/frontend/src/config/integrations/devto/components/devto-params.vue b/frontend/src/config/integrations/devto/components/devto-params.vue
index 86bafdf64a..cf3cce84bd 100644
--- a/frontend/src/config/integrations/devto/components/devto-params.vue
+++ b/frontend/src/config/integrations/devto/components/devto-params.vue
@@ -7,10 +7,7 @@
             <div
               class="text-gray-600 text-2xs flex items-center leading-5 font-medium"
             >
-              <i
-                class="ri-community-line text-base !text-gray-600 mr-1 h-4 flex items-center"
-              />
-
+             <lf-icon  name="house-building" class="!text-gray-600 mr-1 h-4 flex items-center" />
               {{ pluralize("organization", organizations.length, true) }}
             </div>
             •
@@ -32,10 +29,7 @@
               :key="organization"
               class="flex items-center flex-nowrap mb-4 last:mb-0"
             >
-              <i
-                class="ri-community-line text-[16px] mr-1 h-4 flex items-center"
-              />
-
+              <lf-icon  name="house-building" class="mr-1 h-4 flex items-center" />
               <span class="text-gray-900 text-sm max-w-3xs truncate">{{
                 organization
               }}</span>
@@ -55,9 +49,7 @@
               :key="user"
               class="flex items-center flex-nowrap mb-4 last:mb-0"
             >
-              <div
-                class="ri-user-line text-[16px] mr-1 h-4 flex items-center"
-              />
+              <lf-icon name="user" class="mr-1 h-4 flex items-center" />
 
               <span class="text-gray-900 text-sm max-w-3xs truncate">{{
                 user
@@ -73,7 +65,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import pluralize from 'pluralize';
-
+import LfIcon from '@/ui-kit/icon/icon.vue';
 const props = defineProps({
   integration: {
     type: Object,
diff --git a/frontend/src/config/integrations/discourse/components/discourse-params.vue b/frontend/src/config/integrations/discourse/components/discourse-params.vue
index 40d335c81e..bf831791c6 100644
--- a/frontend/src/config/integrations/discourse/components/discourse-params.vue
+++ b/frontend/src/config/integrations/discourse/components/discourse-params.vue
@@ -6,9 +6,7 @@
           <div
             class="text-gray-600 text-2xs flex items-center leading-5 font-medium"
           >
-            <i
-              class="ri-question-answer-line text-base !text-gray-600 mr-1 h-4 flex items-center"
-            />
+            <lf-icon name="messages" class="!text-gray-600 mr-1 h-4 flex items-center" />
             1 forum
           </div>
         </template>
@@ -18,10 +16,7 @@
         </p>
         <div class="max-h-44 overflow-auto -my-1 px-1">
           <article class="flex items-center flex-nowrap mb-4 last:mb-0">
-            <i
-              class="ri-question-answer-line text-[16px] mr-1 h-4 flex items-center"
-            />
-
+            <lf-icon name="messages" class="mr-1 h-4 flex items-center" />
             <span class="text-gray-900 text-sm max-w-3xs truncate">{{
               forum
             }}</span>
@@ -34,6 +29,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import LfIcon from '@/ui-kit/icon/icon.vue';
 
 const props = defineProps({
   integration: {
diff --git a/frontend/src/config/integrations/jira/components/jira-params.vue b/frontend/src/config/integrations/jira/components/jira-params.vue
index a883a8c83c..d4c2916ee3 100644
--- a/frontend/src/config/integrations/jira/components/jira-params.vue
+++ b/frontend/src/config/integrations/jira/components/jira-params.vue
@@ -6,9 +6,7 @@
           <div
             class="text-gray-600 text-2xs flex items-center leading-5 font-medium"
           >
-            <i
-              class="ri-folders-line text-base !text-gray-600 mr-1 h-4 flex items-center"
-            />
+            <lf-icon name="folders" class="!text-gray-600 mr-1 h-4 flex items-center" />
             {{ pluralize('project', projects.length, true) }}
           </div>
         </template>
@@ -22,10 +20,7 @@
             :key="project"
             class="flex items-center flex-nowrap mb-4 last:mb-0"
           >
-            <i
-              class="ri-folder-line text-[16px] mr-1 h-4 flex items-center"
-            />
-
+          <lf-icon name="folder" class="mr-1 h-4 flex items-center" />
             <span class="text-gray-900 text-sm max-w-3xs truncate">{{
               project
             }}</span>
@@ -39,6 +34,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import pluralize from 'pluralize';
+import LfIcon from '@/ui-kit/icon/icon.vue';
 
 const props = defineProps({
   integration: {

From 769cd30489681a4d3e61c5d6de9ed5680ec0450d Mon Sep 17 00:00:00 2001
From: Sameh16 <sameh_mohamed16@hotmail.com>
Date: Mon, 20 Jan 2025 13:47:44 +0200
Subject: [PATCH 12/16] Refactor icon imports and clean up formatting across
 various components

Signed-off-by: Sameh16 <sameh_mohamed16@hotmail.com>
---
 .../components/confluence-params.vue          |  5 ++--
 .../devto/components/devto-connect-drawer.vue |  6 ++--
 .../devto/components/devto-params.vue         |  7 +++--
 .../discourse/components/discourse-params.vue |  2 +-
 .../jira/components/jira-params.vue           |  4 +--
 .../integration/config/status/connecting.ts   |  2 +-
 ...ntributor-details-header-profile-photo.vue |  2 +-
 .../components/member-dropdown-content.vue    | 30 +++++++++----------
 .../details/organization-details-actions.vue  |  1 -
 .../organization-details-contributors.vue     |  1 -
 .../form/organization-form-emails.vue         |  5 ++--
 .../form/organization-form-identities.vue     |  4 +--
 .../form/organization-form-phone-number.vue   |  1 +
 .../lf-member/organization-lf-member-tag.vue  |  2 +-
 .../list/organization-list-table.vue          |  4 +--
 .../list/organization-list-toolbar.vue        |  2 +-
 .../organization-dropdown-content.vue         |  8 ++---
 .../components/organization-dropdown.vue      |  4 +--
 .../organization-merge-suggestions.vue        |  7 +++--
 .../organization-unmerge-dialog.vue           | 20 ++++++++-----
 .../pages/organization-form-page.vue          |  4 +--
 .../organization-merge-suggestions-page.vue   |  4 +--
 22 files changed, 67 insertions(+), 58 deletions(-)

diff --git a/frontend/src/config/integrations/confluence/components/confluence-params.vue b/frontend/src/config/integrations/confluence/components/confluence-params.vue
index 9a589456cc..044c025c63 100644
--- a/frontend/src/config/integrations/confluence/components/confluence-params.vue
+++ b/frontend/src/config/integrations/confluence/components/confluence-params.vue
@@ -25,7 +25,8 @@
           </p>
           <article class="flex items-center flex-nowrap mb-4 last:mb-0">
             <lf-icon
-              name="house-building" class="mr-1 h-4 flex items-center"
+              name="house-building"
+              class="mr-1 h-4 flex items-center"
             />
 
             <span class="text-gray-900 text-sm max-w-3xs truncate">{{
@@ -38,7 +39,7 @@
           </p>
 
           <article class="flex items-center flex-nowrap mb-4 last:mb-0">
-            <lf-icon name="folder" class="mr-1 h-4 flex items-center"/>
+            <lf-icon name="folder" class="mr-1 h-4 flex items-center" />
 
             <span class="text-gray-900 text-sm max-w-3xs truncate">{{
               space?.name || space?.key || "Unnamed space"
diff --git a/frontend/src/config/integrations/devto/components/devto-connect-drawer.vue b/frontend/src/config/integrations/devto/components/devto-connect-drawer.vue
index 27c95c77a4..d4cb10fbd2 100644
--- a/frontend/src/config/integrations/devto/components/devto-connect-drawer.vue
+++ b/frontend/src/config/integrations/devto/components/devto-connect-drawer.vue
@@ -85,7 +85,7 @@
                 class="btn btn-link btn-link--md btn-link--primary w-10 h-10"
                 @click="removeOrganization(org.id)"
               >
-              <lf-icon name="trash-can" :size="20" class="text-black" />
+                <lf-icon name="trash-can" :size="20" class="text-black" />
               </el-button>
             </div>
             <span
@@ -142,7 +142,7 @@
                 class="btn btn-link btn-link--md btn-link--primary w-10 h-10"
                 @click="removeUser(user.id)"
               >
-              <lf-icon name="trash-can" :size="20" class="text-black" />
+                <lf-icon name="trash-can" :size="20" class="text-black" />
               </el-button>
             </div>
             <span
@@ -201,11 +201,11 @@ import useVuelidate from '@vuelidate/core';
 import AppDrawer from '@/shared/drawer/drawer.vue';
 import { mapActions } from '@/shared/vuex/vuex.helpers';
 import AppFormItem from '@/shared/form/form-item.vue';
-import LfIcon from '@/ui-kit/icon/icon.vue';
 import { IntegrationService } from '@/modules/integration/integration-service';
 import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
 import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
 import { Platform } from '@/shared/modules/platform/types/Platform';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const { doDevtoConnect } = mapActions('integration');
 
diff --git a/frontend/src/config/integrations/devto/components/devto-params.vue b/frontend/src/config/integrations/devto/components/devto-params.vue
index cf3cce84bd..a90762d0aa 100644
--- a/frontend/src/config/integrations/devto/components/devto-params.vue
+++ b/frontend/src/config/integrations/devto/components/devto-params.vue
@@ -7,7 +7,7 @@
             <div
               class="text-gray-600 text-2xs flex items-center leading-5 font-medium"
             >
-             <lf-icon  name="house-building" class="!text-gray-600 mr-1 h-4 flex items-center" />
+              <lf-icon name="house-building" class="!text-gray-600 mr-1 h-4 flex items-center" />
               {{ pluralize("organization", organizations.length, true) }}
             </div>
             •
@@ -29,7 +29,7 @@
               :key="organization"
               class="flex items-center flex-nowrap mb-4 last:mb-0"
             >
-              <lf-icon  name="house-building" class="mr-1 h-4 flex items-center" />
+              <lf-icon name="house-building" class="mr-1 h-4 flex items-center" />
               <span class="text-gray-900 text-sm max-w-3xs truncate">{{
                 organization
               }}</span>
@@ -65,7 +65,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import pluralize from 'pluralize';
-import LfIcon from '@/ui-kit/icon/icon.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+
 const props = defineProps({
   integration: {
     type: Object,
diff --git a/frontend/src/config/integrations/discourse/components/discourse-params.vue b/frontend/src/config/integrations/discourse/components/discourse-params.vue
index bf831791c6..1e10297953 100644
--- a/frontend/src/config/integrations/discourse/components/discourse-params.vue
+++ b/frontend/src/config/integrations/discourse/components/discourse-params.vue
@@ -29,7 +29,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import LfIcon from '@/ui-kit/icon/icon.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const props = defineProps({
   integration: {
diff --git a/frontend/src/config/integrations/jira/components/jira-params.vue b/frontend/src/config/integrations/jira/components/jira-params.vue
index d4c2916ee3..7983d65400 100644
--- a/frontend/src/config/integrations/jira/components/jira-params.vue
+++ b/frontend/src/config/integrations/jira/components/jira-params.vue
@@ -20,7 +20,7 @@
             :key="project"
             class="flex items-center flex-nowrap mb-4 last:mb-0"
           >
-          <lf-icon name="folder" class="mr-1 h-4 flex items-center" />
+            <lf-icon name="folder" class="mr-1 h-4 flex items-center" />
             <span class="text-gray-900 text-sm max-w-3xs truncate">{{
               project
             }}</span>
@@ -34,7 +34,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import pluralize from 'pluralize';
-import LfIcon from '@/ui-kit/icon/icon.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const props = defineProps({
   integration: {
diff --git a/frontend/src/modules/admin/modules/integration/config/status/connecting.ts b/frontend/src/modules/admin/modules/integration/config/status/connecting.ts
index 563e5d26f7..929f43e3ce 100644
--- a/frontend/src/modules/admin/modules/integration/config/status/connecting.ts
+++ b/frontend/src/modules/admin/modules/integration/config/status/connecting.ts
@@ -7,7 +7,7 @@ const connecting: IntegrationStatusConfig = {
   status: {
     text: 'Connecting',
     icon: 'circle-notch animate-spin',
-    iconType:'solid',
+    iconType: 'solid',
     color: 'text-secondary-500',
   },
   actionBar: {
diff --git a/frontend/src/modules/contributor/components/details/header/contributor-details-header-profile-photo.vue b/frontend/src/modules/contributor/components/details/header/contributor-details-header-profile-photo.vue
index d0d88a613f..fe5cb1acbe 100644
--- a/frontend/src/modules/contributor/components/details/header/contributor-details-header-profile-photo.vue
+++ b/frontend/src/modules/contributor/components/details/header/contributor-details-header-profile-photo.vue
@@ -10,7 +10,7 @@
       <template #overlay>
         <div class="absolute top-0 left-0 w-full h-full bg-secondary-500 opacity-50" />
         <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-          <lf-icon name="pen fa-sharp"  :size="24" class="text-white" />
+          <lf-icon name="pen fa-sharp" :size="24" class="text-white" />
         </div>
       </template>
     </lf-avatar>
diff --git a/frontend/src/modules/member/components/member-dropdown-content.vue b/frontend/src/modules/member/components/member-dropdown-content.vue
index 65d789587c..87e102069e 100644
--- a/frontend/src/modules/member/components/member-dropdown-content.vue
+++ b/frontend/src/modules/member/components/member-dropdown-content.vue
@@ -8,7 +8,7 @@
         member,
       })"
     >
-    <lf-icon name="link-simple-slash" class="mr-2" />
+      <lf-icon name="link-simple-slash" class="mr-2" />
       <span class="text-xs">Unmerge identity</span>
     </button>
     <el-divider class="border-gray-200" />
@@ -44,7 +44,7 @@
       class="max-w-[16px]"
       color="#9CA3AF"
     >
-    <lf-icon name="github" type="brands" /></span>
+      <lf-icon name="github" type="brands" /></span>
     <span class="ml-2 text-xs"> Find GitHub </span>
   </button>
 
@@ -60,8 +60,8 @@
       })
     "
   >
-  <lf-icon name="user-group" class="mr-2" />
-  <span class="text-xs">Merge profile</span>
+    <lf-icon name="user-group" class="mr-2" />
+    <span class="text-xs">Merge profile</span>
   </button>
 
   <!-- Hubspot -->
@@ -117,8 +117,8 @@
             })
           "
         >
-        <lf-icon name="bookmark" class="mr-2" />
-        <span class="text-xs">Mark as team member</span>
+          <lf-icon name="bookmark" class="mr-2" />
+          <span class="text-xs">Mark as team member</span>
         </button>
       </span>
     </el-tooltip>
@@ -134,8 +134,8 @@
         })
       "
     >
-        <lf-icon name="bookmark-slash" class="mr-2" />
-        <span class="text-xs">Unmark as team member</span>
+      <lf-icon name="bookmark-slash" class="mr-2" />
+      <span class="text-xs">Unmark as team member</span>
     </button>
     <button
       v-if="!member.attributes.isBot?.default"
@@ -148,8 +148,8 @@
         })
       "
     >
-    <lf-icon name="robot" class="mr-2" />
-    <span class="text-xs">Mark as bot</span>
+      <lf-icon name="robot" class="mr-2" />
+      <span class="text-xs">Mark as bot</span>
     </button>
     <button
       v-if="member.attributes.isBot?.default"
@@ -162,8 +162,8 @@
         })
       "
     >
-    <lf-icon name="robot" class="mr-2" />
-    <span class="text-xs">Unmark as bot</span>
+      <lf-icon name="robot" class="mr-2" />
+      <span class="text-xs">Unmark as bot</span>
     </button>
   </template>
   <template v-if="hasPermission(LfPermission.memberDestroy)">
@@ -178,8 +178,8 @@
         })
       "
     >
-    <lf-icon name="trash-can" class="mr-2 text-red-500" />
-    <span class="text-xs text-red-500">Delete profile</span>
+      <lf-icon name="trash-can" class="mr-2 text-red-500" />
+      <span class="text-xs text-red-500">Delete profile</span>
     </button>
   </template>
 </template>
@@ -199,8 +199,8 @@ import usePermissions from '@/shared/modules/permissions/helpers/usePermissions'
 import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
 import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
 import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
-import { Member } from '../types/Member';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { Member } from '../types/Member';
 
 enum Actions {
   DELETE_CONTACT = 'deleteContact',
diff --git a/frontend/src/modules/organization/components/details/organization-details-actions.vue b/frontend/src/modules/organization/components/details/organization-details-actions.vue
index 7ca98d72ba..c9ccd46a43 100644
--- a/frontend/src/modules/organization/components/details/organization-details-actions.vue
+++ b/frontend/src/modules/organization/components/details/organization-details-actions.vue
@@ -68,7 +68,6 @@
 </template>
 
 <script setup lang="ts">
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import LfButtonGroup from '@/ui-kit/button/ButtonGroup.vue';
diff --git a/frontend/src/modules/organization/components/details/organization-details-contributors.vue b/frontend/src/modules/organization/components/details/organization-details-contributors.vue
index 9cfd372d69..6b966cdf2d 100644
--- a/frontend/src/modules/organization/components/details/organization-details-contributors.vue
+++ b/frontend/src/modules/organization/components/details/organization-details-contributors.vue
@@ -135,7 +135,6 @@ import { Filter } from '@/shared/modules/filters/types/FilterConfig';
 import { Pagination } from '@/shared/types/Pagination';
 import { Member } from '@/modules/member/types/Member';
 import LfAvatar from '@/ui-kit/avatar/Avatar.vue';
-import LfIconOld from '@/ui-kit/icon/IconOld.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfDropdown from '@/ui-kit/dropdown/Dropdown.vue';
 import LfDropdownItem from '@/ui-kit/dropdown/DropdownItem.vue';
diff --git a/frontend/src/modules/organization/components/form/organization-form-emails.vue b/frontend/src/modules/organization/components/form/organization-form-emails.vue
index 1193047ff7..5abba8e733 100644
--- a/frontend/src/modules/organization/components/form/organization-form-emails.vue
+++ b/frontend/src/modules/organization/components/form/organization-form-emails.vue
@@ -13,7 +13,7 @@
             class="btn btn--md btn--transparent w-10 h-10"
             @click="removeEmail(ei)"
           >
-          <lf-icon name="trash-can" :size="20" />
+            <lf-icon name="trash-can" :size="20" />
           </el-button>
         </template>
       </app-organization-form-emails-item>
@@ -32,8 +32,9 @@ import {
 } from 'vue';
 import AppOrganizationFormEmailsItem from '@/modules/organization/components/form/organization-form-emails-item.vue';
 import { Platform } from '@/shared/modules/platform/types/Platform';
-import { Organization, OrganizationIdentityType, OrganizationIdentity } from '../../types/Organization';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { Organization, OrganizationIdentityType, OrganizationIdentity } from '../../types/Organization';
+
 const emit = defineEmits<{(e: 'update:modelValue', value: Organization): void }>();
 
 const props = defineProps<{
diff --git a/frontend/src/modules/organization/components/form/organization-form-identities.vue b/frontend/src/modules/organization/components/form/organization-form-identities.vue
index 72edd63331..ee67eabaa6 100644
--- a/frontend/src/modules/organization/components/form/organization-form-identities.vue
+++ b/frontend/src/modules/organization/components/form/organization-form-identities.vue
@@ -53,7 +53,6 @@
                 @click="removeUsername(ii)"
               >
                 <lf-icon name="trash-can" :size="20" />
-
               </el-button>
             </article>
           </template>
@@ -68,8 +67,9 @@ import {
   computed, ref, watch, reactive,
 } from 'vue';
 import { CrowdIntegrations } from '@/integrations/integrations-config';
-import { OrganizationIdentityType } from '../../types/Organization';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { OrganizationIdentityType } from '../../types/Organization';
+
 const emit = defineEmits(['update:modelValue', 'unmerge']);
 
 const props = defineProps({
diff --git a/frontend/src/modules/organization/components/form/organization-form-phone-number.vue b/frontend/src/modules/organization/components/form/organization-form-phone-number.vue
index 793250e190..511f35aefe 100644
--- a/frontend/src/modules/organization/components/form/organization-form-phone-number.vue
+++ b/frontend/src/modules/organization/components/form/organization-form-phone-number.vue
@@ -33,6 +33,7 @@ import {
 import AppOrganizationFormPhoneNumberItem
   from '@/modules/organization/components/form/organization-form-phone-number-item.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
+
 const emit = defineEmits(['update:modelValue']);
 
 const props = defineProps({
diff --git a/frontend/src/modules/organization/components/lf-member/organization-lf-member-tag.vue b/frontend/src/modules/organization/components/lf-member/organization-lf-member-tag.vue
index 1702cc2cfe..b8e9226be0 100644
--- a/frontend/src/modules/organization/components/lf-member/organization-lf-member-tag.vue
+++ b/frontend/src/modules/organization/components/lf-member/organization-lf-member-tag.vue
@@ -8,8 +8,8 @@
 </template>
 
 <script setup lang="ts">
-import { Organization } from '../../types/Organization';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { Organization } from '../../types/Organization';
 
 withDefaults(
   defineProps<{
diff --git a/frontend/src/modules/organization/components/list/organization-list-table.vue b/frontend/src/modules/organization/components/list/organization-list-table.vue
index 2d1c77d89f..4d858ea3ef 100644
--- a/frontend/src/modules/organization/components/list/organization-list-table.vue
+++ b/frontend/src/modules/organization/components/list/organization-list-table.vue
@@ -734,7 +734,7 @@
                         type="button"
                         @click.prevent.stop="() => onActionBtnClick(scope.row)"
                       >
-                        <lf-icon :id="`buttonRefIcon-${scope.row.id}`" name="ellipsis" type="regular" :size="24"  />
+                        <lf-icon :id="`buttonRefIcon-${scope.row.id}`" name="ellipsis" type="regular" :size="24" />
                       </button>
                     </router-link>
                   </template>
@@ -827,11 +827,11 @@ import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
 import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
 import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
 import { getOrganizationWebsite } from '@/utils/organization';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import AppOrganizationListToolbar from './organization-list-toolbar.vue';
 import AppOrganizationName from '../organization-name.vue';
 import AppOrganizationDropdownContent from '../organization-dropdown-content.vue';
 import { organizationSavedViews } from '../../config/saved-views/main';
-import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 const { trackEvent } = useProductTracking();
 const router = useRouter();
diff --git a/frontend/src/modules/organization/components/list/organization-list-toolbar.vue b/frontend/src/modules/organization/components/list/organization-list-toolbar.vue
index bbecaf393f..d0c39f6cf0 100644
--- a/frontend/src/modules/organization/components/list/organization-list-toolbar.vue
+++ b/frontend/src/modules/organization/components/list/organization-list-toolbar.vue
@@ -93,8 +93,8 @@ import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
 import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
 import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
 import AppOrganizationMergeDialog from '@/modules/organization/components/organization-merge-dialog.vue';
-import { OrganizationService } from '../../organization-service';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { OrganizationService } from '../../organization-service';
 
 const { trackEvent } = useProductTracking();
 
diff --git a/frontend/src/modules/organization/components/organization-dropdown-content.vue b/frontend/src/modules/organization/components/organization-dropdown-content.vue
index a341b9f123..583f5d8ddc 100644
--- a/frontend/src/modules/organization/components/organization-dropdown-content.vue
+++ b/frontend/src/modules/organization/components/organization-dropdown-content.vue
@@ -31,7 +31,7 @@
       class="h-10 el-dropdown-menu__item w-full"
       type="button"
     >
-    <lf-icon name="pen fa-sharp" class="text-base mr-2" />
+      <lf-icon name="pen fa-sharp" class="text-base mr-2" />
       <span class="text-xs">Edit organization</span>
     </button>
   </router-link>
@@ -126,7 +126,7 @@
         })
       "
     >
-    <lf-icon name="bookmark-slash" class="mr-2" /><span class="text-xs">Unmark as team organization</span>
+      <lf-icon name="bookmark-slash" class="mr-2" /><span class="text-xs">Unmark as team organization</span>
     </button>
   </template>
 
@@ -144,7 +144,7 @@
         })
       "
     >
-    <lf-icon name="trash-can" :size="16" class="mr-2 text-red-500" />
+      <lf-icon name="trash-can" :size="16" class="mr-2 text-red-500" />
       <span
         class="text-xs text-red-500"
       >Delete organization</span>
@@ -162,9 +162,9 @@ import usePermissions from '@/shared/modules/permissions/helpers/usePermissions'
 import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
 import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
 import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { OrganizationService } from '../organization-service';
 import { Organization } from '../types/Organization';
-import LfIcon from '@/ui-kit/icon/Icon.vue';
 
 enum Actions {
   DELETE_ORGANIZATION = 'deleteOrganization',
diff --git a/frontend/src/modules/organization/components/organization-dropdown.vue b/frontend/src/modules/organization/components/organization-dropdown.vue
index 736bad4da6..77d99a0378 100644
--- a/frontend/src/modules/organization/components/organization-dropdown.vue
+++ b/frontend/src/modules/organization/components/organization-dropdown.vue
@@ -11,7 +11,7 @@
         type="button"
         @click.prevent.stop
       >
-      <lf-icon name="ellipsis" type="regular" :size="24" />
+        <lf-icon name="ellipsis" type="regular" :size="24" />
       </button>
     </slot>
     <template #dropdown>
@@ -31,8 +31,8 @@
 import { computed, ref } from 'vue';
 import usePermissions from '@/shared/modules/permissions/helpers/usePermissions';
 import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
-import AppOrganizationDropdownContent from './organization-dropdown-content.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
+import AppOrganizationDropdownContent from './organization-dropdown-content.vue';
 
 defineProps({
   organization: {
diff --git a/frontend/src/modules/organization/components/organization-merge-suggestions.vue b/frontend/src/modules/organization/components/organization-merge-suggestions.vue
index 55c1499f19..1daf9ae8d2 100644
--- a/frontend/src/modules/organization/components/organization-merge-suggestions.vue
+++ b/frontend/src/modules/organization/components/organization-merge-suggestions.vue
@@ -11,7 +11,7 @@
             :icon-only="true"
             @click="fetch(offset - 1)"
           >
-          <lf-icon name="chevron-left" />
+            <lf-icon name="chevron-left" />
           </lf-button>
           <lf-button
             type="secondary"
@@ -20,7 +20,7 @@
             :icon-only="true"
             @click="fetch(offset + 1)"
           >
-          <lf-icon name="chevron-right" />
+            <lf-icon name="chevron-right" />
           </lf-button>
         </div>
 
@@ -152,8 +152,9 @@ import LfButton from '@/ui-kit/button/Button.vue';
 import AppMemberMergeSimilarity from '@/modules/member/components/suggestions/member-merge-similarity.vue';
 import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
 import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
-import { OrganizationService } from '../organization-service';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { OrganizationService } from '../organization-service';
+
 const props = defineProps({
   query: {
     type: Object,
diff --git a/frontend/src/modules/organization/components/organization-unmerge-dialog.vue b/frontend/src/modules/organization/components/organization-unmerge-dialog.vue
index 555f4bfadd..ac20f2cf9e 100644
--- a/frontend/src/modules/organization/components/organization-unmerge-dialog.vue
+++ b/frontend/src/modules/organization/components/organization-unmerge-dialog.vue
@@ -106,10 +106,13 @@
                               :label="i.displayValue"
                               @click="fetchPreview(i)"
                             >
-                            <lf-icon v-if="i.type === 'email'" name="envelope" :size="20" class="text-gray-900 leading-5 mr-2" />
-                            <lf-icon 
-                            v-else-if="['primary-domain', 'alternative-domain', 'affiliated-profile'].includes(i.type)" 
-                              name="window" size="20" class="text-gray-900 text-lg leading-5 mr-2" />  
+                              <lf-icon v-if="i.type === 'email'" name="envelope" :size="20" class="text-gray-900 leading-5 mr-2" />
+                              <lf-icon
+                                v-else-if="['primary-domain', 'alternative-domain', 'affiliated-profile'].includes(i.type)"
+                                name="window"
+                                :size="20"
+                                class="text-gray-900 text-lg leading-5 mr-2"
+                              />
                               <img
                                 v-else-if="platformDetails(i.platform)"
                                 class="h-5 w-5 mr-2"
@@ -154,9 +157,12 @@
                     :label="i.displayValue"
                   >
                     <lf-icon v-if="i.type === 'email'" name="envelope" :size="20" class="text-gray-900 leading-5 mr-2" />
-                    <lf-icon 
-                      v-else-if="['primary-domain', 'alternative-domain', 'affiliated-profile'].includes(i.type)" 
-                      name="window" size="20" class="text-gray-900 text-lg leading-5 mr-2" />  
+                    <lf-icon
+                      v-else-if="['primary-domain', 'alternative-domain', 'affiliated-profile'].includes(i.type)"
+                      name="window"
+                      size="20"
+                      class="text-gray-900 text-lg leading-5 mr-2"
+                    />
                     <img
                       v-else-if="platformDetails(i.platform)"
                       class="h-5 w-5 mr-2"
diff --git a/frontend/src/modules/organization/pages/organization-form-page.vue b/frontend/src/modules/organization/pages/organization-form-page.vue
index f8837c26c1..8f4648fcc4 100644
--- a/frontend/src/modules/organization/pages/organization-form-page.vue
+++ b/frontend/src/modules/organization/pages/organization-form-page.vue
@@ -35,7 +35,7 @@
                 :disabled="isFormSubmitting"
                 @click="onReset"
               >
-              <lf-icon name="arrow-turn-left" />
+                <lf-icon name="arrow-turn-left" />
                 <span>Reset changes</span>
               </el-button>
               <div
@@ -163,8 +163,8 @@ import AppOrganizationFormEmails from '@/modules/organization/components/form/or
 import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
 import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
 import AppLfSubProjectsListDropdown from '@/modules/admin/modules/projects/components/lf-sub-projects-list-dropdown.vue';
-import { useOrganizationStore } from '../store/pinia';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
+import { useOrganizationStore } from '../store/pinia';
 
 const LoaderIcon = h(
   'i',
diff --git a/frontend/src/modules/organization/pages/organization-merge-suggestions-page.vue b/frontend/src/modules/organization/pages/organization-merge-suggestions-page.vue
index 0d2ecd25c0..b1ca7567db 100644
--- a/frontend/src/modules/organization/pages/organization-merge-suggestions-page.vue
+++ b/frontend/src/modules/organization/pages/organization-merge-suggestions-page.vue
@@ -20,7 +20,7 @@
           placement="top"
           content="LFX is constantly checking your community for duplicate organizations. Here you can check all the merging suggestions."
         >
-        <lf-icon name="circle-question" :size="20" class="text-gray-500 flex items-center ml-2 h-5" />
+          <lf-icon name="circle-question" :size="20" class="text-gray-500 flex items-center ml-2 h-5" />
         </el-tooltip>
       </div>
 
@@ -133,7 +133,7 @@
                       :loading="sending === `${suggestion.organizations[0].id}:${suggestion.organizations[1].id}`"
                       :icon-only="true"
                     >
-                      <lf-icon name="ellipsis" type="regular" /> 
+                      <lf-icon name="ellipsis" type="regular" />
                     </lf-button>
                   </template>
 

From ee239b85419d899fd81ce7e719e39052cd00e762 Mon Sep 17 00:00:00 2001
From: Sameh16 <sameh_mohamed16@hotmail.com>
Date: Mon, 20 Jan 2025 13:57:34 +0200
Subject: [PATCH 13/16] Update icon usage in Timeline stories for consistency

Signed-off-by: Sameh16 <sameh_mohamed16@hotmail.com>
---
 frontend/src/ui-kit/timeline/Timeline.stories.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/ui-kit/timeline/Timeline.stories.ts b/frontend/src/ui-kit/timeline/Timeline.stories.ts
index 79384f27f2..fb1dba5be9 100644
--- a/frontend/src/ui-kit/timeline/Timeline.stories.ts
+++ b/frontend/src/ui-kit/timeline/Timeline.stories.ts
@@ -44,8 +44,7 @@ export const Regular = {
           </p>
         </div>
         <p class="text-small text-gray-500 mb-1.5 flex items-center">
-        <i class="fa-sharp fa-light fa-calendar"></i>
-        <lf-icon name="calendar" :size="16" class="mr-1.5 text-gray-400" />
+        <lf-icon name="calendar fa-sharp" :size="16" class="mr-1.5 text-gray-400" />
           {{ item.date }}
         </p>
       </lf-timeline-item>

From 3d9deb0053fcd576208835574313130ec4c0ec02 Mon Sep 17 00:00:00 2001
From: Sameh16 <sameh_mohamed16@hotmail.com>
Date: Wed, 22 Jan 2025 14:54:34 +0200
Subject: [PATCH 14/16] Update identity configurations for GitHub and LinkedIn:
 change icons and add iconType

Signed-off-by: Sameh16 <sameh_mohamed16@hotmail.com>
---
 frontend/src/config/identities/github/config.ts   | 3 ++-
 frontend/src/config/identities/index.ts           | 1 +
 frontend/src/config/identities/linkedin/config.ts | 6 +++++-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/config/identities/github/config.ts b/frontend/src/config/identities/github/config.ts
index 7fa66222e9..7c5018bd88 100644
--- a/frontend/src/config/identities/github/config.ts
+++ b/frontend/src/config/identities/github/config.ts
@@ -4,7 +4,8 @@ const github: IdentityConfig = {
   key: 'github',
   name: 'GitHub',
   image: '/images/identities/github.png',
-  icon: 'github-fill',
+  icon: 'github',
+  iconType: 'brands',
   color: '#24292F',
   member: {
     urlPrefix: 'github.com/',
diff --git a/frontend/src/config/identities/index.ts b/frontend/src/config/identities/index.ts
index a9f2b87e50..f1d967cc13 100644
--- a/frontend/src/config/identities/index.ts
+++ b/frontend/src/config/identities/index.ts
@@ -30,6 +30,7 @@ export interface IdentityConfig {
   name: string; // Display name of the identity
   image: string; // Image URL for the identity
   icon?: string; // Image URL for the identity
+  iconType?: string
   color?: string; // Image URL for the identity
   member?: {
     placeholder?: string;
diff --git a/frontend/src/config/identities/linkedin/config.ts b/frontend/src/config/identities/linkedin/config.ts
index fdff2cd2b9..28dea2185a 100644
--- a/frontend/src/config/identities/linkedin/config.ts
+++ b/frontend/src/config/identities/linkedin/config.ts
@@ -4,7 +4,8 @@ const linkedin: IdentityConfig = {
   key: 'linkedin',
   name: 'LinkedIn',
   image: '/images/identities/linkedin.png',
-  icon: 'linkedin-box-fill',
+  icon: 'linkedin',
+  iconType: 'brands',
   color: '#2867B2',
   member: {
     urlPrefix: 'linkedin.com/in/',
@@ -22,6 +23,9 @@ const linkedin: IdentityConfig = {
       copy: 'reply',
       number: conversation.activityCount - 1,
     }),
+    attributes: function (attributes: any) {
+      throw new Error('Function not implemented.');
+    }
   },
 };
 

From bbdc9f6eed8a9e3b3270786777ae472233b60017 Mon Sep 17 00:00:00 2001
From: Sameh16 <sameh_mohamed16@hotmail.com>
Date: Wed, 22 Jan 2025 18:01:22 +0200
Subject: [PATCH 15/16] Remove unimplemented attributes function from LinkedIn
 identity config

Signed-off-by: Sameh16 <sameh_mohamed16@hotmail.com>
---
 frontend/src/config/identities/linkedin/config.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/frontend/src/config/identities/linkedin/config.ts b/frontend/src/config/identities/linkedin/config.ts
index 28dea2185a..992a4cdc54 100644
--- a/frontend/src/config/identities/linkedin/config.ts
+++ b/frontend/src/config/identities/linkedin/config.ts
@@ -23,9 +23,6 @@ const linkedin: IdentityConfig = {
       copy: 'reply',
       number: conversation.activityCount - 1,
     }),
-    attributes: function (attributes: any) {
-      throw new Error('Function not implemented.');
-    }
   },
 };
 

From 8daf221cbdcf554ac3fd32b33c6db5ebf26453f9 Mon Sep 17 00:00:00 2001
From: Sameh16 <sameh_mohamed16@hotmail.com>
Date: Wed, 22 Jan 2025 18:18:08 +0200
Subject: [PATCH 16/16] Update GitHub connect modal icons to new design

Signed-off-by: Sameh16 <sameh_mohamed16@hotmail.com>
---
 .../components/connect/github-connect-modal.vue       | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/src/config/integrations/github/components/connect/github-connect-modal.vue b/frontend/src/config/integrations/github/components/connect/github-connect-modal.vue
index 0d5b574025..1e371097b0 100644
--- a/frontend/src/config/integrations/github/components/connect/github-connect-modal.vue
+++ b/frontend/src/config/integrations/github/components/connect/github-connect-modal.vue
@@ -15,7 +15,7 @@
           class="-mt-2 -mr-2"
           @click="isModalOpen = false"
         >
-          <lf-icon-old name="close-line" :size="24" />
+          <lf-icon name="xmark" type="regular" :size="24" />
         </lf-button>
       </div>
       <section class="pt-6 pb-8">
@@ -58,11 +58,11 @@
             </p>
             <lf-button type="primary-link" size="small" @click="copy()">
               <template v-if="!copied">
-                <lf-icon-old name="file-copy-line" />
+                <lf-icon name="copy" />
                 Copy app installation link to clipboard
               </template>
               <template v-else>
-                <lf-icon-old name="checkbox-circle-fill" class="text-green-500" />
+                <lf-icon name="circle-check" class="text-green-500" />
                 <span class="text-green-500">Copied to clipboard!</span>
               </template>
             </lf-button>
@@ -100,7 +100,7 @@
               >
                 <template #placeholder>
                   <div class="w-full h-full bg-gray-50 flex items-center justify-center">
-                    <lf-icon-old name="community-line" :size="14" class="text-gray-400" />
+                    <lf-icon name="house-building" :size="14" class="text-gray-400" />
                   </div>
                 </template>
               </lf-avatar>
@@ -116,7 +116,7 @@
                 <lf-avatar :src="i.avatarUrl" :name="i.login" :size="18" class="!rounded border border-gray-200 mr-1 mt-px">
                   <template #placeholder>
                     <div class="w-full h-full bg-gray-50 flex items-center justify-center">
-                      <lf-icon-old name="community-line" :size="14" class="text-gray-400" />
+                      <lf-icon name="house-building" :size="14" class="text-gray-400" />
                     </div>
                   </template>
                 </lf-avatar>
@@ -139,6 +139,7 @@ import { computed, onMounted, ref } from 'vue';
 import LfModal from '@/ui-kit/modal/Modal.vue';
 import config from '@/config';
 import LfIconOld from '@/ui-kit/icon/IconOld.vue';
+import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import LfAvatar from '@/ui-kit/avatar/Avatar.vue';
 import { IntegrationService } from '@/modules/integration/integration-service';