diff --git a/frontend/common/base/format-base.js b/frontend/common/base/format-base.js
deleted file mode 100644
index b1c6ea436a54..000000000000
--- a/frontend/common/base/format-base.js
+++ /dev/null
@@ -1 +0,0 @@
-export default {}
diff --git a/frontend/common/base/utils-base.js b/frontend/common/base/utils-base.js
deleted file mode 100644
index 35b138004ad5..000000000000
--- a/frontend/common/base/utils-base.js
+++ /dev/null
@@ -1,31 +0,0 @@
-export default {
-  safeParseEventValue(e) {
-    // safe attempt to parse form value
-    if (!e) {
-      return e
-    }
-    if (typeof e === 'string') {
-      return e
-    }
-    const target = e || e.target
-
-    if (target.getAttribute) {
-      return target.type === 'checkbox' || target.type === 'radio'
-        ? target.getAttribute('checked')
-        : target.getAttribute('data-value') || target.getAttribute('value')
-    }
-
-    if (
-      e &&
-      e.target &&
-      (e.target.type === 'checkbox' || e.target.type === 'radio')
-    ) {
-      return e.target.checked
-    }
-
-    if (target.type && target.type === 'span' && e.target.textContent) {
-      return e.target.textContent
-    }
-    return e && e.target ? e.target.value : e
-  },
-}
diff --git a/frontend/common/hooks/useMediaQuery.tsx b/frontend/common/hooks/useMediaQuery.tsx
deleted file mode 100644
index 56dc4fd9f6e4..000000000000
--- a/frontend/common/hooks/useMediaQuery.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useEffect, useState } from 'react'
-
-export default function useMediaQuery(query: string): boolean {
-  const [matches, setMatches] = useState(() =>
-    typeof window !== 'undefined' ? window.matchMedia(query).matches : false,
-  )
-
-  useEffect(() => {
-    const mediaQuery = window.matchMedia(query)
-
-    const updateMatch = () => setMatches(mediaQuery.matches)
-    mediaQuery.addEventListener('change', updateMatch)
-
-    updateMatch()
-
-    return () => mediaQuery.removeEventListener('change', updateMatch)
-  }, [query])
-
-  return matches
-}
diff --git a/frontend/common/hooks/usePageTracking.ts b/frontend/common/hooks/usePageTracking.ts
index bec4cd93dd89..13a87e6bd295 100644
--- a/frontend/common/hooks/usePageTracking.ts
+++ b/frontend/common/hooks/usePageTracking.ts
@@ -3,7 +3,7 @@ import { useEffect } from 'react'
 /**
  * Options for configuring page tracking behavior.
  */
-export type PageTrackingOptions = {
+type PageTrackingOptions = {
   /** The page constant name from Constants.pages */
   pageName: string
   /** Context data for tracking and storage persistence */
diff --git a/frontend/common/providers/ProjectProvider.tsx b/frontend/common/providers/ProjectProvider.tsx
index 8a1ffcc07ab8..ad84dff46381 100644
--- a/frontend/common/providers/ProjectProvider.tsx
+++ b/frontend/common/providers/ProjectProvider.tsx
@@ -11,7 +11,7 @@ export type CreateEnvType = (data: {
   cloneFeatureStatesAsync?: boolean
   metadata: Environment['metadata']
 }) => void
-export type ProjectProviderType = {
+type ProjectProviderType = {
   children: (props: {
     createEnv: CreateEnvType
     deleteEnv: typeof AppActions.deleteEnv
diff --git a/frontend/common/service.ts b/frontend/common/service.ts
index 9a763236ac20..e00188f57af0 100644
--- a/frontend/common/service.ts
+++ b/frontend/common/service.ts
@@ -7,7 +7,7 @@ import { StoreStateType } from './store'
 const Project = require('./project')
 const _data = require('./data/base/_data.js')
 
-export const baseApiOptions = (queryArgs?: Partial<FetchBaseQueryArgs>) => {
+const baseApiOptions = (queryArgs?: Partial<FetchBaseQueryArgs>) => {
   const res: Pick<
     CreateApiOptions<any, any, any, any>,
     | 'baseQuery'
diff --git a/frontend/common/services/mockAdminDashboardData.ts b/frontend/common/services/mockAdminDashboardData.ts
deleted file mode 100644
index 8da8df82c749..000000000000
--- a/frontend/common/services/mockAdminDashboardData.ts
+++ /dev/null
@@ -1,533 +0,0 @@
-import { Res } from 'common/types/responses'
-
-/**
- * Mock data generator for Platform Hub MVP.
- * To be replaced with real API calls when backend is ready.
- */
-
-const environmentNames = [
-  'Development',
-  'Staging',
-  'Production',
-  'QA',
-  'UAT',
-  'Canary',
-]
-
-const generateMockOrganisationMetrics = () => {
-  const orgNames = [
-    'Engineering Team',
-    'Product Platform',
-    'Mobile Apps',
-    'Data Science',
-    'Infrastructure',
-    'Marketing Tech',
-    'Customer Success',
-    'Security Team',
-    'Analytics Platform',
-    'DevOps',
-  ]
-
-  let globalProjectId = 1
-  let globalEnvId = 1
-
-  return orgNames.map((name, i) => {
-    // Generate realistic distribution (80/20 rule)
-    const isHeavyUser = i < 3 // Top 3 orgs are heavy users
-
-    const totalFlags = isHeavyUser
-      ? Math.floor(Math.random() * 250) + 50
-      : Math.floor(Math.random() * 70) + 10
-    const activeFlags = Math.floor(totalFlags * 0.7)
-    const staleFlags = totalFlags - activeFlags
-
-    const totalUsers = isHeavyUser
-      ? Math.floor(Math.random() * 80) + 20
-      : Math.floor(Math.random() * 22) + 3
-    const activeUsers = Math.floor(totalUsers * (Math.random() * 0.4 + 0.5))
-
-    const projectCount = isHeavyUser
-      ? Math.floor(Math.random() * 12) + 3
-      : Math.floor(Math.random() * 4) + 1
-
-    // Generate nested projects with environments
-    const projects = []
-    let totalApiCalls = 0
-    let totalFlagEvals = 0
-    let totalIdentityReqs = 0
-    let totalEnvCount = 0
-
-    for (let p = 0; p < projectCount; p++) {
-      const projName = projectNames[globalProjectId % projectNames.length]
-      const envCount = Math.floor(Math.random() * 3) + 2 // 2-4 environments per project
-      totalEnvCount += envCount
-
-      const environments = []
-      let projApiCalls = 0
-      let projFlagEvals = 0
-
-      for (let e = 0; e < envCount; e++) {
-        const envApiCalls = isHeavyUser
-          ? Math.floor(Math.random() * 300000) + 20000
-          : Math.floor(Math.random() * 50000) + 1000
-        const envFlagEvals = Math.floor(
-          envApiCalls * (Math.random() * 0.3 + 0.6),
-        )
-
-        environments.push({
-          api_calls_30d: envApiCalls,
-          flag_evaluations_30d: envFlagEvals,
-          id: globalEnvId++,
-          name: environmentNames[e % environmentNames.length],
-        })
-
-        projApiCalls += envApiCalls
-        projFlagEvals += envFlagEvals
-      }
-
-      const projFlags =
-        Math.floor(totalFlags / projectCount) +
-        (p === 0 ? totalFlags % projectCount : 0)
-
-      projects.push({
-        api_calls_30d: projApiCalls,
-        environments,
-        flag_evaluations_30d: projFlagEvals,
-        flags: projFlags,
-        id: globalProjectId++,
-        name: projName,
-      })
-
-      totalApiCalls += projApiCalls
-      totalFlagEvals += projFlagEvals
-    }
-
-    totalIdentityReqs = Math.floor(totalApiCalls * 0.1)
-
-    return {
-      active_flags: activeFlags,
-      active_users_30d: activeUsers,
-      admin_users: isHeavyUser
-        ? Math.floor(Math.random() * 6) + 2
-        : Math.floor(Math.random() * 2) + 1,
-      ...((): Pick<
-        ReturnType<typeof generateMockOrganisationMetrics>[0],
-        | 'api_calls_30d'
-        | 'api_calls_60d'
-        | 'api_calls_90d'
-        | 'api_calls_allowed'
-        | 'overage_30d'
-        | 'overage_60d'
-        | 'overage_90d'
-      > => {
-        // Set the allowed limit relative to actual usage so overages are realistic.
-        // ~60% of orgs are within limit, ~40% slightly over (1-5%).
-        const isOverLimit = Math.random() < 0.4
-        const allowed = isOverLimit
-          ? Math.floor(totalApiCalls * (Math.random() * 0.04 + 0.96)) // 96-100% of usage → overage is 0-4%
-          : Math.floor(totalApiCalls * (Math.random() * 0.5 + 1.1)) // 110-160% of usage → within limit
-        const calls60d = Math.floor(totalApiCalls * (Math.random() * 0.4 + 1.8))
-        const calls90d = Math.floor(totalApiCalls * (Math.random() * 0.6 + 2.5))
-        return {
-          api_calls_30d: totalApiCalls,
-          api_calls_60d: calls60d,
-          api_calls_90d: calls90d,
-          api_calls_allowed: allowed,
-          overage_30d: Math.max(0, totalApiCalls - allowed),
-          overage_60d: Math.max(0, calls60d - allowed * 2),
-          overage_90d: Math.max(0, calls90d - allowed * 3),
-        }
-      })(),
-      created_date: new Date(
-        Date.now() - Math.floor(Math.random() * 730) * 24 * 60 * 60 * 1000,
-      ).toISOString(),
-      environment_count: totalEnvCount,
-      flag_evaluations_30d: totalFlagEvals,
-      id: i + 1,
-      identity_requests_30d: totalIdentityReqs,
-      integration_count: isHeavyUser
-        ? Math.floor(Math.random() * 6) + 2
-        : Math.floor(Math.random() * 3),
-      name,
-      project_count: projectCount,
-      projects,
-      stale_flags: staleFlags,
-      total_flags: totalFlags,
-      total_users: totalUsers,
-    }
-  })
-}
-
-const generateMockUsageTrends = (days = 30) => {
-  const trends = []
-  const baseUsage = 100000
-
-  for (let i = 0; i < days; i++) {
-    const date = new Date(Date.now() - (days - i) * 24 * 60 * 60 * 1000)
-
-    // Add some realistic variation (weekday/weekend patterns)
-    const isWeekend = date.getDay() === 0 || date.getDay() === 6
-    const variation = isWeekend
-      ? Math.random() * 0.2 + 0.7
-      : Math.random() * 0.2 + 0.95
-
-    trends.push({
-      api_calls: Math.floor(
-        baseUsage * variation * (Math.random() * 0.2 + 0.9),
-      ),
-      date: date.toISOString().split('T')[0],
-      flag_evaluations: Math.floor(
-        baseUsage * 0.8 * variation * (Math.random() * 0.2 + 0.9),
-      ),
-      identity_requests: Math.floor(
-        baseUsage * 0.15 * variation * (Math.random() * 0.2 + 0.9),
-      ),
-    })
-  }
-
-  return trends
-}
-
-const getMockInstanceSummary = (
-  orgMetrics: ReturnType<typeof generateMockOrganisationMetrics>,
-) => {
-  return {
-    active_organisations: orgMetrics.filter((org) => org.active_users_30d > 0)
-      .length,
-    active_users: orgMetrics.reduce(
-      (sum, org) => sum + org.active_users_30d,
-      0,
-    ),
-    total_api_calls_30d: orgMetrics.reduce(
-      (sum, org) => sum + org.api_calls_30d,
-      0,
-    ),
-    total_environments: orgMetrics.reduce(
-      (sum, org) => sum + org.environment_count,
-      0,
-    ),
-    total_flags: orgMetrics.reduce((sum, org) => sum + org.total_flags, 0),
-    total_integrations: orgMetrics.reduce(
-      (sum, org) => sum + org.integration_count,
-      0,
-    ),
-    total_organisations: orgMetrics.length,
-    total_projects: orgMetrics.reduce((sum, org) => sum + org.project_count, 0),
-    total_users: orgMetrics.reduce((sum, org) => sum + org.total_users, 0),
-  }
-}
-
-const projectNames = [
-  'Web App',
-  'Mobile API',
-  'Admin Portal',
-  'Payments Service',
-  'Auth Service',
-  'Notifications',
-  'Search Engine',
-  'Data Pipeline',
-]
-
-// Realistic pipeline templates — stages have custom names, actions, and triggers.
-// Multiple stages can target the same environment (e.g. progressive rollout in Production).
-const pipelineTemplates = [
-  {
-    name: 'Progressive rollout',
-    stages: [
-      {
-        action: 'Enable flag for segment beta_users',
-        env: 'Staging',
-        name: 'Beta testing',
-        trigger: 'When flag is added to this stage',
-      },
-      {
-        action: 'Enable flag for segment 10_percent_split',
-        env: 'Production',
-        name: 'Canary release (10%)',
-        trigger: 'Wait for 3 days to proceed',
-      },
-      {
-        action: 'Enable flag for everyone',
-        env: 'Production',
-        name: 'Full rollout',
-        trigger: 'Wait for 7 days to proceed',
-      },
-    ],
-  },
-  {
-    name: 'Standard release',
-    stages: [
-      {
-        action: 'Enable flag for everyone',
-        env: 'Development',
-        name: 'Enable in dev',
-        trigger: 'When flag is added to this stage',
-      },
-      {
-        action: 'Enable flag for everyone',
-        env: 'Staging',
-        name: 'Enable in staging',
-        trigger: 'Wait for 1 day to proceed',
-      },
-      {
-        action: 'Enable flag for everyone',
-        env: 'Production',
-        name: 'Enable in production',
-        trigger: 'Wait for 3 days to proceed',
-      },
-    ],
-  },
-  {
-    name: 'Phased rollout (20%)',
-    stages: [
-      {
-        action: 'Enable flag for segment 20_percent_split',
-        env: 'Production',
-        name: 'Activate 20% split segment',
-        trigger: 'When flag is added to this stage',
-      },
-      {
-        action: 'Enable flag for everyone',
-        env: 'Production',
-        name: 'Activate for all users',
-        trigger: 'Wait for 14 days to proceed',
-      },
-    ],
-  },
-  {
-    name: 'QA-gated release',
-    stages: [
-      {
-        action: 'Enable flag for everyone',
-        env: 'Development',
-        name: 'Development',
-        trigger: 'When flag is added to this stage',
-      },
-      {
-        action: 'Enable flag for segment qa_testers',
-        env: 'QA',
-        name: 'QA validation',
-        trigger: 'Wait for 2 days to proceed',
-      },
-      {
-        action: 'Enable flag for everyone',
-        env: 'Staging',
-        name: 'Staging sign-off',
-        trigger: 'Wait for 1 day to proceed',
-      },
-      {
-        action: 'Enable flag for everyone',
-        env: 'Production',
-        name: 'Production release',
-        trigger: 'Wait for 3 days to proceed',
-      },
-    ],
-  },
-  {
-    name: 'Ring Deployment',
-    stages: [
-      {
-        action: 'Enable flag for segment flagsmith_team',
-        env: 'Production',
-        name: 'Release to Internal Users',
-        trigger: 'When flag is added to this stage',
-      },
-      {
-        action: 'Enable flag for segment beta_users',
-        env: 'Production',
-        name: 'Release to Beta Users',
-        trigger: 'Wait for 7 days to proceed to next action',
-      },
-      {
-        action: 'Enable flag for segment uk_region',
-        env: 'Production',
-        name: 'Release to UK Region',
-        trigger: 'Wait for 14 days to proceed to next action',
-      },
-      {
-        action: 'Enable flag for everyone',
-        env: 'Production',
-        name: 'Production',
-        trigger: 'Wait for 14 days to proceed to next action',
-      },
-    ],
-  },
-]
-
-const generateMockReleasePipelineStats = (
-  orgMetrics: ReturnType<typeof generateMockOrganisationMetrics>,
-) => {
-  const stats: Res['adminDashboardMetrics']['release_pipeline_stats'] = []
-  let pipelineId = 1
-
-  orgMetrics.forEach((org) => {
-    // ~40% of projects get a pipeline (opt-in feature)
-    org.projects.forEach((project) => {
-      if (Math.random() > 0.4) return
-
-      const template = pipelineTemplates[pipelineId % pipelineTemplates.length]
-
-      const totalFeatures = Math.floor(Math.random() * 15) + 5
-
-      // Distribute features across stages so they add up correctly:
-      // features_in_stage[0] + features_in_stage[1] + ... + completedFeatures = totalFeatures
-      const stageCount = template.stages.length
-      let remaining = totalFeatures
-
-      // First, decide how many completed the full pipeline (launched)
-      const completedFeatures = Math.floor(
-        remaining * (Math.random() * 0.4 + 0.1),
-      )
-      remaining -= completedFeatures
-
-      // Distribute remaining features across stages (more in early stages)
-      const inStageValues: number[] = []
-      for (let s = 0; s < stageCount; s++) {
-        if (s === stageCount - 1) {
-          // Last stage gets whatever is left
-          inStageValues.push(remaining)
-        } else {
-          // Earlier stages get a portion of what's left
-          const portion = Math.floor(remaining * (Math.random() * 0.3 + 0.2))
-          inStageValues.push(portion)
-          remaining -= portion
-        }
-      }
-
-      const stages = template.stages.map((tmpl, s) => ({
-        action_description: tmpl.action,
-        environment_name: tmpl.env,
-        features_completed: 0,
-        features_in_stage: inStageValues[s],
-        order: s,
-        stage_name: tmpl.name,
-        trigger_description: tmpl.trigger,
-      }))
-
-      stats.push({
-        completed_features: completedFeatures,
-        is_published: Math.random() > 0.3,
-        organisation_id: org.id,
-        organisation_name: org.name,
-        pipeline_id: pipelineId,
-        pipeline_name: template.name,
-        project_id: project.id,
-        project_name: project.name,
-        stages,
-        total_features: totalFeatures,
-      })
-
-      pipelineId++
-    })
-  })
-
-  return stats
-}
-
-const generateMockStaleFlagsPerProject = (
-  orgMetrics: ReturnType<typeof generateMockOrganisationMetrics>,
-) => {
-  const data: Res['adminDashboardMetrics']['stale_flags_per_project'] = []
-  let projectId = 1
-
-  orgMetrics.forEach((org) => {
-    const numProjects = Math.min(org.project_count, 3)
-    for (let p = 0; p < numProjects; p++) {
-      const name = projectNames[(projectId - 1) % projectNames.length]
-      const totalFlags = Math.floor(Math.random() * 50) + 5
-      const staleFlags = Math.floor(totalFlags * (Math.random() * 0.4))
-      data.push({
-        organisation_id: org.id,
-        organisation_name: org.name,
-        project_id: projectId,
-        project_name: name,
-        stale_flags: staleFlags,
-        total_flags: totalFlags,
-      })
-      projectId++
-    }
-  })
-
-  return data
-}
-
-// Integration definitions with scopes, derived from the platform config.
-// Each row the API returns is org + integration + scope + count.
-const integrationScopes: Record<
-  string,
-  ('organisation' | 'project' | 'environment')[]
-> = {
-  'amplitude': ['project', 'environment'],
-  'datadog': ['project'],
-  'dynatrace': ['project', 'environment'],
-  'github': ['project'],
-  'grafana': ['organisation', 'project'],
-  'heap': ['project', 'environment'],
-  'jira': ['organisation', 'project'],
-  'mixpanel': ['project', 'environment'],
-  'new-relic': ['project'],
-  'rudderstack': ['project', 'environment'],
-  'segment': ['project', 'environment'],
-  'sentry': ['environment'],
-  'slack': ['project', 'environment'],
-  'webhook': ['project', 'environment'],
-}
-
-const integrationKeys = Object.keys(integrationScopes)
-
-const generateMockIntegrationBreakdown = (
-  orgMetrics: ReturnType<typeof generateMockOrganisationMetrics>,
-) => {
-  const data: Res['adminDashboardMetrics']['integration_breakdown'] = []
-
-  orgMetrics.forEach((org) => {
-    if (org.integration_count === 0) return
-
-    const numTypes = Math.min(
-      org.integration_count,
-      Math.floor(Math.random() * 5) + 1,
-    )
-    const shuffled = [...integrationKeys]
-      .sort(() => Math.random() - 0.5)
-      .slice(0, numTypes)
-
-    shuffled.forEach((key) => {
-      const scopes = integrationScopes[key]
-      scopes.forEach((scope) => {
-        let count: number
-        if (scope === 'organisation') {
-          count = 1
-        } else if (scope === 'project') {
-          count = Math.floor(Math.random() * Math.min(org.project_count, 4)) + 1
-        } else {
-          count =
-            Math.floor(Math.random() * Math.min(org.environment_count, 6)) + 1
-        }
-        data.push({
-          count,
-          integration_type: key,
-          organisation_id: org.id,
-          organisation_name: org.name,
-          scope,
-        })
-      })
-    })
-  })
-
-  return data
-}
-
-export const getMockAdminDashboardData = (
-  days = 30,
-): Res['adminDashboardMetrics'] => {
-  const organisations = generateMockOrganisationMetrics()
-
-  return {
-    integration_breakdown: generateMockIntegrationBreakdown(organisations),
-    organisations,
-    release_pipeline_stats: generateMockReleasePipelineStats(organisations),
-    stale_flags_per_project: generateMockStaleFlagsPerProject(organisations),
-    summary: getMockInstanceSummary(organisations),
-    usage_trends: generateMockUsageTrends(days),
-  }
-}
diff --git a/frontend/common/services/useConversionEvent.ts b/frontend/common/services/useConversionEvent.ts
deleted file mode 100644
index 4c6f0cc344fa..000000000000
--- a/frontend/common/services/useConversionEvent.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Res } from 'common/types/responses'
-import { Req } from 'common/types/requests'
-import { service } from 'common/service'
-import Utils from 'common/utils/utils'
-
-export const conversionEventService = service
-  .enhanceEndpoints({ addTagTypes: ['ConversionEvent'] })
-  .injectEndpoints({
-    endpoints: (builder) => ({
-      getConversionEvents: builder.query<
-        Res['conversionEvents'],
-        Req['getConversionEvents']
-      >({
-        providesTags: [{ id: 'LIST', type: 'ConversionEvent' }],
-        query: (query) => {
-          return {
-            url: `conversion-event-types/?${Utils.toParam(query)}`,
-          }
-        },
-      }),
-      // END OF ENDPOINTS
-    }),
-  })
-
-export async function getConversionEvents(
-  store: any,
-  data: Req['getConversionEvents'],
-  options?: Parameters<
-    typeof conversionEventService.endpoints.getConversionEvents.initiate
-  >[1],
-) {
-  return store.dispatch(
-    conversionEventService.endpoints.getConversionEvents.initiate(
-      data,
-      options,
-    ),
-  )
-}
-// END OF FUNCTION_EXPORTS
-
-export const {
-  useGetConversionEventsQuery,
-  // END OF EXPORTS
-} = conversionEventService
-
-/* Usage examples:
-const { data, isLoading } = useGetConversionEventsQuery({ id: 2 }, {}) //get hook
-const [createConversionEvents, { isLoading, data, isSuccess }] = useCreateConversionEventsMutation() //create hook
-conversionEventService.endpoints.getConversionEvents.select({id: 2})(store.getState()) //access data from any function
-*/
diff --git a/frontend/common/types/permissions.types.ts b/frontend/common/types/permissions.types.ts
index 7f0a552373d2..5df58ca02961 100644
--- a/frontend/common/types/permissions.types.ts
+++ b/frontend/common/types/permissions.types.ts
@@ -72,7 +72,7 @@ export const EnvironmentPermissionDescriptions: Record<
   [EnvironmentPermission.MANAGE_SEGMENT_OVERRIDES]: 'Manage segment overrides',
 } as const
 
-export type Permission =
+type Permission =
   | OrganisationPermission
   | ProjectPermission
   | EnvironmentPermission
diff --git a/frontend/common/types/responses.ts b/frontend/common/types/responses.ts
index 73df315dfc4e..85d05a85e86b 100644
--- a/frontend/common/types/responses.ts
+++ b/frontend/common/types/responses.ts
@@ -916,7 +916,7 @@ export type IdentityTrait = {
   trait_value: FlagsmithValue
 }
 
-export enum PipelineStatus {
+enum PipelineStatus {
   DRAFT = 'DRAFT',
   ACTIVE = 'ACTIVE',
 }
diff --git a/frontend/common/utils/featureFilterParams.ts b/frontend/common/utils/featureFilterParams.ts
index 9a9cfa81366e..6e6f1e234496 100644
--- a/frontend/common/utils/featureFilterParams.ts
+++ b/frontend/common/utils/featureFilterParams.ts
@@ -8,7 +8,7 @@ import { TagStrategy } from 'common/types/responses'
  * Function type for resolving environment API keys to numeric IDs.
  * Used to bridge routing layer (API keys) with API layer (numeric IDs).
  */
-export type EnvironmentIdResolver = (apiKey: string) => number | undefined
+type EnvironmentIdResolver = (apiKey: string) => number | undefined
 
 /** Converts array to comma-separated string, or undefined if empty */
 function joinArrayOrUndefined(
diff --git a/frontend/common/utils/metadataValidation.ts b/frontend/common/utils/metadataValidation.ts
index d66e9c4be57c..09acda303cd1 100644
--- a/frontend/common/utils/metadataValidation.ts
+++ b/frontend/common/utils/metadataValidation.ts
@@ -1,7 +1,7 @@
 import { useMemo } from 'react'
 import { CustomMetadataField } from 'common/types/metadata-field'
 
-export type MetadataValidationState = {
+type MetadataValidationState = {
   hasUnfilledRequired: boolean
   totalRequired: number
   totalFilledRequired: number
diff --git a/frontend/common/utils/utils.tsx b/frontend/common/utils/utils.tsx
index 88389946f1a4..483d4e6347f8 100644
--- a/frontend/common/utils/utils.tsx
+++ b/frontend/common/utils/utils.tsx
@@ -9,7 +9,6 @@ import {
   MultivariateFeatureStateValue,
   MultivariateOption,
   Organisation,
-  PConfidence,
   Project as ProjectType,
   ProjectFlag,
   SegmentCondition,
@@ -143,12 +142,6 @@ const Utils = Object.assign({}, require('./base/_utils'), {
     return res
   },
 
-  convertToPConfidence(value: number) {
-    if (value > 0.05) return 'LOW' as PConfidence
-    if (value >= 0.01) return 'REASONABLE' as PConfidence
-    if (value > 0.002) return 'HIGH' as PConfidence
-    return 'VERY_HIGH' as PConfidence
-  },
   copyToClipboard: async (
     value: string,
     successMessage?: string,
diff --git a/frontend/documentation/components/Icons.stories.tsx b/frontend/documentation/components/Icons.stories.tsx
index c659a3ecabbc..d1634319bbe5 100644
--- a/frontend/documentation/components/Icons.stories.tsx
+++ b/frontend/documentation/components/Icons.stories.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import type { Meta, StoryObj } from 'storybook'
-import Icon from 'components/Icon'
-import type { IconName } from 'components/Icon'
+import Icon from 'components/icons/Icon'
+import type { IconName } from 'components/icons/Icon'
 
 // eslint-disable-next-line @dword-design/import-alias/prefer-alias
 import '../docs.scss'
diff --git a/frontend/web/components/ActionButton.tsx b/frontend/web/components/ActionButton.tsx
index 47e551e71ef0..aebf4b40bfcd 100644
--- a/frontend/web/components/ActionButton.tsx
+++ b/frontend/web/components/ActionButton.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import classNames from 'classnames'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import Button, { ButtonType } from './base/forms/Button'
 
 type ActionButtonType = {
diff --git a/frontend/web/components/AdminAPIKeys.js b/frontend/web/components/AdminAPIKeys.js
index f66194921c17..f8bbb7beb7e6 100644
--- a/frontend/web/components/AdminAPIKeys.js
+++ b/frontend/web/components/AdminAPIKeys.js
@@ -6,7 +6,7 @@ import Token from './Token'
 import JSONReference from './JSONReference'
 import Button from './base/forms/Button'
 import DateSelect from './DateSelect'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import Switch from './Switch'
 import MyRoleSelect from './MyRoleSelect'
 import { getStore } from 'common/store'
diff --git a/frontend/web/components/AsideProjectButton.js b/frontend/web/components/AsideProjectButton.js
deleted file mode 100644
index 5b9b4276568b..000000000000
--- a/frontend/web/components/AsideProjectButton.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { PureComponent } from 'react'
-import Format from 'common/utils/format'
-
-const AsideProjectButton = class extends PureComponent {
-  static displayName = 'AsideProjectButton'
-
-  render() {
-    const truncated = Format.truncateText(this.props.name, 26)
-    const children = (
-      <div onClick={this.props.onClick}>
-        <div
-          className={`clickable project-select-btn ${
-            this.props.active ? 'active' : ''
-          }`}
-        >
-          <div className={`${this.props.className}`}>{truncated}</div>
-        </div>
-      </div>
-    )
-    return truncated === this.props.name ? (
-      children
-    ) : (
-      <Tooltip title={children} place='right'>
-        {this.props.name}
-      </Tooltip>
-    )
-  }
-}
-
-AsideProjectButton.displayName = 'AsideProjectButton'
-
-// Card.propTypes = {
-//     title: oneOfType([OptionalObject, OptionalString]),
-//     icon: OptionalString,
-//     children: OptionalNode,
-// };
-
-module.exports = AsideProjectButton
diff --git a/frontend/web/components/AsideTitleLink.js b/frontend/web/components/AsideTitleLink.js
deleted file mode 100644
index d62b718e473e..000000000000
--- a/frontend/web/components/AsideTitleLink.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { PureComponent } from 'react'
-import Icon from './Icon'
-const AsideTitleLink = class extends PureComponent {
-  static displayName = 'AsideTitleLink'
-
-  render() {
-    return (
-      <Tooltip
-        title={
-          <div
-            id={this.props.id}
-            className='flex-row space aside__title-wrapper mx-3'
-          >
-            <span className='aside__link-text'>{this.props.title}</span>
-            <span className='aside__link-icon'>
-              <Icon name='plus' fill='#27AB95' width={24} />
-            </span>
-          </div>
-        }
-        place='top'
-      >
-        {this.props.tooltip}
-      </Tooltip>
-    )
-  }
-}
-
-AsideTitleLink.displayName = 'AsideTitleLink'
-
-// Card.propTypes = {
-//     title: oneOfType([OptionalObject, OptionalString]),
-//     icon: OptionalString,
-//     children: OptionalNode,
-// };
-
-module.exports = AsideTitleLink
diff --git a/frontend/web/components/Banner/Banner.tsx b/frontend/web/components/Banner/Banner.tsx
index 50f65b3b0c67..fcac593d58ae 100644
--- a/frontend/web/components/Banner/Banner.tsx
+++ b/frontend/web/components/Banner/Banner.tsx
@@ -1,6 +1,6 @@
 import React, { FC, ReactNode } from 'react'
 import cn from 'classnames'
-import Icon, { IconName } from 'components/Icon'
+import Icon, { IconName } from 'components/icons/Icon'
 import './banner.scss'
 
 type BannerVariant = 'success' | 'warning' | 'danger' | 'info'
diff --git a/frontend/web/components/ButterBar.tsx b/frontend/web/components/ButterBar.tsx
index 5ce091a9b777..1bb298dbe3fd 100644
--- a/frontend/web/components/ButterBar.tsx
+++ b/frontend/web/components/ButterBar.tsx
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom'
 import ConfigProvider from 'common/providers/ConfigProvider'
 import ProjectStore from 'common/stores/project-store'
 import ReactMarkdown from 'react-markdown'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import Utils from 'common/utils/utils'
 import { Environment, FeatureImport, Res } from 'common/types/responses'
 import { useGetFeatureImportsQuery } from 'common/services/useFeatureImport'
diff --git a/frontend/web/components/ChangeRequestsList.tsx b/frontend/web/components/ChangeRequestsList.tsx
index a3456f62f659..e66c571b8c58 100644
--- a/frontend/web/components/ChangeRequestsList.tsx
+++ b/frontend/web/components/ChangeRequestsList.tsx
@@ -5,7 +5,7 @@ import {
   User,
 } from 'common/types/responses'
 import { Link } from 'react-router-dom'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import moment from 'moment'
 import { IonIcon } from '@ionic/react'
 import { timeOutline } from 'ionicons/icons'
diff --git a/frontend/web/components/CodeHelp.js b/frontend/web/components/CodeHelp.js
index cb86a6157a6b..e1c99582403f 100644
--- a/frontend/web/components/CodeHelp.js
+++ b/frontend/web/components/CodeHelp.js
@@ -3,7 +3,7 @@ import Highlight from './Highlight'
 import ConfigProvider from 'common/providers/ConfigProvider'
 import Constants from 'common/constants'
 import { Clipboard } from 'polyfill-react-native'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import { logoGithub, document } from 'ionicons/icons'
 import { IonIcon } from '@ionic/react'
 
diff --git a/frontend/web/components/Collapsible.js b/frontend/web/components/Collapsible.js
deleted file mode 100644
index f49eb7673588..000000000000
--- a/frontend/web/components/Collapsible.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React, { PureComponent } from 'react'
-import Icon from './Icon'
-import { IonIcon } from '@ionic/react'
-import { chevronDown, chevronForward, createOutline } from 'ionicons/icons'
-
-const cn = require('classnames')
-
-const Collapsible = class extends PureComponent {
-  static displayName = 'Collapsible'
-
-  static propTypes = {}
-  constructor(props) {
-    super(props)
-    this.ref = React.createRef()
-  }
-  handleClickOutside = (event) => {
-    if (this.ref.current && !this.ref.current.contains(event.target)) {
-      this.props.isProjectSelect &&
-        this.props.onClickOutside &&
-        this.props.onClickOutside()
-    }
-  }
-
-  componentDidMount() {
-    document.addEventListener('click', this.handleClickOutside, true)
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('click', this.handleClickOutside, true)
-  }
-
-  render() {
-    return (
-      <div
-        data-test={this.props['data-test']}
-        className={cn('collapsible', this.props.className, {
-          active: this.props.active,
-        })}
-        ref={this.ref}
-      >
-        <div className='collapsible-title mx-3' onClick={this.props.onClick}>
-          <div className='flex-row'>
-            <IonIcon
-              className='fs-small me-2 text-muted'
-              icon={
-                this.props.active || this.props.isProjectSelect
-                  ? chevronDown
-                  : chevronForward
-              }
-            />
-
-            <div>{this.props.title}</div>
-          </div>
-        </div>
-        {this.props.active ? (
-          <div className='collapsible__content'>{this.props.children}</div>
-        ) : null}
-      </div>
-    )
-  }
-}
-
-Collapsible.displayName = 'Collapsible'
-
-// Card.propTypes = {
-//     title: oneOfType([OptionalObject, OptionalString]),
-//     icon: OptionalString,
-//     children: OptionalNode,
-// };
-
-module.exports = Collapsible
diff --git a/frontend/web/components/CompareEnvironments.js b/frontend/web/components/CompareEnvironments.js
index a0dbe32ca2fa..0f3da4f3817c 100644
--- a/frontend/web/components/CompareEnvironments.js
+++ b/frontend/web/components/CompareEnvironments.js
@@ -8,7 +8,7 @@ import FeatureListStore from 'common/stores/feature-list-store'
 import ConfigProvider from 'common/providers/ConfigProvider'
 import Permission from 'common/providers/Permission'
 import Tag from './tags/Tag'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import Constants from 'common/constants'
 import Button from './base/forms/Button'
 import Tooltip from './Tooltip'
diff --git a/frontend/web/components/CompareIdentities.tsx b/frontend/web/components/CompareIdentities.tsx
index ef4004802265..3611bc82273e 100644
--- a/frontend/web/components/CompareIdentities.tsx
+++ b/frontend/web/components/CompareIdentities.tsx
@@ -10,7 +10,7 @@ import { useGetProjectFlagsQuery } from 'common/services/useProjectFlag'
 import Tag from './tags/Tag'
 import PanelSearch from './PanelSearch'
 import { IdentityFeatureState } from 'common/types/responses'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import Switch from './Switch'
 import FeatureValue from './feature-summary/FeatureValue'
 import { sortBy } from 'lodash'
@@ -18,8 +18,8 @@ import { useHasPermission } from 'common/providers/Permission'
 import Constants from 'common/constants'
 import Button from './base/forms/Button'
 import ProjectStore from 'common/stores/project-store'
-import SegmentOverridesIcon from './SegmentOverridesIcon'
-import IdentityOverridesIcon from './IdentityOverridesIcon'
+import SegmentOverridesIcon from './icons/SegmentOverridesIcon'
+import IdentityOverridesIcon from './icons/IdentityOverridesIcon'
 import Tooltip from './Tooltip'
 import PageTitle from './PageTitle'
 import { getDarkMode } from 'project/darkMode'
diff --git a/frontend/web/components/CondensedFeatureRow.tsx b/frontend/web/components/CondensedFeatureRow.tsx
index dca4b72003f2..149e0e1255c6 100644
--- a/frontend/web/components/CondensedFeatureRow.tsx
+++ b/frontend/web/components/CondensedFeatureRow.tsx
@@ -2,11 +2,11 @@ import classNames from 'classnames'
 import Switch from './Switch'
 import { FeatureListProviderData, ProjectFlag } from 'common/types/responses'
 import FeatureValue from './feature-summary/FeatureValue'
-import SegmentOverridesIcon from './SegmentOverridesIcon'
-import IdentityOverridesIcon from './IdentityOverridesIcon'
+import SegmentOverridesIcon from './icons/SegmentOverridesIcon'
+import IdentityOverridesIcon from './icons/IdentityOverridesIcon'
 import Constants from 'common/constants'
 
-export interface CondensedFeatureRowProps {
+interface CondensedFeatureRowProps {
   disableControls?: boolean
   readOnly: boolean
   projectFlag: ProjectFlag
diff --git a/frontend/web/components/Confidence.tsx b/frontend/web/components/Confidence.tsx
deleted file mode 100644
index 97eb86a185a5..000000000000
--- a/frontend/web/components/Confidence.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { FC } from 'react'
-import cn from 'classnames'
-import Utils from 'common/utils/utils'
-import Format from 'common/utils/format'
-
-type ConfidenceType = {
-  pValue: number
-}
-
-const Confidence: FC<ConfidenceType> = ({ pValue }) => {
-  const confidence = Utils.convertToPConfidence(pValue)
-  const confidenceDisplay = Format.enumeration.get(confidence)
-
-  const confidenceClass = cn({
-    'text-danger': confidence === 'VERY_LOW' || confidence === 'LOW',
-    'text-muted': !['VERY_LOW', 'LOW', 'HIGH', 'VERY_HIGH'].includes(
-      confidence,
-    ),
-    'text-success': confidence === 'HIGH' || confidence === 'VERY_HIGH',
-  })
-
-  return <div className={confidenceClass}>{confidenceDisplay}</div>
-}
-
-export default Confidence
diff --git a/frontend/web/components/ConversionEventSelect.tsx b/frontend/web/components/ConversionEventSelect.tsx
deleted file mode 100644
index e03bc00dffa7..000000000000
--- a/frontend/web/components/ConversionEventSelect.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React, { FC, useState } from 'react'
-import { useGetConversionEventsQuery } from 'common/services/useConversionEvent'
-import useDebouncedSearch from 'common/useDebouncedSearch'
-import { ConversionEvent } from 'common/types/responses'
-import ProjectStore from 'common/stores/project-store'
-
-type ConversionEventSelectType = {
-  onChange: (v: number) => void
-  environmentId: string
-}
-
-const ConversionEventSelect: FC<ConversionEventSelectType> = ({
-  environmentId,
-  onChange,
-}) => {
-  const { search, searchInput, setSearchInput } = useDebouncedSearch('')
-  const { data } = useGetConversionEventsQuery({
-    environment_id: ProjectStore.getEnvironmentIdFromKey(environmentId),
-    q: `${search}`,
-  })
-  const [selected, setSelected] = useState<ConversionEvent | null>(null)
-
-  return (
-    <div>
-      <Select
-        value={
-          selected
-            ? { label: selected.name, value: selected.id }
-            : {
-                label: 'Select an Event',
-                value: '',
-              }
-        }
-        inputValue={searchInput}
-        onInputChange={setSearchInput}
-        options={data?.results?.map((result) => ({
-          ...result,
-          label: result.name,
-          value: result.id,
-        }))}
-        onChange={(value: ConversionEvent) => {
-          setSelected(value)
-          onChange(value.id)
-        }}
-      />
-    </div>
-  )
-}
-
-export default ConversionEventSelect
diff --git a/frontend/web/components/DateList.tsx b/frontend/web/components/DateList.tsx
index 03b27ae4f792..cf54d7cadc99 100644
--- a/frontend/web/components/DateList.tsx
+++ b/frontend/web/components/DateList.tsx
@@ -2,7 +2,7 @@ import React, { FC, useMemo } from 'react'
 import moment from 'moment'
 import { PagedResponse } from 'common/types/responses'
 import _ from 'lodash'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import Paging from './Paging'
 import classNames from 'classnames'
 
diff --git a/frontend/web/components/DateSelect.tsx b/frontend/web/components/DateSelect.tsx
index d7aa2648f8af..76855aea81a9 100644
--- a/frontend/web/components/DateSelect.tsx
+++ b/frontend/web/components/DateSelect.tsx
@@ -1,5 +1,5 @@
 import DatePicker, { DatePickerProps } from 'react-datepicker'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import { useState, FC } from 'react'
 
 export interface DateSelectProps
diff --git a/frontend/web/components/EditPermissions.tsx b/frontend/web/components/EditPermissions.tsx
index 2a5a27fd7140..8548a251a8a3 100644
--- a/frontend/web/components/EditPermissions.tsx
+++ b/frontend/web/components/EditPermissions.tsx
@@ -25,7 +25,7 @@ import UserGroupList from './UserGroupList'
 import { PermissionLevel, Req, PermissionRoleType } from 'common/types/requests'
 import { useGetAvailablePermissionsQuery } from 'common/services/useAvailablePermissions'
 import ConfigProvider from 'common/providers/ConfigProvider'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import {
   useCreateRolePermissionsMutation,
   useGetRoleEnvironmentPermissionsQuery,
diff --git a/frontend/web/components/EmptyState.tsx b/frontend/web/components/EmptyState.tsx
index 16da1dd2eaa4..6bff60883a01 100644
--- a/frontend/web/components/EmptyState.tsx
+++ b/frontend/web/components/EmptyState.tsx
@@ -1,5 +1,5 @@
 import React, { FC, ReactNode } from 'react'
-import Icon, { IconName } from './Icon'
+import Icon, { IconName } from './icons/Icon'
 
 type EmptyStateProps = {
   title: string
diff --git a/frontend/web/components/EnvironmentDocumentCodeHelp.tsx b/frontend/web/components/EnvironmentDocumentCodeHelp.tsx
index afa4b9b4ea3c..a988c34852b4 100644
--- a/frontend/web/components/EnvironmentDocumentCodeHelp.tsx
+++ b/frontend/web/components/EnvironmentDocumentCodeHelp.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useState } from 'react'
 import Constants from 'common/constants'
 import CodeHelp from './CodeHelp'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import Tabs from './navigation/TabMenu/Tabs'
 import TabItem from './navigation/TabMenu/TabItem'
 import InfoMessage from './InfoMessage'
diff --git a/frontend/web/components/EnvironmentFilter.tsx b/frontend/web/components/EnvironmentFilter.tsx
index c3f95b38c4af..c265ddf439ad 100644
--- a/frontend/web/components/EnvironmentFilter.tsx
+++ b/frontend/web/components/EnvironmentFilter.tsx
@@ -1,7 +1,7 @@
 import { FC, useMemo } from 'react'
 import { useGetEnvironmentsQuery } from 'common/services/useEnvironment'
 
-export type EnvironmentFilterType = {
+type EnvironmentFilterType = {
   projectId: number
   value?: string
   onChange: (value: string) => void
diff --git a/frontend/web/components/EnvironmentSelect.tsx b/frontend/web/components/EnvironmentSelect.tsx
index 0872cf2729b8..b05c38029316 100644
--- a/frontend/web/components/EnvironmentSelect.tsx
+++ b/frontend/web/components/EnvironmentSelect.tsx
@@ -3,7 +3,7 @@ import { useGetEnvironmentsQuery } from 'common/services/useEnvironment'
 import { Props } from 'react-select'
 import { Environment } from 'common/types/responses'
 
-export type EnvironmentSelectType = Partial<Omit<Props, 'value'>> & {
+type EnvironmentSelectType = Partial<Omit<Props, 'value'>> & {
   projectId: number
   value?: string
   label?: string
diff --git a/frontend/web/components/EnvironmentTagSelect.tsx b/frontend/web/components/EnvironmentTagSelect.tsx
index 14474eeef4a8..ec109faa79ec 100644
--- a/frontend/web/components/EnvironmentTagSelect.tsx
+++ b/frontend/web/components/EnvironmentTagSelect.tsx
@@ -4,7 +4,7 @@ import Tag from './tags/Tag'
 import Utils from 'common/utils/utils'
 import Button from './base/forms/Button'
 
-export type EnvironmentSelectType = {
+type EnvironmentSelectType = {
   projectId: string | number | undefined
   value?: string[] | string | null
   onChange: (value: string[] | string | undefined) => void
diff --git a/frontend/web/components/ErrorMessage.js b/frontend/web/components/ErrorMessage.js
index 90e43f94a5bf..edc30c929386 100644
--- a/frontend/web/components/ErrorMessage.js
+++ b/frontend/web/components/ErrorMessage.js
@@ -1,6 +1,6 @@
 // import propTypes from 'prop-types';
 import React, { PureComponent } from 'react'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import Button from './base/forms/Button'
 import Format from 'common/utils/format'
 import Constants from 'common/constants'
diff --git a/frontend/web/components/ExistingChangeRequestAlert.tsx b/frontend/web/components/ExistingChangeRequestAlert.tsx
deleted file mode 100644
index 3de1f38d8629..000000000000
--- a/frontend/web/components/ExistingChangeRequestAlert.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { FC } from 'react'
-import InfoMessage from './InfoMessage'
-import Button from './base/forms/Button'
-import { ChangeRequestSummary } from 'common/types/responses'
-import { RouterChildContext } from 'react-router-dom'
-
-type ExistingChangeRequestAlertType = {
-  changeRequests: ChangeRequestSummary[]
-  editingChangeRequest?: ChangeRequestSummary
-  scheduledChangeRequests: ChangeRequestSummary[]
-  projectId: number | string
-  environmentId: string
-  className?: string
-  history: RouterChildContext['router']['history']
-}
-
-const ExistingChangeRequestAlert: FC<ExistingChangeRequestAlertType> = ({
-  changeRequests,
-  className,
-  editingChangeRequest,
-  environmentId,
-  history,
-  projectId,
-  scheduledChangeRequests,
-}) => {
-  const handleNavigate = () => {
-    const changes = scheduledChangeRequests?.length
-      ? scheduledChangeRequests
-      : changeRequests
-    const latestChangeRequest = !editingChangeRequest?.id
-      ? changes?.at(-1)?.id
-      : editingChangeRequest?.id
-    closeModal()
-    history.push(
-      `/project/${projectId}/environment/${environmentId}/change-requests/${latestChangeRequest}`,
-    )
-  }
-
-  const getRequestChangeInfoText = (
-    hasScheduledChangeRequests: boolean,
-    hasChangeRequests: boolean,
-  ) => {
-    if (hasScheduledChangeRequests) {
-      return [
-        'You have scheduled changes upcoming for this feature.',
-        'to view your scheduled changes.',
-      ]
-    }
-
-    if (hasChangeRequests) {
-      return [
-        'You have open change requests for this feature.',
-        'to view your requested changes.',
-      ]
-    }
-  }
-
-  const requestChangeInfoText = getRequestChangeInfoText(
-    !!scheduledChangeRequests?.length,
-    !!changeRequests?.length,
-  )
-
-  if (!requestChangeInfoText?.length) {
-    return null
-  }
-
-  return (
-    <div className={className}>
-      <InfoMessage>
-        <span>
-          {requestChangeInfoText[0]} Click{' '}
-          <Button onClick={handleNavigate} theme='text'>
-            here
-          </Button>{' '}
-          {requestChangeInfoText[1]}
-        </span>
-      </InfoMessage>
-    </div>
-  )
-}
-
-export default ExistingChangeRequestAlert
diff --git a/frontend/web/components/ExternalResourcesTable.tsx b/frontend/web/components/ExternalResourcesTable.tsx
index f778060d578c..91f24809741f 100644
--- a/frontend/web/components/ExternalResourcesTable.tsx
+++ b/frontend/web/components/ExternalResourcesTable.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useEffect } from 'react'
 import PanelSearch from './PanelSearch'
 import Button from './base/forms/Button'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import {
   useGetExternalResourcesQuery,
   useDeleteExternalResourceMutation,
@@ -16,7 +16,7 @@ export type ExternalResourcesTableBase = {
   organisationId: string
 }
 
-export type ExternalResourcesTableType = ExternalResourcesTableBase & {
+type ExternalResourcesTableType = ExternalResourcesTableBase & {
   setSelectedResources: (r: ExternalResource[]) => void
 }
 
diff --git a/frontend/web/components/GitHubRepositoriesSelect.tsx b/frontend/web/components/GitHubRepositoriesSelect.tsx
index 6cc1de9e2a7f..502979a19d0b 100644
--- a/frontend/web/components/GitHubRepositoriesSelect.tsx
+++ b/frontend/web/components/GitHubRepositoriesSelect.tsx
@@ -2,7 +2,7 @@ import React, { FC, useEffect } from 'react'
 import { Repository } from 'common/types/responses'
 import { useCreateGithubRepositoryMutation } from 'common/services/useGithubRepository'
 
-export type GitHubRepositoriesSelectType = {
+type GitHubRepositoriesSelectType = {
   disabled?: boolean
   repositories: Repository[] | undefined
   organisationId: string
diff --git a/frontend/web/components/GitHubResourcesSelect.tsx b/frontend/web/components/GitHubResourcesSelect.tsx
index 1ad4dc921f63..fca3fc7fe787 100644
--- a/frontend/web/components/GitHubResourcesSelect.tsx
+++ b/frontend/web/components/GitHubResourcesSelect.tsx
@@ -7,7 +7,7 @@ import { useGetGithubResourcesQuery } from 'common/services/useGithub'
 import Constants from 'common/constants'
 import MyRepositoriesSelect from './MyRepositoriesSelect'
 
-export type GitHubResourcesSelectType = {
+type GitHubResourcesSelectType = {
   onChange: (value: string) => void
   linkedExternalResources: ExternalResource[] | undefined
   orgId: string
diff --git a/frontend/web/components/GithubRepositoriesTable.tsx b/frontend/web/components/GithubRepositoriesTable.tsx
index c5220c9feb45..393093467f01 100644
--- a/frontend/web/components/GithubRepositoriesTable.tsx
+++ b/frontend/web/components/GithubRepositoriesTable.tsx
@@ -4,13 +4,13 @@ import {
   useUpdateGithubRepositoryMutation,
 } from 'common/services/useGithubRepository'
 import Button from './base/forms/Button'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import PanelSearch from './PanelSearch'
 import { GithubRepository } from 'common/types/responses'
 import Switch from './Switch'
 import Tooltip from './Tooltip'
 
-export type GithubRepositoriesTableType = {
+type GithubRepositoriesTableType = {
   repos: GithubRepository[] | undefined
   githubId: string
   organisationId: string
diff --git a/frontend/web/components/GroupSelect.tsx b/frontend/web/components/GroupSelect.tsx
index 9aa013dd3311..c2df9148f6fa 100644
--- a/frontend/web/components/GroupSelect.tsx
+++ b/frontend/web/components/GroupSelect.tsx
@@ -3,7 +3,7 @@ import InlineModal from './InlineModal'
 import { UserGroup, UserGroupSummary } from 'common/types/responses'
 import Input from './base/forms/Input'
 import Utils from 'common/utils/utils'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 
 export type GroupSelectType = {
   disabled?: boolean
diff --git a/frontend/web/components/Headway.js b/frontend/web/components/Headway.js
index b90556705397..c9a657b8b636 100644
--- a/frontend/web/components/Headway.js
+++ b/frontend/web/components/Headway.js
@@ -1,6 +1,5 @@
 import React from 'react'
-import Button from './base/forms/Button'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import Tooltip from './Tooltip'
 
 let prom
diff --git a/frontend/web/components/HistoryIcon.js b/frontend/web/components/HistoryIcon.js
deleted file mode 100644
index 81ce2c7da169..000000000000
--- a/frontend/web/components/HistoryIcon.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as React from 'react'
-
-function HistoryIcon(props) {
-  return (
-    <svg className='btn__icon' viewBox='0 0 512 512' {...props}>
-      <path
-        fill='#999'
-        d='M504 255.531c.253 136.64-111.18 248.372-247.82 248.468-59.015.042-113.223-20.53-155.822-54.911-11.077-8.94-11.905-25.541-1.839-35.607l11.267-11.267c8.609-8.609 22.353-9.551 31.891-1.984C173.062 425.135 212.781 440 256 440c101.705 0 184-82.311 184-184 0-101.705-82.311-184-184-184-48.814 0-93.149 18.969-126.068 49.932l50.754 50.754c10.08 10.08 2.941 27.314-11.313 27.314H24c-8.837 0-16-7.163-16-16V38.627c0-14.254 17.234-21.393 27.314-11.314l49.372 49.372C129.209 34.136 189.552 8 256 8c136.81 0 247.747 110.78 248 247.531zm-180.912 78.784l9.823-12.63c8.138-10.463 6.253-25.542-4.21-33.679L288 256.349V152c0-13.255-10.745-24-24-24h-16c-13.255 0-24 10.745-24 24v135.651l65.409 50.874c10.463 8.137 25.541 6.253 33.679-4.21z'
-      />
-    </svg>
-  )
-}
-
-export default HistoryIcon
diff --git a/frontend/web/components/IdentityTraits.tsx b/frontend/web/components/IdentityTraits.tsx
index f25e4f835f5c..eb66e8f615fe 100644
--- a/frontend/web/components/IdentityTraits.tsx
+++ b/frontend/web/components/IdentityTraits.tsx
@@ -4,7 +4,7 @@ import Utils from 'common/utils/utils'
 import Constants from 'common/constants'
 import Button from './base/forms/Button'
 import FeatureValue from './feature-summary/FeatureValue'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import Panel from './base/grid/Panel'
 import { useHasPermission } from 'common/providers/Permission'
 import API from 'project/api'
diff --git a/frontend/web/components/InfoMessage.tsx b/frontend/web/components/InfoMessage.tsx
index 14d8f094a9f6..eb2a872f48b6 100644
--- a/frontend/web/components/InfoMessage.tsx
+++ b/frontend/web/components/InfoMessage.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent, useEffect, useState } from 'react'
-import Icon, { IconName } from './Icon'
+import Icon, { IconName } from './icons/Icon'
 import { chevronForward, close as closeIcon, chevronDown } from 'ionicons/icons'
 import { IonIcon } from '@ionic/react'
 import { FC } from 'react'
diff --git a/frontend/web/components/InlineModal.tsx b/frontend/web/components/InlineModal.tsx
index 7104501a7dc3..98d64822021b 100644
--- a/frontend/web/components/InlineModal.tsx
+++ b/frontend/web/components/InlineModal.tsx
@@ -1,7 +1,7 @@
 import React, { useRef, FC, useEffect } from 'react'
 import ModalClose from './modals/base/ModalClose'
 import ModalHR from './modals/ModalHR'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import classNames from 'classnames'
 import useOutsideClick from 'common/useOutsideClick'
 
diff --git a/frontend/web/components/JSONReference.tsx b/frontend/web/components/JSONReference.tsx
index 9940741d0e62..017cc3120809 100644
--- a/frontend/web/components/JSONReference.tsx
+++ b/frontend/web/components/JSONReference.tsx
@@ -5,7 +5,7 @@ import Highlight from './Highlight'
 import Button from './base/forms/Button'
 import Switch from './Switch'
 import flagsmith from '@flagsmith/flagsmith'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import Utils from 'common/utils/utils'
 
 type JSONReferenceType = {
diff --git a/frontend/web/components/JSONUpload.tsx b/frontend/web/components/JSONUpload.tsx
index adeecb9a6442..34b3aabe2632 100644
--- a/frontend/web/components/JSONUpload.tsx
+++ b/frontend/web/components/JSONUpload.tsx
@@ -1,5 +1,5 @@
 import { FC, useCallback, useState } from 'react'
-import DropIcon from './svg/DropIcon'
+import DropIcon from './icons/DropIcon'
 import Button from './base/forms/Button'
 import { useDropzone } from 'react-dropzone'
 
diff --git a/frontend/web/components/OrganisationLimit.tsx b/frontend/web/components/OrganisationLimit.tsx
index 8980e2656ce5..36e74350305c 100644
--- a/frontend/web/components/OrganisationLimit.tsx
+++ b/frontend/web/components/OrganisationLimit.tsx
@@ -4,7 +4,7 @@ import Utils from 'common/utils/utils'
 import { useGetSubscriptionMetadataQuery } from 'common/services/useSubscriptionMetadata'
 import Format from 'common/utils/format'
 import { useGetOrganisationUsageQuery } from 'common/services/useOrganisationUsage'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import { Button } from './base/forms/Button'
 import Constants from 'common/constants'
 
diff --git a/frontend/web/components/PanelSearch.tsx b/frontend/web/components/PanelSearch.tsx
index 62d77bb9d0b0..7ef2c61ae713 100644
--- a/frontend/web/components/PanelSearch.tsx
+++ b/frontend/web/components/PanelSearch.tsx
@@ -11,7 +11,7 @@ import React, {
 import { AutoSizer, List } from 'react-virtualized'
 import Popover from './base/Popover'
 import Input from './base/forms/Input'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import { IonIcon } from '@ionic/react'
 import { chevronDown, chevronUp } from 'ionicons/icons'
 import Button from './base/forms/Button'
@@ -21,14 +21,14 @@ import Panel from './base/grid/Panel'
 import Utils from 'common/utils/utils'
 import { SortOrder } from 'common/types/requests'
 
-export type SortOption = {
+type SortOption = {
   value: string
   order: SortOrder
   default?: boolean
   label: string
 }
 
-export interface PanelSearchProps<T> {
+interface PanelSearchProps<T> {
   actionButton?: ReactNode
   filterElement?: ReactNode
   filterRow?: (item: T, search: string, index: number) => boolean
diff --git a/frontend/web/components/PermissionControl.tsx b/frontend/web/components/PermissionControl.tsx
index e1c0b773d284..68381b336893 100644
--- a/frontend/web/components/PermissionControl.tsx
+++ b/frontend/web/components/PermissionControl.tsx
@@ -3,7 +3,7 @@ import { components } from 'react-select'
 import Switch from './Switch'
 import Tooltip from './Tooltip'
 import BooleanDotIndicator from './BooleanDotIndicator'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import { PermissionRoleType } from 'common/types/requests'
 
 const permissionOptions = [
diff --git a/frontend/web/components/ProjectChangeRequestsLink.tsx b/frontend/web/components/ProjectChangeRequestsLink.tsx
index 0748048fae57..7a52ef651c73 100644
--- a/frontend/web/components/ProjectChangeRequestsLink.tsx
+++ b/frontend/web/components/ProjectChangeRequestsLink.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import { useGetProjectChangeRequestsQuery } from 'common/services/useProjectChangeRequest'
 import Utils from 'common/utils/utils'
 import { useGetProjectQuery } from 'common/services/useProject'
diff --git a/frontend/web/components/ProjectFilter.tsx b/frontend/web/components/ProjectFilter.tsx
index 9ffa0b1c7412..7b46b62ce979 100644
--- a/frontend/web/components/ProjectFilter.tsx
+++ b/frontend/web/components/ProjectFilter.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect, useMemo } from 'react'
 import { useGetProjectsQuery } from 'common/services/useProject'
 
-export type ProjectFilterType = {
+type ProjectFilterType = {
   organisationId: number
   value?: string
   onChange: (id: string, name: string) => void
diff --git a/frontend/web/components/ProjectManageWidget.tsx b/frontend/web/components/ProjectManageWidget.tsx
index 074254388b65..cfd9768cfdea 100644
--- a/frontend/web/components/ProjectManageWidget.tsx
+++ b/frontend/web/components/ProjectManageWidget.tsx
@@ -13,7 +13,7 @@ import { Project } from 'common/types/responses'
 import { SortOrder } from 'common/types/requests'
 import Button from './base/forms/Button'
 import PanelSearch from './PanelSearch'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import AppActions from 'common/dispatcher/app-actions'
 import CreateProjectModal from './modals/CreateProject'
 
diff --git a/frontend/web/components/ProjectSelect.js b/frontend/web/components/ProjectSelect.js
deleted file mode 100644
index dd9ca0cfba31..000000000000
--- a/frontend/web/components/ProjectSelect.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import React, { Component } from 'react'
-import ConfigProvider from 'common/providers/ConfigProvider'
-
-const ProjectSelect = class extends Component {
-  static displayName = 'ProjectSelect'
-
-  constructor(props, context) {
-    super(props, context)
-    this.state = { search: '' }
-  }
-
-  render() {
-    return (
-      <OrganisationProvider id={this.props.id}>
-        {({ projects }) => (
-          <>
-            {
-              <div className='project-select ml-5 mr-3 mb-2 pb-2'>
-                <div className='project-select-header mb-2'>
-                  <Input
-                    search
-                    size='xSmall'
-                    className='full-width'
-                    onChange={(e) => {
-                      this.setState({
-                        search: Utils.safeParseEventValue(e),
-                      })
-                    }}
-                    value={this.state.search}
-                    autoFocus
-                  />
-                </div>
-                <div className='project-select-body'>
-                  {projects &&
-                  projects.filter((el) =>
-                    el.name
-                      .toLowerCase()
-                      .includes(this.state.search.toLowerCase()),
-                  ).length ? (
-                    projects.map((project) => {
-                      if (
-                        project.name
-                          .toLowerCase()
-                          .includes(this.state.search.toLowerCase())
-                      ) {
-                        return this.props.renderRow(project, () => {
-                          this.props.onChange && this.props.onChange(project)
-                        })
-                      }
-                    })
-                  ) : (
-                    <div className='mx-3 mt-2 text-white'>No results</div>
-                  )}
-                </div>
-              </div>
-            }
-          </>
-        )}
-      </OrganisationProvider>
-    )
-  }
-}
-
-ProjectSelect.propTypes = {}
-
-module.exports = ConfigProvider(ProjectSelect)
diff --git a/frontend/web/components/RebrandBanner.js b/frontend/web/components/RebrandBanner.js
deleted file mode 100644
index bc2a2c173861..000000000000
--- a/frontend/web/components/RebrandBanner.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react'
-
-const RebrandBanner = class extends React.Component {
-  static displayName = 'RebrandBanner'
-
-  constructor(props, context) {
-    super(props, context)
-    this.state = {}
-  }
-
-  dismiss = () => {
-    API.setCookie('rebrand', '1')
-    this.forceUpdate()
-  }
-
-  render() {
-    if (E2E) {
-      return null
-    }
-    if (API.getCookie('rebrand')) {
-      return null
-    }
-    return (
-      <div className='bottom-banner'>
-        <div className='inner'>
-          <Row>
-            Bullet Train is now Flagsmith, read about it{' '}
-            <a
-              className='ml-1'
-              target='_blank'
-              href='https://flagsmith.com/blog/rebrand'
-              rel='noreferrer'
-            >
-              here
-            </a>
-            .
-            <Button onClick={this.dismiss} className='btn--small ml-2'>
-              Ok
-            </Button>
-          </Row>
-        </div>
-      </div>
-    )
-  }
-}
-
-RebrandBanner.propTypes = {}
-
-module.exports = RebrandBanner
diff --git a/frontend/web/components/RemoveViewPermissionModal.tsx b/frontend/web/components/RemoveViewPermissionModal.tsx
index 12c734596418..a29613d3e3bf 100644
--- a/frontend/web/components/RemoveViewPermissionModal.tsx
+++ b/frontend/web/components/RemoveViewPermissionModal.tsx
@@ -39,5 +39,4 @@ const RemoveViewPermissionModal = ({
   )
 }
 
-export type { RemoveViewPermissionModalProps }
 export default RemoveViewPermissionModal
diff --git a/frontend/web/components/RepositoriesSelect.tsx b/frontend/web/components/RepositoriesSelect.tsx
index 4faa6708a590..09a45cdeb851 100644
--- a/frontend/web/components/RepositoriesSelect.tsx
+++ b/frontend/web/components/RepositoriesSelect.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
 import { GithubRepository } from 'common/types/responses'
 
-export type RepositoriesSelectType = {
+type RepositoriesSelectType = {
   disabled?: boolean
   value?: string
   repositories: GithubRepository[] | undefined
diff --git a/frontend/web/components/Resources.tsx b/frontend/web/components/Resources.tsx
deleted file mode 100644
index 069640faadbb..000000000000
--- a/frontend/web/components/Resources.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React, { FC } from 'react'
-import { IonIcon } from '@ionic/react'
-import { document, chatbox, bookSharp } from 'ionicons/icons'
-import Button from './base/forms/Button'
-import loadChat, { openChat } from 'common/loadChat'
-import Utils from 'common/utils/utils'
-import { useGetBuildVersionQuery } from 'common/services/useBuildVersion'
-import isFreeEmailDomain from 'common/utils/isFreeEmailDomain'
-import AccountStore from 'common/stores/account-store'
-
-type ResourcesType = {}
-
-const Resources: FC<ResourcesType> = ({}) => {
-  useGetBuildVersionQuery({})
-  const isSaas = Utils.isSaas()
-  const show = !isSaas && !isFreeEmailDomain(AccountStore.getUser()?.email)
-  if (!show) {
-    return null
-  }
-  async function onChatClick() {
-    await loadChat(true)
-    openChat()
-  }
-  return (
-    <div>
-      <div className='rounded border-1 bg-body p-2 text-primary'>
-        <h6 className='d-flex mb-0 fs-captionXSmall letter-spacing text-muted  align-items-center gap-2'>
-          <IonIcon className='' icon={bookSharp} />
-          <span className='fw-semibold'>RESOURCES</span>
-        </h6>
-        <hr className='mt-1' />
-        <div className='mt-1'>
-          <div className='d-flex flex-column gap-2 my-2'>
-            <Button
-              theme='text'
-              onClick={onChatClick}
-              className='text-primary d-flex align-items-center gap-2'
-              href=''
-            >
-              <IonIcon icon={chatbox} />
-              Ask a question
-            </Button>
-            <Button
-              theme='text'
-              className='text-primary fs-small d-flex align-items-center'
-              href='https://docs.flagsmith.com'
-            >
-              <IonIcon icon={document} />
-              Docs
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default Resources
diff --git a/frontend/web/components/RolePermissionsList.tsx b/frontend/web/components/RolePermissionsList.tsx
index 550d13c1008d..19d03a6b737b 100644
--- a/frontend/web/components/RolePermissionsList.tsx
+++ b/frontend/web/components/RolePermissionsList.tsx
@@ -1,5 +1,5 @@
 import React, { FC, forwardRef, Ref, useState } from 'react'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import { EditPermissionsModal } from './EditPermissions'
 import {
   useGetRoleEnvironmentPermissionsQuery,
@@ -27,7 +27,7 @@ type RolePermissionsListProps = {
   group?: UserGroupSummary
 }
 
-export type PermissionsSummaryType = {
+type PermissionsSummaryType = {
   level: PermissionLevel
   levelId: number
   organisationId: number
diff --git a/frontend/web/components/RolesSelect.tsx b/frontend/web/components/RolesSelect.tsx
index 6f0a1cddf3cd..737fd3abee58 100644
--- a/frontend/web/components/RolesSelect.tsx
+++ b/frontend/web/components/RolesSelect.tsx
@@ -3,7 +3,7 @@ import InlineModal from './InlineModal'
 import { Role } from 'common/types/responses'
 import Input from './base/forms/Input'
 import Utils from 'common/utils/utils'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 
 export type RoleSelectType = {
   disabled?: boolean
diff --git a/frontend/web/components/RolesTable.tsx b/frontend/web/components/RolesTable.tsx
index ff3402dc78c6..c5d09e55fd08 100644
--- a/frontend/web/components/RolesTable.tsx
+++ b/frontend/web/components/RolesTable.tsx
@@ -5,7 +5,7 @@ import { User, Role } from 'common/types/responses'
 import PanelSearch from './PanelSearch'
 import Button from './base/forms/Button'
 import ConfirmDeleteRole from './modals/ConfirmDeleteRole'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import Panel from './base/grid/Panel'
 import { useGetGroupsQuery } from 'common/services/useGroup'
 import Utils from 'common/utils/utils'
diff --git a/frontend/web/components/SAMLAttributeMappingTable.tsx b/frontend/web/components/SAMLAttributeMappingTable.tsx
index 225f9481ffd2..2ec14706d54a 100644
--- a/frontend/web/components/SAMLAttributeMappingTable.tsx
+++ b/frontend/web/components/SAMLAttributeMappingTable.tsx
@@ -6,7 +6,7 @@ import {
 } from 'common/services/useSamlAttributeMapping'
 import PanelSearch from './PanelSearch'
 import Button from './base/forms/Button'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import { SAMLAttributeMapping } from 'common/types/responses'
 import Format from 'common/utils/format'
 import Tooltip from './Tooltip'
diff --git a/frontend/web/components/SDKKeysPage.tsx b/frontend/web/components/SDKKeysPage.tsx
index abfe9feed72c..e3a080bc9c4b 100644
--- a/frontend/web/components/SDKKeysPage.tsx
+++ b/frontend/web/components/SDKKeysPage.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
 import Button from './base/forms/Button'
 import Input from './base/forms/Input'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import ServerSideSDKKeys from './ServerSideSDKKeys'
 import PageTitle from './PageTitle'
 import Utils from 'common/utils/utils'
diff --git a/frontend/web/components/SamlForm.js b/frontend/web/components/SamlForm.js
index b4eddef2d304..b3153926fdd5 100644
--- a/frontend/web/components/SamlForm.js
+++ b/frontend/web/components/SamlForm.js
@@ -2,7 +2,7 @@ import React from 'react'
 import data from 'common/data/base/_data'
 import ErrorMessage from './ErrorMessage'
 import ConfigProvider from 'common/providers/ConfigProvider'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import ModalHR from './modals/ModalHR'
 
 const SamlForm = class extends React.Component {
diff --git a/frontend/web/components/SamlTab.tsx b/frontend/web/components/SamlTab.tsx
index fdef8c0a1325..2ec2c42f528d 100644
--- a/frontend/web/components/SamlTab.tsx
+++ b/frontend/web/components/SamlTab.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
 import Button from './base/forms/Button'
 
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import PanelSearch from './PanelSearch'
 import PageTitle from './PageTitle'
 
@@ -14,7 +14,7 @@ import Switch from './Switch'
 import { SAMLConfiguration } from 'common/types/responses'
 import PlanBasedBanner from './PlanBasedAccess'
 
-export type SamlTabType = {
+type SamlTabType = {
   organisationId: number
 }
 
diff --git a/frontend/web/components/SegmentOverrideActions.tsx b/frontend/web/components/SegmentOverrideActions.tsx
index 9bde95b79fd9..3197ad06b0ce 100644
--- a/frontend/web/components/SegmentOverrideActions.tsx
+++ b/frontend/web/components/SegmentOverrideActions.tsx
@@ -2,7 +2,7 @@ import { FC, useCallback, useLayoutEffect, useRef, useState } from 'react'
 
 import useOutsideClick from 'common/useOutsideClick'
 import Button from './base/forms/Button'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import ActionButton from './ActionButton'
 
 interface SegmentOverrideActionProps {
@@ -26,7 +26,7 @@ function calculateListPosition(
   return { left, top }
 }
 
-export const SegmentOverrideAction: FC<SegmentOverrideActionProps> = ({
+const SegmentOverrideAction: FC<SegmentOverrideActionProps> = ({
   canCopyValue,
   canEdit,
   canRemove,
diff --git a/frontend/web/components/SegmentOverrides.js b/frontend/web/components/SegmentOverrides.js
index 00a8a9f8600f..ef3811de23b7 100644
--- a/frontend/web/components/SegmentOverrides.js
+++ b/frontend/web/components/SegmentOverrides.js
@@ -14,13 +14,13 @@ import JSONReference from './JSONReference'
 import InfoMessage from './InfoMessage'
 import Permission from 'common/providers/Permission'
 import Constants from 'common/constants'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import SegmentOverrideLimit from './SegmentOverrideLimit'
 import { getStore } from 'common/store'
 import { getEnvironment } from 'common/services/useEnvironment'
 import { getSegment } from 'common/services/useSegment'
 import Tooltip from './Tooltip'
-import SegmentsIcon from './svg/SegmentsIcon'
+import SegmentsIcon from './icons/SegmentsIcon'
 import SegmentOverrideActions from './SegmentOverrideActions'
 import Button from './base/forms/Button'
 import { EnvironmentPermission } from 'common/types/permissions.types'
diff --git a/frontend/web/components/ServerSideSDKKeys.js b/frontend/web/components/ServerSideSDKKeys.js
index 71502ee1ce7c..133d5713eea1 100644
--- a/frontend/web/components/ServerSideSDKKeys.js
+++ b/frontend/web/components/ServerSideSDKKeys.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import ProjectStore from 'common/stores/project-store'
 import Token from './Token'
 import ModalHR from './modals/ModalHR'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import { getStore } from 'common/store'
 import {
   createServersideEnvironmentKeys,
diff --git a/frontend/web/components/SettingsButton.tsx b/frontend/web/components/SettingsButton.tsx
index 6fdb4536212a..5126c0126f83 100644
--- a/frontend/web/components/SettingsButton.tsx
+++ b/frontend/web/components/SettingsButton.tsx
@@ -1,5 +1,5 @@
 import React, { FC, ReactNode } from 'react'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import Utils, { PaidFeature } from 'common/utils/utils'
 import classNames from 'classnames'
 import PlanBasedBanner from './PlanBasedAccess'
diff --git a/frontend/web/components/Skeleton/Skeleton.tsx b/frontend/web/components/Skeleton/Skeleton.tsx
index fe2751f81df1..03fad20d6935 100644
--- a/frontend/web/components/Skeleton/Skeleton.tsx
+++ b/frontend/web/components/Skeleton/Skeleton.tsx
@@ -32,4 +32,4 @@ const Skeleton: FC<SkeletonProps> = ({
 Skeleton.displayName = 'Skeleton'
 
 export default Skeleton
-export type { SkeletonProps, SkeletonVariant }
+export type { SkeletonProps }
diff --git a/frontend/web/components/Skeleton/index.ts b/frontend/web/components/Skeleton/index.ts
index 132a9b852b5f..b0bda5389419 100644
--- a/frontend/web/components/Skeleton/index.ts
+++ b/frontend/web/components/Skeleton/index.ts
@@ -1,2 +1,2 @@
 export { default } from './Skeleton'
-export type { SkeletonProps, SkeletonVariant } from './Skeleton'
+export type { SkeletonProps } from './Skeleton'
diff --git a/frontend/web/components/StatItem.tsx b/frontend/web/components/StatItem.tsx
index 8f19017e759b..1e3aae5c633f 100644
--- a/frontend/web/components/StatItem.tsx
+++ b/frontend/web/components/StatItem.tsx
@@ -1,7 +1,7 @@
 import React, { FC, KeyboardEvent } from 'react'
 import { IonIcon } from '@ionic/react'
 import { checkmarkSharp } from 'ionicons/icons'
-import Icon, { IconName } from './Icon'
+import Icon, { IconName } from './icons/Icon'
 import Utils from 'common/utils/utils'
 
 type VisibilityToggleProps = {
diff --git a/frontend/web/components/Switch.tsx b/frontend/web/components/Switch.tsx
index 7c54595d0eff..bf37a70a943f 100644
--- a/frontend/web/components/Switch.tsx
+++ b/frontend/web/components/Switch.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react'
 import RCSwitch, { Props as RCSwitchProps } from 'rc-switch'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 
 export type SwitchProps = RCSwitchProps & {
   checked?: boolean
diff --git a/frontend/web/components/ToggleChip.tsx b/frontend/web/components/ToggleChip.tsx
index 3098e69c9055..a56708d9e83d 100644
--- a/frontend/web/components/ToggleChip.tsx
+++ b/frontend/web/components/ToggleChip.tsx
@@ -1,9 +1,9 @@
 import React, { FC, ReactNode } from 'react'
 import cx from 'classnames'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import Utils from 'common/utils/utils'
 
-export type ToggleChipProps = {
+type ToggleChipProps = {
   color?: string
   active?: boolean
   onClick?: () => void
diff --git a/frontend/web/components/UserAction.tsx b/frontend/web/components/UserAction.tsx
index 83709ceb2be9..f365d908eb2e 100644
--- a/frontend/web/components/UserAction.tsx
+++ b/frontend/web/components/UserAction.tsx
@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom'
 
 import useOutsideClick from 'common/useOutsideClick'
 import Button from './base/forms/Button'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import ActionButton from './ActionButton'
 
 interface UserActionProps {
@@ -109,7 +109,7 @@ const ActionDropdown = ({
   )
 }
 
-export const UserAction: FC<UserActionProps> = ({
+const UserAction: FC<UserActionProps> = ({
   canEdit,
   canInspectPermissions,
   canRemove,
diff --git a/frontend/web/components/UserGroupList.tsx b/frontend/web/components/UserGroupList.tsx
index 95304c769a5b..0a5df73d4eb4 100644
--- a/frontend/web/components/UserGroupList.tsx
+++ b/frontend/web/components/UserGroupList.tsx
@@ -15,7 +15,7 @@ import { useGetUserGroupPermissionQuery } from 'common/services/useUserGroupPerm
 import PanelSearch from './PanelSearch'
 import { sortBy } from 'lodash'
 import InfoMessage from './InfoMessage'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import PermissionsSummaryList from './PermissionsSummaryList'
 import Panel from './base/grid/Panel'
 import { useGetGroupSummariesQuery } from 'common/services/useGroupSummary'
diff --git a/frontend/web/components/UserSelect.tsx b/frontend/web/components/UserSelect.tsx
index df0a9c822ffd..f9e53721f992 100644
--- a/frontend/web/components/UserSelect.tsx
+++ b/frontend/web/components/UserSelect.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import InlineModal from './InlineModal'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import classNames from 'classnames'
 import Input from './base/forms/Input'
 import Utils from 'common/utils/utils'
@@ -15,7 +15,7 @@ interface UserSelectProps {
   onChange?: (value: any[]) => void
 }
 
-export const UserSelect: React.FC<UserSelectProps> = ({
+const UserSelect: React.FC<UserSelectProps> = ({
   disabled = false,
   isOpen,
   onAdd,
diff --git a/frontend/web/components/ValueEditor.js b/frontend/web/components/ValueEditor.js
index 8942a338191b..e66d792f8e24 100644
--- a/frontend/web/components/ValueEditor.js
+++ b/frontend/web/components/ValueEditor.js
@@ -3,7 +3,7 @@ import cx from 'classnames'
 import Highlight from './Highlight'
 import ConfigProvider from 'common/providers/ConfigProvider'
 import { Clipboard } from 'polyfill-react-native'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import { IonIcon } from '@ionic/react'
 import { checkmarkCircle, warning } from 'ionicons/icons'
 
diff --git a/frontend/web/components/ViewDocs.tsx b/frontend/web/components/ViewDocs.tsx
index 19a5c30b3389..7936c7c2d6be 100644
--- a/frontend/web/components/ViewDocs.tsx
+++ b/frontend/web/components/ViewDocs.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import Button, { ButtonType } from './base/forms/Button'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 
 type ViewDocsType = ButtonType & {}
 
diff --git a/frontend/web/components/WarningMessage.tsx b/frontend/web/components/WarningMessage.tsx
index 4a513dc3d04e..3c64b5d991f5 100644
--- a/frontend/web/components/WarningMessage.tsx
+++ b/frontend/web/components/WarningMessage.tsx
@@ -1,5 +1,5 @@
 import React, { FC, ReactNode } from 'react'
-import Icon from './Icon'
+import Icon from './icons/Icon'
 import Button from './base/forms/Button'
 import Constants from 'common/constants'
 
diff --git a/frontend/web/components/XMLUpload.tsx b/frontend/web/components/XMLUpload.tsx
index 8a438a1f69d5..fa622e14ff46 100644
--- a/frontend/web/components/XMLUpload.tsx
+++ b/frontend/web/components/XMLUpload.tsx
@@ -1,5 +1,5 @@
 import { FC, useCallback } from 'react'
-import DropIcon from './svg/DropIcon'
+import DropIcon from './icons/DropIcon'
 import Button from './base/forms/Button'
 import { useDropzone } from 'react-dropzone'
 import { DropAreaType } from './JSONUpload'
diff --git a/frontend/web/components/base/DropdownMenu.tsx b/frontend/web/components/base/DropdownMenu.tsx
index 13f211342ee4..8c5daed73556 100644
--- a/frontend/web/components/base/DropdownMenu.tsx
+++ b/frontend/web/components/base/DropdownMenu.tsx
@@ -1,5 +1,5 @@
 import React, { useLayoutEffect, useRef, useState } from 'react'
-import Icon, { IconName } from 'components/Icon'
+import Icon, { IconName } from 'components/icons/Icon'
 import classNames from 'classnames'
 import useOutsideClick from 'common/useOutsideClick'
 import { createPortal } from 'react-dom'
diff --git a/frontend/web/components/base/LabelWithTooltip.tsx b/frontend/web/components/base/LabelWithTooltip.tsx
index 7a090b9d7330..9b4fefa6b4a4 100644
--- a/frontend/web/components/base/LabelWithTooltip.tsx
+++ b/frontend/web/components/base/LabelWithTooltip.tsx
@@ -1,4 +1,4 @@
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import { FC } from 'react'
 
 interface LabelWithTooltipProps {
diff --git a/frontend/web/components/base/forms/Button.tsx b/frontend/web/components/base/forms/Button.tsx
index 599d99272567..18f941483b4b 100644
--- a/frontend/web/components/base/forms/Button.tsx
+++ b/frontend/web/components/base/forms/Button.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import cn from 'classnames'
 import { ButtonHTMLAttributes, HTMLAttributeAnchorTarget } from 'react'
-import Icon, { IconName } from 'components/Icon'
+import Icon, { IconName } from 'components/icons/Icon'
 
 const iconColours = {
   primary: '#6837fc',
diff --git a/frontend/web/components/base/forms/ButtonDropdown.tsx b/frontend/web/components/base/forms/ButtonDropdown.tsx
index 10c2b662aa22..96bc86d24b51 100644
--- a/frontend/web/components/base/forms/ButtonDropdown.tsx
+++ b/frontend/web/components/base/forms/ButtonDropdown.tsx
@@ -2,9 +2,9 @@ import { FC, useLayoutEffect, useRef, useState } from 'react'
 import Button, { ButtonType, sizeClassNames, themeClassNames } from './Button'
 import classNames from 'classnames'
 import useOutsideClick from 'common/useOutsideClick'
-import Icon, { IconName } from 'components/Icon'
+import Icon, { IconName } from 'components/icons/Icon'
 
-export interface ButtonDropdownType extends ButtonType {
+interface ButtonDropdownType extends ButtonType {
   toggleIcon?: IconName
   dropdownItems: {
     label: string
@@ -13,7 +13,7 @@ export interface ButtonDropdownType extends ButtonType {
   }[]
 }
 
-export const ButtonDropdown: FC<ButtonDropdownType> = ({
+const ButtonDropdown: FC<ButtonDropdownType> = ({
   children,
   dropdownItems,
   onClick,
diff --git a/frontend/web/components/base/forms/Checkbox.tsx b/frontend/web/components/base/forms/Checkbox.tsx
index 0ecc14be0d3c..8857f495d432 100644
--- a/frontend/web/components/base/forms/Checkbox.tsx
+++ b/frontend/web/components/base/forms/Checkbox.tsx
@@ -1,6 +1,6 @@
 import React, { useRef } from 'react'
 import ReactMarkdown from 'react-markdown'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import Utils from 'common/utils/utils'
 
 interface CheckboxProps {
diff --git a/frontend/web/components/base/forms/Input.js b/frontend/web/components/base/forms/Input.js
index 51a003907bee..5042ec2c48b7 100644
--- a/frontend/web/components/base/forms/Input.js
+++ b/frontend/web/components/base/forms/Input.js
@@ -3,7 +3,7 @@
  */
 import MaskedInput from 'react-maskedinput'
 import cn from 'classnames'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import Radio from './Radio'
 import Checkbox from './Checkbox'
 
diff --git a/frontend/web/components/base/forms/InputGroup.js b/frontend/web/components/base/forms/InputGroup.js
index 6384aac4c5e9..5d53cd1f703e 100644
--- a/frontend/web/components/base/forms/InputGroup.js
+++ b/frontend/web/components/base/forms/InputGroup.js
@@ -1,7 +1,7 @@
 /**
  * Created by kylejohnson on 25/07/2016.
  */
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import React, { Component } from 'react'
 
 const InputGroup = class extends Component {
diff --git a/frontend/web/components/base/forms/Tabs.js b/frontend/web/components/base/forms/Tabs.js
deleted file mode 100644
index e69de29bb2d1..000000000000
diff --git a/frontend/web/components/base/grid/FormGroup.tsx b/frontend/web/components/base/grid/FormGroup.tsx
index d41269cd96a9..f4cf11d376ff 100644
--- a/frontend/web/components/base/grid/FormGroup.tsx
+++ b/frontend/web/components/base/grid/FormGroup.tsx
@@ -1,6 +1,6 @@
 import React, { FC, ReactNode } from 'react'
 
-export type FormGroupProps = {
+type FormGroupProps = {
   children?: ReactNode
   className?: string
 }
diff --git a/frontend/web/components/base/grid/Row.tsx b/frontend/web/components/base/grid/Row.tsx
index 58671d832389..c69f95626c05 100644
--- a/frontend/web/components/base/grid/Row.tsx
+++ b/frontend/web/components/base/grid/Row.tsx
@@ -1,7 +1,7 @@
 import React, { FC, HTMLAttributes, ReactNode } from 'react'
 import cn from 'classnames'
 
-export type RowProps = HTMLAttributes<HTMLDivElement> & {
+type RowProps = HTMLAttributes<HTMLDivElement> & {
   children?: ReactNode
   className?: string
   space?: boolean
diff --git a/frontend/web/components/base/higher-order/FocusMonitor.tsx b/frontend/web/components/base/higher-order/FocusMonitor.tsx
index fb306acfe6ce..aeb4d0f71714 100644
--- a/frontend/web/components/base/higher-order/FocusMonitor.tsx
+++ b/frontend/web/components/base/higher-order/FocusMonitor.tsx
@@ -8,13 +8,13 @@ import React, {
   ForwardRefRenderFunction,
 } from 'react'
 
-export interface FocusMonitorProps {
+interface FocusMonitorProps {
   children: ReactElement
   isHover?: boolean
   onFocusChanged: (hasFocus: boolean) => void
 }
 
-export interface FocusMonitorHandles {
+interface FocusMonitorHandles {
   toggle: () => void
   isActive: () => boolean
 }
diff --git a/frontend/web/components/base/select/SearchableSelect.tsx b/frontend/web/components/base/select/SearchableSelect.tsx
index cd89dd416c3f..4d0ccbb264fc 100644
--- a/frontend/web/components/base/select/SearchableSelect.tsx
+++ b/frontend/web/components/base/select/SearchableSelect.tsx
@@ -1,4 +1,4 @@
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import React from 'react'
 export interface OptionType {
   disabled?: boolean
@@ -6,7 +6,7 @@ export interface OptionType {
   value: string
 }
 
-export interface GroupedOptionType {
+interface GroupedOptionType {
   label: React.ReactNode
   options: OptionType[]
 }
diff --git a/frontend/web/components/base/select/multi-select/CustomOption.tsx b/frontend/web/components/base/select/multi-select/CustomOption.tsx
index f433c3cea93d..84bdb24c0d3d 100644
--- a/frontend/web/components/base/select/multi-select/CustomOption.tsx
+++ b/frontend/web/components/base/select/multi-select/CustomOption.tsx
@@ -1,6 +1,6 @@
 import { OptionProps } from 'react-select'
 import { MultiSelectOption } from './MultiSelect'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import { useEffect, useRef } from 'react'
 import { getDarkMode } from 'project/darkMode'
 
diff --git a/frontend/web/components/base/select/multi-select/MultiSelect.tsx b/frontend/web/components/base/select/multi-select/MultiSelect.tsx
index de7329562ea6..41d753c81b4b 100644
--- a/frontend/web/components/base/select/multi-select/MultiSelect.tsx
+++ b/frontend/web/components/base/select/multi-select/MultiSelect.tsx
@@ -12,7 +12,7 @@ export interface MultiSelectOption {
   value: string
 }
 
-export interface MultiSelectProps {
+interface MultiSelectProps {
   selectedValues: string[]
   onSelectionChange: (selectedValues: string[]) => void
   options: MultiSelectOption[]
diff --git a/frontend/web/components/diff/DiffFeature.tsx b/frontend/web/components/diff/DiffFeature.tsx
index 6a217f7cbe3e..f4501c356a6f 100644
--- a/frontend/web/components/diff/DiffFeature.tsx
+++ b/frontend/web/components/diff/DiffFeature.tsx
@@ -17,7 +17,7 @@ import DiffEnabled from './DiffEnabled'
 import DiffSegmentOverrides from './DiffSegmentOverrides'
 import DiffVariations from './DiffVariations'
 import InfoMessage from 'components/InfoMessage'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import WarningMessage from 'components/WarningMessage'
 import { Link } from 'react-router-dom'
 
diff --git a/frontend/web/components/diff/DiffSegmentOverrides.tsx b/frontend/web/components/diff/DiffSegmentOverrides.tsx
index 1c41f74c7b31..1b95efd9d7f4 100644
--- a/frontend/web/components/diff/DiffSegmentOverrides.tsx
+++ b/frontend/web/components/diff/DiffSegmentOverrides.tsx
@@ -5,7 +5,7 @@ import DiffEnabled from './DiffEnabled'
 import { sortBy } from 'lodash'
 import Tabs from 'components/navigation/TabMenu/Tabs'
 import TabItem from 'components/navigation/TabMenu/TabItem'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import Tooltip from 'components/Tooltip'
 import { Link, useHistory } from 'react-router-dom'
 import DiffVariations from './DiffVariations'
diff --git a/frontend/web/components/diff/diff-utils.ts b/frontend/web/components/diff/diff-utils.ts
index 12776779abd1..5c1f96b66763 100644
--- a/frontend/web/components/diff/diff-utils.ts
+++ b/frontend/web/components/diff/diff-utils.ts
@@ -59,7 +59,7 @@ export type TDiffVariation = {
   newWeight: number
   oldWeight: number
 }
-export type TDiffVariations = {
+type TDiffVariations = {
   diffs: TDiffVariation[]
   totalChanges: number
 }
@@ -203,7 +203,7 @@ export const getVariationDiff = (
   } as TDiffVariations
 }
 
-export type TSegmentDiff = {
+type TSegmentDiff = {
   newString: string
   oldString: string
   totalChanges: number
diff --git a/frontend/web/components/feature-health/components/EventUrlsBlock.tsx b/frontend/web/components/feature-health/components/EventUrlsBlock.tsx
index bff27fef3f22..62f51c8b9be8 100644
--- a/frontend/web/components/feature-health/components/EventUrlsBlock.tsx
+++ b/frontend/web/components/feature-health/components/EventUrlsBlock.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { FeatureHealthEventReasonUrlBlock } from 'common/types/responses'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import Button from 'components/base/forms/Button'
 
 interface EventURLBlocksProps {
diff --git a/frontend/web/components/feature-health/components/FeatureHealthEventsList.tsx b/frontend/web/components/feature-health/components/FeatureHealthEventsList.tsx
index 7bfd18cb2163..baf9932838b1 100644
--- a/frontend/web/components/feature-health/components/FeatureHealthEventsList.tsx
+++ b/frontend/web/components/feature-health/components/FeatureHealthEventsList.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo } from 'react'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import Constants from 'common/constants'
 import { useDismissHealthEventMutation } from 'common/services/useHealthEvents'
 import Button from 'components/base/forms/Button'
diff --git a/frontend/web/components/feature-override/FeatureOverrideCTA.tsx b/frontend/web/components/feature-override/FeatureOverrideCTA.tsx
index e972299d8d2a..5bfe0677df82 100644
--- a/frontend/web/components/feature-override/FeatureOverrideCTA.tsx
+++ b/frontend/web/components/feature-override/FeatureOverrideCTA.tsx
@@ -2,7 +2,7 @@ import React, { FC } from 'react'
 import Utils from 'common/utils/utils'
 import Button from 'components/base/forms/Button'
 import { removeUserOverride } from 'components/RemoveUserOverride'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import {
   FeatureState,
   IdentityFeatureState,
diff --git a/frontend/web/components/feature-override/FeatureOverrideRow.tsx b/frontend/web/components/feature-override/FeatureOverrideRow.tsx
index 033d2c607f64..d6f8c87a615d 100644
--- a/frontend/web/components/feature-override/FeatureOverrideRow.tsx
+++ b/frontend/web/components/feature-override/FeatureOverrideRow.tsx
@@ -22,7 +22,7 @@ import { useHasPermission } from 'common/providers/Permission'
 import API from 'project/api'
 import Constants from 'common/constants'
 import Button from 'components/base/forms/Button'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import CreateFlagModal from 'components/modals/create-feature'
 import { useHistory } from 'react-router-dom'
 import ConfirmToggleFeature from 'components/modals/ConfirmToggleFeature'
diff --git a/frontend/web/components/feature-override/IdentityOverrideDescription.tsx b/frontend/web/components/feature-override/IdentityOverrideDescription.tsx
index c39bb099e634..13a5ab4269f0 100644
--- a/frontend/web/components/feature-override/IdentityOverrideDescription.tsx
+++ b/frontend/web/components/feature-override/IdentityOverrideDescription.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import UsersIcon from 'components/svg/UsersIcon'
+import UsersIcon from 'components/icons/UsersIcon'
 
 type IdentityOverrideDescriptionType = {}
 
diff --git a/frontend/web/components/feature-override/SegmentOverrideDescription.tsx b/frontend/web/components/feature-override/SegmentOverrideDescription.tsx
index cbc724a1066d..a1537ee40435 100644
--- a/frontend/web/components/feature-override/SegmentOverrideDescription.tsx
+++ b/frontend/web/components/feature-override/SegmentOverrideDescription.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import SegmentsIcon from 'components/svg/SegmentsIcon'
+import SegmentsIcon from 'components/icons/SegmentsIcon'
 import FeatureValue from 'components/feature-summary/FeatureValue'
 import { FlagsmithValue } from 'common/types/responses'
 
diff --git a/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/CodeReferenceItem.tsx b/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/CodeReferenceItem.tsx
index 334a16903db8..81c47e77c9de 100644
--- a/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/CodeReferenceItem.tsx
+++ b/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/CodeReferenceItem.tsx
@@ -1,5 +1,5 @@
 import flagsmith from '@flagsmith/flagsmith'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import { CodeReference, VCSProvider } from 'common/types/responses'
 
 interface CodeReferenceItemProps {
diff --git a/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/CodeReferenceScanIndicator.tsx b/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/CodeReferenceScanIndicator.tsx
index 82ea09f7884e..fac239088925 100644
--- a/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/CodeReferenceScanIndicator.tsx
+++ b/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/CodeReferenceScanIndicator.tsx
@@ -1,4 +1,4 @@
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import { Moment } from 'moment'
 import React from 'react'
 
diff --git a/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/RepoCodeReferencesSection.tsx b/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/RepoCodeReferencesSection.tsx
index cc8018dea91a..f43878108c3f 100644
--- a/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/RepoCodeReferencesSection.tsx
+++ b/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/RepoCodeReferencesSection.tsx
@@ -4,7 +4,7 @@ import { FeatureCodeReferences } from 'common/types/responses'
 import moment from 'moment'
 import CodeReferenceItem from './CodeReferenceItem'
 import RepoSectionHeader from './RepoSectionHeader'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import CodeReferenceScanIndicator from './CodeReferenceScanIndicator'
 
 interface RepoCodeReferencesSectionProps {
diff --git a/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/RepoSectionHeader.tsx b/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/RepoSectionHeader.tsx
index ea2047773345..438a2e5e8da9 100644
--- a/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/RepoSectionHeader.tsx
+++ b/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/RepoSectionHeader.tsx
@@ -1,4 +1,4 @@
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import VCSProviderTag from 'components/tags/VCSProviderTag'
 import { getDarkMode } from 'project/darkMode'
 import React from 'react'
diff --git a/frontend/web/components/feature-summary/FeatureAction.tsx b/frontend/web/components/feature-summary/FeatureAction.tsx
index 49470328ed67..63216aae803d 100644
--- a/frontend/web/components/feature-summary/FeatureAction.tsx
+++ b/frontend/web/components/feature-summary/FeatureAction.tsx
@@ -4,7 +4,7 @@ import useOutsideClick from 'common/useOutsideClick'
 import Utils from 'common/utils/utils'
 import Constants from 'common/constants'
 import Permission from 'common/providers/Permission'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import { Tag } from 'common/types/responses'
 import color from 'color'
 import { getTagColor } from 'components/tags/Tag'
@@ -31,7 +31,7 @@ export interface FeatureActionProps {
 
 type ActionType = 'copy' | 'audit' | 'history' | 'remove'
 
-export const FeatureAction: FC<FeatureActionProps> = ({
+const FeatureAction: FC<FeatureActionProps> = ({
   disableE2E,
   featureIndex,
   hideAudit,
diff --git a/frontend/web/components/feature-summary/FeatureName.tsx b/frontend/web/components/feature-summary/FeatureName.tsx
index 185cf8f8fc58..b5e9d222b765 100644
--- a/frontend/web/components/feature-summary/FeatureName.tsx
+++ b/frontend/web/components/feature-summary/FeatureName.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import Button from 'components/base/forms/Button'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import Utils from 'common/utils/utils'
 
 type FeatureNameType = {
diff --git a/frontend/web/components/feature-summary/FeatureRow.tsx b/frontend/web/components/feature-summary/FeatureRow.tsx
index 07713f7a5bb3..37f7c094313c 100644
--- a/frontend/web/components/feature-summary/FeatureRow.tsx
+++ b/frontend/web/components/feature-summary/FeatureRow.tsx
@@ -6,7 +6,7 @@ import CreateExperimentModal from 'components/modals/create-experiment'
 import ProjectStore from 'common/stores/project-store'
 import Constants from 'common/constants'
 import { useProtectedTags } from 'common/utils/useProtectedTags'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import FeatureValue from './FeatureValue'
 import FeatureAction, { FeatureActionProps } from './FeatureAction'
 import classNames from 'classnames'
@@ -32,7 +32,7 @@ import FeatureDescription from './FeatureDescription'
 import FeatureTags from './FeatureTags'
 import { useFeatureRowState } from 'components/pages/features/hooks/useFeatureRowState'
 
-export interface FeatureRowProps {
+interface FeatureRowProps {
   disableControls?: boolean
   environmentFlags: FeatureListProviderData['environmentFlags']
   environmentId: string
diff --git a/frontend/web/components/feature-summary/FeatureRowSkeleton.tsx b/frontend/web/components/feature-summary/FeatureRowSkeleton.tsx
index 6244da250053..ceb84ba4ef87 100644
--- a/frontend/web/components/feature-summary/FeatureRowSkeleton.tsx
+++ b/frontend/web/components/feature-summary/FeatureRowSkeleton.tsx
@@ -5,7 +5,7 @@ interface FeatureRowSkeletonProps {
   style?: CSSProperties
 }
 
-export const FeatureRowSkeleton: FC<FeatureRowSkeletonProps> = ({ style }) => {
+const FeatureRowSkeleton: FC<FeatureRowSkeletonProps> = ({ style }) => {
   return (
     <div
       className='d-none d-lg-flex align-items-lg-center flex-lg-row list-item py-0 list-item-xs fs-small clickable skeleton-row'
diff --git a/frontend/web/components/feature-summary/FeatureTags.tsx b/frontend/web/components/feature-summary/FeatureTags.tsx
index 7518d146ea3e..626830db5a7b 100644
--- a/frontend/web/components/feature-summary/FeatureTags.tsx
+++ b/frontend/web/components/feature-summary/FeatureTags.tsx
@@ -1,8 +1,8 @@
 import React, { FC, useMemo } from 'react'
-import SegmentOverridesIcon from 'components/SegmentOverridesIcon'
+import SegmentOverridesIcon from 'components/icons/SegmentOverridesIcon'
 import Constants from 'common/constants'
 import { ProjectFlag, VCSProvider } from 'common/types/responses'
-import IdentityOverridesIcon from 'components/IdentityOverridesIcon'
+import IdentityOverridesIcon from 'components/icons/IdentityOverridesIcon'
 import TagValues from 'components/tags/TagValues'
 import UnhealthyFlagWarning from './UnhealthyFlagWarning'
 import StaleFlagWarning from './StaleFlagWarning'
diff --git a/frontend/web/components/feature-summary/ProjectFeatureRow.tsx b/frontend/web/components/feature-summary/ProjectFeatureRow.tsx
index 61386f11559e..0a207893f046 100644
--- a/frontend/web/components/feature-summary/ProjectFeatureRow.tsx
+++ b/frontend/web/components/feature-summary/ProjectFeatureRow.tsx
@@ -6,7 +6,7 @@ import FeatureDescription from './FeatureDescription'
 import TagValues from 'components/tags/TagValues'
 import VCSProviderTag from 'components/tags/VCSProviderTag'
 
-export interface ProjectFeatureRowProps {
+interface ProjectFeatureRowProps {
   projectFlag: ProjectFlag
   index: number
   isSelected?: boolean
diff --git a/frontend/web/components/svg/AuditLogIcon.tsx b/frontend/web/components/icons/AuditLogIcon.tsx
similarity index 100%
rename from frontend/web/components/svg/AuditLogIcon.tsx
rename to frontend/web/components/icons/AuditLogIcon.tsx
diff --git a/frontend/web/components/svg/DropIcon.tsx b/frontend/web/components/icons/DropIcon.tsx
similarity index 100%
rename from frontend/web/components/svg/DropIcon.tsx
rename to frontend/web/components/icons/DropIcon.tsx
diff --git a/frontend/web/components/base/icons/GithubIcon.tsx b/frontend/web/components/icons/GithubIcon.tsx
similarity index 100%
rename from frontend/web/components/base/icons/GithubIcon.tsx
rename to frontend/web/components/icons/GithubIcon.tsx
diff --git a/frontend/web/components/base/icons/GitlabIcon.tsx b/frontend/web/components/icons/GitlabIcon.tsx
similarity index 96%
rename from frontend/web/components/base/icons/GitlabIcon.tsx
rename to frontend/web/components/icons/GitlabIcon.tsx
index 74d2f6f6359d..bb71584e3350 100644
--- a/frontend/web/components/base/icons/GitlabIcon.tsx
+++ b/frontend/web/components/icons/GitlabIcon.tsx
@@ -7,7 +7,7 @@ interface GitlabIconProps {
   fill?: string
 }
 
-export const GitlabIcon: React.FC<GitlabIconProps> = ({
+const GitlabIcon: React.FC<GitlabIconProps> = ({
   className = '',
   fill = '#000000',
   height = 14,
diff --git a/frontend/web/components/Icon.tsx b/frontend/web/components/icons/Icon.tsx
similarity index 99%
rename from frontend/web/components/Icon.tsx
rename to frontend/web/components/icons/Icon.tsx
index 46eff8e441c3..71ac064b238d 100644
--- a/frontend/web/components/Icon.tsx
+++ b/frontend/web/components/icons/Icon.tsx
@@ -63,7 +63,7 @@ export type IconName =
   | 'trash-2'
   | 'warning'
 
-export type IconType = React.DetailedHTMLProps<
+type IconType = React.DetailedHTMLProps<
   React.HTMLAttributes<SVGSVGElement>,
   SVGSVGElement
 > & {
diff --git a/frontend/web/components/IdentityOverridesIcon.tsx b/frontend/web/components/icons/IdentityOverridesIcon.tsx
similarity index 92%
rename from frontend/web/components/IdentityOverridesIcon.tsx
rename to frontend/web/components/icons/IdentityOverridesIcon.tsx
index d3502c475362..65093432df49 100644
--- a/frontend/web/components/IdentityOverridesIcon.tsx
+++ b/frontend/web/components/icons/IdentityOverridesIcon.tsx
@@ -1,6 +1,6 @@
 import React, { FC, FormEvent } from 'react'
-import Tooltip from './Tooltip'
-import UsersIcon from './svg/UsersIcon'
+import Tooltip from 'components/Tooltip'
+import UsersIcon from './UsersIcon'
 
 type IdentityOverridesIconType = {
   count: number | null
diff --git a/frontend/web/components/svg/NavIconSmall.tsx b/frontend/web/components/icons/NavIconSmall.tsx
similarity index 100%
rename from frontend/web/components/svg/NavIconSmall.tsx
rename to frontend/web/components/icons/NavIconSmall.tsx
diff --git a/frontend/web/components/SegmentOverridesIcon.tsx b/frontend/web/components/icons/SegmentOverridesIcon.tsx
similarity index 90%
rename from frontend/web/components/SegmentOverridesIcon.tsx
rename to frontend/web/components/icons/SegmentOverridesIcon.tsx
index 3de5cd788e21..a45634501aa3 100644
--- a/frontend/web/components/SegmentOverridesIcon.tsx
+++ b/frontend/web/components/icons/SegmentOverridesIcon.tsx
@@ -1,6 +1,6 @@
 import React, { FC, FormEvent } from 'react'
-import SegmentsIcon from './svg/SegmentsIcon'
-import Tooltip from './Tooltip'
+import SegmentsIcon from './SegmentsIcon'
+import Tooltip from '../Tooltip'
 
 type SegmentOverridesIconType = {
   count: number | null
diff --git a/frontend/web/components/svg/SegmentsIcon.tsx b/frontend/web/components/icons/SegmentsIcon.tsx
similarity index 100%
rename from frontend/web/components/svg/SegmentsIcon.tsx
rename to frontend/web/components/icons/SegmentsIcon.tsx
diff --git a/frontend/web/components/svg/UsersIcon.tsx b/frontend/web/components/icons/UsersIcon.tsx
similarity index 100%
rename from frontend/web/components/svg/UsersIcon.tsx
rename to frontend/web/components/icons/UsersIcon.tsx
diff --git a/frontend/web/components/inspect-permissions/EnvironmentPermissions.tsx b/frontend/web/components/inspect-permissions/EnvironmentPermissions.tsx
index 366f485500ad..107ed69a30eb 100644
--- a/frontend/web/components/inspect-permissions/EnvironmentPermissions.tsx
+++ b/frontend/web/components/inspect-permissions/EnvironmentPermissions.tsx
@@ -55,5 +55,4 @@ const EnvironmentPermissions = ({
   )
 }
 
-export type { EnvironmentPermissionsProps }
 export default EnvironmentPermissions
diff --git a/frontend/web/components/inspect-permissions/ExpandablePermissionsList.tsx b/frontend/web/components/inspect-permissions/ExpandablePermissionsList.tsx
index d55229efa650..4b5eaaf52241 100644
--- a/frontend/web/components/inspect-permissions/ExpandablePermissionsList.tsx
+++ b/frontend/web/components/inspect-permissions/ExpandablePermissionsList.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 
 import { PermissionLevel } from 'common/types/requests'
 
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import Permissions from './Permissions'
 
 type ExpandablePermissionsListProps<T> = {
@@ -77,5 +77,4 @@ const ExpandablePermissionsList = <T,>({
   )
 }
 
-export type { ExpandablePermissionsListProps }
 export default ExpandablePermissionsList
diff --git a/frontend/web/components/inspect-permissions/InspectPermissions.tsx b/frontend/web/components/inspect-permissions/InspectPermissions.tsx
index 4d2f174626b5..ecb8e7f31117 100644
--- a/frontend/web/components/inspect-permissions/InspectPermissions.tsx
+++ b/frontend/web/components/inspect-permissions/InspectPermissions.tsx
@@ -111,5 +111,4 @@ const InspectPermissions: FC<InspectPermissionsType> = ({
   )
 }
 
-export type { InspectPermissionsType }
 export default InspectPermissions
diff --git a/frontend/web/components/messages/ErrorMessage.tsx b/frontend/web/components/messages/ErrorMessage.tsx
index 3715350f7e28..abd5b442fc87 100644
--- a/frontend/web/components/messages/ErrorMessage.tsx
+++ b/frontend/web/components/messages/ErrorMessage.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import Button from 'components/base/forms/Button'
 import Format from 'common/utils/format'
 import Constants from 'common/constants'
diff --git a/frontend/web/components/messages/SuccessMessage.tsx b/frontend/web/components/messages/SuccessMessage.tsx
index e9e5ab9eb622..5abb62d623a5 100644
--- a/frontend/web/components/messages/SuccessMessage.tsx
+++ b/frontend/web/components/messages/SuccessMessage.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import { close as closeIcon } from 'ionicons/icons'
 import { IonIcon } from '@ionic/react'
 import Button from 'components/base/forms/Button'
diff --git a/frontend/web/components/metadata/ContentTypesMetadataFieldTable.tsx b/frontend/web/components/metadata/ContentTypesMetadataFieldTable.tsx
index 6c1a9d0debe8..aa934add11fa 100644
--- a/frontend/web/components/metadata/ContentTypesMetadataFieldTable.tsx
+++ b/frontend/web/components/metadata/ContentTypesMetadataFieldTable.tsx
@@ -3,7 +3,7 @@ import React, { FC, useState } from 'react'
 import PanelSearch from 'components/PanelSearch'
 import Button from 'components/base/forms/Button'
 import Switch from 'components/Switch'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 
 import { MetadataFieldModelField } from 'common/types/responses'
 type selectedContentType = {
diff --git a/frontend/web/components/metadata/MetadataPage.tsx b/frontend/web/components/metadata/MetadataPage.tsx
index afd607db1441..c5700e6fd119 100644
--- a/frontend/web/components/metadata/MetadataPage.tsx
+++ b/frontend/web/components/metadata/MetadataPage.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useState } from 'react'
 import Button from 'components/base/forms/Button'
 import PanelSearch from 'components/PanelSearch'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import Panel from 'components/base/grid/Panel'
 import CreateMetadataField from 'components/modals/CreateMetadataField'
 import ContentTypesValues from './ContentTypesValues'
diff --git a/frontend/web/components/metadata/MetadataTitle.tsx b/frontend/web/components/metadata/MetadataTitle.tsx
deleted file mode 100644
index 8f8c489021c9..000000000000
--- a/frontend/web/components/metadata/MetadataTitle.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import Icon from 'components/Icon'
-import React, { FC } from 'react'
-
-type MetadataContainerType = {
-  hasRequiredMetadata: boolean
-  visible: boolean
-  onVisibleChange: (v: boolean) => void
-}
-
-const MetadataContainer: FC<MetadataContainerType> = ({
-  hasRequiredMetadata,
-  onVisibleChange,
-  visible,
-}) => {
-  return (
-    <div
-      style={{ cursor: 'pointer' }}
-      onClick={() => {
-        onVisibleChange(!visible)
-      }}
-    >
-      <Row>
-        <label className='mt-1'>Custom Fields</label>
-        {!hasRequiredMetadata && (
-          <Icon name={visible ? 'chevron-down' : 'chevron-right'} />
-        )}
-      </Row>
-    </div>
-  )
-}
-
-export default MetadataContainer
diff --git a/frontend/web/components/modals/AuditLogWebhooks.tsx b/frontend/web/components/modals/AuditLogWebhooks.tsx
index e6d2c23db93a..e13467409e05 100644
--- a/frontend/web/components/modals/AuditLogWebhooks.tsx
+++ b/frontend/web/components/modals/AuditLogWebhooks.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
 import JSONReference from 'components/JSONReference'
 import Button from 'components/base/forms/Button'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import Constants from 'common/constants'
 import {
   deleteAuditLogWebhook,
diff --git a/frontend/web/components/modals/CreateGroup.tsx b/frontend/web/components/modals/CreateGroup.tsx
index 8c1c233aad3b..614d618e9e23 100644
--- a/frontend/web/components/modals/CreateGroup.tsx
+++ b/frontend/web/components/modals/CreateGroup.tsx
@@ -9,7 +9,7 @@ import {
 } from 'common/services/useGroup'
 import { components } from 'react-select'
 import { setInterceptClose } from './base/ModalDefault'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import Tooltip from 'components/Tooltip'
 import { IonIcon } from '@ionic/react'
 import { informationCircle } from 'ionicons/icons'
diff --git a/frontend/web/components/modals/CreateMetadataField.tsx b/frontend/web/components/modals/CreateMetadataField.tsx
index 44c24fd6ea43..8d23cc90acf4 100644
--- a/frontend/web/components/modals/CreateMetadataField.tsx
+++ b/frontend/web/components/modals/CreateMetadataField.tsx
@@ -61,7 +61,7 @@ type metadataFieldUpdatedSelectListType = MetadataFieldModelField & {
   new: boolean
 }
 
-export enum MetadataContentType {
+enum MetadataContentType {
   ORGANISATION = 'organisation',
   PROJECT = 'project',
 }
diff --git a/frontend/web/components/modals/CreateSAML.tsx b/frontend/web/components/modals/CreateSAML.tsx
index 2b399607146e..76760bad224a 100644
--- a/frontend/web/components/modals/CreateSAML.tsx
+++ b/frontend/web/components/modals/CreateSAML.tsx
@@ -22,7 +22,7 @@ import TabItem from 'components/navigation/TabMenu/TabItem'
 import { AttributeName } from 'common/types/responses'
 import SAMLAttributeMappingTable from 'components/SAMLAttributeMappingTable'
 import Input from 'components/base/forms/Input'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import Project from 'common/project'
 
 type CreateSAML = {
diff --git a/frontend/web/components/modals/CreateSegmentUsersTabContent.tsx b/frontend/web/components/modals/CreateSegmentUsersTabContent.tsx
index 536d3d47bb28..69b8c0e87248 100644
--- a/frontend/web/components/modals/CreateSegmentUsersTabContent.tsx
+++ b/frontend/web/components/modals/CreateSegmentUsersTabContent.tsx
@@ -5,7 +5,7 @@ import InfoMessage from 'components/InfoMessage'
 import InputGroup from 'components/base/forms/InputGroup'
 import Utils from 'common/utils/utils'
 import { Res } from 'common/types/responses'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import {
   identitySegmentService,
   useGetIdentitySegmentsQuery,
diff --git a/frontend/web/components/modals/CreateWebhook.js b/frontend/web/components/modals/CreateWebhook.js
deleted file mode 100644
index 73c79e9087dd..000000000000
--- a/frontend/web/components/modals/CreateWebhook.js
+++ /dev/null
@@ -1,190 +0,0 @@
-import React, { Component } from 'react'
-import Constants from 'common/constants'
-import ConfigProvider from 'common/providers/ConfigProvider'
-import Highlight from 'components/Highlight'
-import ErrorMessage from 'components/ErrorMessage'
-import TestWebhook from 'components/TestWebhook'
-import ViewDocs from 'components/ViewDocs'
-
-const exampleJSON = Constants.exampleWebhook
-
-const CreateWebhook = class extends Component {
-  static displayName = 'CreateWebhook'
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      enabled: this.props.isEdit ? this.props.webhook.enabled : true,
-      error: false,
-      secret: this.props.isEdit ? this.props.webhook.secret : '',
-      url: this.props.isEdit ? this.props.webhook.url : '',
-    }
-  }
-
-  save = () => {
-    const webhook = {
-      enabled: this.state.enabled,
-      secret: this.state.secret,
-      url: this.state.url,
-    }
-    if (this.props.isEdit) {
-      webhook.id = this.props.webhook.id
-    }
-    this.setState({ error: false, isSaving: true })
-    this.props
-      .save(webhook)
-      .then(() => closeModal())
-      .catch(() => {
-        this.setState({ error: true, isSaving: false })
-      })
-  }
-
-  render() {
-    const {
-      props: { isEdit },
-      state: { enabled, error, isSaving, url },
-    } = this
-    return (
-      <div className='px-4'>
-        <ProjectProvider id={this.props.projectId}>
-          {({ project }) => (
-            <form
-              className='mt-4'
-              onSubmit={(e) => {
-                e.preventDefault()
-                this.save()
-              }}
-            >
-              <Row space>
-                <Flex className='mb-4'>
-                  <div>
-                    <label>*URL (Expects a 200 response from POST)</label>
-                  </div>
-                  <Input
-                    ref={(e) => (this.input = e)}
-                    value={this.state.url}
-                    onChange={(e) =>
-                      this.setState({ url: Utils.safeParseEventValue(e) })
-                    }
-                    isValid={url && url.length}
-                    type='text'
-                    inputClassName='input--wide'
-                    placeholder='https://example.com/feature-changed/'
-                  />
-                </Flex>
-                <Row className='ms-4'>
-                  <Switch
-                    defaultChecked={enabled}
-                    checked={enabled}
-                    onChange={(enabled) => this.setState({ enabled })}
-                  />
-                  <span
-                    onClick={() => this.setState({ enabled: !enabled })}
-                    className='ms-2'
-                  >
-                    {' '}
-                    Enable
-                  </span>
-                </Row>
-              </Row>
-              <Flex className='mb-4'>
-                <div>
-                  <label>
-                    Secret (Optional) -{' '}
-                    <a
-                      className='text-info'
-                      target='_blank'
-                      href='https://docs.flagsmith.com/system-administration/webhooks#audit-log-web-hooks'
-                      rel='noreferrer'
-                    >
-                      More info
-                    </a>{' '}
-                  </label>
-                </div>
-                <Input
-                  ref={(e) => (this.input = e)}
-                  value={this.state.secret}
-                  onChange={(e) =>
-                    this.setState({ secret: Utils.safeParseEventValue(e) })
-                  }
-                  isValid={url && url.length}
-                  type='text'
-                  className='full-width'
-                  placeholder='Secret'
-                />
-              </Flex>
-              <Flex className='mb-4'>
-                {error && (
-                  <ErrorMessage error='Could not create a webhook for this url, please ensure you include http or https.' />
-                )}
-                <div className={isEdit ? 'footer' : ''}>
-                  <div className='mb-3'>
-                    <p className='text-dark fw-bold'>
-                      This will {isEdit ? 'update' : 'create'} a webhook for the
-                      environment{' '}
-                      <strong>
-                        {
-                          _.find(project.environments, {
-                            api_key: this.props.environmentId,
-                          }).name
-                        }
-                      </strong>
-                    </p>
-                  </div>
-                  <div className='justify-content-end flex-row'>
-                    <TestWebhook
-                      json={Constants.exampleWebhook}
-                      webhook={this.state.url}
-                      secret={this.state.secret}
-                    />
-                    {isEdit ? (
-                      <Button
-                        className='ml-3'
-                        data-test='update-feature-btn'
-                        id='update-feature-btn'
-                        disabled={isSaving || !url}
-                        type='submit'
-                      >
-                        {isSaving ? 'Updating' : 'Update Webhook'}
-                      </Button>
-                    ) : (
-                      <Button
-                        className='ml-3'
-                        type='submit'
-                        disabled={isSaving || !url}
-                      >
-                        {isSaving ? 'Creating' : 'Create Webhook'}
-                      </Button>
-                    )}
-                  </div>
-                </div>
-              </Flex>
-              <FormGroup className='ml-1'>
-                <div>
-                  <Row className='mb-3' space>
-                    <div className='font-weight-medium text-dark'>
-                      Example Payload
-                    </div>
-                    <ViewDocs href='https://docs.flagsmith.com/system-administration/webhooks#environment-web-hooks' />
-                  </Row>
-
-                  <Highlight
-                    forceExpanded
-                    style={{ marginBottom: 10 }}
-                    className='json'
-                  >
-                    {exampleJSON}
-                  </Highlight>
-                </div>
-              </FormGroup>
-            </form>
-          )}
-        </ProjectProvider>
-      </div>
-    )
-  }
-}
-
-CreateWebhook.propTypes = {}
-
-module.exports = ConfigProvider(CreateWebhook)
diff --git a/frontend/web/components/modals/FlagValueFooter.tsx b/frontend/web/components/modals/FlagValueFooter.tsx
index 88ef14157a36..4a0e8b167d57 100644
--- a/frontend/web/components/modals/FlagValueFooter.tsx
+++ b/frontend/web/components/modals/FlagValueFooter.tsx
@@ -10,7 +10,7 @@ import RemoveFromReleasePipelineModal from 'components/release-pipelines/RemoveF
 import ButtonDropdown from 'components/base/forms/ButtonDropdown'
 import Button from 'components/base/forms/Button'
 
-export interface FlagValueFooterProps {
+interface FlagValueFooterProps {
   is4Eyes: boolean
   isVersioned: boolean
   projectId: number
diff --git a/frontend/web/components/modals/InviteUsers.tsx b/frontend/web/components/modals/InviteUsers.tsx
index a6dbff7d354d..9d6d43d52450 100644
--- a/frontend/web/components/modals/InviteUsers.tsx
+++ b/frontend/web/components/modals/InviteUsers.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, FC } from 'react'
 import Button from 'components/base/forms/Button'
 import ConfigProvider from 'common/providers/ConfigProvider'
 import Constants from 'common/constants'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import { add } from 'ionicons/icons'
 import { IonIcon } from '@ionic/react'
 import { getPlanBasedOption } from 'components/PlanBasedAccess'
diff --git a/frontend/web/components/modals/Payment.js b/frontend/web/components/modals/Payment.js
index 0aea18421f69..ad13226a1fe9 100644
--- a/frontend/web/components/modals/Payment.js
+++ b/frontend/web/components/modals/Payment.js
@@ -4,7 +4,7 @@ import _data from 'common/data/base/_data'
 import ConfigProvider from 'common/providers/ConfigProvider'
 import Constants from 'common/constants'
 import InfoMessage from 'components/InfoMessage'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import firstpromoter from 'project/firstPromoter'
 import Utils from 'common/utils/utils'
 import { openChat } from 'common/loadChat'
diff --git a/frontend/web/components/modals/create-feature/components/FeatureNameInput.tsx b/frontend/web/components/modals/create-feature/components/FeatureNameInput.tsx
index ab329ca0b996..2a2d517dab37 100644
--- a/frontend/web/components/modals/create-feature/components/FeatureNameInput.tsx
+++ b/frontend/web/components/modals/create-feature/components/FeatureNameInput.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
 import InputGroup from 'components/base/forms/InputGroup'
 import Tooltip from 'components/Tooltip'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import InfoMessage from 'components/InfoMessage'
 import Constants from 'common/constants'
 import Utils from 'common/utils/utils'
diff --git a/frontend/web/components/modals/create-feature/tabs/CreateFeatureTab.tsx b/frontend/web/components/modals/create-feature/tabs/CreateFeatureTab.tsx
index b6b636525f7b..0361a7e89805 100644
--- a/frontend/web/components/modals/create-feature/tabs/CreateFeatureTab.tsx
+++ b/frontend/web/components/modals/create-feature/tabs/CreateFeatureTab.tsx
@@ -8,7 +8,7 @@ import { useHasPermission } from 'common/providers/Permission'
 import { ProjectPermission } from 'common/types/permissions.types'
 import Switch from 'components/Switch'
 import Tooltip from 'components/Tooltip'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import InfoMessage from 'components/InfoMessage'
 import { useGetProjectQuery } from 'common/services/useProject'
 import { useCreateTagMutation, useGetTagsQuery } from 'common/services/useTag'
diff --git a/frontend/web/components/modals/create-feature/tabs/FeatureSettingsTab.tsx b/frontend/web/components/modals/create-feature/tabs/FeatureSettingsTab.tsx
index 67fe86e2f0e0..cdb382fc6345 100644
--- a/frontend/web/components/modals/create-feature/tabs/FeatureSettingsTab.tsx
+++ b/frontend/web/components/modals/create-feature/tabs/FeatureSettingsTab.tsx
@@ -19,7 +19,7 @@ import {
 } from 'common/services/useProjectFlag'
 import Switch from 'components/Switch'
 import Tooltip from 'components/Tooltip'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import JSONReference from 'components/JSONReference'
 import ModalHR from 'components/modals/ModalHR'
 import Button from 'components/base/forms/Button'
diff --git a/frontend/web/components/modals/create-feature/tabs/FeatureValueTab.tsx b/frontend/web/components/modals/create-feature/tabs/FeatureValueTab.tsx
index 81495326dd34..9918c360c396 100644
--- a/frontend/web/components/modals/create-feature/tabs/FeatureValueTab.tsx
+++ b/frontend/web/components/modals/create-feature/tabs/FeatureValueTab.tsx
@@ -7,7 +7,7 @@ import { AddVariationButton } from 'components/mv/AddVariationButton'
 import ErrorMessage from 'components/ErrorMessage'
 import WarningMessage from 'components/WarningMessage'
 import Tooltip from 'components/Tooltip'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import Switch from 'components/Switch'
 import JSONReference from 'components/JSONReference'
 import { FlagValueFooter } from 'components/modals/FlagValueFooter'
diff --git a/frontend/web/components/modals/create-feature/tabs/IdentityOverridesTab.tsx b/frontend/web/components/modals/create-feature/tabs/IdentityOverridesTab.tsx
index f605a131abd6..0d03f4f69ad4 100644
--- a/frontend/web/components/modals/create-feature/tabs/IdentityOverridesTab.tsx
+++ b/frontend/web/components/modals/create-feature/tabs/IdentityOverridesTab.tsx
@@ -3,7 +3,7 @@ import Constants from 'common/constants'
 import AppActions from 'common/dispatcher/app-actions'
 import FeatureListStore from 'common/stores/feature-list-store'
 import { useGetProjectQuery } from 'common/services/useProject'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import Button from 'components/base/forms/Button'
 import InfoMessage from 'components/InfoMessage'
 import IdentitySelect from 'components/IdentitySelect'
diff --git a/frontend/web/components/modals/create-feature/tabs/SegmentOverridesTab.tsx b/frontend/web/components/modals/create-feature/tabs/SegmentOverridesTab.tsx
index 7534eb0c328b..d3474605759a 100644
--- a/frontend/web/components/modals/create-feature/tabs/SegmentOverridesTab.tsx
+++ b/frontend/web/components/modals/create-feature/tabs/SegmentOverridesTab.tsx
@@ -4,7 +4,7 @@ import { useProjectEnvironments } from 'common/hooks/useProjectEnvironments'
 import { useHasPermission } from 'common/providers/Permission'
 import SegmentOverrides from 'components/SegmentOverrides'
 import Button from 'components/base/forms/Button'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import InfoMessage from 'components/InfoMessage'
 import ErrorMessage from 'components/ErrorMessage'
 import WarningMessage from 'components/WarningMessage'
diff --git a/frontend/web/components/modals/payment/PricingFeaturesList.tsx b/frontend/web/components/modals/payment/PricingFeaturesList.tsx
index c2a223f2075a..e151eed522d1 100644
--- a/frontend/web/components/modals/payment/PricingFeaturesList.tsx
+++ b/frontend/web/components/modals/payment/PricingFeaturesList.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import { PricingFeature } from './types'
 
 export type PricingFeaturesListProps = {
diff --git a/frontend/web/components/modals/payment/PricingPanel.tsx b/frontend/web/components/modals/payment/PricingPanel.tsx
index 4e409b585b5c..8e8da888030f 100644
--- a/frontend/web/components/modals/payment/PricingPanel.tsx
+++ b/frontend/web/components/modals/payment/PricingPanel.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react'
 import classNames from 'classnames'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import Button from 'components/base/forms/Button'
 import { PricingFeaturesList } from './PricingFeaturesList'
 import { PaymentButton } from './PaymentButton'
diff --git a/frontend/web/components/mv/VariationValueInput.tsx b/frontend/web/components/mv/VariationValueInput.tsx
index ee883b292bbf..4da58c6b96b8 100644
--- a/frontend/web/components/mv/VariationValueInput.tsx
+++ b/frontend/web/components/mv/VariationValueInput.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import ValueEditor from 'components/ValueEditor'
 import Constants from 'common/constants'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import InputGroup from 'components/base/forms/InputGroup'
 import Utils from 'common/utils/utils'
 import shallowEqual from 'fbjs/lib/shallowEqual'
diff --git a/frontend/web/components/navigation/AccountDropdown.tsx b/frontend/web/components/navigation/AccountDropdown.tsx
index bbc335a7ad97..cec3ef2325fd 100644
--- a/frontend/web/components/navigation/AccountDropdown.tsx
+++ b/frontend/web/components/navigation/AccountDropdown.tsx
@@ -1,5 +1,5 @@
 import React, { useLayoutEffect, useRef, useState } from 'react'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import classNames from 'classnames'
 import useOutsideClick from 'common/useOutsideClick'
 import { createPortal } from 'react-dom'
diff --git a/frontend/web/components/navigation/Nav.tsx b/frontend/web/components/navigation/Nav.tsx
index 44802bcc2f52..c34ad048577d 100644
--- a/frontend/web/components/navigation/Nav.tsx
+++ b/frontend/web/components/navigation/Nav.tsx
@@ -1,7 +1,7 @@
 import React, { FC, ReactNode, useEffect, useState } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
 import AccountStore from 'common/stores/account-store'
-import HomeAside from './EnvironmentAside'
+import EnvironmentAside from './EnvironmentAside'
 import { Project as ProjectType } from 'common/types/responses'
 import { AsyncStorage } from 'polyfill-react-native'
 import ProjectNavbar from './navbars/ProjectNavbar'
@@ -99,7 +99,7 @@ const Nav: FC<NavType> = ({
             <div className='d-block d-md-none'>{header}</div>
             <div className='d-md-flex'>
               <div>
-                <HomeAside
+                <EnvironmentAside
                   history={history}
                   environmentId={environmentId}
                   projectId={projectId}
diff --git a/frontend/web/components/navigation/SidebarLink.tsx b/frontend/web/components/navigation/SidebarLink.tsx
index 57f56a41da5f..3a01d2e30ab0 100644
--- a/frontend/web/components/navigation/SidebarLink.tsx
+++ b/frontend/web/components/navigation/SidebarLink.tsx
@@ -1,7 +1,7 @@
 import React, { FC, ReactNode } from 'react'
 import { NavLink, NavLinkProps } from 'react-router-dom'
 import classNames from 'classnames'
-import Icon, { IconName } from 'components/Icon'
+import Icon, { IconName } from 'components/icons/Icon'
 
 type SidebarLinkType = Partial<NavLinkProps> & {
   icon?: IconName
diff --git a/frontend/web/components/navigation/navbars/OrganisationNavbar.tsx b/frontend/web/components/navigation/navbars/OrganisationNavbar.tsx
index 7b9ab836d84f..2ba0d7a92f4f 100644
--- a/frontend/web/components/navigation/navbars/OrganisationNavbar.tsx
+++ b/frontend/web/components/navigation/navbars/OrganisationNavbar.tsx
@@ -2,10 +2,10 @@ import React, { FC } from 'react'
 import NavSubLink from 'components/navigation/NavSubLink'
 import { apps, statsChart } from 'ionicons/icons'
 import Utils from 'common/utils/utils'
-import UsersIcon from 'components/svg/UsersIcon'
+import UsersIcon from 'components/icons/UsersIcon'
 import AccountStore from 'common/stores/account-store'
 import Project from 'common/project'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import OverflowNav from 'components/navigation/OverflowNav'
 
 type OrganisationNavType = {}
diff --git a/frontend/web/components/navigation/navbars/ProjectNavbar.tsx b/frontend/web/components/navigation/navbars/ProjectNavbar.tsx
index e2666ff3355a..3c66eb25e0cd 100644
--- a/frontend/web/components/navigation/navbars/ProjectNavbar.tsx
+++ b/frontend/web/components/navigation/navbars/ProjectNavbar.tsx
@@ -1,10 +1,10 @@
 import React, { FC } from 'react'
 import NavSubLink from 'components/navigation/NavSubLink'
 import { barChart, gitBranch, gitCompare } from 'ionicons/icons'
-import SegmentsIcon from 'components/svg/SegmentsIcon'
+import SegmentsIcon from 'components/icons/SegmentsIcon'
 import Permission, { useHasPermission } from 'common/providers/Permission'
-import AuditLogIcon from 'components/svg/AuditLogIcon'
-import Icon from 'components/Icon'
+import AuditLogIcon from 'components/icons/AuditLogIcon'
+import Icon from 'components/icons/Icon'
 import Utils from 'common/utils/utils'
 import OverflowNav from 'components/navigation/OverflowNav'
 import ProjectChangeRequestsLink from 'components/ProjectChangeRequestsLink'
diff --git a/frontend/web/components/navigation/navbars/TopNavbar.tsx b/frontend/web/components/navigation/navbars/TopNavbar.tsx
index 1e312dd2ecc7..8eb7f5b2c147 100644
--- a/frontend/web/components/navigation/navbars/TopNavbar.tsx
+++ b/frontend/web/components/navigation/navbars/TopNavbar.tsx
@@ -3,7 +3,7 @@ import SelectOrgAndProject from 'components/navigation/SelectOrgAndProject'
 import GithubStar from 'components/GithubStar'
 import Utils from 'common/utils/utils'
 import { NavLink } from 'react-router-dom'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import Headway from 'components/Headway'
 import { Project } from 'common/types/responses'
 import AccountDropdown from 'components/navigation/AccountDropdown'
diff --git a/frontend/web/components/onboarding/GettingStartedItem.tsx b/frontend/web/components/onboarding/GettingStartedItem.tsx
index 4ee9be83207d..84fb3bc34ada 100644
--- a/frontend/web/components/onboarding/GettingStartedItem.tsx
+++ b/frontend/web/components/onboarding/GettingStartedItem.tsx
@@ -3,7 +3,7 @@ import { useGetProfileQuery } from 'common/services/useProfile'
 import { useUpdateOnboardingMutation } from 'common/services/useOnboarding'
 import API from 'project/api'
 import classNames from 'classnames'
-import Icon, { IconName } from 'components/Icon'
+import Icon, { IconName } from 'components/icons/Icon'
 import Tooltip from 'components/Tooltip'
 import { Link } from 'react-router-dom'
 
diff --git a/frontend/web/components/onboarding/OnboardingStep.tsx b/frontend/web/components/onboarding/OnboardingStep.tsx
index e4c97f4bedea..a4c24c86eaa1 100644
--- a/frontend/web/components/onboarding/OnboardingStep.tsx
+++ b/frontend/web/components/onboarding/OnboardingStep.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react'
 import Card from 'components/Card'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import classNames from 'classnames'
 
 type StepProps = {
diff --git a/frontend/web/components/organisation-settings/usage/OrganisationUsageMetrics.container.tsx b/frontend/web/components/organisation-settings/usage/OrganisationUsageMetrics.container.tsx
index 4b8a25d5cebc..d2049d9cc695 100644
--- a/frontend/web/components/organisation-settings/usage/OrganisationUsageMetrics.container.tsx
+++ b/frontend/web/components/organisation-settings/usage/OrganisationUsageMetrics.container.tsx
@@ -3,7 +3,7 @@ import { Res } from 'common/types/responses'
 import SingleSDKLabelsChart from './components/SingleSDKLabelsChart'
 import { MultiSelect } from 'components/base/select/multi-select'
 
-export interface OrganisationUsageMetricsProps {
+interface OrganisationUsageMetricsProps {
   data?: Res['organisationUsage']
   selectedMetrics: string[]
 }
diff --git a/frontend/web/components/organisation-settings/usage/components/OrganisationUsageSideBar.tsx b/frontend/web/components/organisation-settings/usage/components/OrganisationUsageSideBar.tsx
index 7f33b8dc9aaf..3f530938301f 100644
--- a/frontend/web/components/organisation-settings/usage/components/OrganisationUsageSideBar.tsx
+++ b/frontend/web/components/organisation-settings/usage/components/OrganisationUsageSideBar.tsx
@@ -1,4 +1,4 @@
-import { IconName } from 'components/Icon'
+import { IconName } from 'components/icons/Icon'
 import SidebarLink from 'components/navigation/SidebarLink'
 import { useHistory } from 'react-router-dom'
 import React from 'react'
diff --git a/frontend/web/components/organisation-settings/usage/components/UsageChartFilters.tsx b/frontend/web/components/organisation-settings/usage/components/UsageChartFilters.tsx
index a45380fb0570..832017523be0 100644
--- a/frontend/web/components/organisation-settings/usage/components/UsageChartFilters.tsx
+++ b/frontend/web/components/organisation-settings/usage/components/UsageChartFilters.tsx
@@ -3,7 +3,7 @@ import ProjectFilter from 'components/ProjectFilter'
 import EnvironmentFilter from 'components/EnvironmentFilter'
 import { billingPeriods, freePeriods, Req } from 'common/types/requests'
 
-export interface UsageChartFiltersProps {
+interface UsageChartFiltersProps {
   organisationId: number
   project: string | undefined
   setProject: (project: string | undefined) => void
diff --git a/frontend/web/components/organisation-settings/usage/components/UsageChartTotals.tsx b/frontend/web/components/organisation-settings/usage/components/UsageChartTotals.tsx
index e29a9d6f90c1..a31e1a816f68 100644
--- a/frontend/web/components/organisation-settings/usage/components/UsageChartTotals.tsx
+++ b/frontend/web/components/organisation-settings/usage/components/UsageChartTotals.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react'
 import { Res } from 'common/types/responses'
-import { IconName } from 'components/Icon'
+import { IconName } from 'components/icons/Icon'
 import StatItem from 'components/StatItem'
 
 type TotalItem = {
@@ -11,7 +11,7 @@ type TotalItem = {
   value: number
 }
 
-export interface UsageChartTotalsProps {
+interface UsageChartTotalsProps {
   data: Res['organisationUsage'] | undefined
   selection: string[]
   updateSelection: (key: string) => void
diff --git a/frontend/web/components/pages/AccountSettingsPage.js b/frontend/web/components/pages/AccountSettingsPage.js
index 2a8fbc04e690..0cbe6c8cd76a 100644
--- a/frontend/web/components/pages/AccountSettingsPage.js
+++ b/frontend/web/components/pages/AccountSettingsPage.js
@@ -13,7 +13,7 @@ import { updateAccount } from 'common/services/useAccount'
 import { getStore } from 'common/store'
 import ChangeEmailAddress from 'components/modals/ChangeEmailAddress'
 import ConfirmDeleteAccount from 'components/modals/ConfirmDeleteAccount'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import PageTitle from 'components/PageTitle'
 import { withRouter } from 'react-router-dom'
 import InfoMessage from 'components/InfoMessage'
diff --git a/frontend/web/components/pages/ComingSoonPage.js b/frontend/web/components/pages/ComingSoonPage.js
deleted file mode 100644
index e4c9a0c835f5..000000000000
--- a/frontend/web/components/pages/ComingSoonPage.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, { Component } from 'react'
-import Constants from 'common/constants'
-
-const ComingSoon = class extends Component {
-  static displayName = 'ComingSoon'
-
-  componentDidMount() {
-    API.trackPage(Constants.pages.COMING_SOON)
-  }
-
-  render() {
-    return (
-      <div className='app-container container'>
-        <h3>Coming Soon</h3>
-      </div>
-    )
-  }
-}
-
-ComingSoon.propTypes = {}
-
-module.exports = ComingSoon
diff --git a/frontend/web/components/pages/ConfirmEmailPage.js b/frontend/web/components/pages/ConfirmEmailPage.js
deleted file mode 100644
index 5bd0f103765e..000000000000
--- a/frontend/web/components/pages/ConfirmEmailPage.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React, { Component } from 'react'
-import Constants from 'common/constants'
-import { withRouter } from 'react-router-dom'
-const InvitePage = class extends Component {
-  static displayName = 'InvitePage'
-
-  constructor(props, context) {
-    super(props, context)
-    this.state = {}
-    AppActions.acceptInvite(this.props.match.params.id)
-  }
-
-  componentDidMount = () => {
-    API.trackPage(Constants.pages.INVITE)
-  }
-
-  onSave = (id) => {
-    AppActions.selectOrganisation(id)
-    this.props.history.replace(Utils.getOrganisationHomePage(id))
-  }
-
-  render() {
-    return (
-      <div className='app-container'>
-        <AccountProvider onSave={this.onSave}>
-          {({ error }) => (
-            <div className='centered-container'>
-              <div>
-                {error ? (
-                  <div>
-                    <h3 className='pt-5'>Oops</h3>
-                    <p>
-                      We could not validate your invite, please check the invite
-                      URL and email address you have entered is correct.
-                    </p>
-                  </div>
-                ) : (
-                  <Loader />
-                )}
-              </div>
-            </div>
-          )}
-        </AccountProvider>
-      </div>
-    )
-  }
-}
-
-InvitePage.propTypes = {}
-
-module.exports = withRouter(InvitePage)
diff --git a/frontend/web/components/pages/EnvironmentSettingsPage.tsx b/frontend/web/components/pages/EnvironmentSettingsPage.tsx
index c9a03dd9b1d7..7447a977b95a 100644
--- a/frontend/web/components/pages/EnvironmentSettingsPage.tsx
+++ b/frontend/web/components/pages/EnvironmentSettingsPage.tsx
@@ -12,7 +12,7 @@ import JSONReference from 'components/JSONReference'
 import ColourSelect from 'components/tags/ColourSelect'
 import Constants from 'common/constants'
 import Switch from 'components/Switch'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import _ from 'lodash'
 import PageTitle from 'components/PageTitle'
 import { getStore } from 'common/store'
diff --git a/frontend/web/components/pages/FlagEnvironmentsPage.tsx b/frontend/web/components/pages/FlagEnvironmentsPage.tsx
index 70045e030443..53585d8f5d76 100644
--- a/frontend/web/components/pages/FlagEnvironmentsPage.tsx
+++ b/frontend/web/components/pages/FlagEnvironmentsPage.tsx
@@ -6,7 +6,7 @@ import { useGetEnvironmentsQuery } from 'common/services/useEnvironment'
 import { useGetFeatureStatesQuery } from 'common/services/useFeatureState'
 import { useGetProjectQuery } from 'common/services/useProject'
 import Panel from 'components/base/grid/Panel'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import TagValues from 'components/tags/TagValues'
 import Switch from 'components/Switch'
 import Button from 'components/base/forms/Button'
diff --git a/frontend/web/components/pages/GettingStartedPage.tsx b/frontend/web/components/pages/GettingStartedPage.tsx
index 18716def94a8..afab6c787be8 100644
--- a/frontend/web/components/pages/GettingStartedPage.tsx
+++ b/frontend/web/components/pages/GettingStartedPage.tsx
@@ -4,7 +4,7 @@ import Button from 'components/base/forms/Button'
 import loadChat, { openChat } from 'common/loadChat'
 import Utils from 'common/utils/utils'
 import ConfigProvider from 'common/providers/ConfigProvider'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import { useGetProjectsQuery } from 'common/services/useProject'
 import AccountStore from 'common/stores/account-store'
 import { useGetProjectFlagsQuery } from 'common/services/useProjectFlag'
diff --git a/frontend/web/components/pages/GitHubSetupPage.tsx b/frontend/web/components/pages/GitHubSetupPage.tsx
index 78d11e888e16..41ed9d7c010c 100644
--- a/frontend/web/components/pages/GitHubSetupPage.tsx
+++ b/frontend/web/components/pages/GitHubSetupPage.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useState, useEffect } from 'react'
 import OrganisationSelect from 'components/OrganisationSelect'
 import Input from 'components/base/forms/Input'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import InputGroup from 'components/base/forms/InputGroup'
 import ProjectFilter from 'components/ProjectFilter'
 import Utils from 'common/utils/utils'
diff --git a/frontend/web/components/pages/HomeAside.tsx b/frontend/web/components/pages/HomeAside.tsx
deleted file mode 100644
index e69de29bb2d1..000000000000
diff --git a/frontend/web/components/pages/HomePage.tsx b/frontend/web/components/pages/HomePage.tsx
index 2a6535f638df..5f40784a8bea 100644
--- a/frontend/web/components/pages/HomePage.tsx
+++ b/frontend/web/components/pages/HomePage.tsx
@@ -3,7 +3,7 @@ import { useHistory, useLocation, withRouter } from 'react-router-dom'
 import { GoogleOAuthProvider } from '@react-oauth/google'
 import ForgotPasswordModal from 'components/modals/ForgotPasswordModal'
 import Card from 'components/Card'
-import NavIconSmall from 'components/svg/NavIconSmall'
+import NavIconSmall from 'components/icons/NavIconSmall'
 import ConfigProvider from 'common/providers/ConfigProvider'
 import Constants from 'common/constants'
 import ErrorMessage from 'components/ErrorMessage'
diff --git a/frontend/web/components/pages/IdentitiesPage.tsx b/frontend/web/components/pages/IdentitiesPage.tsx
index 94cf22fa1d45..f0675a80236e 100644
--- a/frontend/web/components/pages/IdentitiesPage.tsx
+++ b/frontend/web/components/pages/IdentitiesPage.tsx
@@ -15,7 +15,7 @@ import PanelSearch from 'components/PanelSearch'
 import Button from 'components/base/forms/Button'
 import JSONReference from 'components/JSONReference'
 import Utils from 'common/utils/utils'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import PageTitle from 'components/PageTitle'
 import IdentifierString from 'components/IdentifierString'
 import CodeHelp from 'components/CodeHelp'
diff --git a/frontend/web/components/pages/OAuthAuthorizePage.tsx b/frontend/web/components/pages/OAuthAuthorizePage.tsx
index 59c6454f7df7..b8b76642a807 100644
--- a/frontend/web/components/pages/OAuthAuthorizePage.tsx
+++ b/frontend/web/components/pages/OAuthAuthorizePage.tsx
@@ -5,7 +5,7 @@ import {
   useValidateOAuthAuthorizeQuery,
 } from 'common/services/useOAuthAuthorize'
 import Utils from 'common/utils/utils'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import Logo from 'components/Logo'
 
 // Frontend-maintained scope descriptions. The backend returns `mcp` as an
diff --git a/frontend/web/components/pages/OrganisationsPage.tsx b/frontend/web/components/pages/OrganisationsPage.tsx
index 891320762076..a4fbf1b282f4 100644
--- a/frontend/web/components/pages/OrganisationsPage.tsx
+++ b/frontend/web/components/pages/OrganisationsPage.tsx
@@ -5,7 +5,7 @@ import CreateOrganisationModal from 'components/modals/CreateOrganisation'
 import { Organisation, User } from 'common/types/responses'
 import { SortOrder } from 'common/types/requests'
 import Utils from 'common/utils/utils'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import PanelSearch from 'components/PanelSearch'
 import AppActions from 'common/dispatcher/app-actions'
 import { useHistory } from 'react-router-dom'
diff --git a/frontend/web/components/pages/ReleaseManagerPage.tsx b/frontend/web/components/pages/ReleaseManagerPage.tsx
index 485b2d966bcd..b99cd9124ce8 100644
--- a/frontend/web/components/pages/ReleaseManagerPage.tsx
+++ b/frontend/web/components/pages/ReleaseManagerPage.tsx
@@ -3,7 +3,7 @@ import PageTitle from 'components/PageTitle'
 import InputGroup from 'components/base/forms/InputGroup'
 import { useRouteContext } from 'components/providers/RouteContext'
 import { useGetProjectsQuery } from 'common/services/useProject'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import TagValues from 'components/tags/TagValues'
 import { Link, useHistory, useLocation } from 'react-router-dom'
 import Panel from 'components/base/grid/Panel'
diff --git a/frontend/web/components/pages/ScheduledChangesPage.tsx b/frontend/web/components/pages/ScheduledChangesPage.tsx
index a789f354af1a..9a4ea1a2c9a2 100644
--- a/frontend/web/components/pages/ScheduledChangesPage.tsx
+++ b/frontend/web/components/pages/ScheduledChangesPage.tsx
@@ -15,7 +15,7 @@ import PlanBasedBanner, {
 import PanelSearch from 'components/PanelSearch'
 import EmptyState from 'components/EmptyState'
 import JSONReference from 'components/JSONReference'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import getUserDisplayName from 'common/utils/getUserDisplayName'
 
 type ScheduledChangesPageType = {
diff --git a/frontend/web/components/pages/SegmentPage.tsx b/frontend/web/components/pages/SegmentPage.tsx
index a816f0f5b161..235b3a4569c9 100644
--- a/frontend/web/components/pages/SegmentPage.tsx
+++ b/frontend/web/components/pages/SegmentPage.tsx
@@ -8,7 +8,7 @@ import ChangeRequestStore from 'common/stores/change-requests-store'
 import Breadcrumb from 'components/Breadcrumb'
 import Button from 'components/base/forms/Button'
 import { useHasPermission } from 'common/providers/Permission'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import { handleRemoveSegment } from 'components/modals/ConfirmRemoveSegment'
 import SegmentSelect from 'components/SegmentSelect'
 import Utils from 'common/utils/utils'
diff --git a/frontend/web/components/pages/UsersAndPermissionsPage.tsx b/frontend/web/components/pages/UsersAndPermissionsPage.tsx
index f5b46206edbb..773238ce349a 100644
--- a/frontend/web/components/pages/UsersAndPermissionsPage.tsx
+++ b/frontend/web/components/pages/UsersAndPermissionsPage.tsx
@@ -30,7 +30,7 @@ import ErrorMessage from 'components/ErrorMessage'
 import PanelSearch from 'components/PanelSearch'
 import moment from 'moment'
 import sortBy from 'lodash/sortBy'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import RolesTable from 'components/RolesTable'
 import PlanBasedBanner, { getPlanBasedOption } from 'components/PlanBasedAccess'
 import { useHasPermission } from 'common/providers/Permission'
diff --git a/frontend/web/components/pages/admin-dashboard/components/IntegrationAdoptionTable.tsx b/frontend/web/components/pages/admin-dashboard/components/IntegrationAdoptionTable.tsx
index 5db8af2e4e6a..886e53b625eb 100644
--- a/frontend/web/components/pages/admin-dashboard/components/IntegrationAdoptionTable.tsx
+++ b/frontend/web/components/pages/admin-dashboard/components/IntegrationAdoptionTable.tsx
@@ -6,7 +6,7 @@ import {
 } from 'common/types/responses'
 import { SortOrder } from 'common/types/requests'
 import PanelSearch from 'components/PanelSearch'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import Utils from 'common/utils/utils'
 
 type IntegrationScope = 'environment' | 'organisation' | 'project'
diff --git a/frontend/web/components/pages/admin-dashboard/components/OrganisationUsageTable.tsx b/frontend/web/components/pages/admin-dashboard/components/OrganisationUsageTable.tsx
index 72c9b5264d7f..a22199d11a6a 100644
--- a/frontend/web/components/pages/admin-dashboard/components/OrganisationUsageTable.tsx
+++ b/frontend/web/components/pages/admin-dashboard/components/OrganisationUsageTable.tsx
@@ -3,7 +3,7 @@ import { OrganisationMetrics, ProjectMetrics } from 'common/types/responses'
 import { SortOrder } from 'common/types/requests'
 import Utils from 'common/utils/utils'
 import PanelSearch from 'components/PanelSearch'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 
 interface OrganisationUsageTableProps {
   days: 30 | 60 | 90
diff --git a/frontend/web/components/pages/admin-dashboard/components/ReleasePipelineStatsTable.tsx b/frontend/web/components/pages/admin-dashboard/components/ReleasePipelineStatsTable.tsx
index 0a7741bcb0de..6bb0df4e1b50 100644
--- a/frontend/web/components/pages/admin-dashboard/components/ReleasePipelineStatsTable.tsx
+++ b/frontend/web/components/pages/admin-dashboard/components/ReleasePipelineStatsTable.tsx
@@ -6,7 +6,7 @@ import {
 } from 'common/types/responses'
 import { SortOrder } from 'common/types/requests'
 import PanelSearch from 'components/PanelSearch'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 
 interface ReleasePipelineStatsTableProps {
   stats: ReleasePipelineOverview[]
diff --git a/frontend/web/components/pages/feature-lifecycle/FeatureLifecyclePage.tsx b/frontend/web/components/pages/feature-lifecycle/FeatureLifecyclePage.tsx
index 78c118d96338..816dfd168b31 100644
--- a/frontend/web/components/pages/feature-lifecycle/FeatureLifecyclePage.tsx
+++ b/frontend/web/components/pages/feature-lifecycle/FeatureLifecyclePage.tsx
@@ -5,7 +5,7 @@ import { usePageTracking } from 'common/hooks/usePageTracking'
 import { useProjectEnvironments } from 'common/hooks/useProjectEnvironments'
 import { hasActiveFilters } from 'common/utils/featureFilterParams'
 import PageTitle from 'components/PageTitle'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import Button from 'components/base/forms/Button'
 import EnvironmentSelect from 'components/EnvironmentTagSelect'
 import CreateFlagModal from 'components/modals/create-feature'
diff --git a/frontend/web/components/pages/feature-lifecycle/components/LifecycleSidebar.tsx b/frontend/web/components/pages/feature-lifecycle/components/LifecycleSidebar.tsx
index b66b5f08db56..44e029a11f5c 100644
--- a/frontend/web/components/pages/feature-lifecycle/components/LifecycleSidebar.tsx
+++ b/frontend/web/components/pages/feature-lifecycle/components/LifecycleSidebar.tsx
@@ -7,7 +7,7 @@ import type {
   LifecycleCounts,
 } from 'components/pages/feature-lifecycle/types'
 import Button from 'components/base/forms/Button'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 
 type LifecycleSidebarProps = {
   projectId: number
diff --git a/frontend/web/components/pages/feature-lifecycle/constants.tsx b/frontend/web/components/pages/feature-lifecycle/constants.tsx
index 8e493eea702a..713ff99f590a 100644
--- a/frontend/web/components/pages/feature-lifecycle/constants.tsx
+++ b/frontend/web/components/pages/feature-lifecycle/constants.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import type { IconName } from 'components/Icon'
+import type { IconName } from 'components/icons/Icon'
 import type { FilterState } from 'common/types/featureFilters'
 import type { Section } from './types'
 import { SortOrder } from 'common/types/requests'
diff --git a/frontend/web/components/pages/feature-lifecycle/types.ts b/frontend/web/components/pages/feature-lifecycle/types.ts
index c04c53ee5f19..45a3e6932ee0 100644
--- a/frontend/web/components/pages/feature-lifecycle/types.ts
+++ b/frontend/web/components/pages/feature-lifecycle/types.ts
@@ -18,13 +18,13 @@ export type Pagination = {
 
 export type LifecycleCounts = Partial<Record<Section, number>>
 
-export type EvaluationResult = {
+type EvaluationResult = {
   featureId: number
   environmentId: string
   hasEvaluations: boolean
 }
 
-export type LifecycleData = {
+type LifecycleData = {
   newFlags: ProjectFlag[]
   liveFlags: ProjectFlag[]
   permanentFlags: ProjectFlag[]
diff --git a/frontend/web/components/pages/features/types.ts b/frontend/web/components/pages/features/types.ts
index 50dbd4554a9a..1716e8860212 100644
--- a/frontend/web/components/pages/features/types.ts
+++ b/frontend/web/components/pages/features/types.ts
@@ -8,4 +8,4 @@ export type Pagination = {
   previous: string | null
 }
 
-export type EnvironmentFlagsMap = Record<number, FeatureState>
+type EnvironmentFlagsMap = Record<number, FeatureState>
diff --git a/frontend/web/components/pages/organisation-settings/tabs/BillingTab.tsx b/frontend/web/components/pages/organisation-settings/tabs/BillingTab.tsx
index 15ab35be5162..a656e4f297a8 100644
--- a/frontend/web/components/pages/organisation-settings/tabs/BillingTab.tsx
+++ b/frontend/web/components/pages/organisation-settings/tabs/BillingTab.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Organisation } from 'common/types/responses'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import Utils from 'common/utils/utils'
 import PaymentLegacy from 'components/modals/Payment'
 import PaymentNew from 'components/modals/payment'
diff --git a/frontend/web/components/pages/project-settings/EnvironmentOverrideUsage.tsx b/frontend/web/components/pages/project-settings/EnvironmentOverrideUsage.tsx
index b5e71f0df303..f19402a67663 100644
--- a/frontend/web/components/pages/project-settings/EnvironmentOverrideUsage.tsx
+++ b/frontend/web/components/pages/project-settings/EnvironmentOverrideUsage.tsx
@@ -2,7 +2,7 @@ import { FC } from 'react'
 import { useGetEnvironmentQuery } from 'common/services/useEnvironment'
 import UsageBar from 'components/shared/UsageBar'
 
-export type EnvironmentOverrideUsageProps = {
+type EnvironmentOverrideUsageProps = {
   apiKey: string
   limit: number
   name: string
diff --git a/frontend/web/components/pages/project-settings/tabs/EditHealthProvider.tsx b/frontend/web/components/pages/project-settings/tabs/EditHealthProvider.tsx
index 8f61b3120187..e8917caa9a8d 100644
--- a/frontend/web/components/pages/project-settings/tabs/EditHealthProvider.tsx
+++ b/frontend/web/components/pages/project-settings/tabs/EditHealthProvider.tsx
@@ -3,7 +3,7 @@ import { HealthProvider } from 'common/types/responses'
 import PanelSearch from 'components/PanelSearch'
 import Button from 'components/base/forms/Button'
 
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 
 import Utils from 'common/utils/utils'
 import {
diff --git a/frontend/web/components/pages/project-settings/tabs/general-tab/sections/EdgeAPIMigration.tsx b/frontend/web/components/pages/project-settings/tabs/general-tab/sections/EdgeAPIMigration.tsx
index 6fe288573a45..7d2e852e76d7 100644
--- a/frontend/web/components/pages/project-settings/tabs/general-tab/sections/EdgeAPIMigration.tsx
+++ b/frontend/web/components/pages/project-settings/tabs/general-tab/sections/EdgeAPIMigration.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import { Project } from 'common/types/responses'
 import { useMigrateProjectMutation } from 'common/services/useProject'
 import Utils from 'common/utils/utils'
diff --git a/frontend/web/components/pages/project-settings/tabs/general-tab/sections/ProjectInformation.tsx b/frontend/web/components/pages/project-settings/tabs/general-tab/sections/ProjectInformation.tsx
index 4b89559032de..cfa7b18d780b 100644
--- a/frontend/web/components/pages/project-settings/tabs/general-tab/sections/ProjectInformation.tsx
+++ b/frontend/web/components/pages/project-settings/tabs/general-tab/sections/ProjectInformation.tsx
@@ -1,6 +1,6 @@
 import React, { FormEvent, useState } from 'react'
 import classNames from 'classnames'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import Tooltip from 'components/Tooltip'
 import PlanBasedBanner from 'components/PlanBasedAccess'
 import Utils from 'common/utils/utils'
diff --git a/frontend/web/components/pages/sdk-keys/SDKEnvironmentKeysSettings.tsx b/frontend/web/components/pages/sdk-keys/SDKEnvironmentKeysSettings.tsx
index c128ac1aafb9..604857c6b1ef 100644
--- a/frontend/web/components/pages/sdk-keys/SDKEnvironmentKeysSettings.tsx
+++ b/frontend/web/components/pages/sdk-keys/SDKEnvironmentKeysSettings.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
 import Button from 'components/base/forms/Button'
 import Input from 'components/base/forms/Input'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import PageTitle from 'components/PageTitle'
 import Utils from 'common/utils/utils'
 import { useRouteMatch } from 'react-router-dom'
diff --git a/frontend/web/components/pages/sdk-keys/components/ServerSideKeyRow.tsx b/frontend/web/components/pages/sdk-keys/components/ServerSideKeyRow.tsx
index 275ce56d06d6..4739326732a1 100644
--- a/frontend/web/components/pages/sdk-keys/components/ServerSideKeyRow.tsx
+++ b/frontend/web/components/pages/sdk-keys/components/ServerSideKeyRow.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
 import cn from 'classnames'
 import Button from 'components/base/forms/Button'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import Token from 'components/Token'
 import Utils from 'common/utils/utils'
 
diff --git a/frontend/web/components/release-pipelines/AddToReleasePipelineModal.tsx b/frontend/web/components/release-pipelines/AddToReleasePipelineModal.tsx
index ef863ce3748e..debf86820033 100644
--- a/frontend/web/components/release-pipelines/AddToReleasePipelineModal.tsx
+++ b/frontend/web/components/release-pipelines/AddToReleasePipelineModal.tsx
@@ -104,5 +104,4 @@ const AddToReleasePipelineModal = ({
   )
 }
 
-export type { AddToReleasePipelineModalProps }
 export default AddToReleasePipelineModal
diff --git a/frontend/web/components/release-pipelines/ChangeReleasePipelineStatusModal.tsx b/frontend/web/components/release-pipelines/ChangeReleasePipelineStatusModal.tsx
index 69aee240de44..6d373a7ca1dd 100644
--- a/frontend/web/components/release-pipelines/ChangeReleasePipelineStatusModal.tsx
+++ b/frontend/web/components/release-pipelines/ChangeReleasePipelineStatusModal.tsx
@@ -107,5 +107,4 @@ const ChangeReleasePipelineStatusModal = ({
   )
 }
 
-export type { ChangeReleasePipelineStatusModalProps }
 export default ChangeReleasePipelineStatusModal
diff --git a/frontend/web/components/release-pipelines/CloneReleasePipelineModal.tsx b/frontend/web/components/release-pipelines/CloneReleasePipelineModal.tsx
index 1275530613c0..06d308dc2611 100644
--- a/frontend/web/components/release-pipelines/CloneReleasePipelineModal.tsx
+++ b/frontend/web/components/release-pipelines/CloneReleasePipelineModal.tsx
@@ -80,5 +80,4 @@ const CloneReleasePipelineModal = ({
   )
 }
 
-export type { CloneReleasePipelineModalProps }
 export default CloneReleasePipelineModal
diff --git a/frontend/web/components/release-pipelines/CreatePipelineStage.tsx b/frontend/web/components/release-pipelines/CreatePipelineStage.tsx
index 7ee01c93a90e..4d48f4d454a0 100644
--- a/frontend/web/components/release-pipelines/CreatePipelineStage.tsx
+++ b/frontend/web/components/release-pipelines/CreatePipelineStage.tsx
@@ -9,7 +9,7 @@ import {
   StageTriggerType,
 } from 'common/types/responses'
 import Button from 'components/base/forms/Button'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import { NEW_PIPELINE_STAGE_ACTION, TRIGGER_OPTIONS } from './constants'
 import { PipelineStageRequest, StageActionRequest } from 'common/types/requests'
 import PipelineStageActions from './PipelineStageActions'
diff --git a/frontend/web/components/release-pipelines/CreateReleasePipeline.tsx b/frontend/web/components/release-pipelines/CreateReleasePipeline.tsx
index 440957d9d890..1ce68974751d 100644
--- a/frontend/web/components/release-pipelines/CreateReleasePipeline.tsx
+++ b/frontend/web/components/release-pipelines/CreateReleasePipeline.tsx
@@ -5,7 +5,7 @@ import { Button } from 'components/base/forms/Button'
 import PageTitle from 'components/PageTitle'
 import InputGroup from 'components/base/forms/InputGroup'
 import Utils from 'common/utils/utils'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import {
   useCreateReleasePipelineMutation,
   useGetReleasePipelineQuery,
diff --git a/frontend/web/components/release-pipelines/DeleteReleasePipelineModal.tsx b/frontend/web/components/release-pipelines/DeleteReleasePipelineModal.tsx
index 5882f133be48..3ffbc57f4cf9 100644
--- a/frontend/web/components/release-pipelines/DeleteReleasePipelineModal.tsx
+++ b/frontend/web/components/release-pipelines/DeleteReleasePipelineModal.tsx
@@ -53,5 +53,4 @@ const DeleteReleasePipelineModal = ({
   )
 }
 
-export type { DeleteReleasePipelineModalProps }
 export default DeleteReleasePipelineModal
diff --git a/frontend/web/components/release-pipelines/FeaturePipelineStatus.tsx b/frontend/web/components/release-pipelines/FeaturePipelineStatus.tsx
index 65c0e0d0655d..afd77e9b239a 100644
--- a/frontend/web/components/release-pipelines/FeaturePipelineStatus.tsx
+++ b/frontend/web/components/release-pipelines/FeaturePipelineStatus.tsx
@@ -96,5 +96,4 @@ const FeaturePipelineStatus = ({
   )
 }
 
-export type { FeaturePipelineStatusProps }
 export default FeaturePipelineStatus
diff --git a/frontend/web/components/release-pipelines/ReleasePipelineDetail.tsx b/frontend/web/components/release-pipelines/ReleasePipelineDetail.tsx
index aee85f4e0172..d85927ada29d 100644
--- a/frontend/web/components/release-pipelines/ReleasePipelineDetail.tsx
+++ b/frontend/web/components/release-pipelines/ReleasePipelineDetail.tsx
@@ -5,7 +5,7 @@ import PageTitle from 'components/PageTitle'
 import { useGetReleasePipelineQuery } from 'common/services/useReleasePipelines'
 import { useParams } from 'react-router-dom'
 import { useGetEnvironmentsQuery } from 'common/services/useEnvironment'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import StageCard from './StageCard'
 import StageInfo from './StageInfo'
 import { PipelineDetailStage } from 'common/types/responses'
diff --git a/frontend/web/components/release-pipelines/ReleasePipelinesList.tsx b/frontend/web/components/release-pipelines/ReleasePipelinesList.tsx
index fe4f41df1b7d..9e49bfc9a6a9 100644
--- a/frontend/web/components/release-pipelines/ReleasePipelinesList.tsx
+++ b/frontend/web/components/release-pipelines/ReleasePipelinesList.tsx
@@ -2,7 +2,7 @@ import { useDeleteReleasePipelineMutation } from 'common/services/useReleasePipe
 import { PagedResponse, ReleasePipeline } from 'common/types/responses'
 import { useHistory } from 'react-router-dom'
 import Button from 'components/base/forms/Button'
-import Icon, { IconName } from 'components/Icon'
+import Icon, { IconName } from 'components/icons/Icon'
 import DropdownMenu from 'components/base/DropdownMenu'
 import PanelSearch from 'components/PanelSearch'
 import Tag from 'components/tags/Tag'
@@ -250,5 +250,4 @@ const ReleasePipelinesList = ({
   )
 }
 
-export type { ReleasePipelinesListProps }
 export default ReleasePipelinesList
diff --git a/frontend/web/components/release-pipelines/RemoveFromReleasePipelineModal.tsx b/frontend/web/components/release-pipelines/RemoveFromReleasePipelineModal.tsx
index 2f446377e85b..54fc82e3fab4 100644
--- a/frontend/web/components/release-pipelines/RemoveFromReleasePipelineModal.tsx
+++ b/frontend/web/components/release-pipelines/RemoveFromReleasePipelineModal.tsx
@@ -61,5 +61,4 @@ const RemoveFromReleasePipelineModal = ({
   )
 }
 
-export type { RemoveFromReleasePipelineModalProps }
 export default RemoveFromReleasePipelineModal
diff --git a/frontend/web/components/release-pipelines/SinglePipelineStageAction.tsx b/frontend/web/components/release-pipelines/SinglePipelineStageAction.tsx
index 1183b4db5295..fda7202eed55 100644
--- a/frontend/web/components/release-pipelines/SinglePipelineStageAction.tsx
+++ b/frontend/web/components/release-pipelines/SinglePipelineStageAction.tsx
@@ -2,7 +2,7 @@ import { StageActionRequest } from 'common/types/requests'
 import Utils from 'common/utils/utils'
 import InputGroup from 'components/base/forms/InputGroup'
 import { FLAG_ACTION_OPTIONS } from './constants'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import { StageActionBody, StageActionType } from 'common/types/responses'
 import PhasedRolloutAction from './PhasedRolloutAction'
 import { useMemo } from 'react'
@@ -166,5 +166,4 @@ const SinglePipelineStageAction = ({
   )
 }
 
-export type { SinglePipelineStageActionProps }
 export default SinglePipelineStageAction
diff --git a/frontend/web/components/release-pipelines/StageArrow.tsx b/frontend/web/components/release-pipelines/StageArrow.tsx
index 34f96c831aa9..9c23721d117c 100644
--- a/frontend/web/components/release-pipelines/StageArrow.tsx
+++ b/frontend/web/components/release-pipelines/StageArrow.tsx
@@ -1,5 +1,5 @@
 import Button from 'components/base/forms/Button'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 
 type StageArrowProps = {
   onAddStage?: () => void
@@ -30,5 +30,4 @@ const StageArrow = ({ onAddStage, showAddStageButton }: StageArrowProps) => {
   )
 }
 
-export type { StageArrowProps }
 export default StageArrow
diff --git a/frontend/web/components/release-pipelines/StageCard.tsx b/frontend/web/components/release-pipelines/StageCard.tsx
index eef938cb22da..7d73fec3ad50 100644
--- a/frontend/web/components/release-pipelines/StageCard.tsx
+++ b/frontend/web/components/release-pipelines/StageCard.tsx
@@ -17,5 +17,4 @@ const StageCard = ({ children }: StageCardProps) => {
   )
 }
 
-export type { StageCardProps }
 export default StageCard
diff --git a/frontend/web/components/release-pipelines/StageInfo.tsx b/frontend/web/components/release-pipelines/StageInfo.tsx
index f30d2d405e3a..4c55d0d669a7 100644
--- a/frontend/web/components/release-pipelines/StageInfo.tsx
+++ b/frontend/web/components/release-pipelines/StageInfo.tsx
@@ -84,5 +84,4 @@ const StageInfo = ({
   )
 }
 
-export type { StageInfoProps }
 export default StageInfo
diff --git a/frontend/web/components/release-pipelines/StageStatus.tsx b/frontend/web/components/release-pipelines/StageStatus.tsx
index 6404a7875b91..da86dcadbee3 100644
--- a/frontend/web/components/release-pipelines/StageStatus.tsx
+++ b/frontend/web/components/release-pipelines/StageStatus.tsx
@@ -7,12 +7,12 @@ import {
   StageTriggerType,
 } from 'common/types/responses'
 import classNames from 'classnames'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import { renderToString } from 'react-dom/server'
 
 import StageSummaryData from './StageSummaryData'
 
-export interface StageStatusProps {
+interface StageStatusProps {
   stageOrder: number
   stageName: string
   totalStages: number
diff --git a/frontend/web/components/release-pipelines/StageSummaryData.tsx b/frontend/web/components/release-pipelines/StageSummaryData.tsx
index b7b6f48f8b59..48970de5c8f6 100644
--- a/frontend/web/components/release-pipelines/StageSummaryData.tsx
+++ b/frontend/web/components/release-pipelines/StageSummaryData.tsx
@@ -7,11 +7,11 @@ import {
   StageTriggerType,
 } from 'common/types/responses'
 
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 
 import { renderActionDetail } from './FlagActionDetail'
 
-export interface StageSummaryDataProps {
+interface StageSummaryDataProps {
   stageActions?: StageAction[]
   stageTrigger?: StageTrigger
   featureInStage?: Features[number]
diff --git a/frontend/web/components/segments/Rule/components/RuleConditionRow.tsx b/frontend/web/components/segments/Rule/components/RuleConditionRow.tsx
index 58e6dad83cb2..6712bbce68e3 100644
--- a/frontend/web/components/segments/Rule/components/RuleConditionRow.tsx
+++ b/frontend/web/components/segments/Rule/components/RuleConditionRow.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import Utils from 'common/utils/utils'
 import {
   Operator,
diff --git a/frontend/web/components/segments/Rule/components/RuleConditionValueInput.tsx b/frontend/web/components/segments/Rule/components/RuleConditionValueInput.tsx
index b370e05ba217..6836e14e1fbd 100644
--- a/frontend/web/components/segments/Rule/components/RuleConditionValueInput.tsx
+++ b/frontend/web/components/segments/Rule/components/RuleConditionValueInput.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react'
 import classNames from 'classnames'
 import Input from 'components/base/forms/Input'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import Utils from 'common/utils/utils'
 
 import { getDarkMode } from 'project/darkMode'
diff --git a/frontend/web/components/segments/Rule/components/TextAreaModal.tsx b/frontend/web/components/segments/Rule/components/TextAreaModal.tsx
index f5f54af0d40e..cf9c570bcc28 100644
--- a/frontend/web/components/segments/Rule/components/TextAreaModal.tsx
+++ b/frontend/web/components/segments/Rule/components/TextAreaModal.tsx
@@ -1,7 +1,7 @@
 import React, { useState, FC } from 'react'
 import InputGroup from 'components/base/forms/InputGroup'
 import Button from 'components/base/forms/Button'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import Utils from 'common/utils/utils'
 import ModalHR from 'components/modals/ModalHR'
 import { checkWhitespaceIssues } from 'components/segments/Rule/utils'
diff --git a/frontend/web/components/segments/SegmentRow/SegmentRow.tsx b/frontend/web/components/segments/SegmentRow/SegmentRow.tsx
index 2ae50c108bc2..a965bc95ebf0 100644
--- a/frontend/web/components/segments/SegmentRow/SegmentRow.tsx
+++ b/frontend/web/components/segments/SegmentRow/SegmentRow.tsx
@@ -16,11 +16,7 @@ interface SegmentRowProps {
   projectId: string
 }
 
-export const SegmentRow: FC<SegmentRowProps> = ({
-  index,
-  projectId,
-  segment,
-}) => {
+const SegmentRow: FC<SegmentRowProps> = ({ index, projectId, segment }) => {
   const history = useHistory()
   const { description, feature, id, name } = segment
 
@@ -103,5 +99,4 @@ export const SegmentRow: FC<SegmentRowProps> = ({
   )
 }
 
-export type { SegmentRowProps }
 export default SegmentRow
diff --git a/frontend/web/components/segments/SegmentRow/components/SegmentAction.tsx b/frontend/web/components/segments/SegmentRow/components/SegmentAction.tsx
index d315d8761875..15e60d87da5d 100644
--- a/frontend/web/components/segments/SegmentRow/components/SegmentAction.tsx
+++ b/frontend/web/components/segments/SegmentRow/components/SegmentAction.tsx
@@ -1,7 +1,7 @@
 import { FC, useCallback, useLayoutEffect, useRef, useState } from 'react'
 import ActionButton from 'components/ActionButton'
 import ActionItem from 'components/shared/ActionItem'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import useOutsideClick from 'common/useOutsideClick'
 import { calculateListPosition } from 'common/utils/calculateListPosition'
 
diff --git a/frontend/web/components/shared/UsageBar.tsx b/frontend/web/components/shared/UsageBar.tsx
index 49c85ea10132..1ef6599a60f5 100644
--- a/frontend/web/components/shared/UsageBar.tsx
+++ b/frontend/web/components/shared/UsageBar.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 
-export type UsageBarProps = {
+type UsageBarProps = {
   label: string
   limit: number
   usage: number
diff --git a/frontend/web/components/svg/ArrowUpIcon.tsx b/frontend/web/components/svg/ArrowUpIcon.tsx
deleted file mode 100644
index 120fc3e5cd19..000000000000
--- a/frontend/web/components/svg/ArrowUpIcon.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react'
-
-interface ArrowUpIconProps {
-  className?: string
-  height?: string | number
-  width?: string | number
-}
-
-const ArrowUpIcon: React.FC<ArrowUpIconProps> = ({
-  className,
-  height,
-  width = '100%',
-}) => {
-  return (
-    <svg className={className} width={width} height={height} viewBox='0 0 11 7'>
-      <path
-        d='M10.888 6.399l-.49.49a.297.297 0 01-.421 0L5.495 2.416 1.012 6.89a.297.297 0 01-.42 0l-.49-.49a.297.297 0 010-.421L5.283.795a.297.297 0 01.42 0l5.184 5.183a.297.297 0 010 .42z'
-        fill='#63f'
-        fillRule='nonzero'
-      />
-    </svg>
-  )
-}
-
-export default ArrowUpIcon
diff --git a/frontend/web/components/svg/CaretDownIcon.tsx b/frontend/web/components/svg/CaretDownIcon.tsx
deleted file mode 100644
index 314514e64233..000000000000
--- a/frontend/web/components/svg/CaretDownIcon.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react'
-
-interface CaretDownIconProps {
-  className?: string
-}
-
-const CaretDownIcon: React.FC<CaretDownIconProps> = ({ className }) => {
-  return (
-    <div style={{ paddingRight: 2 }}>
-      <svg
-        style={{ marginLeft: -2 }}
-        className={className}
-        width={9}
-        height={10}
-        viewBox='0 0 9 6'
-      >
-        <path
-          d='M.6 0h7.72c.533 0 .8.645.422 1.023L4.884 4.884a.601.601 0 01-.849 0L.177 1.023A.599.599 0 01.6 0z'
-          fill='#FFF'
-          fillRule='evenodd'
-        />
-      </svg>
-    </div>
-  )
-}
-
-export default CaretDownIcon
diff --git a/frontend/web/components/svg/CaretRightIcon.tsx b/frontend/web/components/svg/CaretRightIcon.tsx
deleted file mode 100644
index 3e3df77b6bf2..000000000000
--- a/frontend/web/components/svg/CaretRightIcon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-
-interface CaretRightIconProps {
-  className?: string
-}
-
-const CaretRightIcon: React.FC<CaretRightIconProps> = ({ className }) => {
-  return (
-    <svg className={className} width={9} height={10} viewBox='0 0 9 10'>
-      <path
-        d='M.133 9.263V1.474c0-.539.732-.808 1.16-.427L5.678 4.94a.56.56 0 010 .857L1.294 9.69c-.43.381-1.161.112-1.161-.427z'
-        fill='#000'
-        fillRule='evenodd'
-      />
-    </svg>
-  )
-}
-
-export default CaretRightIcon
diff --git a/frontend/web/components/svg/DocumentationIcon.tsx b/frontend/web/components/svg/DocumentationIcon.tsx
deleted file mode 100644
index dc44d1a68f32..000000000000
--- a/frontend/web/components/svg/DocumentationIcon.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react'
-
-type DocumentationIconProps = {
-  className?: string
-  height?: string | number
-  width?: string | number
-}
-
-const DocumentationIcon: React.FC<DocumentationIconProps> = ({
-  className,
-  height,
-  width = '100%',
-}) => {
-  return (
-    <svg
-      className={className}
-      width={width}
-      height={height}
-      viewBox='0 0 16 21'
-    >
-      <path
-        d='M8.96 5.44V0h-8A.958.958 0 000 .96v18.56c0 .532.428.96.96.96H14.4c.532 0 .96-.428.96-.96V6.4H9.92a.963.963 0 01-.96-.96zm2.56 9.44c0 .264-.216.48-.48.48H4.32a.481.481 0 01-.48-.48v-.32c0-.264.216-.48.48-.48h6.72c.264 0 .48.216.48.48v.32zm0-2.56c0 .264-.216.48-.48.48H4.32a.481.481 0 01-.48-.48V12c0-.264.216-.48.48-.48h6.72c.264 0 .48.216.48.48v.32zm0-2.88v.32c0 .264-.216.48-.48.48H4.32a.481.481 0 01-.48-.48v-.32c0-.264.216-.48.48-.48h6.72c.264 0 .48.216.48.48zm3.84-4.564v.244h-5.12V0h.244c.256 0 .5.1.68.28L15.08 4.2c.18.18.28.424.28.676z'
-        fill='#63f'
-        fillRule='evenodd'
-      />
-    </svg>
-  )
-}
-
-export default DocumentationIcon
diff --git a/frontend/web/components/svg/EnvironmentSettingsIcon.tsx b/frontend/web/components/svg/EnvironmentSettingsIcon.tsx
deleted file mode 100644
index b89341e78b83..000000000000
--- a/frontend/web/components/svg/EnvironmentSettingsIcon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-
-interface EnvironmentSettingsIconProps {
-  className?: string
-}
-
-const EnvironmentSettingsIcon: React.FC<EnvironmentSettingsIconProps> = ({
-  className,
-}) => {
-  return (
-    <svg className={className} viewBox='0 0 26 21'>
-      <path
-        d='M20.524 7.64l-.328.572a.494.494 0 01-.604.216 4.42 4.42 0 01-1.284-.744.497.497 0 01-.112-.628l.328-.572a3.453 3.453 0 01-.636-1.096h-.66a.494.494 0 01-.488-.412 4.506 4.506 0 010-1.484.497.497 0 01.488-.416h.66c.144-.404.36-.776.636-1.096l-.328-.572a.492.492 0 01.112-.628c.38-.316.816-.568 1.284-.744a.494.494 0 01.604.216l.328.572c.42-.076.848-.076 1.268 0l.328-.572c.12-.212.376-.3.604-.216a4.42 4.42 0 011.284.744c.184.152.232.42.112.628l-.328.572c.276.32.492.692.636 1.096h.66c.24 0 .448.172.488.412.08.48.084.984 0 1.484a.497.497 0 01-.488.416h-.66c-.144.404-.36.776-.636 1.096l.328.572a.492.492 0 01-.112.628c-.38.316-.816.568-1.284.744a.494.494 0 01-.604-.216l-.328-.572a3.554 3.554 0 01-1.268 0zm-.42-2.352c1.54 1.184 3.296-.572 2.112-2.112-1.54-1.188-3.296.572-2.112 2.112zm-4.612 6.156l1.348.672c.404.232.58.724.42 1.164-.356.968-1.056 1.856-1.704 2.632a.956.956 0 01-1.212.212l-1.164-.672a6.871 6.871 0 01-2.196 1.268v1.344a.957.957 0 01-.788.944 8.995 8.995 0 01-3.036 0 .96.96 0 01-.8-.944V16.72a6.946 6.946 0 01-2.196-1.268L3 16.12a.957.957 0 01-1.212-.212C1.14 15.132.456 14.244.1 13.28a.965.965 0 01.42-1.164l1.332-.672a6.93 6.93 0 010-2.536L.52 8.232a.954.954 0 01-.42-1.16c.356-.968 1.04-1.856 1.688-2.632A.956.956 0 013 4.228l1.164.672A6.871 6.871 0 016.36 3.632V2.284c0-.46.328-.86.784-.94a9.122 9.122 0 013.04-.004c.46.08.8.476.8.944v1.344c.812.288 1.556.72 2.196 1.268l1.164-.672a.957.957 0 011.212.212c.648.776 1.328 1.664 1.684 2.632a.956.956 0 01-.4 1.164l-1.348.672c.156.84.156 1.7 0 2.54zm-4.704.844C13.156 9.208 9.64 5.692 6.56 8.06c-2.368 3.08 1.148 6.596 4.228 4.228zm9.736 7.308l-.328.572a.494.494 0 01-.604.216 4.42 4.42 0 01-1.284-.744.497.497 0 01-.112-.628l.328-.572a3.453 3.453 0 01-.636-1.096h-.66a.494.494 0 01-.488-.412 4.506 4.506 0 010-1.484.497.497 0 01.488-.416h.66c.144-.404.36-.776.636-1.096l-.328-.572a.492.492 0 01.112-.628c.38-.316.816-.568 1.284-.744a.494.494 0 01.604.216l.328.572c.42-.076.848-.076 1.268 0l.328-.572c.12-.212.376-.3.604-.216a4.42 4.42 0 011.284.744c.184.152.232.42.112.628l-.328.572c.276.32.492.692.636 1.096h.66c.24 0 .448.172.488.412.08.48.084.984 0 1.484a.497.497 0 01-.488.416h-.66c-.144.404-.36.776-.636 1.096l.328.572a.492.492 0 01-.112.628c-.38.316-.816.568-1.284.744a.494.494 0 01-.604-.216l-.328-.572a3.554 3.554 0 01-1.268 0zm-.42-2.356c1.54 1.184 3.296-.572 2.112-2.112-1.54-1.184-3.296.572-2.112 2.112z'
-        fill='#FFF'
-        fillRule='nonzero'
-      />
-    </svg>
-  )
-}
-
-export default EnvironmentSettingsIcon
diff --git a/frontend/web/components/svg/FeaturesIcon.tsx b/frontend/web/components/svg/FeaturesIcon.tsx
deleted file mode 100644
index 0b6c7fafc5a9..000000000000
--- a/frontend/web/components/svg/FeaturesIcon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-
-interface FeaturesIconProps {
-  className?: string
-}
-
-const FeaturesIcon: React.FC<FeaturesIconProps> = ({ className }) => {
-  return (
-    <svg className={className} viewBox='0 0 21 21'>
-      <path
-        d='M20.207.772a.726.726 0 00-.498-.497C18.425 0 17.419 0 16.417 0c-4.129 0-6.605 2.208-8.453 5.12H3.796c-.652 0-1.424.477-1.716 1.06L.103 10.132c-.061.135-.095.28-.1.428 0 .53.43.96.96.96H5.12a3.84 3.84 0 013.84 3.84v4.16c0 .53.43.96.96.96.148-.005.294-.04.429-.1l3.95-1.977c.582-.291 1.059-1.062 1.059-1.714v-4.177c2.903-1.853 5.12-4.336 5.12-8.444.004-1.006.004-2.012-.272-3.296zM15.362 6.72a1.6 1.6 0 110-3.2 1.6 1.6 0 010 3.2zM1.427 14.083C.393 15.117-.118 17.703.023 20.456c2.765.143 5.345-.374 6.375-1.404 1.611-1.611 1.715-3.76.252-5.222-1.463-1.462-3.611-1.359-5.223.253zm3.266 3.36c-.344.344-1.204.516-2.125.469-.047-.918.123-1.78.468-2.124.537-.538 1.253-.572 1.74-.085.488.488.454 1.204-.083 1.74z'
-        fill='#FFF'
-        fillRule='evenodd'
-      />
-    </svg>
-  )
-}
-
-export default FeaturesIcon
diff --git a/frontend/web/components/svg/LogoutIcon.tsx b/frontend/web/components/svg/LogoutIcon.tsx
deleted file mode 100644
index b24cfc65e028..000000000000
--- a/frontend/web/components/svg/LogoutIcon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-
-interface LogoutIconProps {
-  className?: string
-}
-
-const LogoutIcon: React.FC<LogoutIconProps> = ({ className }) => {
-  return (
-    <svg className={className} width={18} height={14} viewBox='0 0 18 14'>
-      <path
-        d='M6.3 13.44H3.36A3.36 3.36 0 010 10.08V3.36A3.36 3.36 0 013.36 0H6.3c.231 0 .42.189.42.42v1.4c0 .231-.189.42-.42.42H3.36c-.62 0-1.12.5-1.12 1.12v6.72c0 .62.5 1.12 1.12 1.12H6.3c.231 0 .42.189.42.42v1.4c0 .231-.189.42-.42.42zm4.126-10.609l2.716 2.489H6.44a.838.838 0 00-.84.84v1.12c0 .465.374.84.84.84h6.702l-2.716 2.488a.843.843 0 00-.028 1.215l.767.766a.843.843 0 001.186.004l5.32-5.278a.839.839 0 000-1.194L12.355.851a.84.84 0 00-1.187.003l-.766.766a.838.838 0 00.024 1.211z'
-        fill='#FFF'
-        fillRule='nonzero'
-      />
-    </svg>
-  )
-}
-
-export default LogoutIcon
diff --git a/frontend/web/components/svg/OrgSettingsIcon.tsx b/frontend/web/components/svg/OrgSettingsIcon.tsx
deleted file mode 100644
index fe99dc07cdbd..000000000000
--- a/frontend/web/components/svg/OrgSettingsIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React, { FC } from 'react'
-
-interface OrgSettingsIconProps {
-  className?: string
-  fill?: string
-  height?: string | number
-  width?: string | number
-}
-
-const OrgSettingsIcon: FC<OrgSettingsIconProps> = ({
-  className,
-  fill,
-  height,
-  width = '100%',
-}) => {
-  return (
-    <svg
-      className={className}
-      width={width}
-      height={height}
-      viewBox='0 0 26 18'
-    >
-      <path
-        d='M24.42 12.372a4.692 4.692 0 000-1.704l1.032-.596a.29.29 0 00.132-.34 6.003 6.003 0 00-1.328-2.296.292.292 0 00-.36-.056l-1.032.596a4.696 4.696 0 00-1.476-.852V5.932a.291.291 0 00-.228-.284c-.892-.2-1.8-.192-2.648 0a.291.291 0 00-.228.284v1.192c-.54.192-1.04.48-1.476.852l-1.032-.596a.293.293 0 00-.36.056 6.003 6.003 0 00-1.328 2.296.295.295 0 00.132.34l1.032.596a4.692 4.692 0 000 1.704l-1.032.596a.29.29 0 00-.132.34 6.033 6.033 0 001.328 2.296c.092.1.24.124.36.056l1.032-.596c.436.372.936.66 1.476.852v1.192c0 .136.096.256.228.284.892.2 1.8.192 2.648 0a.291.291 0 00.228-.284v-1.192c.54-.192 1.04-.48 1.476-.852l1.032.596a.293.293 0 00.36-.056 6.003 6.003 0 001.328-2.296.295.295 0 00-.132-.34l-1.032-.596zm-4.58 1.088a1.942 1.942 0 01-1.94-1.94c0-1.068.872-1.94 1.94-1.94s1.94.872 1.94 1.94-.868 1.94-1.94 1.94zm-16-5.78A2.562 2.562 0 006.4 5.12a2.562 2.562 0 00-2.56-2.56 2.562 2.562 0 00-2.56 2.56 2.562 2.562 0 002.56 2.56zm8.96 1.28c.076 0 .148-.02.224-.024a7.374 7.374 0 011.452-2.368c.296-.32.716-.504 1.156-.504.276 0 .548.072.784.212l.316.184c.032-.02.064-.036.096-.056.28-.584.448-1.232.448-1.92a4.478 4.478 0 00-4.48-4.48A4.47 4.47 0 008.32 4.48a4.478 4.478 0 004.48 4.48zm4.208 7.78c-.092-.048-.184-.104-.272-.156-.328.192-.612.392-1.1.392a1.59 1.59 0 01-1.156-.504 7.294 7.294 0 01-1.608-2.784c-.428-1.38.996-1.988 1.032-2.012a4.058 4.058 0 010-.312l-.316-.184a1.63 1.63 0 01-.392-.324c-.132.008-.26.024-.392.024-.984 0-1.904-.24-2.74-.64h-.332a4.61 4.61 0 00-4.612 4.608V16c0 1.06.86 1.92 1.92 1.92h10.216a1.54 1.54 0 01-.248-.812v-.368zM6.924 9.704A2.552 2.552 0 005.12 8.96H2.56A2.562 2.562 0 000 11.52v1.28c0 .708.572 1.28 1.28 1.28h2.636a5.866 5.866 0 013.008-4.376z'
-        fill={fill || 'white'}
-        fillRule='evenodd'
-      />
-    </svg>
-  )
-}
-
-export default OrgSettingsIcon
diff --git a/frontend/web/components/svg/PlayIcon.tsx b/frontend/web/components/svg/PlayIcon.tsx
deleted file mode 100644
index f85192006a70..000000000000
--- a/frontend/web/components/svg/PlayIcon.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react'
-
-interface PlayIconProps {
-  className?: string
-}
-
-const PlayIcon: React.FC<PlayIconProps> = ({ className }) => {
-  return (
-    <svg className={className} viewBox='0 0 315 315'>
-      <path
-        d='M293.002 78.53C249.646 3.435 153.618-22.296 78.529 21.068 3.434 64.418-22.298 160.442 21.066 235.534c43.35 75.095 139.375 100.83 214.465 57.47 75.096-43.365 100.84-139.384 57.471-214.474zm-73.168 187.271c-60.067 34.692-136.894 14.106-171.576-45.973C13.568 159.761 34.161 82.935 94.23 48.26c60.071-34.69 136.894-14.106 171.578 45.971 34.685 60.076 14.098 136.886-45.974 171.57zm-6.279-115.149l-82.214-47.949c-7.492-4.374-13.535-.877-13.493 7.789l.421 95.174c.038 8.664 6.155 12.191 13.669 7.851l81.585-47.103c7.506-4.332 7.522-11.388.032-15.762z'
-        fill='#f27157'
-      />
-    </svg>
-  )
-}
-
-export default PlayIcon
diff --git a/frontend/web/components/svg/PlusIcon.tsx b/frontend/web/components/svg/PlusIcon.tsx
deleted file mode 100644
index b534a65099ee..000000000000
--- a/frontend/web/components/svg/PlusIcon.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react'
-
-interface PlusIconProps {
-  className?: string
-  width?: number
-}
-
-const PlusIcon: React.FC<PlusIconProps> = ({ className, width }) => (
-  <svg width={width} className={className} viewBox='0 0 15 13'>
-    <path
-      d='M13.8 5.5H8.4V.55C8.4.246 8.132 0 7.8 0H6.6c-.332 0-.6.246-.6.55V5.5H.6c-.332 0-.6.246-.6.55v1.1c0 .304.268.55.6.55H6v4.95c0 .304.268.55.6.55h1.2c.332 0 .6-.246.6-.55V7.7h5.4c.332 0 .6-.246.6-.55v-1.1c0-.304-.268-.55-.6-.55z'
-      fill='#FFF'
-      fillRule='nonzero'
-    />
-  </svg>
-)
-
-export default PlusIcon
diff --git a/frontend/web/components/svg/ProjectSettingsIcon.tsx b/frontend/web/components/svg/ProjectSettingsIcon.tsx
deleted file mode 100644
index 4abd2b48222d..000000000000
--- a/frontend/web/components/svg/ProjectSettingsIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react'
-
-interface ProjectSettingsIconProps {
-  className?: string
-  fill?: string
-  height?: string | number
-  width?: string | number
-}
-
-const ProjectSettingsIcon: React.FC<ProjectSettingsIconProps> = ({
-  className,
-  fill = 'white',
-  height,
-  width = '100%',
-}) => {
-  return (
-    <svg
-      className={className}
-      width={width}
-      height={height}
-      viewBox='0 0 23 23'
-    >
-      <path
-        d='M20 0H2.4A2.4 2.4 0 000 2.4V20a2.4 2.4 0 002.4 2.4H20a2.4 2.4 0 002.4-2.4V2.4A2.4 2.4 0 0020 0zm-.8 16.2c0 .33-.27.6-.6.6H16V18c0 .665-.535 1.2-1.2 1.2H14c-.665 0-1.2-.535-1.2-1.2v-1.2h-9c-.33 0-.6-.27-.6-.6v-2c0-.33.27-.6.6-.6h9v-1.2c0-.665.535-1.2 1.2-1.2h.8c.665 0 1.2.535 1.2 1.2v1.2h2.6c.33 0 .6.27.6.6v2zm0-8c0 .33-.27.6-.6.6h-9V10c0 .665-.535 1.2-1.2 1.2h-.8c-.665 0-1.2-.535-1.2-1.2V8.8H3.8c-.33 0-.6-.27-.6-.6v-2c0-.33.27-.6.6-.6h2.6V4.4c0-.665.535-1.2 1.2-1.2h.8c.665 0 1.2.535 1.2 1.2v1.2h9c.33 0 .6.27.6.6v2z'
-        fill={fill}
-        fillRule='evenodd'
-      />
-    </svg>
-  )
-}
-
-export default ProjectSettingsIcon
diff --git a/frontend/web/components/svg/SparklesIcon.tsx b/frontend/web/components/svg/SparklesIcon.tsx
deleted file mode 100644
index 351358233621..000000000000
--- a/frontend/web/components/svg/SparklesIcon.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react'
-
-const SparklesIcon: React.FC<{}> = () => {
-  return (
-    <svg
-      xmlns='http://www.w3.org/2000/svg'
-      className='ionicon'
-      viewBox='0 0 512 512'
-    >
-      <path
-        d='M259.92 262.91L216.4 149.77a9 9 0 00-16.8 0l-43.52 113.14a9 9 0 01-5.17 5.17L37.77 311.6a9 9 0 000 16.8l113.14 43.52a9 9 0 015.17 5.17l43.52 113.14a9 9 0 0016.8 0l43.52-113.14a9 9 0 015.17-5.17l113.14-43.52a9 9 0 000-16.8l-113.14-43.52a9 9 0 01-5.17-5.17zM108 68L88 16 68 68 16 88l52 20 20 52 20-52 52-20-52-20zM426.67 117.33L400 48l-26.67 69.33L304 144l69.33 26.67L400 240l26.67-69.33L496 144l-69.33-26.67z'
-        fill='none'
-        stroke='currentColor'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-        strokeWidth='0'
-      />
-    </svg>
-  )
-}
-
-export default SparklesIcon
diff --git a/frontend/web/components/svg/UpgradeIcon.tsx b/frontend/web/components/svg/UpgradeIcon.tsx
deleted file mode 100644
index ce695d073fd8..000000000000
--- a/frontend/web/components/svg/UpgradeIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react'
-
-interface UpgradeIconProps {
-  className?: string
-  fill?: string
-  height?: string | number
-  width?: string | number
-}
-
-const UpgradeIcon: React.FC<UpgradeIconProps> = ({
-  className,
-  fill = '#FFF',
-  height,
-  width = '100%',
-}) => {
-  return (
-    <svg
-      className={className}
-      width={width}
-      height={height}
-      viewBox='0 0 21 21'
-    >
-      <path
-        d='M20.207.772a.726.726 0 00-.498-.497C18.425 0 17.419 0 16.417 0c-4.129 0-6.605 2.208-8.453 5.12H3.796c-.652 0-1.424.477-1.716 1.06L.103 10.132c-.061.135-.095.28-.1.428 0 .53.43.96.96.96H5.12a3.84 3.84 0 013.84 3.84v4.16c0 .53.43.96.96.96.148-.005.294-.04.429-.1l3.95-1.977c.582-.291 1.059-1.062 1.059-1.714v-4.177c2.903-1.853 5.12-4.336 5.12-8.444.004-1.006.004-2.012-.272-3.296zM15.362 6.72a1.6 1.6 0 110-3.2 1.6 1.6 0 010 3.2zM1.427 14.083C.393 15.117-.118 17.703.023 20.456c2.765.143 5.345-.374 6.375-1.404 1.611-1.611 1.715-3.76.252-5.222-1.463-1.462-3.611-1.359-5.223.253zm3.266 3.36c-.344.344-1.204.516-2.125.469-.047-.918.123-1.78.468-2.124.537-.538 1.253-.572 1.74-.085.488.488.454 1.204-.083 1.74z'
-        fill={fill}
-        fillRule='evenodd'
-      />
-    </svg>
-  )
-}
-
-export default UpgradeIcon
diff --git a/frontend/web/components/svg/UserSettingsIcon.tsx b/frontend/web/components/svg/UserSettingsIcon.tsx
deleted file mode 100644
index 58001efe1b8e..000000000000
--- a/frontend/web/components/svg/UserSettingsIcon.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react'
-
-interface UserSettingsIconProps {
-  className?: string
-  height?: string | number
-  width?: string | number
-}
-
-const UserSettingsIcon: React.FC<UserSettingsIconProps> = ({
-  className,
-  height,
-  width,
-}) => {
-  return (
-    <svg
-      className={className}
-      width={width || '100%'}
-      height={height}
-      viewBox='0 0 26 18'
-    >
-      <path
-        d='M8.96 10.24A5.12 5.12 0 108.96 0a5.12 5.12 0 000 10.24zm3.584 1.28h-.668a6.97 6.97 0 01-5.832 0h-.668A5.377 5.377 0 000 16.896v1.664c0 1.06.86 1.92 1.92 1.92H16c1.06 0 1.92-.86 1.92-1.92v-1.664a5.377 5.377 0 00-5.376-5.376z'
-        fill='#fff'
-        fillRule='evenodd'
-      />
-    </svg>
-  )
-}
-
-export default UserSettingsIcon
diff --git a/frontend/web/components/tables/TableFilterItem.tsx b/frontend/web/components/tables/TableFilterItem.tsx
index 67a3ed6d0325..b36c1e8bcce4 100644
--- a/frontend/web/components/tables/TableFilterItem.tsx
+++ b/frontend/web/components/tables/TableFilterItem.tsx
@@ -1,5 +1,5 @@
 import React, { FC, ReactNode } from 'react'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import classNames from 'classnames'
 
 type TableFilterItemType = {
diff --git a/frontend/web/components/tables/TableSortFilter.tsx b/frontend/web/components/tables/TableSortFilter.tsx
index 42b8e0e91552..07d90c91cff4 100644
--- a/frontend/web/components/tables/TableSortFilter.tsx
+++ b/frontend/web/components/tables/TableSortFilter.tsx
@@ -1,10 +1,10 @@
 import React, { FC } from 'react'
 import TableFilter from './TableFilter'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import classNames from 'classnames'
 import { SortOrder } from 'common/types/requests'
 
-export type SortType = {
+type SortType = {
   value: string
   label: string
 }
diff --git a/frontend/web/components/tags/AddEditTags.tsx b/frontend/web/components/tags/AddEditTags.tsx
index bd9f03f8ccd0..774a048e491f 100644
--- a/frontend/web/components/tags/AddEditTags.tsx
+++ b/frontend/web/components/tags/AddEditTags.tsx
@@ -15,7 +15,7 @@ import Tag from './Tag'
 import CreateEditTag from './CreateEditTag'
 import Input from 'components/base/forms/Input'
 import Button from 'components/base/forms/Button'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import TagUsage from 'components/TagUsage'
 import { ProjectPermission } from 'common/types/permissions.types'
 
diff --git a/frontend/web/components/tags/CreateEditTag.tsx b/frontend/web/components/tags/CreateEditTag.tsx
index 460c9263f475..91bf6cb70f60 100644
--- a/frontend/web/components/tags/CreateEditTag.tsx
+++ b/frontend/web/components/tags/CreateEditTag.tsx
@@ -15,7 +15,7 @@ import Tag from './Tag'
 import InlineModal from 'components/InlineModal'
 import ErrorMessage from 'components/ErrorMessage'
 import Switch from 'components/Switch'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import { ProjectPermission } from 'common/types/permissions.types'
 
 type CreateEditTagType = {
diff --git a/frontend/web/components/tags/TagContent.tsx b/frontend/web/components/tags/TagContent.tsx
index a6a27cba490b..e7c5dc289845 100644
--- a/frontend/web/components/tags/TagContent.tsx
+++ b/frontend/web/components/tags/TagContent.tsx
@@ -8,7 +8,7 @@ import { getTagColor } from './Tag'
 import OrganisationStore from 'common/stores/organisation-store'
 import Utils from 'common/utils/utils'
 import classNames from 'classnames'
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 import Color from 'color'
 type TagContent = {
   tag: Partial<TTag>
diff --git a/frontend/web/components/tags/VCSProviderTag.tsx b/frontend/web/components/tags/VCSProviderTag.tsx
index 555ffcbfce4d..46aef8dccdf6 100644
--- a/frontend/web/components/tags/VCSProviderTag.tsx
+++ b/frontend/web/components/tags/VCSProviderTag.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
-import { GithubIcon } from 'components/base/icons/GithubIcon'
-import GitlabIcon from 'components/base/icons/GitlabIcon'
+import { GithubIcon } from 'components/icons/GithubIcon'
+import GitlabIcon from 'components/icons/GitlabIcon'
 import { VCSProvider } from 'common/types/responses'
 
 interface VCSProviderTagProps {
diff --git a/frontend/web/components/useSetupCustomWidget.ts b/frontend/web/components/useSetupCustomWidget.ts
deleted file mode 100644
index 04e44f8bfbd2..000000000000
--- a/frontend/web/components/useSetupCustomWidget.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import {
-  DDClient,
-  EventType,
-  WidgetSettingsMenuClickData,
-} from '@datadog/ui-extensions-sdk'
-import * as React from 'react'
-import API from 'project/api'
-
-/**
- * This hook performs any app-wide for the custom widget.
- * @param client The initialized {@link DDClient}
- */
-function useSetupCustomWidget(client: DDClient): void {
-  /**
-   * We set up an event listener for the logout widget settings menu item.
-   * This event handler lets us perform the actual logging out of a user.
-   */
-  React.useEffect(() => {
-    const unsubscribeLogout = client.events.on(
-      EventType.WIDGET_SETTINGS_MENU_CLICK,
-      async (data: WidgetSettingsMenuClickData): Promise<void> => {
-        /**
-         * We only want to handle events from the `'logout'` settings menu item.
-         */
-        if (data.menuItem.key !== 'logout') {
-          return
-        }
-
-        /**
-         * Perform the actual logout,
-         * then make sure to update the auth state so it's reflected in Datadog.
-         */
-        API.setCookie('t', '')
-        await client.auth.updateAuthState()
-      },
-    )
-
-    /**
-     * We make sure to unsubscribe the event listener we set up.
-     */
-    return () => {
-      unsubscribeLogout()
-    }
-  }, [client.auth, client.events])
-}
-
-export { useSetupCustomWidget }
diff --git a/frontend/web/components/users-permissions/derived-permissions/DerivedPermissionsList.tsx b/frontend/web/components/users-permissions/derived-permissions/DerivedPermissionsList.tsx
index 91cd8f3623a4..eb4d480f1229 100644
--- a/frontend/web/components/users-permissions/derived-permissions/DerivedPermissionsList.tsx
+++ b/frontend/web/components/users-permissions/derived-permissions/DerivedPermissionsList.tsx
@@ -73,5 +73,4 @@ const DerivedPermissionsList: FC<DerivedPermissionsListType> = ({
   )
 }
 
-export type { DerivedPermissionsListType }
 export default DerivedPermissionsList
diff --git a/frontend/web/components/users-permissions/derived-permissions/DerivedTag.tsx b/frontend/web/components/users-permissions/derived-permissions/DerivedTag.tsx
index 3187b33bf687..5fe43785f454 100644
--- a/frontend/web/components/users-permissions/derived-permissions/DerivedTag.tsx
+++ b/frontend/web/components/users-permissions/derived-permissions/DerivedTag.tsx
@@ -1,4 +1,4 @@
-import Icon from 'components/Icon'
+import Icon from 'components/icons/Icon'
 
 type DerivedTagProps = {
   name: string
@@ -21,5 +21,4 @@ const DerivedTag = ({ name, type }: DerivedTagProps) => {
   )
 }
 
-export type { DerivedTagProps }
 export default DerivedTag
diff --git a/frontend/web/project/toast.tsx b/frontend/web/project/toast.tsx
index 48d22712b023..3fa2a9a9520b 100644
--- a/frontend/web/project/toast.tsx
+++ b/frontend/web/project/toast.tsx
@@ -6,14 +6,14 @@ import { IonIcon } from '@ionic/react'
 import Utils from 'common/utils/utils'
 import Button from 'components/base/forms/Button'
 
-export type ThemeType = 'danger' | 'success'
+type ThemeType = 'danger' | 'success'
 
 const themeClassNames: Record<ThemeType, string> = {
   danger: 'alert-danger',
   success: 'alert',
 }
 
-export interface MessageProps {
+interface MessageProps {
   action?: { buttonText: string; onClick: () => void }
   remove: () => void
   expiry?: number
@@ -115,7 +115,7 @@ const Message: FC<MessageProps> = ({
   )
 }
 
-export interface Message {
+interface Message {
   action?: { buttonText: string; onClick: () => void }
   id: string
   content: React.ReactNode