diff --git a/lib/atomic_web/components/activity.ex b/lib/atomic_web/components/activity.ex
index 2de46afe..443198ea 100644
--- a/lib/atomic_web/components/activity.ex
+++ b/lib/atomic_web/components/activity.ex
@@ -51,15 +51,12 @@ defmodule AtomicWeb.Components.Activity do
               <span class="sr-only">starting in</span>
             </span>
           </span>
-          <span class="inline-flex items-center text-sm">
+          <span class={[
+            "inline-flex items-center text-sm",
+            color_class(@activity.enrolled, @activity.maximum_entries)
+          ]}>
             <span class="inline-flex space-x-2">
-              <.icon
-                name="hero-user-group-solid"
-                class={[
-                  "h-5 w-5",
-                  color_class(@activity.enrolled, @activity.maximum_entries)
-                ]}
-              />
+              <.icon name="hero-user-group-solid" class="size-5" />
               <span class="font-medium text-gray-900"><%= @activity.enrolled %>/<%= @activity.maximum_entries %></span>
               <span class="sr-only text-zinc-400">enrollments</span>
             </span>
diff --git a/lib/atomic_web/components/unauthenticated.ex b/lib/atomic_web/components/unauthenticated.ex
index e148b028..cc12c595 100644
--- a/lib/atomic_web/components/unauthenticated.ex
+++ b/lib/atomic_web/components/unauthenticated.ex
@@ -10,7 +10,7 @@ defmodule AtomicWeb.Components.Unauthenticated do
   def unauthenticated_state(assigns) do
     ~H"""
     <div id={@id} class="text-center">
-      <.icon name={:user_circle} class="mx-auto h-12 w-12 text-zinc-400" />
+      <.icon name="hero-user-circle" class="mx-auto h-12 w-12 text-zinc-400" />
       <h3 class="mt-2 text-sm font-semibold text-zinc-900">You are not authenticated</h3>
       <p class="mt-1 text-sm text-zinc-500">Please sign in to view this content.</p>
       <div class="mt-4">
@@ -19,7 +19,7 @@ defmodule AtomicWeb.Components.Unauthenticated do
           class="inline-flex items-center rounded-md bg-orange-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-orange-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-500"
         >
           <span class="mr-2 text-sm font-semibold leading-6" aria-hidden="true">Sign in</span>
-          <.icon name={:arrow_right_end_on_rectangle} solid class="h-5 w-5" />
+          <.icon name="hero-arrow-right-end-on-rectangle-solid" class="size-5" />
         </.link>
       </div>
     </div>