chore(deps-dev): bump svelte-fa from 3.0.4 to 4.0.2

we were using as size parameter a pixel value while it was not really planned by the library now it enforces specific values converted all px values to default em/x values fixes https://github.com/containers/podman-desktop/pull/5555 Signed-off-by: Florent Benoit <fbenoit@redhat.com>
2026-05-24 10:18:53 +00:00 · 2024-02-26 13:25:21 +01:00 · 2024-02-26 13:25:21 +01:00 · feead48bc6
commit feead48bc6
parent 9c13fc506c
38 changed files with 80 additions and 70 deletions
--- a/packages/renderer/package.json
+++ b/packages/renderer/package.json
@ -37,7 +37,7 @@
    "svelte": "4.2.12",
    "svelte-check": "^3.6.4",
    "svelte-eslint-parser": "^0.33.1",
-    "svelte-fa": "^3.0.4",
+    "svelte-fa": "^4.0.2",
    "svelte-preprocess": "^5.1.3",
    "svelte-steps": "2.4.1",
    "tailwindcss": "^3.4.1",
--- a/packages/renderer/src/lib/container/ContainerList.svelte
+++ b/packages/renderer/src/lib/container/ContainerList.svelte
@ -497,7 +497,7 @@ function setStoppedFilter() {
                class:rounded-bl-lg="{!containerGroup.expanded}"
                on:click="{() => toggleContainerGroup(containerGroup)}">
                <Fa
-                  size="12"
+                  size="0.8x"
                  class="text-gray-700 cursor-pointer"
                  icon="{containerGroup.expanded ? faChevronDown : faChevronRight}" />
              </td>
--- a/packages/renderer/src/lib/dashboard/NotificationCardItem.svelte
+++ b/packages/renderer/src/lib/dashboard/NotificationCardItem.svelte
@ -15,7 +15,7 @@ async function removeNotification(id: number) {
  <div class="flex flex-row">
    <div class="mr-3">
      {#if notification.type === 'info'}
-        <Fa size="24" class="text-purple-400" icon="{faCircleInfo}" />
+        <Fa size="1.5x" class="text-purple-400" icon="{faCircleInfo}" />
      {/if}
    </div>
    <div class="flex flex-col text-sm space-y-2">
@ -32,7 +32,7 @@ async function removeNotification(id: number) {
    <button
      on:click="{() => removeNotification(notification.id)}"
      aria-label="{`Delete notification ${notification.id}`}">
-      <Fa size="16" icon="{faXmark}" />
+      <Fa size="1x" icon="{faXmark}" />
    </button>
  </div>
 </div>
--- a/packages/renderer/src/lib/dialogs/CustomPick.svelte
+++ b/packages/renderer/src/lib/dialogs/CustomPick.svelte
@ -238,7 +238,7 @@ function dragMe(node: any) {
                          <div class="relative">
                            <div class="absolute right-0 mr-2 text-xl">
                              <button on:click="{() => setSectionVisibility((i / colsPerRow) * colsPerRow + j, true)}">
-                                <Fa size="14" icon="{faXmark}" />
+                                <Fa size="0.9x" icon="{faXmark}" />
                              </button>
                            </div>
                          </div>
--- a/packages/renderer/src/lib/featured/FeaturedExtensionDownload.svelte
+++ b/packages/renderer/src/lib/featured/FeaturedExtensionDownload.svelte
@ -70,7 +70,7 @@ async function installExtension() {
  <span class="ml-0.5"></span>
  <LoadingIcon
    icon="{faDownload}"
-    iconSize="16"
+    iconSize="1x"
    loadingWidthClass="w-7"
    loadingHeightClass="h-7"
    positionTopClass="top-[2px]"
--- a/packages/renderer/src/lib/featured/FeaturedExtensions.svelte
+++ b/packages/renderer/src/lib/featured/FeaturedExtensions.svelte
@ -28,14 +28,14 @@ import FeaturedExtensionDownload from './FeaturedExtensionDownload.svelte';
          <div class="h-full w-18 flex flex-col items-end place-content-center">
            {#if featuredExtension.installed}
              <div class="text-dustypurple-700 p-1 text-center flex flex-row place-items-center">
-                <Fa class="ml-1.5 mr-2" size="18" icon="{faCheckCircle}" />
+                <Fa class="ml-1.5 mr-2" size="1.1x" icon="{faCheckCircle}" />
                <div class="uppercase font-bold text-xs cursor-default">installed</div>
              </div>
            {:else if featuredExtension.fetchable}
              <FeaturedExtensionDownload featuredExtension="{featuredExtension}" />
            {:else}
              <div class="text-charcoal-300 p-1 text-center flex flex-row place-items-center">
-                <Fa class="ml-1.5 mr-1" size="18" icon="{faCircleXmark}" />
+                <Fa class="ml-1.5 mr-1" size="1.1x" icon="{faCircleXmark}" />
                <div class="uppercase text-xs cursor-default font-extralight">N/A</div>
              </div>
            {/if}
--- a/packages/renderer/src/lib/feedback/SendFeedback.svelte
+++ b/packages/renderer/src/lib/feedback/SendFeedback.svelte
@ -71,25 +71,25 @@ async function sendFeedback(): Promise<void> {
        <div class="flex space-x-4">
          <button aria-label="very-sad-smiley" on:click="{() => selectSmiley(1)}">
            <Fa
-              size="24"
+              size="1.5x"
              class="cursor-pointer {smileyRating === 1 ? 'text-violet-400' : 'text-gray-900'}"
              icon="{faFrown}" />
          </button>
          <button aria-label="sad-smiley" on:click="{() => selectSmiley(2)}">
            <Fa
-              size="24"
+              size="1.5x"
              class="cursor-pointer {smileyRating === 2 ? 'text-violet-400' : 'text-gray-900'}"
              icon="{faMeh}" />
          </button>
          <button aria-label="happy-smiley" on:click="{() => selectSmiley(3)}">
            <Fa
-              size="24"
+              size="1.5x"
              class="cursor-pointer {smileyRating === 3 ? 'text-violet-400' : 'text-gray-900'}"
              icon="{faSmile}" />
          </button>
          <button aria-label="very-happy-smiley" on:click="{() => selectSmiley(4)}">
            <Fa
-              size="24"
+              size="1.5x"
              class="cursor-pointer {smileyRating === 4 ? 'text-violet-400' : 'text-gray-900'}"
              icon="{faGrinStars}" />
          </button>
--- a/packages/renderer/src/lib/image/BuildImageFromContainerfileCard.svelte
+++ b/packages/renderer/src/lib/image/BuildImageFromContainerfileCard.svelte
@ -86,13 +86,13 @@ onMount(() => {
      {#if !additionalItem}
        <Checkbox bind:checked="{checked}" on:click="{() => handleClick()}" />
      {:else}
-        <Fa class="text-dustypurple-700 cursor-pointer" icon="{faPlusCircle}" size="24" />
+        <Fa class="text-dustypurple-700 cursor-pointer" icon="{faPlusCircle}" size="1.5x" />
      {/if}
    </div>
    <div class="ml-2 text-sm text-left break-normal w-36">{title}</div>
    {#if isDefault}
      <Tooltip tip="Default platform of your computer">
-        <Fa size="7" class="text-dustypurple-700 cursor-pointer" icon="{faCircle}" />
+        <Fa size="0.5x" class="text-dustypurple-700 cursor-pointer" icon="{faCircle}" />
      </Tooltip>
    {/if}
  </div>
@ -116,7 +116,7 @@ onMount(() => {
    </div>
    <div class="flex grow justify-end">
      {#if iconType === 'fontAwesome'}
-        <Fa class="text-white cursor-pointer" icon="{icon}" size="24" />
+        <Fa class="text-white cursor-pointer" icon="{icon}" size="1.5x" />
      {:else if iconType === 'unknown'}
        <svelte:component this="{icon}" class="text-gray-900 cursor-pointer" size="24" />
      {/if}
--- a/packages/renderer/src/lib/image/ImageDetailsCheck.svelte
+++ b/packages/renderer/src/lib/image/ImageDetailsCheck.svelte
@ -125,7 +125,7 @@ function handleAbort() {
 <ProviderResultPage providers="{providers}" results="{results}">
  <div class="flex flex-row" slot="header-info">
    <div class="w-full flex mb-4 space-x-4">
-      <Fa size="24" icon="{faStethoscope}" />
+      <Fa size="1.5x" icon="{faStethoscope}" />
      {#if aborted}
        <span>Image analysis canceled</span>
      {:else if remainingProviders > 0}
--- a/packages/renderer/src/lib/image/PushImageModal.svelte
+++ b/packages/renderer/src/lib/image/PushImageModal.svelte
@ -125,9 +125,9 @@ $: window.hasAuthconfigForImage(imageInfoToPush.name).then(result => (isAuthenti
      <div class="pb-4">
        <label for="modalImageTag" class="block mb-2 text-sm font-medium text-gray-400">Image tag</label>
        {#if isAuthenticatedForThisImage}
-          <Fa class="absolute mt-3 ml-1.5 text-green-300" size="16" icon="{faCheckCircle}" />
+          <Fa class="absolute mt-3 ml-1.5 text-green-300" size="1x" icon="{faCheckCircle}" />
        {:else}
-          <Fa class="absolute mt-3 ml-1.5 text-amber-500" size="16" icon="{faTriangleExclamation}" />
+          <Fa class="absolute mt-3 ml-1.5 text-amber-500" size="1x" icon="{faTriangleExclamation}" />
        {/if}

        <select
--- a/packages/renderer/src/lib/onboarding/Onboarding.svelte
+++ b/packages/renderer/src/lib/onboarding/Onboarding.svelte
@ -334,7 +334,7 @@ function handleEscape({ key }: any) {
              class="flex flex-row text-xs items-center hover:underline"
              on:click="{() => setDisplayCancelSetup(true)}">
              <span class="mr-1">Skip this entire setup</span>
-              <Fa icon="{faForward}" size="12" />
+              <Fa icon="{faForward}" size="0.8x" />
            </button>
          </div>
        </div>
--- a/packages/renderer/src/lib/onboarding/OnboardingComponent.svelte
+++ b/packages/renderer/src/lib/onboarding/OnboardingComponent.svelte
@ -60,7 +60,7 @@ onMount(() => {
      hideCloseButton="{true}" />
  {:else}
    <div aria-label="not supported warning" class="flex flex-row min-h-[500px] items-center justify-center">
-      <Fa size="18" class="flex text-amber-400 mr-3" icon="{faTriangleExclamation}" />
+      <Fa size="1.125x" class="flex text-amber-400 mr-3" icon="{faTriangleExclamation}" />
      <span>This extension does not provide a component of type "{component}"</span>
    </div>
  {/if}
--- a/packages/renderer/src/lib/pod/PodCreateFromContainers.svelte
+++ b/packages/renderer/src/lib/pod/PodCreateFromContainers.svelte
@ -206,7 +206,7 @@ function updatePortExposure(port: number, checked: boolean) {
            <div class="bg-charcoal-600 border-t-2 border-amber-500 p-4 mb-2" role="alert" aria-label="warning">
              <div class="flex flex-row">
                <div class="mr-3">
-                  <Fa size="18" class="text-amber-400" icon="{faTriangleExclamation}" />
+                  <Fa size="1.125x" class="text-amber-400" icon="{faTriangleExclamation}" />
                </div>
                <div class="flex flex-col">
                  <div class="text-sm text-amber-400">Possible runtime error</div>
--- a/packages/renderer/src/lib/preferences/ExtensionIcon.svelte
+++ b/packages/renderer/src/lib/preferences/ExtensionIcon.svelte
@ -22,5 +22,5 @@ $: fade = extension.state !== 'started' ? ' brightness-50' : '';
 {#if icon}
  <img src="{icon}" alt="{extension.name}" class="max-w-10 max-h-10 {fade}" />
 {:else}
-  <Fa alt="{extension.name}" class="h-10 w-10 rounded-full text-violet-600 {fade}" size="25" icon="{faPuzzlePiece}" />
+  <Fa class="h-10 w-10 rounded-full text-violet-600 {fade}" size="1.6x" icon="{faPuzzlePiece}" />
 {/if}
--- a/packages/renderer/src/lib/preferences/PreferencesResourcesRendering.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesResourcesRendering.svelte
@ -433,7 +433,7 @@ function hasAnyConfiguration(provider: ProviderInfo) {
                          router.goto(`/preferences/default/preferences.${provider.extensionId}`);
                        }
                      }}">
-                      <Fa size="14" icon="{faGear}" />
+                      <Fa size="0.9x" icon="{faGear}" />
                    </Button>
                  {/if}
                </div>
--- a/packages/renderer/src/lib/preferences/item-formats/EditableItem.svelte
+++ b/packages/renderer/src/lib/preferences/item-formats/EditableItem.svelte
@ -78,14 +78,14 @@ function onCancelClick(e: MouseEvent) {

  {#if !editingInProgress}
    <Button on:click="{onSwitchToInProgress}" title="Edit" class="ml-1" padding="p-2" type="link">
-      <Fa size="12" icon="{faPencil}" />
+      <Fa size="0.8x" icon="{faPencil}" />
    </Button>
  {:else}
    <Button on:click="{onCancelClick}" title="Cancel" class="ml-3" padding="p-2" type="link">
-      <Fa size="14" class="text-red-500" icon="{faXmark}" />
+      <Fa size="0.9x" class="text-red-500" icon="{faXmark}" />
    </Button>
    <Button on:click="{onSaveClick}" title="Save" padding="p-2" disabled="{disableSaveButton}" type="link">
-      <Fa size="14" class="{`${disableSaveButton ? 'text-gray-500' : 'text-green-500'}`}" icon="{faCheck}" />
+      <Fa size="0.9x" class="{`${disableSaveButton ? 'text-gray-500' : 'text-green-500'}`}" icon="{faCheck}" />
    </Button>
  {/if}
 </div>
--- a/packages/renderer/src/lib/task-manager/TaskManager.svelte
+++ b/packages/renderer/src/lib/task-manager/TaskManager.svelte
@ -73,7 +73,7 @@ window.events?.receive('toggle-task-manager', () => {
          </div>
          -->
          <button on:click="{() => hide()}" title="Hide (Escape)" class="cursor-pointer hover:bg-charcoal-600 p-1 ml-1">
-            <Fa icon="{faChevronDown}" size="15" />
+            <Fa icon="{faChevronDown}" size="0.9x" />
          </button>
        </div>
      </div>
--- a/packages/renderer/src/lib/task-manager/TaskManagerGroup.svelte
+++ b/packages/renderer/src/lib/task-manager/TaskManagerGroup.svelte
@ -19,7 +19,7 @@ let lastItem = (a: unknown[], i: number) => i === a.length - 1;
  <div class="flex flex-row items-center w-full flex-nowrap">
    <hr class="w-3 h-[2px] my-3 {lineColor} border-0" />
    <div class="flex mx-2 flex-row items-center">
-      <Fa class="mr-1 text-purple-200" size="7" icon="{icon}" />
+      <Fa class="mr-1 text-purple-200" size="0.45x" icon="{icon}" />
      <div class="flex-nowrap uppercase font-bold text-xs">{title} ({tasks.length})</div>
    </div>
    <hr class="flex-grow flex w-max h-[2px] {lineColor} border-0" />
--- a/packages/renderer/src/lib/task-manager/TaskManagerItem.svelte
+++ b/packages/renderer/src/lib/task-manager/TaskManagerItem.svelte
@ -58,7 +58,7 @@ function gotoTask(taskUI: StatefulTaskUI) {
 <div class="flex flew-row w-full py-2">
  <!-- first column is the icon-->
  <div class="flex w-3 {iconColor} justify-center">
-    <Fa size="14" icon="{icon}" />
+    <Fa size="0.875x" icon="{icon}" />
  </div>
  <!-- second column is about the task-->
  <div class="flex flex-col w-full pl-2">
@ -71,7 +71,7 @@ function gotoTask(taskUI: StatefulTaskUI) {
          <button
            title="Clear notification"
            class="hover:bg-charcoal-800 hover:text-purple-500"
-            on:click="{() => closeCompleted(taskUI)}"><Fa size="12" icon="{faClose}" /></button>
+            on:click="{() => closeCompleted(taskUI)}"><Fa size="0.75x" icon="{faClose}" /></button>
        {/if}
      </div>
    </div>
--- a/packages/renderer/src/lib/troubleshooting/TroubleshootingDevToolsConsoleLogs.svelte
+++ b/packages/renderer/src/lib/troubleshooting/TroubleshootingDevToolsConsoleLogs.svelte
@ -26,7 +26,7 @@ function copyLogsToClipboard() {

 <div class="flex flex-col w-full m-4 bg-charcoal-600 p-4 rounded-lg">
  <div class="flex flex-row align-middle items-center w-full mb-4">
-    <Fa size="30" class="pr-3 text-gray-700" icon="{faFileLines}" />
+    <Fa size="1.875x" class="pr-3 text-gray-700" icon="{faFileLines}" />
    <div class="text-xl">Logs</div>
    <div class="flex flex-1 justify-end">
      <button title="Copy To Clipboard" class="ml-5" on:click="{() => copyLogsToClipboard()}"
--- a/packages/renderer/src/lib/troubleshooting/TroubleshootingGatherLogs.svelte
+++ b/packages/renderer/src/lib/troubleshooting/TroubleshootingGatherLogs.svelte
@ -17,7 +17,7 @@ async function saveLogsAsZip() {

 <div class="flex flex-col w-full m-4 bg-charcoal-600 p-4 rounded-lg">
  <div class="flex flex-row align-middle items-center w-full">
-    <Fa size="30" class="pr-3 text-gray-700" icon="{faFileLines}" />
+    <Fa size="1.875x" class="pr-3 text-gray-700" icon="{faFileLines}" />
    <div class="text-xl">Gather Log Files</div>
    <div class="flex flex-1 justify-end"></div>
  </div>
--- a/packages/renderer/src/lib/troubleshooting/TroubleshootingPageStores.svelte
+++ b/packages/renderer/src/lib/troubleshooting/TroubleshootingPageStores.svelte
@ -27,7 +27,7 @@ onDestroy(() => {

 <div class="flex w-full h-fit m-4 flex-col bg-charcoal-600 p-4 rounded-lg">
  <div class="flex flex-row align-middle items-center w-full mb-4">
-    <Fa size="30" class="pr-3 text-gray-700" icon="{faDatabase}" />
+    <Fa size="1.875x" class="pr-3 text-gray-700" icon="{faDatabase}" />
    <div role="status" aria-label="stores" class="text-xl">Stores</div>
  </div>

--- a/packages/renderer/src/lib/troubleshooting/TroubleshootingRepair.svelte
+++ b/packages/renderer/src/lib/troubleshooting/TroubleshootingRepair.svelte
@ -9,7 +9,7 @@ export let providers: ProviderInfo[] = [];

 <div class="flex flex-col w-full bg-charcoal-600 p-4 rounded-lg">
  <div class="flex flex-row w-full pb-2 items-center">
-    <Fa size="24" class="pr-2 text-gray-700" icon="{faWrench}" />
+    <Fa size="1.5x" class="pr-2 text-gray-700" icon="{faWrench}" />
    <div class="text-xl" aria-label="Repair">Repair</div>
  </div>

--- a/packages/renderer/src/lib/troubleshooting/TroubleshootingRepairCleanup.svelte
+++ b/packages/renderer/src/lib/troubleshooting/TroubleshootingRepairCleanup.svelte
@ -47,7 +47,7 @@ async function cleanup() {
  <div>
    <div class="text-gray-700 flex flex-row items-center">Clean / Purge data</div>
    <div class="text-gray-900 text-sm flex flex-row items-center pt-1">
-      <Fa class="pr-1" size="9" icon="{faWarning}" />Proceeding with this action may result in data loss, including
+      <Fa class="pr-1" size="0.8x" icon="{faWarning}" />Proceeding with this action may result in data loss, including
      existing volumes, containers, images, etc.
    </div>
  </div>
@ -64,7 +64,7 @@ async function cleanup() {
  <div>
    {#if cleanupFailures.length > 0}
      <div class="text-red-500 text-xs flex flex-row items-center" role="alert" aria-label="error">
-        <Fa class="pr-1" size="9" icon="{faWarning}" />{cleanupFailures.length} failures
+        <Fa class="pr-1" size="1x" icon="{faWarning}" />{cleanupFailures.length} failures
      </div>
    {/if}
  </div>
--- a/packages/renderer/src/lib/ui/AuditMessageBox.svelte
+++ b/packages/renderer/src/lib/ui/AuditMessageBox.svelte
@ -19,7 +19,7 @@ $: errorRecords = auditResult?.records.filter(record => record.type === 'error')
    <div class="bg-charcoal-600 border-t-2 border-red-500 p-4 mb-2" role="alert" aria-label="error">
      <div class="flex flex-row">
        <div class="mr-3">
-          <Fa size="18" class="text-red-400" icon="{faXmarkCircle}" />
+          <Fa size="1.1x" class="text-red-400" icon="{faXmarkCircle}" />
        </div>
        <div class="text-sm text-white">
          {record.record}
@ -34,7 +34,7 @@ $: errorRecords = auditResult?.records.filter(record => record.type === 'error')
    <div class="bg-charcoal-600 border-t-2 border-amber-500 p-4 mb-2" role="alert" aria-label="warning">
      <div class="flex flex-row">
        <div class="mr-3">
-          <Fa size="18" class="flex text-amber-400" icon="{faTriangleExclamation}" />
+          <Fa size="1.1x" class="flex text-amber-400" icon="{faTriangleExclamation}" />
        </div>
        <div class="text-sm text-white">
          {record.record}
@ -49,7 +49,7 @@ $: errorRecords = auditResult?.records.filter(record => record.type === 'error')
    <div class="bg-charcoal-600 border-t-2 border-purple-500 p-4 mb-2" role="alert" aria-label="info">
      <div class="flex flex-row">
        <div class="mr-3">
-          <Fa size="18" class="text-purple-500" icon="{faCircleInfo}" />
+          <Fa size="1.1x" class="text-purple-500" icon="{faCircleInfo}" />
        </div>
        <div class="text-sm text-white">
          {record.record}
--- a/packages/renderer/src/lib/ui/Checkbox.svelte
+++ b/packages/renderer/src/lib/ui/Checkbox.svelte
@ -37,13 +37,13 @@ function onClick(checked: boolean) {
    class:cursor-pointer="{!disabled}"
    class:cursor-not-allowed="{disabled}">
    {#if disabled}
-      <Fa size="18" icon="{faSquare}" class="text-charcoal-300" />
+      <Fa size="1.1x" icon="{faSquare}" class="text-charcoal-300" />
    {:else if indeterminate}
-      <Fa size="18" icon="{faMinusSquare}" class="text-dustypurple-500" />
+      <Fa size="1.1x" icon="{faMinusSquare}" class="text-dustypurple-500" />
    {:else if checked}
-      <Fa size="18" icon="{faCheckSquare}" class="text-purple-500" />
+      <Fa size="1.1x" icon="{faCheckSquare}" class="text-purple-500" />
    {:else}
-      <Fa size="18" icon="{faOutlineSquare}" class="text-gray-400" />
+      <Fa size="1.1x" icon="{faOutlineSquare}" class="text-gray-400" />
    {/if}
  </div>
 </label>
--- a/packages/renderer/src/lib/ui/EmptyScreen.svelte
+++ b/packages/renderer/src/lib/ui/EmptyScreen.svelte
@ -39,7 +39,7 @@ let copyTextDivElement: HTMLDivElement;
    <div class="flex justify-center text-gray-700 py-2">
      {#if processed}
        {#if fontAwesomeIcon}
-          <Fa icon="{icon}" size="55" />
+          <Fa icon="{icon}" size="4x" />
        {:else}
          <svelte:component this="{icon}" size="55" solid="{false}" />
        {/if}
--- a/packages/renderer/src/lib/ui/ErrorMessage.svelte
+++ b/packages/renderer/src/lib/ui/ErrorMessage.svelte
@ -10,14 +10,14 @@ export let icon = false;
 {#if icon}
  {#if error !== undefined && error !== ''}
    <Tooltip tip="{error}" top>
-      <Fa size="18" class="cursor-pointer text-red-500 {$$props.class}" icon="{faExclamationCircle}" />
+      <Fa size="1.1x" class="cursor-pointer text-red-500 {$$props.class}" icon="{faExclamationCircle}" />
    </Tooltip>
  {/if}
 {:else}
  <div
    class="text-red-500 p-1 flex flex-row items-center {$$props.class}"
    class:opacity-0="{error === undefined || error === ''}">
-    <Fa size="18" class="cursor-pointer text-red-500" icon="{faExclamationCircle}" />
+    <Fa size="1.1x" class="cursor-pointer text-red-500" icon="{faExclamationCircle}" />
    <div role="alert" aria-label="Error Message Content" class="ml-2">{error}</div>
  </div>
 {/if}
--- a/packages/renderer/src/lib/ui/ListItemButtonIcon.svelte
+++ b/packages/renderer/src/lib/ui/ListItemButtonIcon.svelte
@ -2,7 +2,7 @@
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
 import DropdownMenuItem from './DropDownMenuItem.svelte';
 import Fa from 'svelte-fa';
-import { onDestroy } from 'svelte';
+import { onDestroy, onMount } from 'svelte';
 import type { Unsubscriber } from 'svelte/motion';
 import type { ContextUI } from '../context/context';
 import { context as storeContext } from '/@/stores/context';
@ -10,6 +10,7 @@ import { ContextKeyExpr } from '../context/contextKey';

 export let title: string;
 export let icon: IconDefinition | string;
+export let fontAwesomeIcon: IconDefinition | undefined = undefined;
 export let hidden = false;
 export let disabledWhen = '';
 export let enabled: boolean = true;
@ -57,6 +58,12 @@ function computeEnabled() {
  enabled = !disabled;
 }

+onMount(() => {
+  if ((icon as IconDefinition)?.prefix?.startsWith('fa')) {
+    fontAwesomeIcon = icon as IconDefinition;
+  }
+});
+
 onDestroy(() => {
  // unsubscribe from the store
  if (contextsUnsubscribe) {
@ -116,7 +123,10 @@ $: styleClass = detailed
    class:disabled="{inProgress}"
    class:hidden="{hidden}"
    disabled="{!enabled}">
-    <Fa class="h-4 w-4 {iconOffset}" icon="{icon}" />
+    {#if fontAwesomeIcon}
+      <Fa class="h-4 w-4 {iconOffset}" icon="{fontAwesomeIcon}" />
+    {/if}
+
    <div
      aria-label="spinner"
      class="w-6 h-6 rounded-full animate-spin border border-solid border-violet-500 border-t-transparent absolute {positionTopClass} {positionLeftClass}"
--- a/packages/renderer/src/lib/ui/LoadingIcon.spec.ts
+++ b/packages/renderer/src/lib/ui/LoadingIcon.spec.ts
@ -29,7 +29,7 @@ test('Expect default size', async () => {
  const positionTopClass = '';
  const positionLeftClass = '';
  const loading = true;
-  const iconSize = '';
+  const iconSize = undefined;
  render(LoadingIcon, {
    icon,
    iconSize,
@ -42,8 +42,8 @@ test('Expect default size', async () => {
  const loadingIcon = screen.getByRole('img', { hidden: true, name: '' });
  expect(loadingIcon).toBeInTheDocument();

-  // check the font-size attribute of the loading icon is not set
-  expect(loadingIcon).toHaveAttribute('style', expect.not.stringContaining('font-size'));
+  // check the style attribute of the loading icon is not set
+  expect(loadingIcon).not.toHaveAttribute('style');
 });

 test('Expect specified size', async () => {
@ -53,7 +53,7 @@ test('Expect specified size', async () => {
  const positionTopClass = '';
  const positionLeftClass = '';
  const loading = true;
-  const iconSize = '20';
+  const iconSize = '2x';
  render(LoadingIcon, {
    icon,
    iconSize,
@ -66,6 +66,6 @@ test('Expect specified size', async () => {
  const loadingIcon = screen.getByRole('img', { hidden: true, name: '' });
  expect(loadingIcon).toBeInTheDocument();

-  // check the font-size attribute of the loading icon is set to 20
-  expect(loadingIcon).toHaveAttribute('style', expect.stringContaining('font-size:20;'));
+  // check the font-size attribute of the loading icon is set to 2em
+  expect(loadingIcon).toHaveAttribute('style', expect.stringContaining('font-size: 2em;'));
 });
--- a/packages/renderer/src/lib/ui/LoadingIcon.svelte
+++ b/packages/renderer/src/lib/ui/LoadingIcon.svelte
@ -1,6 +1,6 @@
 <script lang="ts">
 import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
-import Fa from 'svelte-fa';
+import { Fa, type IconSize } from 'svelte-fa';

 export let icon: IconDefinition;
 export let loadingWidthClass: string;
@ -8,7 +8,7 @@ export let loadingHeightClass: string;
 export let positionTopClass: string;
 export let positionLeftClass: string;
 export let loading = false;
-export let iconSize = '';
+export let iconSize: IconSize | undefined = undefined;
 </script>

 <div>
--- a/packages/renderer/src/lib/ui/NavSection.svelte
+++ b/packages/renderer/src/lib/ui/NavSection.svelte
@ -62,7 +62,7 @@ onMount(() => {
            <slot name="icon" />
          </div>
        {/if}
-        <Fa size="12" icon="{expanded ? faChevronUp : faChevronDown}" />
+        <Fa size="0.8x" icon="{expanded ? faChevronUp : faChevronDown}" />
      </div>
    </Tooltip>
  </button>
--- a/packages/renderer/src/lib/ui/ProviderResultPage.svelte
+++ b/packages/renderer/src/lib/ui/ProviderResultPage.svelte
@ -157,12 +157,12 @@ function onSeverityClicked(severity: 'critical' | 'high' | 'medium' | 'low' | 's
            {/if}
            {#if provider.state === 'failed'}
              <span class="text-red-600 mt-1">
-                <Fa size="18" icon="{faExclamationTriangle}" />
+                <Fa size="1.1x" icon="{faExclamationTriangle}" />
              </span>
            {/if}
            {#if provider.state === 'canceled'}
              <span class="text-gray-500">
-                <Fa size="18" icon="{faCircleMinus}" />
+                <Fa size="1.1x" icon="{faCircleMinus}" />
              </span>
            {/if}
            {#if provider.state === 'success'}
@ -197,7 +197,7 @@ function onSeverityClicked(severity: 'critical' | 'high' | 'medium' | 'low' | 's
              class:text-gray-800="{result.check.severity === 'medium'}"
              class:text-gray-500="{result.check.severity === 'low'}"
              class:text-green-500="{result.check.status === 'success'}"
-              ><Fa size="18" class="mt-1" icon="{getIcon(result.check)}" />
+              ><Fa size="1.1x" class="mt-1" icon="{getIcon(result.check)}" />
            </span>
            <div class="font-bold">{result.check.name}</div>
            <div class="text-gray-900 text-sm grow text-right">Reported by {result.provider.label}</div>
--- a/packages/renderer/src/lib/ui/WarningMessage.svelte
+++ b/packages/renderer/src/lib/ui/WarningMessage.svelte
@ -10,14 +10,14 @@ export let icon = false;
 {#if icon}
  {#if error !== undefined && error !== ''}
    <Tooltip tip="{error}" top>
-      <Fa size="18" class="cursor-pointer text-amber-500" icon="{faTriangleExclamation}" />
+      <Fa size="1.125x" class="cursor-pointer text-amber-500" icon="{faTriangleExclamation}" />
    </Tooltip>
  {/if}
 {:else}
  <div
    class="text-amber-500 p-1 flex flex-row items-center {$$props.class}"
    class:opacity-0="{error === undefined || error === ''}">
-    <Fa size="18" class="cursor-pointer text-amber-500" icon="{faTriangleExclamation}" />
+    <Fa size="1.125x" class="cursor-pointer text-amber-500" icon="{faTriangleExclamation}" />
    <div role="alert" aria-label="Warning Message Content" class="ml-2">{error}</div>
  </div>
 {/if}
--- a/packages/renderer/src/lib/webview/Webviews.svelte
+++ b/packages/renderer/src/lib/webview/Webviews.svelte
@ -12,7 +12,7 @@ export let meta: TinroRouteMeta;
 {#each $webviews as webview}
  <NavItem href="/webviews/{webview.id}" bind:meta="{meta}" tooltip="{webview.name}">
    {#if !webview.icon}
-      <Fa icon="{faPuzzlePiece}" size="24" />
+      <Fa icon="{faPuzzlePiece}" size="1.5x" />
    {:else}
      <IconImage image="{webview?.icon}" alt="{webview.name}" class="max-h-6 max-w-[24px]" />
    {/if}
--- a/packages/renderer/src/lib/welcome/WelcomePage.svelte
+++ b/packages/renderer/src/lib/welcome/WelcomePage.svelte
@ -111,7 +111,7 @@ function closeWelcome() {
            <div
              class="w-4 h-4 rounded border-2 border-gray-700 peer peer-checked:bg-violet-500 peer-checked:border-violet-500">
            </div>
-            <Fa class="w-4 h-4 absolute text-zinc-700" size="10" icon="{faCheck}" />
+            <Fa class="w-4 h-4 absolute text-zinc-700" size="0.6x" icon="{faCheck}" />
            <span class="font-medium font-bold px-2">Telemetry:</span>
          </label>
          <div class="w-2/5 text-gray-400">
--- a/packages/renderer/src/lib/window-control-buttons/LinuxControlButton.svelte
+++ b/packages/renderer/src/lib/window-control-buttons/LinuxControlButton.svelte
@ -1,10 +1,10 @@
 <script lang="ts">
-import Fa from 'svelte-fa';
+import Fa, { type IconSize } from 'svelte-fa';
 import { onMount } from 'svelte';
 import { faMinus, faXmark, type IconDefinition } from '@fortawesome/free-solid-svg-icons';
 import { faSquare } from '@fortawesome/free-regular-svg-icons';

-const iconSize = '14';
+const iconSize: IconSize | undefined = '0.875x';

 export let name: string;
 export let action: () => void = () => {};
--- a/yarn.lock
+++ b/yarn.lock
@ -15191,10 +15191,10 @@ svelte-check@^3.6.4:
    postcss "^8.4.29"
    postcss-scss "^4.0.8"

-svelte-fa@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/svelte-fa/-/svelte-fa-3.0.4.tgz#22543b801950fe4a9a801ba8d4769a53d80c0782"
-  integrity sha512-y04vEuAoV1wwVDItSCzPW7lzT6v1bj/y1p+W1V+NtIMpQ+8hj8MBkx7JFD7JHSnalPU1QiI8BVfguqheEA3nPg==
+svelte-fa@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/svelte-fa/-/svelte-fa-4.0.2.tgz#f73aab661bf1758d726f06db321f0ffb8e2f40d6"
+  integrity sha512-lza8Jfii6jcpMQB73mBStONxaLfZsUS+rKJ/hH6WxsHUd+g68+oHIL9yQTk4a0uY9HQk78T/CPvQnED0msqJfg==

 svelte-hmr@^0.15.3:
  version "0.15.3"