diff --git a/apps/space/components/account/auth-forms/password.tsx b/apps/space/components/account/auth-forms/password.tsx
index ba93fd27b5..3b17cdf18f 100644
--- a/apps/space/components/account/auth-forms/password.tsx
+++ b/apps/space/components/account/auth-forms/password.tsx
@@ -137,10 +137,15 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
             disabled
           />
           {passwordFormData.email.length > 0 && (
-            <CloseCircleOutline
-              className="absolute right-3 h-5 w-5 text-placeholder hover:cursor-pointer"
+            <button
+              type="button"
+              aria-label="Clear email"
+              className="absolute right-3 hover:cursor-pointer"
               onClick={handleEmailClear}
-            />
+              tabIndex={-1}
+            >
+              <CloseCircleOutline className="h-5 w-5 text-placeholder" />
+            </button>
           )}
         </div>
       </div>
@@ -163,15 +168,23 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
             autoFocus
           />
           {showPassword?.password ? (
-            <HideOutline
-              className="absolute right-3 h-5 w-5 text-placeholder hover:cursor-pointer"
+            <button
+              type="button"
+              aria-label="Hide password"
+              className="absolute right-3 hover:cursor-pointer"
               onClick={() => handleShowPassword("password")}
-            />
+            >
+              <HideOutline className="h-5 w-5 text-placeholder" />
+            </button>
           ) : (
-            <ShowOutline
-              className="absolute right-3 h-5 w-5 text-placeholder hover:cursor-pointer"
+            <button
+              type="button"
+              aria-label="Show password"
+              className="absolute right-3 hover:cursor-pointer"
               onClick={() => handleShowPassword("password")}
-            />
+            >
+              <ShowOutline className="h-5 w-5 text-placeholder" />
+            </button>
           )}
         </div>
         {passwordSupport}
@@ -195,15 +208,23 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
               autoComplete="off"
             />
             {showPassword?.retypePassword ? (
-              <HideOutline
-                className="absolute right-3 h-5 w-5 text-placeholder hover:cursor-pointer"
+              <button
+                type="button"
+                aria-label="Hide password"
+                className="absolute right-3 hover:cursor-pointer"
                 onClick={() => handleShowPassword("retypePassword")}
-              />
+              >
+                <HideOutline className="h-5 w-5 text-placeholder" />
+              </button>
             ) : (
-              <ShowOutline
-                className="absolute right-3 h-5 w-5 text-placeholder hover:cursor-pointer"
+              <button
+                type="button"
+                aria-label="Show password"
+                className="absolute right-3 hover:cursor-pointer"
                 onClick={() => handleShowPassword("retypePassword")}
-              />
+              >
+                <ShowOutline className="h-5 w-5 text-placeholder" />
+              </button>
             )}
           </div>
           {!!passwordFormData.confirm_password &&
diff --git a/apps/space/components/account/auth-forms/unique-code.tsx b/apps/space/components/account/auth-forms/unique-code.tsx
index c990bdae16..61f0587265 100644
--- a/apps/space/components/account/auth-forms/unique-code.tsx
+++ b/apps/space/components/account/auth-forms/unique-code.tsx
@@ -102,10 +102,15 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
             disabled
           />
           {uniqueCodeFormData.email.length > 0 && (
-            <CloseCircleOutline
-              className="absolute right-3 h-5 w-5 text-placeholder hover:cursor-pointer"
+            <button
+              type="button"
+              aria-label="Clear email"
+              className="absolute right-3 hover:cursor-pointer"
               onClick={handleEmailClear}
-            />
+              tabIndex={-1}
+            >
+              <CloseCircleOutline className="h-5 w-5 text-placeholder" />
+            </button>
           )}
         </div>
       </div>
diff --git a/apps/space/components/issues/filters/applied-filters/filters-list.tsx b/apps/space/components/issues/filters/applied-filters/filters-list.tsx
index c456f1c43b..701fb4959f 100644
--- a/apps/space/components/issues/filters/applied-filters/filters-list.tsx
+++ b/apps/space/components/issues/filters/applied-filters/filters-list.tsx
@@ -59,7 +59,7 @@ export const AppliedFiltersList = observer(function AppliedFiltersList(props: Pr
                 className="grid place-items-center text-tertiary hover:text-secondary"
                 onClick={() => handleRemoveFilter(filterKey, null)}
               >
-                <CloseOutline height={12} width={12} strokeWidth={2} />
+                <CloseOutline height={12} width={12} />
               </button>
             </div>
           </div>
@@ -71,7 +71,7 @@ export const AppliedFiltersList = observer(function AppliedFiltersList(props: Pr
         className="flex items-center gap-2 rounded-md border border-subtle px-2 py-1 text-11 text-tertiary hover:text-secondary"
       >
         {t("common.clear_all")}
-        <CloseOutline height={12} width={12} strokeWidth={2} />
+        <CloseOutline height={12} width={12} />
       </button>
     </div>
   );
diff --git a/apps/space/components/issues/filters/applied-filters/label.tsx b/apps/space/components/issues/filters/applied-filters/label.tsx
index 70f20266c2..23785b5f1f 100644
--- a/apps/space/components/issues/filters/applied-filters/label.tsx
+++ b/apps/space/components/issues/filters/applied-filters/label.tsx
@@ -38,7 +38,7 @@ export function AppliedLabelsFilters(props: Props) {
               className="grid place-items-center text-tertiary hover:text-secondary"
               onClick={() => handleRemove(labelId)}
             >
-              <CloseOutline height={10} width={10} strokeWidth={2} />
+              <CloseOutline height={10} width={10} />
             </button>
           </div>
         );
diff --git a/apps/space/components/issues/filters/applied-filters/priority.tsx b/apps/space/components/issues/filters/applied-filters/priority.tsx
index 01b9ca4966..1b3a03a85e 100644
--- a/apps/space/components/issues/filters/applied-filters/priority.tsx
+++ b/apps/space/components/issues/filters/applied-filters/priority.tsx
@@ -27,7 +27,7 @@ export function AppliedPriorityFilters(props: Props) {
             className="grid place-items-center text-tertiary hover:text-secondary"
             onClick={() => handleRemove(priority)}
           >
-            <CloseOutline height={10} width={10} strokeWidth={2} />
+            <CloseOutline height={10} width={10} />
           </button>
         </div>
       ))}
diff --git a/apps/space/components/issues/filters/applied-filters/state.tsx b/apps/space/components/issues/filters/applied-filters/state.tsx
index e1866e89c2..1a37861f2d 100644
--- a/apps/space/components/issues/filters/applied-filters/state.tsx
+++ b/apps/space/components/issues/filters/applied-filters/state.tsx
@@ -38,7 +38,7 @@ export const AppliedStateFilters = observer(function AppliedStateFilters(props:
               className="grid place-items-center text-tertiary hover:text-secondary"
               onClick={() => handleRemove(stateId)}
             >
-              <CloseOutline height={10} width={10} strokeWidth={2} />
+              <CloseOutline height={10} width={10} />
             </button>
           </div>
         );
diff --git a/apps/space/components/issues/filters/helpers/filter-option.tsx b/apps/space/components/issues/filters/helpers/filter-option.tsx
index 23be05e1b0..58d0be53c5 100644
--- a/apps/space/components/issues/filters/helpers/filter-option.tsx
+++ b/apps/space/components/issues/filters/helpers/filter-option.tsx
@@ -30,7 +30,7 @@ export function FilterOption(props: Props) {
           isChecked ? "border-accent-strong bg-accent-primary text-on-color" : "border-strong"
         } ${multiple ? "rounded-xs" : "rounded-full"}`}
       >
-        {isChecked && <TickOutline width={10} height={10} strokeWidth={3} />}
+        {isChecked && <TickOutline width={10} height={10} />}
       </div>
       <div className="flex items-center gap-2 truncate">
         {icon && <div className="grid w-5 shrink-0 place-items-center">{icon}</div>}
diff --git a/apps/space/components/issues/filters/selection.tsx b/apps/space/components/issues/filters/selection.tsx
index f0619ed0da..6781c52437 100644
--- a/apps/space/components/issues/filters/selection.tsx
+++ b/apps/space/components/issues/filters/selection.tsx
@@ -30,7 +30,7 @@ export const FilterSelection = observer(function FilterSelection(props: Props) {
     <div className="flex h-full w-full flex-col overflow-hidden">
       <div className="p-2.5 pb-0">
         <div className="flex items-center gap-1.5 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-1.5 py-1 text-11">
-          <SearchOutline className="text-placeholder" width={12} height={12} strokeWidth={2} />
+          <SearchOutline className="text-placeholder" width={12} height={12} />
           <input
             type="text"
             className="w-full bg-surface-2 outline-none placeholder:text-placeholder"
@@ -41,7 +41,7 @@ export const FilterSelection = observer(function FilterSelection(props: Props) {
           />
           {filtersSearchQuery !== "" && (
             <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
-              <CloseOutline className="text-tertiary" height={12} width={12} strokeWidth={2} />
+              <CloseOutline className="text-tertiary" height={12} width={12} />
             </button>
           )}
         </div>
diff --git a/apps/space/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx b/apps/space/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
index 792631ecff..904011682c 100644
--- a/apps/space/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
+++ b/apps/space/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
@@ -25,11 +25,7 @@ export const HeaderSubGroupByCard = observer(function HeaderSubGroupByCard(props
       onClick={() => toggleExpanded()}
     >
       <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-xs transition-all hover:bg-layer-1">
-        {isExpanded ? (
-          <ChevronUpOutline width={14} height={14} strokeWidth={2} />
-        ) : (
-          <ChevronDownOutline width={14} height={14} strokeWidth={2} />
-        )}
+        {isExpanded ? <ChevronUpOutline width={14} height={14} /> : <ChevronDownOutline width={14} height={14} />}
       </div>
 
       <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-xs">
diff --git a/apps/space/components/issues/issue-layouts/properties/all-properties.tsx b/apps/space/components/issues/issue-layouts/properties/all-properties.tsx
index e2527e7bed..728ccd4c82 100644
--- a/apps/space/components/issues/issue-layouts/properties/all-properties.tsx
+++ b/apps/space/components/issues/issue-layouts/properties/all-properties.tsx
@@ -146,7 +146,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
               }
             )}
           >
-            <ViewsOutline className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <ViewsOutline className="h-3 w-3 flex-shrink-0" />
             <div className="text-11">{issue.sub_issues_count}</div>
           </div>
         </Tooltip>
@@ -160,7 +160,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
       >
         <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
           <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-sm border-[0.5px] border-strong px-2.5 py-1">
-            <AttachOutline className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <AttachOutline className="h-3 w-3 flex-shrink-0" />
             <div className="text-11">{issue.attachment_count}</div>
           </div>
         </Tooltip>
@@ -174,7 +174,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
       >
         <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
           <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-sm border-[0.5px] border-strong px-2.5 py-1">
-            <LinkOutline className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <LinkOutline className="h-3 w-3 flex-shrink-0" />
             <div className="text-11">{issue.link_count}</div>
           </div>
         </Tooltip>
diff --git a/apps/space/components/issues/issue-layouts/properties/labels.tsx b/apps/space/components/issues/issue-layouts/properties/labels.tsx
index 5d10629b13..909c71629c 100644
--- a/apps/space/components/issues/issue-layouts/properties/labels.tsx
+++ b/apps/space/components/issues/issue-layouts/properties/labels.tsx
@@ -29,7 +29,7 @@ export const IssueBlockLabels = observer(function IssueBlockLabels({ labelIds, s
         <div
           className={`flex h-full items-center justify-center gap-2 rounded-sm border-[0.5px] border-strong px-2.5 py-1 text-11`}
         >
-          <LabelsOutline className="h-3.5 w-3.5" strokeWidth={2} />
+          <LabelsOutline className="h-3.5 w-3.5" />
           {shouldShowLabel && <span>No Labels</span>}
         </div>
       </Tooltip>
diff --git a/apps/space/components/issues/peek-overview/comment/comment-detail-card.tsx b/apps/space/components/issues/peek-overview/comment/comment-detail-card.tsx
index c18609896d..7a1aa65da2 100644
--- a/apps/space/components/issues/peek-overview/comment/comment-detail-card.tsx
+++ b/apps/space/components/issues/peek-overview/comment/comment-detail-card.tsx
@@ -88,7 +88,7 @@ export const CommentCard = observer(function CommentCard(props: Props) {
         )}
 
         <span className="absolute -right-1 -bottom-0.5 rounded-tl-sm bg-layer-1 px-0.5 py-px">
-          <ChatOutline className="size-3 text-secondary" aria-hidden="true" strokeWidth={2} />
+          <ChatOutline className="size-3 text-secondary" aria-hidden="true" />
         </span>
       </div>
       <div className="min-w-0 flex-1">
@@ -139,14 +139,14 @@ export const CommentCard = observer(function CommentCard(props: Props) {
                 disabled={isSubmitting}
                 className="group shadow-md rounded-sm border border-success-strong bg-success-primary p-2 duration-300 hover:bg-success-primary"
               >
-                <TickOutline className="h-3 w-3 text-on-color" strokeWidth={2} />
+                <TickOutline className="h-3 w-3 text-on-color" />
               </button>
               <button
                 type="button"
                 className="group shadow-md rounded-sm border border-danger-strong bg-danger-primary p-2 duration-300 hover:bg-danger-primary-hover"
                 onClick={() => setIsEditing(false)}
               >
-                <CloseOutline className="h-3 w-3 text-on-color" strokeWidth={2} />
+                <CloseOutline className="h-3 w-3 text-on-color" />
               </button>
             </div>
           </form>
@@ -173,7 +173,7 @@ export const CommentCard = observer(function CommentCard(props: Props) {
             onClick={() => {}}
             className="relative grid cursor-pointer place-items-center rounded-sm p-1 text-tertiary outline-none hover:bg-layer-transparent-hover"
           >
-            <MoreVerticalOutline className="size-4" strokeWidth={2} />
+            <MoreVerticalOutline className="size-4" />
           </Menu.Button>
 
           <Transition