[WEB-5404] chore: update next images with html default images (#8101)

* chore: update next images with html default images

* chore: sync related changes

* Update apps/admin/core/components/instance/failure.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Update apps/space/app/not-found.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Update apps/space/core/components/issues/issue-layouts/error.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update apps/space/core/components/ui/not-found.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* chore: replace classname styles in space

* fix: copoilot suggestions

* fix: copilot suggestions

* chore: format files

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

apps/admin/app/(all)/(dashboard)/authentication/gitea/page.tsx

@@ -2,7 +2,6 @@
 
 import { useState } from "react";
 import { observer } from "mobx-react";
-import Image from "next/image";
 import useSWR from "swr";
 // plane internal packages
 import { setPromiseToast } from "@plane/propel/toast";
@@ -65,7 +64,7 @@ const InstanceGiteaAuthenticationPage = observer(() => {
           <AuthenticationMethodCard
             name="Gitea"
             description="Allow members to login or sign up to plane with their Gitea accounts."
-            icon={<Image src={giteaLogo} height={24} width={24} alt="Gitea Logo" />}
+            icon={<img src={giteaLogo} height={24} width={24} alt="Gitea Logo" />}
             config={
               <ToggleSwitch
                 value={isGiteaEnabled}

apps/admin/app/(all)/(dashboard)/authentication/github/page.tsx

@@ -2,7 +2,6 @@
 
 import { useState } from "react";
 import { observer } from "mobx-react";
-import Image from "next/image";
 import { useTheme } from "next-themes";
 import useSWR from "swr";
 // plane internal packages
@@ -73,7 +72,7 @@ const InstanceGithubAuthenticationPage = observer<React.FC<Route.ComponentProps>
             name="GitHub"
             description="Allow members to login or sign up to plane with their GitHub accounts."
             icon={
-              <Image
+              <img
                 src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
                 height={24}
                 width={24}

apps/admin/app/(all)/(dashboard)/authentication/gitlab/page.tsx

@@ -2,7 +2,6 @@
 
 import { useState } from "react";
 import { observer } from "mobx-react";
-import Image from "next/image";
 import useSWR from "swr";
 import { setPromiseToast } from "@plane/propel/toast";
 import { Loader, ToggleSwitch } from "@plane/ui";
@@ -63,7 +62,7 @@ const InstanceGitlabAuthenticationPage = observer<React.FC<Route.ComponentProps>
           <AuthenticationMethodCard
             name="GitLab"
             description="Allow members to login or sign up to plane with their GitLab accounts."
-            icon={<Image src={GitlabLogo} height={24} width={24} alt="GitLab Logo" />}
+            icon={<img src={GitlabLogo} height={24} width={24} alt="GitLab Logo" />}
             config={
               <ToggleSwitch
                 value={Boolean(parseInt(enableGitlabConfig))}

apps/admin/app/(all)/(dashboard)/authentication/google/page.tsx

@@ -2,7 +2,6 @@
 
 import { useState } from "react";
 import { observer } from "mobx-react";
-import Image from "next/image";
 import useSWR from "swr";
 import { setPromiseToast } from "@plane/propel/toast";
 import { Loader, ToggleSwitch } from "@plane/ui";
@@ -64,7 +63,7 @@ const InstanceGoogleAuthenticationPage = observer<React.FC<Route.ComponentProps>
             name="Google"
             description="Allow members to login or sign up to plane with their Google
             accounts."
-            icon={<Image src={GoogleLogo} height={24} width={24} alt="Google Logo" />}
+            icon={<img src={GoogleLogo} height={24} width={24} alt="Google Logo" />}
             config={
               <ToggleSwitch
                 value={Boolean(parseInt(enableGoogleConfig))}

apps/admin/app/(all)/(home)/auth-helpers.tsx

@@ -1,4 +1,3 @@
-import Image from "next/image";
 import Link from "next/link";
 import { KeyRound, Mails } from "lucide-react";
 // plane packages
@@ -135,7 +134,7 @@ export const getBaseAuthenticationModes: (props: TGetBaseAuthenticationModeProps
     key: "google",
     name: "Google",
     description: "Allow members to log in or sign up for Plane with their Google accounts.",
-    icon: <Image src={GoogleLogo} height={20} width={20} alt="Google Logo" />,
+    icon: <img src={GoogleLogo} height={20} width={20} alt="Google Logo" />,
     config: <GoogleConfiguration disabled={disabled} updateConfig={updateConfig} />,
   },
   {
@@ -143,7 +142,7 @@ export const getBaseAuthenticationModes: (props: TGetBaseAuthenticationModeProps
     name: "GitHub",
     description: "Allow members to log in or sign up for Plane with their GitHub accounts.",
     icon: (
-      <Image
+      <img
         src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
         height={20}
         width={20}
@@ -156,7 +155,7 @@ export const getBaseAuthenticationModes: (props: TGetBaseAuthenticationModeProps
     key: "gitlab",
     name: "GitLab",
     description: "Allow members to log in or sign up to plane with their GitLab accounts.",
-    icon: <Image src={GitlabLogo} height={20} width={20} alt="GitLab Logo" />,
+    icon: <img src={GitlabLogo} height={20} width={20} alt="GitLab Logo" />,
     config: <GitlabConfiguration disabled={disabled} updateConfig={updateConfig} />,
   },
 ];

apps/admin/app/types/next-image.d.ts

@@ -1,5 +0,0 @@
-declare module "next/image" {
-  type Props = React.ComponentProps<"img"> & { src: string };
-  const Image: React.FC<Props>;
-  export default Image;
-}

apps/admin/ce/components/authentication/authentication-modes.tsx

@@ -1,5 +1,4 @@
 import { observer } from "mobx-react";
-import Image from "next/image";
 import { useTheme } from "next-themes";
 import { KeyRound, Mails } from "lucide-react";
 // types
@@ -58,7 +57,7 @@ export const getAuthenticationModes: (props: TGetBaseAuthenticationModeProps) =>
     key: "google",
     name: "Google",
     description: "Allow members to log in or sign up for Plane with their Google accounts.",
-    icon: <Image src={GoogleLogo} height={20} width={20} alt="Google Logo" />,
+    icon: <img src={GoogleLogo} height={20} width={20} alt="Google Logo" />,
     config: <GoogleConfiguration disabled={disabled} updateConfig={updateConfig} />,
   },
   {
@@ -66,7 +65,7 @@ export const getAuthenticationModes: (props: TGetBaseAuthenticationModeProps) =>
     name: "GitHub",
     description: "Allow members to log in or sign up for Plane with their GitHub accounts.",
     icon: (
-      <Image
+      <img
         src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
         height={20}
         width={20}
@@ -79,21 +78,21 @@ export const getAuthenticationModes: (props: TGetBaseAuthenticationModeProps) =>
     key: "gitlab",
     name: "GitLab",
     description: "Allow members to log in or sign up to plane with their GitLab accounts.",
-    icon: <Image src={GitlabLogo} height={20} width={20} alt="GitLab Logo" />,
+    icon: <img src={GitlabLogo} height={20} width={20} alt="GitLab Logo" />,
     config: <GitlabConfiguration disabled={disabled} updateConfig={updateConfig} />,
   },
   {
     key: "gitea",
     name: "Gitea",
     description: "Allow members to log in or sign up to plane with their Gitea accounts.",
-    icon: <Image src={giteaLogo} height={20} width={20} alt="Gitea Logo" />,
+    icon: <img src={giteaLogo} height={20} width={20} alt="Gitea Logo" />,
     config: <GiteaConfiguration disabled={disabled} updateConfig={updateConfig} />,
   },
   {
     key: "oidc",
     name: "OIDC",
     description: "Authenticate your users via the OpenID Connect protocol.",
-    icon: <Image src={OIDCLogo} height={22} width={22} alt="OIDC Logo" />,
+    icon: <img src={OIDCLogo} height={22} width={22} alt="OIDC Logo" />,
     config: <UpgradeButton />,
     unavailable: true,
   },
@@ -101,7 +100,7 @@ export const getAuthenticationModes: (props: TGetBaseAuthenticationModeProps) =>
     key: "saml",
     name: "SAML",
     description: "Authenticate your users via the Security Assertion Markup Language protocol.",
-    icon: <Image src={SAMLLogo} height={22} width={22} alt="SAML Logo" className="pl-0.5" />,
+    icon: <img src={SAMLLogo} height={22} width={22} alt="SAML Logo" className="pl-0.5" />,
     config: <UpgradeButton />,
     unavailable: true,
   },

apps/admin/core/components/common/empty-state.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React from "react";
-import Image from "next/image";
 import { Button } from "@plane/propel/button";
 
 type Props = {
@@ -27,7 +26,7 @@ export const EmptyState: React.FC<Props> = ({
 }) => (
   <div className={`flex h-full w-full items-center justify-center`}>
     <div className="flex w-full flex-col items-center text-center">
-      {image && <Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text || "button image"} />}
+      {image && <img src={image} className="w-52 sm:w-60" alt={primaryButton?.text || "button image"} />}
       <h6 className="mb-3 mt-6 text-xl font-semibold sm:mt-8">{title}</h6>
       {description && <p className="mb-7 px-5 text-custom-text-300 sm:mb-8">{description}</p>}
       <div className="flex items-center gap-4">

apps/admin/core/components/common/logo-spinner.tsx

@@ -1,4 +1,3 @@
-import Image from "next/image";
 import { useTheme } from "next-themes";
 import LogoSpinnerDark from "@/app/assets/images/logo-spinner-dark.gif?url";
 import LogoSpinnerLight from "@/app/assets/images/logo-spinner-light.gif?url";
@@ -10,7 +9,7 @@ export const LogoSpinner = () => {
 
   return (
     <div className="flex items-center justify-center">
-      <Image src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
+      <img src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
     </div>
   );
 };

apps/admin/core/components/instance/failure.tsx

@@ -1,6 +1,5 @@
 "use client";
 import { observer } from "mobx-react";
-import Image from "next/image";
 import { useTheme } from "next-themes";
 import { Button } from "@plane/propel/button";
 // assets
@@ -23,7 +22,7 @@ export const InstanceFailureView: React.FC = observer(() => {
       <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
         <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
           <div className="relative flex flex-col justify-center items-center space-y-4">
-            <Image src={instanceImage} alt="Plane Logo" />
+            <img src={instanceImage} alt="Instance failure illustration" />
             <h3 className="font-medium text-2xl text-white text-center">Unable to fetch instance details.</h3>
             <p className="font-medium text-base text-center">
               We were unable to fetch the details of the instance. Fret not, it might just be a connectivity issue.

apps/admin/core/components/instance/instance-not-ready.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import Image from "next/image";
 import Link from "next/link";
 import { Button } from "@plane/propel/button";
 // assets
@@ -11,7 +10,7 @@ export const InstanceNotReady: React.FC = () => (
     <div className="w-auto max-w-2xl relative space-y-8 py-10">
       <div className="relative flex flex-col justify-center items-center space-y-4">
         <h1 className="text-3xl font-bold pb-3">Welcome aboard Plane!</h1>
-        <Image src={PlaneTakeOffImage} alt="Plane Logo" />
+        <img src={PlaneTakeOffImage} alt="Plane Logo" />
         <p className="font-medium text-base text-custom-text-400">
           Get started by setting up your instance and workspace
         </p>

apps/admin/core/components/instance/loading.tsx

@@ -1,4 +1,3 @@
-import Image from "next/image";
 import { useTheme } from "next-themes";
 // assets
 import LogoSpinnerDark from "@/app/assets/images/logo-spinner-dark.gif?url";
@@ -11,7 +10,7 @@ export const InstanceLoading = () => {
 
   return (
     <div className="flex items-center justify-center">
-      <Image src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
+      <img src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
     </div>
   );
 };

apps/admin/core/components/new-user-popup.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { observer } from "mobx-react";
-import Image from "next/image";
 import Link from "next/link";
 import { useTheme as useNextTheme } from "next-themes";
 // ui
@@ -39,7 +38,7 @@ export const NewUserPopup = observer(() => {
           </div>
         </div>
         <div className="shrink-0 flex items-center justify-center">
-          <Image
+          <img
             src={resolveGeneralTheme(resolvedTheme) === "dark" ? TakeoffIconDark : TakeoffIconLight}
             height={80}
             width={80}

apps/admin/vite.config.ts

@@ -29,7 +29,6 @@ export default defineConfig(() => ({
   resolve: {
     alias: {
       // Next.js compatibility shims used within admin
-      "next/image": path.resolve(__dirname, "app/compat/next/image.tsx"),
       "next/link": path.resolve(__dirname, "app/compat/next/link.tsx"),
       "next/navigation": path.resolve(__dirname, "app/compat/next/navigation.ts"),
     },

apps/space/app/not-found.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import Image from "next/image";
 // assets
 import SomethingWentWrongImage from "@/app/assets/something-went-wrong.svg?url";
 
@@ -9,7 +8,7 @@ const NotFound = () => (
     <div className="text-center">
       <div className="mx-auto size-32 md:size-52 grid place-items-center rounded-full bg-custom-background-80">
         <div className="size-16 md:size-32 grid place-items-center">
-          <Image src={SomethingWentWrongImage} alt="User already logged in" />
+          <img src={SomethingWentWrongImage} alt="Something went wrong" width={128} height={128} />
         </div>
       </div>
       <h1 className="mt-8 md:mt-12 text-xl md:text-3xl font-semibold">That didn{"'"}t work</h1>

apps/space/app/types/next-image.d.ts

@@ -1,10 +0,0 @@
-declare module "next/image" {
-  import type { FC, ImgHTMLAttributes } from "react";
-
-  type NextImageProps = ImgHTMLAttributes<HTMLImageElement> & {
-    src: string;
-  };
-
-  const Image: FC<NextImageProps>;
-  export default Image;
-}

apps/space/core/components/account/auth-forms/auth-root.tsx

@@ -2,7 +2,6 @@
 
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
-import Image from "next/image";
 import { useSearchParams } from "next/navigation";
 import { useTheme } from "next-themes";
 // plane imports
@@ -162,7 +161,7 @@ export const AuthRoot: React.FC = observer(() => {
     {
       id: "google",
       text: `${content} with Google`,
-      icon: <Image src={GoogleLogo} height={18} width={18} alt="Google Logo" />,
+      icon: <img src={GoogleLogo} height={18} width={18} alt="Google Logo" />,
       onClick: () => {
         window.location.assign(`${API_BASE_URL}/auth/google/${next_path ? `?next_path=${next_path}` : ``}`);
       },
@@ -172,7 +171,7 @@ export const AuthRoot: React.FC = observer(() => {
       id: "github",
       text: `${content} with GitHub`,
       icon: (
-        <Image
+        <img
           src={resolvedTheme === "dark" ? GithubLightLogo : GithubDarkLogo}
           height={18}
           width={18}
@@ -187,7 +186,7 @@ export const AuthRoot: React.FC = observer(() => {
     {
       id: "gitlab",
       text: `${content} with GitLab`,
-      icon: <Image src={GitlabLogo} height={18} width={18} alt="GitLab Logo" />,
+      icon: <img src={GitlabLogo} height={18} width={18} alt="GitLab Logo" />,
       onClick: () => {
         window.location.assign(`${API_BASE_URL}/auth/gitlab/${next_path ? `?next_path=${next_path}` : ``}`);
       },
@@ -196,7 +195,7 @@ export const AuthRoot: React.FC = observer(() => {
     {
       id: "gitea",
       text: `${content} with Gitea`,
-      icon: <Image src={GiteaLogo} height={18} width={18} alt="Gitea Logo" />,
+      icon: <img src={GiteaLogo} height={18} width={18} alt="Gitea Logo" />,
       onClick: () => {
         window.location.assign(`${API_BASE_URL}/auth/gitea/${next_path ? `?next_path=${next_path}` : ``}`);
       },

apps/space/core/components/account/user-logged-in.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { observer } from "mobx-react";
-import Image from "next/image";
 import { PlaneLockup } from "@plane/propel/icons";
 // assets
 import UserLoggedInImage from "@/app/assets/user-logged-in.svg?url";
@@ -28,7 +27,7 @@ export const UserLoggedIn = observer(() => {
         <div className="text-center">
           <div className="mx-auto size-32 md:size-52 grid place-items-center rounded-full bg-custom-background-80">
             <div className="size-16 md:size-32 grid place-items-center">
-              <Image src={UserLoggedInImage} alt="User already logged in" />
+              <img src={UserLoggedInImage} alt="User already logged in" className="w-full h-full object-cover" />
             </div>
           </div>
           <h1 className="mt-8 md:mt-12 text-xl md:text-3xl font-semibold">Nice! Just one more step.</h1>

apps/space/core/components/common/logo-spinner.tsx

@@ -1,5 +1,5 @@
 "use client";
-import Image from "next/image";
+
 import { useTheme } from "next-themes";
 // assets
 import LogoSpinnerDark from "@/app/assets/images/logo-spinner-dark.gif?url";
@@ -12,7 +12,7 @@ export const LogoSpinner = () => {
 
   return (
     <div className="flex items-center justify-center">
-      <Image src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
+      <img src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
     </div>
   );
 };

apps/space/core/components/instance/instance-failure-view.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import Image from "next/image";
 import { useTheme } from "next-themes";
 import { Button } from "@plane/propel/button";
 // assets
@@ -20,7 +19,7 @@ export const InstanceFailureView: React.FC = () => {
     <div className="relative h-screen overflow-x-hidden overflow-y-auto container px-5 mx-auto flex justify-center items-center">
       <div className="w-auto max-w-2xl relative space-y-8 py-10">
         <div className="relative flex flex-col justify-center items-center space-y-4">
-          <Image src={instanceImage} alt="Plane instance failure image" />
+          <img src={instanceImage} alt="Plane instance failure image" />
           <h3 className="font-medium text-2xl text-white ">Unable to fetch instance details.</h3>
           <p className="font-medium text-base text-center">
             We were unable to fetch the details of the instance. <br />

apps/space/core/components/issues/issue-layouts/error.tsx

@@ -1,4 +1,3 @@
-import Image from "next/image";
 // assets
 import SomethingWentWrongImage from "@/app/assets/something-went-wrong.svg?url";
 
@@ -7,7 +6,11 @@ export const SomethingWentWrongError = () => (
     <div className="text-center">
       <div className="mx-auto grid h-52 w-52 place-items-center rounded-full bg-custom-background-80">
         <div className="grid h-32 w-32 place-items-center">
-          <Image src={SomethingWentWrongImage} alt="Oops! Something went wrong" />
+          <img
+            src={SomethingWentWrongImage}
+            alt="Oops! Something went wrong"
+            className="w-full h-full object-contain"
+          />
         </div>
       </div>
       <h1 className="mt-12 text-3xl font-semibold">Oops! Something went wrong.</h1>

apps/space/core/components/ui/not-found.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import Image from "next/image";
 // images
 import Image404 from "@/app/assets/404.svg?url";
 
@@ -9,7 +8,7 @@ export const PageNotFound = () => (
     <div className="grid h-full place-items-center p-4">
       <div className="space-y-8 text-center">
         <div className="relative mx-auto h-60 w-60 lg:h-80 lg:w-80">
-          <Image src={Image404} alt="404- Page not found" />
+          <img src={Image404} alt="404- Page not found" className="w-full h-full object-contain" />
         </div>
         <div className="space-y-2">
           <h3 className="text-lg font-semibold">Oops! Something went wrong.</h3>

apps/space/core/lib/instance-provider.tsx

@@ -1,17 +1,15 @@
 "use client";
 
 import { observer } from "mobx-react";
-import Image from "next/image";
 import Link from "next/link";
 import { useTheme } from "next-themes";
 import useSWR from "swr";
 // plane imports
 import { SPACE_BASE_PATH } from "@plane/constants";
+import { PlaneLockup } from "@plane/propel/icons";
 // assets
 import PlaneBackgroundPatternDark from "@/app/assets/auth/background-pattern-dark.svg?url";
 import PlaneBackgroundPattern from "@/app/assets/auth/background-pattern.svg?url";
-import BlackHorizontalLogo from "@/app/assets/plane-logos/black-horizontal-with-blue-logo.png?url";
-import WhiteHorizontalLogo from "@/app/assets/plane-logos/white-horizontal-with-blue-logo.png?url";
 // components
 import { LogoSpinner } from "@/components/common/logo-spinner";
 import { InstanceFailureView } from "@/components/instance/instance-failure-view";
@@ -44,20 +42,19 @@ export const InstanceProvider = observer(({ children }: { children: React.ReactN
       </div>
     );
 
-  const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo;
   if (error) {
     return (
       <div className="relative">
         <div className="h-screen w-full overflow-hidden overflow-y-auto flex flex-col">
           <div className="container h-[110px] flex-shrink-0 mx-auto px-5 lg:px-0 flex items-center justify-between gap-5 z-50">
             <div className="flex items-center gap-x-2 py-10">
-              <Link href={`${SPACE_BASE_PATH}/`} className="h-[30px] w-[133px]">
+              <Link href={`${SPACE_BASE_PATH}/`}>
-                <Image src={logo} alt="Plane logo" />
+                <PlaneLockup className="h-7 w-auto text-custom-text-100" />
               </Link>
             </div>
           </div>
           <div className="absolute inset-0 z-0">
-            <Image src={patternBackground} className="w-screen h-full object-cover" alt="Plane background pattern" />
+            <img src={patternBackground} className="w-screen h-full object-cover" alt="Plane background pattern" />
           </div>
           <div className="relative z-10 flex-grow">
             <div className="relative h-full w-full overflow-y-auto px-6 py-10 mx-auto flex justify-center items-center">

apps/space/vite.config.ts

@@ -29,7 +29,6 @@ export default defineConfig(() => ({
   resolve: {
     alias: {
       // Next.js compatibility shims used within space
-      "next/image": path.resolve(__dirname, "app/compat/next/image.tsx"),
       "next/link": path.resolve(__dirname, "app/compat/next/link.tsx"),
       "next/navigation": path.resolve(__dirname, "app/compat/next/navigation.ts"),
     },

apps/web/app/(all)/[workspaceSlug]/(projects)/star-us-link.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import Image from "next/image";
 import { useTheme } from "next-themes";
 // plane imports
 import { HEADER_GITHUB_ICON, GITHUB_REDIRECTED_TRACKER_EVENT } from "@plane/constants";
@@ -37,7 +36,7 @@ export const StarUsOnGitHubLink = () => {
       target="_blank"
       rel="noopener noreferrer"
     >
-      <Image src={imageSrc} height={16} width={16} alt="GitHub Logo" aria-hidden="true" />
+      <img src={imageSrc} className="h-4 w-4 object-contain" alt="GitHub Logo" aria-hidden="true" />
       <span className="hidden text-xs font-medium sm:hidden md:block">{t("home.star_us_on_github")}</span>
     </a>
   );

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx

@@ -1,5 +1,4 @@
 "use client";
-import Image from "next/image";
 import Link from "next/link";
 import { useTheme } from "next-themes";
 import { PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
@@ -18,7 +17,7 @@ const ProjectSettingsPage = () => {
       : "/empty-state/project-settings/no-projects-light.png";
   return (
     <div className="flex flex-col gap-4 items-center justify-center h-full max-w-[480px] mx-auto">
-      <Image src={resolvedPath} alt="No projects yet" width={384} height={250} />
+      <img src={resolvedPath} className="w-full h-full object-contain" alt="No projects yet" />
       <div className="text-lg font-semibold text-custom-text-350">No projects yet</div>
       <div className="text-sm text-custom-text-350 text-center">
         Projects act as the foundation for goal-driven work. They let you manage your teams, tasks, and everything you

apps/web/app/(all)/create-workspace/page.tsx

@@ -2,7 +2,6 @@
 
 import { useState } from "react";
 import { observer } from "mobx-react";
-import Image from "next/image";
 import Link from "next/link";
 // plane imports
 import { useTranslation } from "@plane/i18n";
@@ -71,7 +70,11 @@ function CreateWorkspacePage() {
         <div className="relative flex h-full justify-center px-8 pb-8 sm:w-10/12 sm:items-center sm:justify-start sm:p-0 sm:pr-[8.33%] md:w-9/12 lg:w-4/5">
           {isWorkspaceCreationDisabled ? (
             <div className="w-4/5 h-full flex flex-col items-center justify-center text-lg font-medium gap-1">
-              <Image src={WorkspaceCreationDisabled} width={200} alt="Workspace creation disabled" className="mb-4" />
+              <img
+                src={WorkspaceCreationDisabled}
+                className="w-full h-full object-contain mb-4"
+                alt="Workspace creation disabled"
+              />
               <div className="text-lg font-medium text-center">
                 {t("workspace_creation.errors.creation_disabled.title")}
               </div>

apps/web/app/not-found.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import Image from "next/image";
 import Link from "next/link";
 // ui
 import { Button } from "@plane/propel/button";
@@ -19,7 +18,7 @@ const PageNotFound = () => (
     <div className="grid h-full place-items-center p-4">
       <div className="space-y-8 text-center">
         <div className="relative mx-auto h-60 w-60 lg:h-80 lg:w-80">
-          <Image src={Image404} fill alt="404- Page not found" />
+          <img src={Image404} className="h-full w-full object-contain" alt="404- Page not found" />
         </div>
         <div className="space-y-2">
           <h3 className="text-lg font-semibold">Oops! Something went wrong.</h3>

apps/web/app/types/next-image.d.ts

@@ -1,12 +0,0 @@
-declare module "next/image" {
-  type Props = React.ComponentProps<"img"> & {
-    src: string;
-    fill?: boolean;
-    priority?: boolean;
-    quality?: number;
-    placeholder?: "blur" | "empty";
-    blurDataURL?: string;
-  };
-  const Image: React.FC<Props>;
-  export default Image;
-}

apps/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx

@@ -1,8 +1,6 @@
 "use client";
 
-import React from "react";
 import { observer } from "mobx-react";
-import Image from "next/image";
 import { AlertOctagon, BarChart4, CircleDashed, Folder, Microscope, Search } from "lucide-react";
 // plane imports
 import { MARKETING_PRICING_PAGE_LINK } from "@plane/constants";
@@ -99,21 +97,19 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
             </a>
           </div>
           <span className="absolute left-0 top-0">
-            <Image
+            <img
               src={isDarkMode ? ctaL1Dark : ctaL1Light}
-              height={125}
+              className="w-[125px] h-[125px] object-contain rounded-xl"
-              width={125}
-              className="rounded-xl"
               alt="l-1"
             />
           </span>
         </div>
         <div className="relative hidden w-1/2 lg:block">
           <span className="absolute bottom-0 right-0">
-            <Image src={isDarkMode ? ctaR1Dark : ctaR1Light} height={420} width={500} alt="r-1" />
+            <img src={isDarkMode ? ctaR1Dark : ctaR1Light} className="w-full h-full object-contain" alt="r-1" />
           </span>
           <span className="absolute -bottom-16 right-1/2 rounded-xl">
-            <Image src={isDarkMode ? ctaR2Dark : ctaR2Light} height={210} width={280} alt="r-2" />
+            <img src={isDarkMode ? ctaR2Dark : ctaR2Light} className="w-full h-full object-contain" alt="r-2" />
           </span>
         </div>
       </div>

apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/assets.tsx

@@ -1,4 +1,3 @@
-import Image from "next/image";
 import { useTheme } from "next-themes";
 // plane imports
 import { useTranslation } from "@plane/i18n";
@@ -17,7 +16,11 @@ export const PageNavigationPaneAssetsTabEmptyState = () => {
   return (
     <div className="size-full grid place-items-center">
       <div className="flex flex-col items-center gap-y-6 text-center">
-        <Image src={resolvedPath} width={160} height={160} alt="An image depicting the assets of a page" />
+        <img
+          src={resolvedPath}
+          className="w-[160px] h-[160px] object-contain"
+          alt="An image depicting the assets of a page"
+        />
         <div className="space-y-2.5">
           <h4 className="text-base font-medium">{t("page_navigation_pane.tabs.assets.empty_state.title")}</h4>
           <p className="text-sm text-custom-text-200 font-medium">

apps/web/ce/components/pages/navigation-pane/tab-panels/empty-states/outline.tsx

@@ -1,4 +1,3 @@
-import Image from "next/image";
 import { useTheme } from "next-themes";
 // plane imports
 import { useTranslation } from "@plane/i18n";
@@ -17,7 +16,11 @@ export const PageNavigationPaneOutlineTabEmptyState = () => {
   return (
     <div className="size-full grid place-items-center">
       <div className="flex flex-col items-center gap-y-6 text-center">
-        <Image src={resolvedPath} width={160} height={160} alt="An image depicting the outline of a page" />
+        <img
+          src={resolvedPath}
+          className="w-[160px] h-[160px] object-contain"
+          alt="An image depicting the outline of a page"
+        />
         <div className="space-y-2.5">
           <h4 className="text-base font-medium">{t("page_navigation_pane.tabs.outline.empty_state.title")}</h4>
           <p className="text-sm text-custom-text-200 font-medium">

apps/web/core/components/account/auth-forms/auth-root.tsx

@@ -1,7 +1,6 @@
 import type { FC } from "react";
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
-import Image from "next/image";
 import { useSearchParams } from "next/navigation";
 import { useTheme } from "next-themes";
 // plane imports
@@ -112,7 +111,7 @@ export const AuthRoot: FC<TAuthRoot> = observer((props) => {
     {
       id: "google",
       text: `${OauthButtonContent} with Google`,
-      icon: <Image src={GoogleLogo} height={18} width={18} alt="Google Logo" />,
+      icon: <img src={GoogleLogo} className="h-4 w-4 object-contain" alt="Google Logo" />,
       onClick: () => {
         window.location.assign(`${API_BASE_URL}/auth/google/${next_path ? `?next_path=${next_path}` : ``}`);
       },
@@ -122,10 +121,9 @@ export const AuthRoot: FC<TAuthRoot> = observer((props) => {
       id: "github",
       text: `${OauthButtonContent} with GitHub`,
       icon: (
-        <Image
+        <img
           src={resolvedTheme === "dark" ? GithubDarkLogo : GithubLightLogo}
-          height={18}
+          className="h-4 w-4 object-contain"
-          width={18}
           alt="GitHub Logo"
         />
       ),
@@ -137,7 +135,7 @@ export const AuthRoot: FC<TAuthRoot> = observer((props) => {
     {
       id: "gitlab",
       text: `${OauthButtonContent} with GitLab`,
-      icon: <Image src={GitlabLogo} height={18} width={18} alt="GitLab Logo" />,
+      icon: <img src={GitlabLogo} className="h-4 w-4 object-contain" alt="GitLab Logo" />,
       onClick: () => {
         window.location.assign(`${API_BASE_URL}/auth/gitlab/${next_path ? `?next_path=${next_path}` : ``}`);
       },

apps/web/core/components/analytics/empty-state.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-import Image from "next/image";
 import { useTheme } from "next-themes";
 // plane package imports
 import { cn } from "@plane/utils";
@@ -29,16 +27,9 @@ const AnalyticsEmptyState = ({ title, description, assetPath, className }: Props
       <div className={cn("flex flex-col items-center")}>
         {assetPath && (
           <div className="relative flex max-h-[200px] max-w-[200px] items-center justify-center">
-            <Image src={assetPath} alt={title} width={100} height={100} layout="fixed" className="z-10 h-2/3 w-2/3" />
+            <img src={assetPath} alt={title} className="z-10 h-2/3 w-2/3 object-contain" />
             <div className="absolute inset-0">
-              <Image
+              <img src={backgroundReolvedPath} alt={title} className="h-full w-full object-contain" />
-                src={backgroundReolvedPath}
-                alt={title}
-                width={100}
-                height={100}
-                layout="fixed"
-                className="h-full w-full"
-              />
             </div>
           </div>
         )}

apps/web/core/components/api-token/empty-state.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React from "react";
-import Image from "next/image";
 // ui
 import { Button } from "@plane/propel/button";
 // assets
@@ -19,7 +18,7 @@ export const ApiTokenEmptyState: React.FC<Props> = (props) => {
       className={`mx-auto flex w-full items-center justify-center rounded-sm border border-custom-border-200 bg-custom-background-90 px-16 py-10 lg:w-3/4`}
     >
       <div className="flex w-full flex-col items-center text-center">
-        <Image src={emptyApiTokens} className="w-52 sm:w-60" alt="empty" />
+        <img src={emptyApiTokens} className="w-52 sm:w-60 object-contain" alt="empty" />
         <h6 className="mb-3 mt-6 text-xl font-semibold sm:mt-8">No API tokens</h6>
         <p className="mb-7 text-custom-text-300 sm:mb-8">
           Create API tokens for safe and easy data sharing with external apps, maintaining control and security.

apps/web/core/components/auth-screens/not-authorized-view.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { observer } from "mobx-react";
-import Image from "next/image";
 // assets
 import ProjectNotAuthorizedImg from "@/app/assets/auth/project-not-authorized.svg?url";
 import Unauthorized from "@/app/assets/auth/unauthorized.svg?url";
@@ -26,7 +25,7 @@ export const NotAuthorizedView: React.FC<Props> = observer((props) => {
     <DefaultLayout className={className}>
       <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-custom-background-100 text-center">
         <div className="h-44 w-72">
-          <Image src={asset} height="176" width="288" alt="ProjectSettingImg" />
+          <img src={asset} className="h-[176px] w-[288px] object-contain" alt="ProjectSettingImg" />
         </div>
         <h1 className="text-xl font-medium text-custom-text-100">Oops! You are not authorized to view this page</h1>
         {actionButton}

apps/web/core/components/auth-screens/project/join-project.tsx

@@ -1,6 +1,5 @@
 "use client";
 import { useState } from "react";
-import Image from "next/image";
 import { useParams } from "next/navigation";
 import { ClipboardList } from "lucide-react";
 // plane imports
@@ -39,7 +38,7 @@ export const JoinProject: React.FC<Props> = (props) => {
   return (
     <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-custom-background-100 text-center">
       <div className="h-44 w-72">
-        <Image src={Unauthorized} height="176" width="288" alt="JoinProject" />
+        <img src={Unauthorized} className="h-[176px] w-[288px] object-contain" alt="JoinProject" />
       </div>
       <h1 className="text-xl font-medium text-custom-text-100">
         {!isPrivateProject ? `You are not a member of this project yet.` : `You are not a member of this project.`}

apps/web/core/components/common/empty-state.tsx

@@ -1,8 +1,6 @@
 "use client";
 import React from "react";
 
-import Image from "next/image";
-
 // ui
 import { Button } from "@plane/propel/button";
 
@@ -29,7 +27,7 @@ export const EmptyState: React.FC<Props> = ({
 }) => (
   <div className={`flex h-full w-full items-center justify-center`}>
     <div className="flex w-full flex-col items-center text-center">
-      <Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text || "button image"} />
+      <img src={image} className="w-52 sm:w-60 object-contain" alt={primaryButton?.text || "button image"} />
       <h6 className="mb-3 mt-6 text-xl font-semibold sm:mt-8">{title}</h6>
       {description && <p className="mb-7 px-5 text-custom-text-300 sm:mb-8">{description}</p>}
       <div className="flex items-center gap-4">

apps/web/core/components/common/latest-feature-block.tsx

@@ -1,4 +1,3 @@
-import Image from "next/image";
 import Link from "next/link";
 import { useTheme } from "next-themes";
 // icons
@@ -26,7 +25,7 @@ export const LatestFeatureBlock = () => {
         }`}
       >
         <div className="h-[90%]">
-          <Image
+          <img
             src={latestFeatures}
             alt="Plane Work items"
             className={`-mt-2 ml-10 h-full rounded-md ${

apps/web/core/components/common/logo-spinner.tsx

@@ -1,4 +1,3 @@
-import Image from "next/image";
 import { useTheme } from "next-themes";
 // assets
 import LogoSpinnerDark from "@/app/assets/images/logo-spinner-dark.gif?url";
@@ -11,7 +10,7 @@ export const LogoSpinner = () => {
 
   return (
     <div className="flex items-center justify-center">
-      <Image src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
+      <img src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11 object-contain" />
     </div>
   );
 };

apps/web/core/components/common/new-empty-state.tsx

@@ -1,8 +1,6 @@
 "use client";
 import React, { useState } from "react";
 
-import Image from "next/image";
-
 // ui
 import { Button } from "@plane/propel/button";
 
@@ -48,7 +46,7 @@ export const NewEmptyState: React.FC<Props> = ({
           <h3 className="text-2xl font-semibold">{title}</h3>
           {description && <p className=" text-lg">{description}</p>}
           <div className="relative w-full max-w-6xl">
-            <Image src={image} className="w-full" alt={primaryButton?.text || "button image"} />
+            <img src={image} className="w-full h-full object-contain" alt={primaryButton?.text || "button image"} />
           </div>
 
           <div className="relative flex items-start justify-center">

apps/web/core/components/core/image-picker-popover.tsx

@@ -2,7 +2,6 @@
 
 import React, { useState, useRef, useCallback } from "react";
 import { observer } from "mobx-react";
-import Image from "next/image";
 import { useParams } from "next/navigation";
 import { useDropzone } from "react-dropzone";
 import type { Control } from "react-hook-form";
@@ -329,12 +328,10 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
                         </button>
                         {image !== null || (value && value !== "") ? (
                           <>
-                            <Image
+                            <img
-                              layout="fill"
-                              objectFit="cover"
                               src={image ? URL.createObjectURL(image) : value ? (getFileURL(value) ?? "") : ""}
                               alt="image"
-                              className="rounded-lg"
+                              className="rounded-lg h-full w-full object-cover"
                             />
                           </>
                         ) : (

apps/web/core/components/core/sidebar/progress-stats/assignee.tsx

@@ -1,5 +1,4 @@
 import { observer } from "mobx-react";
-import Image from "next/image";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { Avatar } from "@plane/ui";
@@ -57,7 +56,7 @@ export const AssigneeStatComponent = observer((props: TAssigneeStatComponent) =>
                 title={
                   <div className="flex items-center gap-2">
                     <div className="h-4 w-4 rounded-full border-2 border-custom-border-200 bg-custom-background-80">
-                      <img src={userImage} height="100%" width="100%" className="rounded-full" alt="User" />
+                      <img src={userImage} className="rounded-full w-full h-full object-cover" alt="User" />
                     </div>
                     <span>{t("no_assignee")}</span>
                   </div>
@@ -70,7 +69,7 @@ export const AssigneeStatComponent = observer((props: TAssigneeStatComponent) =>
       ) : (
         <div className="flex h-full flex-col items-center justify-center gap-2">
           <div className="flex h-20 w-20 items-center justify-center rounded-full bg-custom-background-80">
-            <Image src={emptyMembers} className="h-12 w-12" alt="empty members" />
+            <img src={emptyMembers} className="h-12 w-12 object-contain" alt="empty members" />
           </div>
           <h6 className="text-base text-custom-text-300">{t("no_assignee")}</h6>
         </div>

apps/web/core/components/core/sidebar/progress-stats/label.tsx

@@ -1,5 +1,4 @@
 import { observer } from "mobx-react";
-import Image from "next/image";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 // assets
@@ -76,7 +75,7 @@ export const LabelStatComponent = observer((props: TLabelStatComponent) => {
       ) : (
         <div className="flex h-full flex-col items-center justify-center gap-2">
           <div className="flex h-20 w-20 items-center justify-center rounded-full bg-custom-background-80">
-            <Image src={emptyLabel} className="h-12 w-12" alt="empty label" />
+            <img src={emptyLabel} className="h-12 w-12 object-contain" alt="empty label" />
           </div>
           <h6 className="text-base text-custom-text-300">{t("no_labels_yet")}</h6>
         </div>

apps/web/core/components/cycles/archived-cycles/view.tsx

@@ -1,6 +1,5 @@
 import type { FC } from "react";
 import { observer } from "mobx-react";
-import Image from "next/image";
 // assets
 import AllFiltersImage from "@/app/assets/empty-state/cycle/all-filters.svg?url";
 import NameFilterImage from "@/app/assets/empty-state/cycle/name-filter.svg?url";
@@ -31,7 +30,7 @@ export const ArchivedCyclesView: FC<IArchivedCyclesView> = observer((props) => {
     return (
       <div className="h-full w-full grid place-items-center">
         <div className="text-center">
-          <Image
+          <img
             src={archivedCyclesSearchQuery.trim() === "" ? AllFiltersImage : NameFilterImage}
             className="h-36 sm:h-48 w-36 sm:w-48 mx-auto"
             alt="No matching cycles"

apps/web/core/components/cycles/cycles-view.tsx

@@ -1,6 +1,5 @@
 import type { FC } from "react";
 import { observer } from "mobx-react";
-import Image from "next/image";
 // components
 import { useTranslation } from "@plane/i18n";
 // assets
@@ -37,9 +36,9 @@ export const CyclesView: FC<ICyclesView> = observer((props) => {
     return (
       <div className="grid h-full w-full place-items-center">
         <div className="text-center">
-          <Image
+          <img
             src={searchQuery.trim() === "" ? AllFiltersImage : NameFilterImage}
-            className="mx-auto h-36 w-36 sm:h-48 sm:w-48"
+            className="mx-auto h-36 w-36 sm:h-48 sm:w-48 object-contain"
             alt="No matching cycles"
           />
           <h5 className="mb-1 mt-7 text-xl font-medium">{t("project_cycles.no_matching_cycles")}</h5>

apps/web/core/components/empty-state/simple-empty-state-root.tsx

@@ -1,8 +1,6 @@
 "use client";
 
-import React from "react";
 import { observer } from "mobx-react";
-import Image from "next/image";
 // utils
 import { cn } from "@plane/utils";
 
@@ -39,14 +37,7 @@ export const SimpleEmptyState = observer((props: Props) => {
     <div className="text-center flex flex-col gap-2.5 items-center">
       {assetPath && (
         <div className={sizeConfig[size].container}>
-          <Image
+          <img src={assetPath} alt={title} className="h-full w-full object-contain" />
-            src={assetPath}
-            alt={title}
-            height={sizeConfig[size].dimensions}
-            width={sizeConfig[size].dimensions}
-            layout="responsive"
-            lazyBoundary="100%"
-          />
         </div>
       )}
 

apps/web/core/components/icons/attachment/audio-file-icon.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import Image from "next/image";
 // image
 import AudioFileIcon from "@/app/assets/attachment/audio-icon.png?url";
 
@@ -9,5 +8,5 @@ export type AudioIconProps = {
 };
 
 export const AudioIcon: React.FC<AudioIconProps> = ({ width, height }) => (
-  <Image src={AudioFileIcon} height={height} width={width} alt="AudioFileIcon" />
+  <img src={AudioFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="AudioFileIcon" />
 );

apps/web/core/components/icons/attachment/css-file-icon.tsx

@@ -1,10 +1,9 @@
 import React from "react";
-import Image from "next/image";
 // image
 import CssFileIcon from "@/app/assets/attachment/css-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
 export const CssIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <Image src={CssFileIcon} height={height} width={width} alt="CssFileIcon" />
+  <img src={CssFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="CssFileIcon" />
 );

apps/web/core/components/icons/attachment/csv-file-icon.tsx

@@ -1,10 +1,9 @@
 import React from "react";
-import Image from "next/image";
 // image
 import CSVFileIcon from "@/app/assets/attachment/csv-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
 export const CsvIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <Image src={CSVFileIcon} height={height} width={width} alt="CSVFileIcon" />
+  <img src={CSVFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="CSVFileIcon" />
 );

apps/web/core/components/icons/attachment/default-file-icon.tsx

@@ -1,10 +1,15 @@
 import React from "react";
-import Image from "next/image";
 // image
 import DefaultFileIcon from "@/app/assets/attachment/default-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
 export const DefaultIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <Image src={DefaultFileIcon} height={height} width={width} alt="DefaultFileIcon" />
+  <img
+    src={DefaultFileIcon}
+    width={width}
+    height={height}
+    className="h-full w-full object-contain"
+    alt="DefaultFileIcon"
+  />
 );

apps/web/core/components/icons/attachment/doc-file-icon.tsx

@@ -1,10 +1,9 @@
 import React from "react";
-import Image from "next/image";
 // image
 import DocFileIcon from "@/app/assets/attachment/doc-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
 export const DocIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <Image src={DocFileIcon} height={height} width={width} alt="DocFileIcon" />
+  <img src={DocFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="DocFileIcon" />
 );

apps/web/core/components/icons/attachment/figma-file-icon.tsx

@@ -1,10 +1,9 @@
 import React from "react";
-import Image from "next/image";
 // image
 import FigmaFileIcon from "@/app/assets/attachment/figma-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
 export const FigmaIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <Image src={FigmaFileIcon} height={height} width={width} alt="FigmaFileIcon" />
+  <img src={FigmaFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="FigmaFileIcon" />
 );

apps/web/core/components/icons/attachment/html-file-icon.tsx

@@ -1,10 +1,9 @@
 import React from "react";
-import Image from "next/image";
 // image
 import HtmlFileIcon from "@/app/assets/attachment/html-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
 export const HtmlIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <Image src={HtmlFileIcon} height={height} width={width} alt="HtmlFileIcon" />
+  <img src={HtmlFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="HtmlFileIcon" />
 );

apps/web/core/components/icons/attachment/img-file-icon.tsx

@@ -1,10 +1,9 @@
 import React from "react";
-import Image from "next/image";
 // image
 import ImgFileIcon from "@/app/assets/attachment/img-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
 export const ImgIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <Image src={ImgFileIcon} height={height} width={width} alt="ImgFileIcon" />
+  <img src={ImgFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="ImgFileIcon" />
 );

apps/web/core/components/icons/attachment/jpg-file-icon.tsx

@@ -1,10 +1,9 @@
 import React from "react";
-import Image from "next/image";
 // image
 import JpgFileIcon from "@/app/assets/attachment/jpg-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
 export const JpgIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <Image src={JpgFileIcon} height={height} width={width} alt="JpgFileIcon" />
+  <img src={JpgFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="JpgFileIcon" />
 );

apps/web/core/components/icons/attachment/js-file-icon.tsx

@@ -1,10 +1,9 @@
 import React from "react";
-import Image from "next/image";
 // image
 import JsFileIcon from "@/app/assets/attachment/js-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
 export const JavaScriptIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <Image src={JsFileIcon} height={height} width={width} alt="JsFileIcon" />
+  <img src={JsFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="JsFileIcon" />
 );

apps/web/core/components/icons/attachment/pdf-file-icon.tsx

@@ -1,10 +1,9 @@
 import React from "react";
-import Image from "next/image";
 // image
 import PDFFileIcon from "@/app/assets/attachment/pdf-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
 export const PdfIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <Image src={PDFFileIcon} height={height} width={width} alt="PDFFileIcon" />
+  <img src={PDFFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="PDFFileIcon" />
 );

apps/web/core/components/icons/attachment/png-file-icon.tsx

@@ -1,10 +1,9 @@
 import React from "react";
-import Image from "next/image";
 // image
 import PngFileIcon from "@/app/assets/attachment/png-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
 export const PngIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <Image src={PngFileIcon} height={height} width={width} alt="PngFileIcon" />
+  <img src={PngFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="PngFileIcon" />
 );

apps/web/core/components/icons/attachment/rar-file-icon.tsx

@@ -1,10 +1,9 @@
 import React from "react";
-import Image from "next/image";
 // image
 import RarFileIcon from "@/app/assets/attachment/rar-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
 export const RarIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <Image src={RarFileIcon} height={height} width={width} alt="RarFileIcon" />
+  <img src={RarFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="RarFileIcon" />
 );

apps/web/core/components/icons/attachment/sheet-file-icon.tsx

@@ -1,10 +1,9 @@
 import React from "react";
-import Image from "next/image";
 // image
 import SheetFileIcon from "@/app/assets/attachment/excel-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
 export const SheetIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <Image src={SheetFileIcon} height={height} width={width} alt="SheetFileIcon" />
+  <img src={SheetFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="SheetFileIcon" />
 );

apps/web/core/components/icons/attachment/svg-file-icon.tsx

@@ -1,10 +1,9 @@
 import React from "react";
-import Image from "next/image";
 // image
 import SvgFileIcon from "@/app/assets/attachment/svg-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
 export const SvgIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <Image src={SvgFileIcon} height={height} width={width} alt="SvgFileIcon" />
+  <img src={SvgFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="SvgFileIcon" />
 );

apps/web/core/components/icons/attachment/txt-file-icon.tsx

@@ -1,10 +1,9 @@
 import React from "react";
-import Image from "next/image";
 // image
 import TxtFileIcon from "@/app/assets/attachment/txt-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
 export const TxtIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <Image src={TxtFileIcon} height={height} width={width} alt="TxtFileIcon" />
+  <img src={TxtFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="TxtFileIcon" />
 );

apps/web/core/components/icons/attachment/video-file-icon.tsx

@@ -1,10 +1,9 @@
 import React from "react";
-import Image from "next/image";
 // image
 import VideoFileIcon from "@/app/assets/attachment/video-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
 export const VideoIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <Image src={VideoFileIcon} height={height} width={width} alt="VideoFileIcon" />
+  <img src={VideoFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="VideoFileIcon" />
 );

apps/web/core/components/icons/attachment/zip-file-icon.tsx

@@ -1,10 +1,9 @@
 import React from "react";
-import Image from "next/image";
 // image
 import ZipFileIcon from "@/app/assets/attachment/zip-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
 export const ZipIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <Image src={ZipFileIcon} height={height} width={width} alt="ZipFileIcon" />
+  <img src={ZipFileIcon} width={width} height={height} className="h-full w-full object-contain" alt="ZipFileIcon" />
 );

apps/web/core/components/instance/maintenance-view.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import type { FC } from "react";
-import Image from "next/image";
 import { useTheme } from "next-themes";
 // assets
 import maintenanceModeDarkModeImage from "@/app/assets/instance/maintenance-mode-dark.svg?url";
@@ -20,7 +19,7 @@ export const MaintenanceView: FC = () => {
     <DefaultLayout>
       <div className="relative container mx-auto h-full w-full max-w-xl flex flex-col gap-2 items-center justify-center gap-y-6 bg-custom-background-100 text-center">
         <div className="relative w-full">
-          <Image
+          <img
             src={maintenanceModeImage}
             height="176"
             width="288"

apps/web/core/components/instance/not-ready-view.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import type { FC } from "react";
-import Image from "next/image";
 import Link from "next/link";
 import { useTheme } from "next-themes";
 import { GOD_MODE_URL } from "@plane/constants";
@@ -28,7 +27,7 @@ export const InstanceNotReady: FC = () => {
         </div>
 
         <div className="absolute inset-0 z-0">
-          <Image src={patternBackground} className="w-screen h-full object-cover" alt="Plane background pattern" />
+          <img src={patternBackground} className="w-full h-full object-cover" alt="Plane background pattern" />
         </div>
 
         <div className="relative z-10 mb-[110px] flex-grow">
@@ -36,7 +35,7 @@ export const InstanceNotReady: FC = () => {
             <div className="w-auto max-w-2xl relative space-y-8 py-10">
               <div className="relative flex flex-col justify-center items-center space-y-4">
                 <h1 className="text-3xl font-bold pb-3">Welcome aboard Plane!</h1>
-                <Image src={PlaneTakeOffImage} alt="Plane Logo" />
+                <img src={PlaneTakeOffImage} className="object-contain" alt="Plane Logo" />
                 <p className="font-medium text-base text-custom-text-400">
                   Get started by setting up your instance and workspace
                 </p>

apps/web/core/components/integration/github/root.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React, { useState } from "react";
-import Image from "next/image";
 import Link from "next/link";
 import { useParams, useSearchParams } from "next/navigation";
 import { useForm } from "react-hook-form";
@@ -168,7 +167,7 @@ export const GithubImporterRoot: React.FC = () => {
         <div className="space-y-4 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4">
           <div className="flex items-center gap-2">
             <div className="h-10 w-10 flex-shrink-0">
-              <Image src={GithubLogo} alt="GitHubLogo" />
+              <img src={GithubLogo} className="w-full h-full object-cover" alt="GitHubLogo" />
             </div>
             <div className="flex h-full w-full items-center justify-center">
               {integrationWorkflowData.map((integration, index) => (

apps/web/core/components/integration/guide.tsx

@@ -2,7 +2,6 @@
 
 import { useState } from "react";
 import { observer } from "mobx-react";
-import Image from "next/image";
 import Link from "next/link";
 import { useParams, useSearchParams } from "next/navigation";
 import useSWR, { mutate } from "swr";
@@ -103,10 +102,9 @@ const IntegrationGuide = observer(() => {
               >
                 <div className="flex items-start gap-4">
                   <div className="relative h-10 w-10 flex-shrink-0">
-                    <Image
+                    <img
                       src={getImporterLogo(service?.provider)}
-                      layout="fill"
+                      className="h-full w-full object-cover"
-                      objectFit="cover"
                       alt={`${t(service.i18n_title)} Logo`}
                     />
                   </div>

apps/web/core/components/integration/jira/root.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React, { useState } from "react";
-import Image from "next/image";
 import Link from "next/link";
 import { useParams } from "next/navigation";
 import { FormProvider, useForm } from "react-hook-form";
@@ -105,7 +104,7 @@ export const JiraImporterRoot: React.FC = () => {
       <div className="flex h-full flex-col space-y-4 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4">
         <div className="flex items-center gap-2">
           <div className="h-10 w-10 flex-shrink-0">
-            <Image src={JiraLogo} alt="jira logo" />
+            <img src={JiraLogo} className="w-full h-full object-cover" alt="jira logo" />
           </div>
           <div className="flex h-full w-full items-center justify-center">
             {integrationWorkflowData.map((integration, index) => (

apps/web/core/components/integration/single-integration-card.tsx

@@ -2,7 +2,6 @@
 
 import { useState } from "react";
 import { observer } from "mobx-react";
-import Image from "next/image";
 import { useParams } from "next/navigation";
 import useSWR, { mutate } from "swr";
 import { CheckCircle } from "lucide-react";
@@ -108,7 +107,11 @@ export const SingleIntegrationCard: React.FC<Props> = observer(({ integration })
     <div className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6">
       <div className="flex items-start gap-4">
         <div className="h-10 w-10 flex-shrink-0">
-          <Image src={integrationDetails[integration.provider].logo} alt={`${integration.title} Logo`} />
+          <img
+            src={integrationDetails[integration.provider].logo}
+            className="w-full h-full object-cover"
+            alt={`${integration.title} Logo`}
+          />
         </div>
         <div>
           <h3 className="flex items-center gap-2 text-sm font-medium">

apps/web/core/components/modules/archived-modules/view.tsx

@@ -1,6 +1,5 @@
 import type { FC } from "react";
 import { observer } from "mobx-react";
-import Image from "next/image";
 // assets
 import AllFiltersImage from "@/app/assets/empty-state/module/all-filters.svg?url";
 import NameFilterImage from "@/app/assets/empty-state/module/name-filter.svg?url";
@@ -31,7 +30,7 @@ export const ArchivedModulesView: FC<IArchivedModulesView> = observer((props) =>
     return (
       <div className="h-full w-full grid place-items-center">
         <div className="text-center">
-          <Image
+          <img
             src={archivedModulesSearchQuery.trim() === "" ? AllFiltersImage : NameFilterImage}
             className="h-36 sm:h-48 w-36 sm:w-48 mx-auto"
             alt="No matching modules"

apps/web/core/components/onboarding/tour/root.tsx

@@ -2,7 +2,6 @@
 
 import { useState } from "react";
 import { observer } from "mobx-react";
-import Image from "next/image";
 // plane imports
 import { PRODUCT_TOUR_TRACKER_ELEMENTS } from "@plane/constants";
 import { Button } from "@plane/propel/button";
@@ -151,7 +150,7 @@ export const TourRoot: React.FC<Props> = observer((props) => {
                 currentStepIndex % 2 === 0 ? "justify-end" : "justify-start"
               }`}
             >
-              <Image src={currentStep?.image} alt={currentStep?.title} />
+              <img src={currentStep?.image} className="w-full h-full object-cover" alt={currentStep?.title} />
             </div>
             <div className="flex h-1/2 flex-col overflow-y-auto p-4 sm:h-2/5">
               <h3 className="font-semibold sm:text-xl">{currentStep?.title}</h3>

apps/web/core/components/project/empty-state.tsx

@@ -1,9 +1,6 @@
 "use client";
 
 import React from "react";
-
-import Image from "next/image";
-
 // ui
 import { Button } from "@plane/propel/button";
 
@@ -30,7 +27,7 @@ export const EmptyState: React.FC<Props> = ({
 }) => (
   <div className="flex h-full w-full items-center justify-center px-5 md:px-10 lg:p-20">
     <div className="relative h-full w-full max-w-6xl">
-      <Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text ?? ""} layout="fill" />
+      <img src={image} className="w-52 sm:w-60 object-cover" alt={primaryButton?.text ?? ""} />
     </div>
     <div className="absolute flex w-full flex-col items-center pt-[30vh] text-center md:pt-[35vh] lg:pt-[45vh]">
       <h6 className="mt-6 text-xl font-semibold">{title}</h6>

apps/web/core/components/project/integration-card.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React from "react";
-import Image from "next/image";
 import { useParams } from "next/navigation";
 import useSWR, { mutate } from "swr";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
@@ -87,8 +86,9 @@ export const IntegrationCard: React.FC<Props> = ({ integration }) => {
         <div className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6">
           <div className="flex items-start gap-4">
             <div className="h-10 w-10 flex-shrink-0">
-              <Image
+              <img
                 src={integrationDetails[integration.integration_detail.provider].logo}
+                className="w-full h-full object-cover"
                 alt={`${integration.integration_detail.title} Logo`}
               />
             </div>

apps/web/core/components/ui/profile-empty-state.tsx

@@ -1,7 +1,5 @@
 import React from "react";
 
-import Image from "next/image";
-
 type Props = {
   title: string;
   description?: React.ReactNode;
@@ -12,7 +10,7 @@ export const ProfileEmptyState: React.FC<Props> = ({ title, description, image }
   <div className={`mx-auto grid h-full w-full place-items-center p-8 `}>
     <div className="flex w-full flex-col items-center text-center">
       <div className="flex h-14 w-14 items-center justify-center rounded-full bg-custom-background-90">
-        <Image src={image} width={32} alt={title} />
+        <img src={image} width="32" height="32" className="w-full h-full object-cover" alt={title} />
       </div>
       <h6 className="mb-3 mt-3.5 text-base font-semibold">{title}</h6>
       {description && <p className="text-sm text-custom-text-300">{description}</p>}

apps/web/core/components/web-hooks/empty-state.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React from "react";
-import Image from "next/image";
 // ui
 import { Button } from "@plane/propel/button";
 // assets
@@ -18,7 +17,7 @@ export const WebhooksEmptyState: React.FC<Props> = (props) => {
       className={`mx-auto flex w-full items-center justify-center rounded-sm border border-custom-border-200 bg-custom-background-90 px-16 py-10 lg:w-3/4`}
     >
       <div className="flex w-full flex-col items-center text-center">
-        <Image src={EmptyWebhook} className="w-52 sm:w-60" alt="empty" />
+        <img src={EmptyWebhook} className="w-52 sm:w-60 object-cover" alt="empty" />
         <h6 className="mb-3 mt-6 text-xl font-semibold sm:mt-8">No webhooks</h6>
         <p className="mb-7 text-custom-text-300 sm:mb-8">
           Create webhooks to receive real-time updates and automate actions

apps/web/core/layouts/auth-layout/workspace-wrapper.tsx

@@ -2,7 +2,6 @@
 
 import type { FC, ReactNode } from "react";
 import { observer } from "mobx-react";
-import Image from "next/image";
 import Link from "next/link";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
@@ -160,7 +159,7 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
           </div>
           <div className="relative flex h-full w-full flex-grow flex-col items-center justify-center space-y-3">
             <div className="relative flex-shrink-0">
-              <Image src={WorkSpaceNotAvailable} className="h-[220px] object-contain object-center" alt="Plane logo" />
+              <img src={WorkSpaceNotAvailable} className="h-[220px] object-cover object-center" alt="Plane logo" />
             </div>
             <h3 className="text-center text-lg font-semibold">Workspace not found</h3>
             <p className="text-center text-sm text-custom-text-200">

apps/web/vite.config.ts

@@ -25,7 +25,6 @@ export default defineConfig(() => ({
   resolve: {
     alias: {
       // Next.js compatibility shims used within web
-      "next/image": path.resolve(__dirname, "app/compat/next/image.tsx"),
       "next/link": path.resolve(__dirname, "app/compat/next/link.tsx"),
       "next/navigation": path.resolve(__dirname, "app/compat/next/navigation.ts"),
       "next/script": path.resolve(__dirname, "app/compat/next/script.tsx"),