diff --git a/lib/lightning_web/components/icons.ex b/lib/lightning_web/components/icons.ex
index 63a7df1b3b..dfd606cffa 100644
--- a/lib/lightning_web/components/icons.ex
+++ b/lib/lightning_web/components/icons.ex
@@ -22,21 +22,16 @@ defmodule LightningWeb.Components.Icons do
       <.icon name="hero-play-circle" class="ml-1 w-3 h-3 animate-spin" />
   """
   attr :name, :string, required: true
-  attr :class, :string, default: nil
-  attr :naked, :boolean, default: false
   attr :rest, :global
 
   def icon(%{name: "hero-" <> _} = assigns) do
+    assigns =
+      assigns
+      |> assign(:class, get_in(assigns, [:rest, :class]) |> List.wrap())
+      |> update(:rest, fn rest -> Map.delete(rest, :class) end)
+
     ~H"""
-    <span
-      class={[
-        @naked && "text-gray-500 hover:text-primary-400",
-        "align-top",
-        @name,
-        @class
-      ]}
-      {@rest}
-    />
+    <span class={[@name, @class]} {@rest} />
     """
   end
 end
diff --git a/lib/lightning_web/components/layout_components.ex b/lib/lightning_web/components/layout_components.ex
index fcfdf3e338..937795fc1a 100644
--- a/lib/lightning_web/components/layout_components.ex
+++ b/lib/lightning_web/components/layout_components.ex
@@ -167,26 +167,29 @@ defmodule LightningWeb.LayoutComponents do
                         else: String.at(@current_user.last_name, 0)
                   }
                 />
-                <Heroicons.chevron_down
-                  solid
+                <.icon
+                  name="hero-chevron-down"
                   class="w-4 h-4 ml-1 -mr-1 text-secondary-400 dark:text-secondary-100"
                 />
               </div>
             </:trigger_element>
             <.dropdown_menu_item link_type="live_redirect" to={~p"/profile"}>
-              <Heroicons.user_circle class="w-5 h-5 text-secondary-500" />
+              <.icon name="hero-user-circle" class="w-5 h-5 text-secondary-500" />
               User Profile
             </.dropdown_menu_item>
             <.dropdown_menu_item link_type="live_redirect" to={~p"/credentials"}>
-              <Heroicons.key class="w-5 h-5 text-secondary-500" /> Credentials
+              <.icon name="hero-key" class="w-5 h-5 text-secondary-500" />
+              Credentials
             </.dropdown_menu_item>
             <.dropdown_menu_item link_type="live_redirect" to={~p"/profile/tokens"}>
-              <Heroicons.command_line class="w-5 h-5 text-secondary-500" />
+              <.icon name="hero-command-line" class="w-5 h-5 text-secondary-500" />
               API Tokens
             </.dropdown_menu_item>
             <.dropdown_menu_item link_type="live_redirect" to={~p"/users/log_out"}>
-              <Heroicons.arrow_right_on_rectangle class="w-5 h-5 text-secondary-500" />
-              Log out
+              <.icon
+                name="hero-arrow-right-on-rectangle"
+                class="w-5 h-5 text-secondary-500"
+              /> Log out
             </.dropdown_menu_item>
           </.dropdown>
         <% end %>
diff --git a/lib/lightning_web/components/layouts/live.html.heex b/lib/lightning_web/components/layouts/live.html.heex
index 9d6de84b44..a5055fae45 100644
--- a/lib/lightning_web/components/layouts/live.html.heex
+++ b/lib/lightning_web/components/layouts/live.html.heex
@@ -7,7 +7,7 @@
     >
       <div class="flex flex-col h-full">
         <div class="w-full h-20 flex items-center justify-center">
-          <.link navigate={Routes.dashboard_index_path(@socket, :index)}>
+          <.link navigate={~p"/projects"}>
             <img
               class="h-10 w-10"
               src={
@@ -22,26 +22,29 @@
           <div class="grow"></div>
           <%= if @current_user.role == :superuser do %>
             <Menu.menu_item to={Routes.project_index_path(@socket, :index)}>
-              <Heroicons.cog class="h-5 w-5 inline-block mr-2" />
+              <.icon name="hero-cog" class="h-5 w-5 inline-block mr-2" />
               <span class="inline-block align-middle">Admin Menu</span>
             </Menu.menu_item>
             <%= if function_exported?(Routes, :live_dashboard_path, 2) do %>
               <Menu.menu_item to={~p"/dashboard"}>
-                <Heroicons.exclamation_triangle class="h-5 w-5 inline-block mr-2" />
+                <.icon
+                  name="hero-exclamation-triangle"
+                  class="h-5 w-5 inline-block mr-2"
+                />
                 <span class="inline-block align-middle">Sys Info</span>
               </Menu.menu_item>
             <% end %>
           <% else %>
             <Menu.menu_item href="https://docs.openfn.org">
-              <Heroicons.book_open mini class="h-5 w-5 inline-block mr-2" />
+              <.icon name="hero-book-open" class="h-5 w-5 inline-block mr-2" />
               <span class="inline-block align-middle">Documentation</span>
             </Menu.menu_item>
             <Menu.menu_item href="https://community.openfn.org">
-              <Heroicons.user_group mini class="h-5 w-5 inline-block mr-2" />
+              <.icon name="hero-user-group" class="h-5 w-5 inline-block mr-2" />
               <span class="inline-block align-middle">Community</span>
             </Menu.menu_item>
             <Menu.menu_item href={"mailto:" <> Lightning.Config.instance_admin_email()}>
-              <Heroicons.lifebuoy mini class="h-5 w-5 inline-block mr-2" />
+              <.icon name="hero-lifebuoy" class="h-5 w-5 inline-block mr-2" />
               <span class="inline-block align-middle">Support</span>
             </Menu.menu_item>
           <% end %>
diff --git a/lib/lightning_web/components/layouts/settings.html.heex b/lib/lightning_web/components/layouts/settings.html.heex
index eb22faf8f0..108e4ac98d 100644
--- a/lib/lightning_web/components/layouts/settings.html.heex
+++ b/lib/lightning_web/components/layouts/settings.html.heex
@@ -22,33 +22,33 @@
           to={Routes.project_index_path(@socket, :index)}
           active={@active_menu_item == :projects}
         >
-          <Heroicons.building_library class="h-5 w-5 inline-block mr-2" />
+          <.icon name="hero-building-library" class="h-5 w-5 inline-block mr-2" />
           <span class="inline-block align-middle">Projects</span>
         </Menu.menu_item>
         <Menu.menu_item
           to={Routes.user_index_path(@socket, :index)}
           active={@active_menu_item == :users}
         >
-          <Heroicons.user_group class="h-5 w-5 inline-block mr-2" />
+          <.icon name="hero-user-group" class="h-5 w-5 inline-block mr-2" />
           <span class="inline-block align-middle">Users</span>
         </Menu.menu_item>
         <Menu.menu_item
           to={Routes.auth_providers_index_path(@socket, :edit)}
           active={@active_menu_item == :authentication}
         >
-          <Heroicons.key class="h-5 w-5 inline-block mr-2" />
+          <.icon name="hero-key" class="h-5 w-5 inline-block mr-2" />
           <span class="inline-block align-middle">Authentication</span>
         </Menu.menu_item>
         <Menu.menu_item
           to={Routes.audit_index_path(@socket, :index)}
           active={@active_menu_item == :audit}
         >
-          <Heroicons.archive_box class="h-5 w-5 inline-block mr-2" />
+          <.icon name="hero-archive-box" class="h-5 w-5 inline-block mr-2" />
           <span class="inline-block align-middle">Audit</span>
         </Menu.menu_item>
         <div class="grow"></div>
         <Menu.menu_item to={Routes.dashboard_index_path(@socket, :index)}>
-          <Icon.left class="h-5 w-5 inline-block mr-2" />
+          <.icon name="hero-arrow-left-mini" class="h-5 w-5 inline-block mr-2" />
           <span class="inline-block align-middle">Back</span>
         </Menu.menu_item>
         <LightningWeb.Components.Common.version_chip />
diff --git a/lib/lightning_web/components/viewers.ex b/lib/lightning_web/components/viewers.ex
index dafb4af029..f073506c02 100644
--- a/lib/lightning_web/components/viewers.ex
+++ b/lib/lightning_web/components/viewers.ex
@@ -189,7 +189,7 @@ defmodule LightningWeb.Components.Viewers do
     >
       <div class="mb-4">
         <div class="h-12 w-12 border-2 border-gray-300 border-solid mx-auto flex items-center justify-center rounded-full text-gray-400">
-          <Heroicons.code_bracket class="w-4 h-4" />
+          <.icon name="hero-code-bracket" class="w-4 h-4" />
         </div>
       </div>
       <div class="text-center mb-4 text-gray-500">
diff --git a/lib/lightning_web/controllers/user_session_html/new.html.heex b/lib/lightning_web/controllers/user_session_html/new.html.heex
index f901bb6eeb..bad2238228 100644
--- a/lib/lightning_web/controllers/user_session_html/new.html.heex
+++ b/lib/lightning_web/controllers/user_session_html/new.html.heex
@@ -54,10 +54,8 @@
                 <Common.button_white>
                   <a href={@auth_handler_url} class="w-full">
                     <div class="h-full -ml-1">
-                      <Heroicons.identification class="h-4 w-4 inline-block" />
-                      <span class="inline-block align-middle">
-                        via external provider
-                      </span>
+                      <.icon name="hero-identification" class="h-4 w-4" />
+                      <span class="align-middle">via external provider</span>
                     </div>
                   </a>
                 </Common.button_white>
diff --git a/lib/lightning_web/live/audit_live/index.ex b/lib/lightning_web/live/audit_live/index.ex
index 5fe382c6ef..0f11339488 100644
--- a/lib/lightning_web/live/audit_live/index.ex
+++ b/lib/lightning_web/live/audit_live/index.ex
@@ -62,7 +62,7 @@ defmodule LightningWeb.AuditLive.Index do
     ~H"""
     <%= for {field, old, new} <- @changes do %>
       <li><%= field %>&nbsp; <%= old %>
-        <Heroicons.arrow_right class="h-5 w-5 inline-block mr-2" />
+        <.icon name="hero-arrow-right-mini" class="h-4 w-4 inline-block mr-2" />
         <%= new %></li>
     <% end %>
     """
diff --git a/lib/lightning_web/live/auth_providers/form_component.ex b/lib/lightning_web/live/auth_providers/form_component.ex
index 5f5eb97d1f..7a864bb14e 100644
--- a/lib/lightning_web/live/auth_providers/form_component.ex
+++ b/lib/lightning_web/live/auth_providers/form_component.ex
@@ -270,7 +270,7 @@ defmodule LightningWeb.AuthProvidersLive.FormComponent do
 
                   <Common.button color="red" phx-click="disable" phx-target={@myself}>
                     <div class="h-full">
-                      <Heroicons.trash class="h-4 w-4 inline-block" />
+                      <.icon name="hero-trash" class="h-4 w-4 inline-block" />
                       <span class="inline-block align-middle">Remove</span>
                     </div>
                   </Common.button>
diff --git a/lib/lightning_web/live/live_helpers.ex b/lib/lightning_web/live/live_helpers.ex
index 55263bebdd..6efe7d4751 100644
--- a/lib/lightning_web/live/live_helpers.ex
+++ b/lib/lightning_web/live/live_helpers.ex
@@ -3,6 +3,7 @@ defmodule LightningWeb.LiveHelpers do
   General purpose LiveView helper functions
   """
   import Phoenix.Component
+  import LightningWeb.Components.Icons
 
   alias Lightning.Extensions.UsageLimiting.Context
   alias Lightning.Services.UsageLimiter
@@ -102,7 +103,7 @@ defmodule LightningWeb.LiveHelpers do
           <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
             <div class="sm:flex sm:items-start">
               <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                <Heroicons.exclamation_triangle class="h-6 w-6 text-red-600" />
+                <.icon name="hero-exclamation-triangle" class="h-6 w-6 text-red-600" />
               </div>
               <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                 <h3
diff --git a/lib/lightning_web/live/modal_portal.ex b/lib/lightning_web/live/modal_portal.ex
index f9a5374196..54317e0d80 100644
--- a/lib/lightning_web/live/modal_portal.ex
+++ b/lib/lightning_web/live/modal_portal.ex
@@ -86,7 +86,7 @@ defmodule LightningWeb.ModalPortal do
                 class="text-gray-400 hover:text-gray-500"
               >
                 <div class="sr-only">Close</div>
-                <Heroicons.x_mark class="w-4 h-4" />
+                <.icon name="hero-x-mark" class="w-4 h-4" />
               </button>
             </div>
           </div>
diff --git a/lib/lightning_web/live/run_live/components.ex b/lib/lightning_web/live/run_live/components.ex
index 643d2de043..7c8675f9a0 100644
--- a/lib/lightning_web/live/run_live/components.ex
+++ b/lib/lightning_web/live/run_live/components.ex
@@ -179,8 +179,8 @@ defmodule LightningWeb.RunLive.Components do
               phx-hook="Tooltip"
               data-placement="bottom"
             >
-              <Heroicons.paper_clip
-                mini
+              <.icon
+                name="hero-paper-clip-mini"
                 class="mr-1 mt-1 h-3 w-3 flex-shrink-0 text-gray-500"
               />
             </span>
@@ -196,10 +196,9 @@ defmodule LightningWeb.RunLive.Components do
               }
             >
               <.icon
-                naked
                 title="Inspect Step"
                 name="hero-document-magnifying-glass-mini"
-                class="h-5 w-5"
+                class="h-5 w-5 text-gray-500 hover:text-primary-400"
               />
             </.link>
           <% end %>
@@ -363,8 +362,8 @@ defmodule LightningWeb.RunLive.Components do
                   phx-hook="Tooltip"
                   data-placement="right"
                 >
-                  <Heroicons.paper_clip
-                    mini
+                  <.icon
+                    name="hero-paper-clip-mini"
                     class="mr-1.5 mt-1 h-3 w-3 flex-shrink-0 text-gray-500"
                   />
                 </span>
@@ -385,9 +384,8 @@ defmodule LightningWeb.RunLive.Components do
               }
             >
               <.icon
-                naked
                 name="hero-document-magnifying-glass-mini"
-                class="h-5 w-5"
+                class="h-5 w-5 text-gray-500 hover:text-primary-400"
               />
             </.link>
           </div>
@@ -436,12 +434,14 @@ defmodule LightningWeb.RunLive.Components do
         end}
       >
         <.icon
-          {if not @deleted, do: [naked: true], else: []}
           name="hero-play-circle-mini"
-          class={"h-5 w-5 #{if not @deleted,
-            do: "hover:text-primary-400 cursor-pointer",
-            else: "text-gray-400 hover:text-gray-400"
-        }"}
+          class={[
+            "h-5 w-5",
+            if(not @deleted,
+              do: "hover:text-primary-400 cursor-pointer",
+              else: "text-gray-400 hover:text-gray-400"
+            )
+          ]}
         />
       </span>
     <% else %>
@@ -458,7 +458,7 @@ defmodule LightningWeb.RunLive.Components do
           )
         }
       >
-        <Heroicons.arrow_path class="h-5 w-5" />
+        <.icon name="hero-arrow-path" class="h-5 w-5" />
       </span>
     <% end %>
     """
@@ -543,46 +543,44 @@ defmodule LightningWeb.RunLive.Components do
   def step_icon(%{reason: reason, error_type: error_type} = assigns) do
     [icon, classes] =
       case {reason, error_type} do
-        {nil, _any} -> [:pending, "text-gray-400"]
-        {"success", _any} -> [:success, "text-green-500"]
-        {"fail", _any} -> [:fail, "text-red-500"]
-        {"crash", _any} -> [:crash, "text-orange-800"]
-        {"cancel", _any} -> [:cancel, "text-grey-600"]
-        {"kill", "SecurityError"} -> [:shield, "text-yellow-800"]
-        {"kill", "ImportError"} -> [:shield, "text-yellow-800"]
-        {"kill", "TimeoutError"} -> [:clock, "text-yellow-800"]
-        {"kill", "OOMError"} -> [:circle_ex, "text-yellow-800"]
-        {"exception", ""} -> [:triangle_ex, "text-black-800"]
-        {"lost", _nil} -> [:triangle_ex, "text-black-800"]
+        {nil, _any} ->
+          ["hero-ellipsis-horizontal-circle-solid", "text-gray-400"]
+
+        {"success", _any} ->
+          ["hero-check-circle-solid", "text-green-500"]
+
+        {"fail", _any} ->
+          ["hero-x-circle-solid", "text-red-500"]
+
+        {"crash", _any} ->
+          ["hero-x-circle-solid", "text-orange-800"]
+
+        {"cancel", _any} ->
+          ["hero-no-symbol-mini", "text-grey-600"]
+
+        {"kill", "SecurityError"} ->
+          ["hero-shield-exclamation-solid", "text-yellow-800"]
+
+        {"kill", "ImportError"} ->
+          ["hero-shield-exclamation-solid", "text-yellow-800"]
+
+        {"kill", "TimeoutError"} ->
+          ["hero-clock-solid", "text-yellow-800"]
+
+        {"kill", "OOMError"} ->
+          ["hero-exclamation-circle-solid", "text-yellow-800"]
+
+        {"exception", ""} ->
+          ["hero-exclamation-triangle-solid", "text-black-800"]
+
+        {"lost", _nil} ->
+          ["hero-exclamation-triangle-solid", "text-black-800"]
       end
 
-    assigns =
-      assign(assigns,
-        icon: icon,
-        classes: ["mr-1.5 h-5 w-5 flex-shrink-0 inline", classes]
-      )
+    assigns = assign(assigns, icon: icon, classes: classes)
 
     ~H"""
-    <%= case @icon do %>
-      <% :pending -> %>
-        <Heroicons.ellipsis_horizontal_circle solid class={@classes} />
-      <% :success -> %>
-        <Heroicons.check_circle solid class={@classes} />
-      <% :fail -> %>
-        <Heroicons.x_circle solid class={@classes} />
-      <% :crash -> %>
-        <Heroicons.x_circle solid class={@classes} />
-      <% :cancel -> %>
-        <Heroicons.no_symbol solid class={@classes} />
-      <% :shield -> %>
-        <Heroicons.shield_exclamation solid class={@classes} />
-      <% :clock -> %>
-        <Heroicons.clock solid class={@classes} />
-      <% :circle_ex -> %>
-        <Heroicons.exclamation_circle solid class={@classes} />
-      <% :triangle_ex -> %>
-        <Heroicons.exclamation_triangle solid class={@classes} />
-    <% end %>
+    <.icon name={@icon} class={["mr-1.5 h-5 w-5 flex-shrink-0 inline", @classes]} />
     """
   end
 
diff --git a/storybook/runs/status_icons.story.exs b/storybook/runs/status_icons.story.exs
new file mode 100644
index 0000000000..bc663f6d1b
--- /dev/null
+++ b/storybook/runs/status_icons.story.exs
@@ -0,0 +1,31 @@
+defmodule LightningWeb.Storybook.Runs.StatusIcons do
+  alias LightningWeb.RunLive.Components
+  use PhoenixStorybook.Story, :component
+
+  # required
+  def function, do: &Components.step_icon/1
+
+  def variations do
+    [
+      {:nothing, nil, nil},
+      {:success, "success", nil},
+      {:fail, "fail", nil},
+      {:crash, "crash", nil},
+      {:cancel, "cancel", nil},
+      {:kill_security, "kill", "SecurityError"},
+      {:kill_import, "kill", "ImportError"},
+      {:kill_timeout, "kill", "TimeoutError"},
+      {:kill_oom, "kill", "OOMError"},
+      {:exception, "exception", ""},
+      {:list, "lost", nil}
+    ]
+    |> Enum.map(fn {id, reason, error_type} ->
+      %Variation{
+        id: id,
+        description: "Status Icon",
+        attributes: %{reason: reason, error_type: error_type},
+        slots: []
+      }
+    end)
+  end
+end
diff --git a/test/lightning_web/live/run_live/components_test.exs b/test/lightning_web/live/run_live/components_test.exs
index ffe59d351a..66e3fa97d8 100644
--- a/test/lightning_web/live/run_live/components_test.exs
+++ b/test/lightning_web/live/run_live/components_test.exs
@@ -108,11 +108,11 @@ defmodule LightningWeb.RunLive.ComponentsTest do
       )
       |> Floki.parse_fragment!()
 
-    assert html
-           |> Floki.find(
-             ~s{svg[class="mr-1.5 h-5 w-5 flex-shrink-0 inline text-gray-400"]}
+    assert has_elem_with_class?(
+             html,
+             "span",
+             "hero-ellipsis-horizontal-circle-solid text-gray-400"
            )
-           |> Enum.any?()
 
     assert has_run_step_link?(html, workflow.project, run, first_step)
 
@@ -127,11 +127,11 @@ defmodule LightningWeb.RunLive.ComponentsTest do
       )
       |> Floki.parse_fragment!()
 
-    assert html
-           |> Floki.find(
-             ~s{svg[class="mr-1.5 h-5 w-5 flex-shrink-0 inline text-green-500"]}
+    assert has_elem_with_class?(
+             html,
+             "span",
+             "hero-check-circle-solid text-green-500"
            )
-           |> Enum.any?()
 
     assert has_run_step_link?(html, workflow.project, run, second_step)
 
@@ -146,11 +146,11 @@ defmodule LightningWeb.RunLive.ComponentsTest do
       )
       |> Floki.parse_fragment!()
 
-    assert html
-           |> Floki.find(
-             ~s{svg[class="mr-1.5 h-5 w-5 flex-shrink-0 inline text-red-500"]}
+    assert has_elem_with_class?(
+             html,
+             "span",
+             "hero-x-circle-solid text-red-500"
            )
-           |> Enum.any?()
 
     assert has_run_step_link?(html, workflow.project, run, third_step)
 
@@ -493,4 +493,20 @@ defmodule LightningWeb.RunLive.ComponentsTest do
     )
     |> Enum.any?()
   end
+
+  defp has_elem_with_class?(html, tag, class_names) do
+    html
+    |> Floki.find(tag)
+    |> Enum.filter(fn {_tag, attrs, _inner} ->
+      Enum.filter(attrs, &match?({"class", _}, &1))
+      |> Enum.find(attrs, fn {"class", value} ->
+        class_names
+        |> String.split()
+        |> Enum.all?(fn class_name ->
+          String.contains?(value, class_name)
+        end)
+      end)
+    end)
+    |> Enum.any?()
+  end
 end