diff --git a/assets/css/components/avatar.css b/assets/css/components/avatar.css
index 74e76cd17..8772c6a81 100644
--- a/assets/css/components/avatar.css
+++ b/assets/css/components/avatar.css
@@ -21,23 +21,23 @@
 /* Avatar - sizes */
 
 .atomic-avatar--xs {
-  @apply h-8 w-8 text-xs;
+  @apply size-8 text-xs;
 }
 
 .atomic-avatar--sm {
-  @apply h-12 w-12 text-lg;
+  @apply size-12 text-lg;
 }
 
 .atomic-avatar--md {
-  @apply h-16 w-16 text-lg;
+  @apply size-16 text-lg;
 }
 
 .atomic-avatar--lg {
-  @apply h-20 w-20 text-4xl;
+  @apply size-20 text-4xl;
 }
 
 .atomic-avatar--xl {
-  @apply h-24 w-24 text-4xl;
+  @apply size-24 text-4xl;
 }
 
 /* Avatar - colors */
diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
index a89824018..36902c3c6 100644
--- a/assets/tailwind.config.js
+++ b/assets/tailwind.config.js
@@ -1,6 +1,9 @@
 const colors = require("tailwindcss/colors");
 const plugin = require('tailwindcss/plugin');
 
+const fs = require("fs");
+const path = require("path");
+
 module.exports = {
   darkMode: 'selector',
   content: [
@@ -25,23 +28,23 @@ module.exports = {
       },
       keyframes: {
         wave: {
-            '0%': { transform: 'rotate(0.0deg)' },
-            '15%': { transform: 'rotate(14.0deg)' },
-            '30%': { transform: 'rotate(-8.0deg)' },
-            '40%': { transform: 'rotate(14.0deg)' },
-            '50%': { transform: 'rotate(-4.0deg)' },
-            '60%': { transform: 'rotate(10.0deg)' },
-            '70%': { transform: 'rotate(0.0deg)' },
-            '100%': { transform: 'rotate(0.0deg)' },
+          '0%': { transform: 'rotate(0.0deg)' },
+          '15%': { transform: 'rotate(14.0deg)' },
+          '30%': { transform: 'rotate(-8.0deg)' },
+          '40%': { transform: 'rotate(14.0deg)' },
+          '50%': { transform: 'rotate(-4.0deg)' },
+          '60%': { transform: 'rotate(10.0deg)' },
+          '70%': { transform: 'rotate(0.0deg)' },
+          '100%': { transform: 'rotate(0.0deg)' },
         },
         progress: {
-            '0%': { width: '0%' },
-            '100%': { width: '100%' },
+          '0%': { width: '0%' },
+          '100%': { width: '100%' },
         }
       },
       animation: {
-          wave: 'wave 1.5s infinite',
-          progress: 'progress 5s linear 1'
+        wave: 'wave 1.5s infinite',
+        progress: 'progress 5s linear 1'
       },
       backgroundSize: {
         '75': '75%'
@@ -50,9 +53,55 @@ module.exports = {
   },
   plugins: [
     require('@tailwindcss/forms'),
+
+    // Allows prefixing tailwind classes with LiveView classes to add rules
+    // only when LiveView classes are applied, for example:
+    //
+    //     <div class="phx-click-loading:animate-ping">
+    //
     plugin(({addVariant}) => addVariant('phx-no-feedback', ['&.phx-no-feedback', '.phx-no-feedback &'])),
     plugin(({addVariant}) => addVariant('phx-click-loading', ['&.phx-click-loading', '.phx-click-loading &'])),
     plugin(({addVariant}) => addVariant('phx-submit-loading', ['&.phx-submit-loading', '.phx-submit-loading &'])),
-    plugin(({addVariant}) => addVariant('phx-change-loading', ['&.phx-change-loading', '.phx-change-loading &']))
+    plugin(({addVariant}) => addVariant('phx-change-loading', ['&.phx-change-loading', '.phx-change-loading &'])),
+
+    // Embeds Heroicons (https://heroicons.com) into app.css bundle
+    plugin(function({matchComponents, theme}) {
+      let iconsDir = path.join(__dirname, "../deps/heroicons/optimized")
+      let values = {}
+      let icons = [
+        ["", "/24/outline"],
+        ["-solid", "/24/solid"],
+        ["-mini", "/20/solid"],
+        ["-micro", "/16/solid"]
+      ]
+      icons.forEach(([suffix, dir]) => {
+        fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
+          let name = path.basename(file, ".svg") + suffix
+          values[name] = {name, fullPath: path.join(iconsDir, dir, file)}
+        })
+      })
+      matchComponents({
+        "hero": ({name, fullPath}) => {
+          let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "")
+          let size = theme("spacing.6")
+          if (name.endsWith("-mini")) {
+            size = theme("spacing.5")
+          } else if (name.endsWith("-micro")) {
+            size = theme("spacing.4")
+          }
+          return {
+            [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
+            "-webkit-mask": `var(--hero-${name})`,
+            "mask": `var(--hero-${name})`,
+            "mask-repeat": "no-repeat",
+            "background-color": "currentColor",
+            "vertical-align": "middle",
+            "display": "inline-block",
+            "width": size,
+            "height": size
+          }
+        }
+      }, {values})
+    })
   ]
 }
diff --git a/lib/atomic/schema.ex b/lib/atomic/schema.ex
index 068dc3aa6..9f890413a 100644
--- a/lib/atomic/schema.ex
+++ b/lib/atomic/schema.ex
@@ -2,16 +2,16 @@ defmodule Atomic.Schema do
   @moduledoc """
   The application Schema for all the modules, providing Ecto.UUIDs as default id.
   """
-  alias Atomic.Time
+  use Gettext, backend: AtomicWeb.Gettext
 
-  import AtomicWeb.Gettext
+  alias Atomic.Time
 
   defmacro __using__(_) do
     quote do
       use Ecto.Schema
       use Waffle.Ecto.Schema
+      use Gettext, backend: AtomicWeb.Gettext
 
-      import AtomicWeb.Gettext
       import Ecto.Changeset
       import Ecto.Query
 
diff --git a/lib/atomic_web.ex b/lib/atomic_web.ex
index 53f6c7367..58d46de71 100644
--- a/lib/atomic_web.ex
+++ b/lib/atomic_web.ex
@@ -20,9 +20,10 @@ defmodule AtomicWeb do
   def controller do
     quote do
       use Phoenix.Controller, namespace: AtomicWeb
+      use Gettext, backend: AtomicWeb.Gettext
 
       import Plug.Conn
-      import AtomicWeb.Gettext
+
       alias AtomicWeb.Router.Helpers, as: Routes
     end
   end
@@ -80,7 +81,7 @@ defmodule AtomicWeb do
   def channel do
     quote do
       use Phoenix.Channel
-      import AtomicWeb.Gettext
+      use Gettext, backend: AtomicWeb.Gettext
     end
   end
 
@@ -99,8 +100,10 @@ defmodule AtomicWeb do
       # Import basic rendering functionality (render, render_layout, etc)
       import Phoenix.View
 
+      # Custom imports
+      use Gettext, backend: AtomicWeb.Gettext
+
       import AtomicWeb.ErrorHelpers
-      import AtomicWeb.Gettext
       import AtomicWeb.Helpers
 
       alias Atomic.Uploaders
diff --git a/lib/atomic_web/components/activity.ex b/lib/atomic_web/components/activity.ex
index 84ee53e61..cc0e88fc1 100644
--- a/lib/atomic_web/components/activity.ex
+++ b/lib/atomic_web/components/activity.ex
@@ -46,21 +46,21 @@ defmodule AtomicWeb.Components.Activity do
         <div class="flex space-x-4">
           <span class="inline-flex items-center text-sm">
             <span class="inline-flex space-x-2 text-zinc-400">
-              <.icon name={:clock} solid class="h-5 w-5" />
+              <.icon name="hero-clock-solid" class="size-5" />
               <span class="font-medium text-gray-900"><%= relative_datetime(@activity.start) %></span>
               <span class="sr-only">starting in</span>
             </span>
           </span>
           <span class="inline-flex items-center text-sm">
             <span class="inline-flex space-x-2 text-zinc-400">
-              <.icon name={:user_group} solid class="h-5 w-5" />
+              <.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">enrollments</span>
             </span>
           </span>
           <span class="inline-flex items-center text-sm">
             <span class="inline-flex space-x-2 text-zinc-400">
-              <.icon name={:map_pin} solid class="h-5 w-5" />
+              <.icon name="hero-map-pin-solid" class="size-5" />
               <span class="font-medium text-gray-900"><%= @activity.location.name %></span>
               <span class="sr-only">location</span>
             </span>
diff --git a/lib/atomic_web/components/badge.ex b/lib/atomic_web/components/badge.ex
index 309d571fd..f188c3215 100644
--- a/lib/atomic_web/components/badge.ex
+++ b/lib/atomic_web/components/badge.ex
@@ -24,19 +24,18 @@ defmodule AtomicWeb.Components.Badge do
     default: :left,
     doc: "The position of the icon if applicable."
 
-  attr :icon, :atom, default: nil, doc: "The icon to display."
-
-  attr :icon_variant, :atom,
-    default: :outline,
-    values: [:solid, :outline, :mini],
-    doc: "The icon variation to display."
-
+  attr :icon, :string, default: nil, doc: "The icon to display."
   attr :icon_class, :string, default: "", doc: "Additional classes to apply to the icon."
 
   attr :class, :string, default: "", doc: "Additional classes to apply to the badge."
   attr :label, :string, default: nil, doc: "Badge label."
-  attr :rest, :global
-  slot :inner_block, required: false
+
+  attr :rest, :global,
+    include:
+      ~w(csrf_token disabled download form href hreflang method name navigate patch referrerpolicy rel replace target type value autofocus tabindex),
+    doc: "Arbitrary HTML or phx attributes."
+
+  slot :inner_block, required: false, doc: "Slot for the content of the badge."
 
   def badge(assigns) do
     ~H"""
@@ -50,11 +49,11 @@ defmodule AtomicWeb.Components.Badge do
       ]}
     >
       <%= if @icon && @icon_position == :left do %>
-        <.icon name={@icon} class={"#{generate_icon_classes(assigns)}"} solid={@icon_variant == :solid} mini={@icon_variant == :mini} />
+        <.icon name={@icon} class={"#{generate_icon_classes(assigns)}"} />
       <% end %>
       <%= render_slot(@inner_block) || @label %>
       <%= if @icon && @icon_position == :right do %>
-        <.icon name={@icon} class={"#{generate_icon_classes(assigns)}"} solid={@icon_variant == :solid} mini={@icon_variant == :mini} />
+        <.icon name={@icon} class={"#{generate_icon_classes(assigns)}"} />
       <% end %>
     </div>
     """
diff --git a/lib/atomic_web/components/button.ex b/lib/atomic_web/components/button.ex
index 12d441854..b87705367 100644
--- a/lib/atomic_web/components/button.ex
+++ b/lib/atomic_web/components/button.ex
@@ -45,13 +45,7 @@ defmodule AtomicWeb.Components.Button do
     default: :left,
     doc: "The position of the icon if applicable."
 
-  attr :icon, :atom, default: nil, doc: "The icon to display."
-
-  attr :icon_variant, :atom,
-    default: :outline,
-    values: [:solid, :outline, :mini],
-    doc: "The icon variation to display."
-
+  attr :icon, :string, default: nil, doc: "The icon to display."
   attr :icon_class, :string, default: "", doc: "Additional classes to apply to the icon."
 
   attr :class, :string, default: "", doc: "Additional classes to apply to the component."
@@ -127,7 +121,7 @@ defmodule AtomicWeb.Components.Button do
 
   defp icon_content(assigns) do
     ~H"""
-    <.icon name={@icon} class={"#{generate_icon_classes(assigns)}"} solid={@icon_variant == :solid} mini={@icon_variant == :mini} />
+    <.icon name={@icon} class={"#{generate_icon_classes(assigns)}"} />
     """
   end
 
diff --git a/lib/atomic_web/components/calendar/calendar.ex b/lib/atomic_web/components/calendar/calendar.ex
index 689b0a056..3f1c3cd49 100644
--- a/lib/atomic_web/components/calendar/calendar.ex
+++ b/lib/atomic_web/components/calendar/calendar.ex
@@ -69,7 +69,7 @@ defmodule AtomicWeb.Components.Calendar do
                 <.link patch={"#{if @mode == "month" do @previous_month_path else @previous_week_path end}"}>
                   <button type="button" class="flex items-center justify-center py-2 pr-4 pl-3 text-zinc-400 hover:bg-zinc-50 hover:text-zinc-500 focus:relative md:w-9 md:px-2">
                     <span class="sr-only">Previous month</span>
-                    <.icon name={:chevron_left} solid class="h-3 w-3 sm:h-5 sm:w-5" />
+                    <.icon name="hero-chevron-left-solid" class="size-3 sm:h-5 sm:w-5" />
                   </button>
                 </.link>
                 <.link patch={"#{if @mode == "month" do @present_month_path else @present_week_path end}"}>
@@ -80,7 +80,7 @@ defmodule AtomicWeb.Components.Calendar do
                 <.link patch={"#{if @mode == "month" do @next_month_path else @next_week_path end}"}>
                   <button type="button" class="flex items-center justify-center py-2 pr-3 pl-4 text-zinc-400 hover:bg-zinc-50 hover:text-zinc-500 focus:relative md:w-9 md:px-2">
                     <span class="sr-only">Next month</span>
-                    <.icon name={:chevron_right} solid class="h-3 w-3 sm:h-5 sm:w-5" />
+                    <.icon name="hero-chevron-right-solid" class="size-3 sm:h-5 sm:w-5" />
                   </button>
                 </.link>
               </div>
@@ -95,7 +95,7 @@ defmodule AtomicWeb.Components.Calendar do
                     ]}
                   >
                     <:wrapper>
-                      <.button color={:white} icon={:chevron_down} icon_position={:right} icon_variant={:solid}>
+                      <.button color={:white} icon="hero-chevron-down-solid" icon_position={:right}>
                         <%= if @mode == "month" do %>
                           <%= gettext("Month view") %>
                         <% else %>
@@ -150,7 +150,7 @@ defmodule AtomicWeb.Components.Calendar do
               <div class="relative ml-6 md:hidden">
                 <button type="button" @click="mode_view = !mode_view" class="-mx-2 flex items-center rounded-full border border-transparent p-2 text-zinc-400 hover:text-zinc-500" id="menu-0-button" aria-expanded="false" aria-haspopup="true">
                   <span class="sr-only">Open menu</span>
-                  <.icon name={:ellipsis_horizontal} solid class="h-3 w-3 sm:h-5 sm:w-5" />
+                  <.icon name="hero-ellipsis-horizontal-solid" class="size-3 sm:h-5 sm:w-5" />
                 </button>
                 <div x-bind:class="mode_view ?'block' : 'hidden'" class="absolute right-0 mt-3 w-36 origin-top-right divide-y divide-zinc-100 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                   <div class="py-1" role="none">
diff --git a/lib/atomic_web/components/calendar/month.ex b/lib/atomic_web/components/calendar/month.ex
index 6717e6ba5..f19675812 100644
--- a/lib/atomic_web/components/calendar/month.ex
+++ b/lib/atomic_web/components/calendar/month.ex
@@ -61,7 +61,7 @@ defmodule AtomicWeb.Components.CalendarMonth do
                     <.badge variant={:outline} color={:primary} label="Activity" />
                   </.link>
                   <time datetime={activity.start} class="flex items-center text-zinc-700">
-                    <.icon name={:clock} solid class="mr-2 h-5 w-5 text-zinc-400" />
+                    <.icon name="hero-clock-solid" class="size-5 mr-2 text-zinc-400" />
                     <%= Calendar.strftime(activity.start, "%Hh%M") %>
                   </time>
                 </div>
@@ -99,7 +99,7 @@ defmodule AtomicWeb.Components.CalendarMonth do
     <div class={@class}>
       <time date-time={@date} class={
           "ml-auto lg:ml-0 pr-2 lg:pr-0 #{if @today? == 0 do
-            "flex h-6 w-6 items-center justify-center rounded-full bg-orange-400 font-semibold text-white shrink-0"
+            "flex size-6 items-center justify-center rounded-full bg-orange-400 font-semibold text-white shrink-0"
           end}"
         }>
         <%= @text %>
@@ -122,7 +122,7 @@ defmodule AtomicWeb.Components.CalendarMonth do
         date-time={@date}
         class={
           "ml-auto lg:ml-0 #{if current_from_params(@timezone, @params) == @date do
-            "ml-auto flex h-6 w-6 items-center justify-center rounded-full #{if @today? == 0 do
+            "ml-auto flex size-6 items-center justify-center rounded-full #{if @today? == 0 do
               "bg-orange-700"
             else
               "bg-zinc-900"
diff --git a/lib/atomic_web/components/dropdown.ex b/lib/atomic_web/components/dropdown.ex
index 01c52222c..e000815cf 100644
--- a/lib/atomic_web/components/dropdown.ex
+++ b/lib/atomic_web/components/dropdown.ex
@@ -11,11 +11,6 @@ defmodule AtomicWeb.Components.Dropdown do
 
   attr :items, :list, default: [], doc: "The items to display in the dropdown."
 
-  attr :icon_variant, :atom,
-    default: :outline,
-    values: [:solid, :outline, :mini],
-    doc: "The icon variation to display."
-
   attr :orientation, :atom,
     default: :down,
     doc: "The orientation of the dropdown.",
@@ -51,14 +46,14 @@ defmodule AtomicWeb.Components.Dropdown do
                 method={Map.get(item, :method, "get")}
               >
                 <%= if item[:icon] do %>
-                  <.icon solid={@icon_variant == :solid} mini={@icon_variant == :mini} name={item.icon} class="ml-2 inline-block h-5 w-5" />
+                  <.icon name={item.icon} class="size-5 ml-2 inline-block" />
                 <% end %>
                 <%= item.name %>
               </.link>
             <% else %>
               <div class={"#{item[:class]} flex items-center gap-x-2 px-4 py-2 text-sm text-gray-700"}>
                 <%= if item[:icon] do %>
-                  <.icon solid={@icon_variant == :solid} mini={@icon_variant == :mini} name={item.icon} class="ml-2 inline-block h-5 w-5" />
+                  <.icon name={item.icon} class="size-5 ml-2 inline-block" />
                 <% end %>
                 <%= item.name %>
               </div>
diff --git a/lib/atomic_web/components/empty.ex b/lib/atomic_web/components/empty.ex
index ee073d6b4..5ccbf1f29 100644
--- a/lib/atomic_web/components/empty.ex
+++ b/lib/atomic_web/components/empty.ex
@@ -13,12 +13,12 @@ defmodule AtomicWeb.Components.Empty do
   def empty_state(assigns) do
     ~H"""
     <div id={@id} class="text-center">
-      <.icon name={:plus_circle} class="mx-auto h-12 w-12 text-zinc-400" />
+      <.icon name="hero-plus-circle" class="size-12 mx-auto text-zinc-400" />
       <h3 class="mt-2 text-sm font-semibold text-zinc-900">No <%= plural(@placeholder) %></h3>
       <p class="mt-1 text-sm text-zinc-500">Get started by creating a new <%= @placeholder %>.</p>
       <div class="mt-4">
         <.link navigate={@url} 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">
-          <svg class="mr-1.5 -ml-0.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <svg class="size-5 mr-1.5 -ml-0.5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
             <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
           </svg>
           New <%= @placeholder %>
diff --git a/lib/atomic_web/components/icon.ex b/lib/atomic_web/components/icon.ex
index 70e9037d3..ee97acc1a 100644
--- a/lib/atomic_web/components/icon.ex
+++ b/lib/atomic_web/components/icon.ex
@@ -1,19 +1,17 @@
 defmodule AtomicWeb.Components.Icon do
   @moduledoc """
-  A component for rendering an icon from the Heroicons package.
+  A component for rendering icons.
+
+  An icon can either be from the Heroicons or Tabler Icons set.
   """
   use Phoenix.Component
 
-  attr :rest, :global,
-    doc: "The arbitrary HTML attributes for the svg container",
-    include: ~w(fill stroke stroke-width)
-
-  attr :name, :atom, required: true
-  attr :outline, :boolean, default: true
-  attr :solid, :boolean, default: false
-  attr :mini, :boolean, default: false
+  attr :name, :string, required: true
+  attr :class, :string, default: nil
 
-  def icon(assigns) do
-    apply(Heroicons, assigns.name, [assigns])
+  def icon(%{name: "hero-" <> _} = assigns) do
+    ~H"""
+    <span class={[@name, @class]} />
+    """
   end
 end
diff --git a/lib/atomic_web/components/image_uploader.ex b/lib/atomic_web/components/image_uploader.ex
index 740220120..977f3357d 100644
--- a/lib/atomic_web/components/image_uploader.ex
+++ b/lib/atomic_web/components/image_uploader.ex
@@ -23,7 +23,7 @@ defmodule AtomicWeb.Components.ImageUploader do
           <div class="mx-auto sm:col-span-6 lg:w-full">
             <div class="my-[140px] flex justify-center px-6">
               <div class="space-y-1 text-center">
-                <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
+                <svg class="size-12 mx-auto text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
                   <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                 </svg>
                 <div class="flex text-sm text-gray-600">
@@ -58,7 +58,7 @@ defmodule AtomicWeb.Components.ImageUploader do
                     <% end %>
                   </figcaption>
                   <button type="button" phx-click="cancel-image" phx-target={@target} phx-value-ref={entry.ref} aria-label="cancel" class="pl-4">
-                    <.icon name={:x_mark} solid class="h-5 w-5 text-gray-400" />
+                    <.icon name="hero-x-mark-solid" class="size-5 text-gray-400" />
                   </button>
                 </div>
               </figure>
diff --git a/lib/atomic_web/components/modal.ex b/lib/atomic_web/components/modal.ex
index 8990f8c3f..32b69dd38 100644
--- a/lib/atomic_web/components/modal.ex
+++ b/lib/atomic_web/components/modal.ex
@@ -3,9 +3,9 @@ defmodule AtomicWeb.Components.Modal do
   Reusable modal component.
   """
   use Phoenix.Component
+  use Gettext, backend: AtomicWeb.Gettext
 
   import AtomicWeb.Components.Icon
-  import AtomicWeb.Gettext
   import AtomicWeb.LiveHelpers
 
   alias Phoenix.LiveView.JS
@@ -42,7 +42,7 @@ defmodule AtomicWeb.Components.Modal do
             <.focus_wrap id={"#{@id}-container"} phx-click-away={JS.exec("phx-cancel", to: "##{@id}")} class="shadow-zinc-700/10 ring-zinc-700/10 relative hidden rounded-2xl bg-white p-14 shadow-lg ring-1 transition">
               <div class="absolute top-6 right-5">
                 <button phx-click={JS.exec("phx-cancel", to: "##{@id}")} type="button" class="-m-3 flex-none p-3 opacity-20 outline-none hover:opacity-40" aria-label={gettext("close")}>
-                  <.icon name={:x_mark} solid class="h-5 w-5" />
+                  <.icon name="hero-x-mark-solid" class="size-5" />
                 </button>
               </div>
               <div id={"#{@id}-content"}>
diff --git a/lib/atomic_web/components/notification.ex b/lib/atomic_web/components/notification.ex
index 22e02e2bb..0ba1b12bc 100644
--- a/lib/atomic_web/components/notification.ex
+++ b/lib/atomic_web/components/notification.ex
@@ -37,7 +37,7 @@ defmodule AtomicWeb.Components.Notification do
             <div class="ml-4 flex flex-shrink-0">
               <button phx-click="lv:clear-flash" phx-value-key={@type} class="inline-flex rounded-md bg-white text-zinc-400 hover:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-zinc-600 focus:ring-offset-2">
                 <span class="sr-only">Close</span>
-                <.icon name={:x_mark} solid class="h-5 w-5" />
+                <.icon name="hero-x-mark-solid" class="size-5" />
               </button>
             </div>
           </div>
@@ -53,22 +53,22 @@ defmodule AtomicWeb.Components.Notification do
     case type do
       "info" ->
         ~H"""
-        <.icon name={:information_circle} solid class="h-6 w-6 text-blue-400" />
+        <.icon name="hero-information-circle-solid" class="size-6 text-blue-400" />
         """
 
       "success" ->
         ~H"""
-        <.icon name={:check_circle} solid class="h-6 w-6 text-green-400" />
+        <.icon name="hero-check-circle-solid" class="size-6 text-green-400" />
         """
 
       "warning" ->
         ~H"""
-        <.icon name={:exclamation_circle} solid class="h-6 w-6 text-yellow-400" />
+        <.icon name="hero-exclamation-circle-solid" class="size-6 text-yellow-400" />
         """
 
       "error" ->
         ~H"""
-        <.icon name={:x_circle} solid class="h-6 w-6 text-red-400" />
+        <.icon name="hero-x-circle-solid" class="size-6 text-red-400" />
         """
     end
   end
diff --git a/lib/atomic_web/components/pagination.ex b/lib/atomic_web/components/pagination.ex
index c0082e74d..49a66498e 100644
--- a/lib/atomic_web/components/pagination.ex
+++ b/lib/atomic_web/components/pagination.ex
@@ -20,7 +20,7 @@ defmodule AtomicWeb.Components.Pagination do
           <div class="-mt-px flex w-0 flex-1">
             <%= if @meta.has_previous_page? do %>
               <.link patch={build_query(@meta.previous_page, @meta, @params)} class="inline-flex items-center pt-4 pr-1 text-sm font-medium text-zinc-500 hover:text-zinc-700">
-                <.icon name={:arrow_long_left} solid class="mr-3 h-5 w-5 text-zinc-400" />
+                <.icon name="hero-arrow-long-left-solid" class="size-5 mr-3 text-zinc-400" />
               </.link>
             <% end %>
           </div>
@@ -52,7 +52,7 @@ defmodule AtomicWeb.Components.Pagination do
           <div class="-mt-px flex w-0 flex-1 justify-end">
             <%= if @meta.has_next_page? do %>
               <.link patch={build_query(@meta.next_page, @meta, @params)} class="inline-flex items-center pt-4 pl-1 text-sm font-medium text-zinc-500 hover:text-zinc-700">
-                <.icon name={:arrow_long_right} solid class="ml-3 h-5 w-5 text-zinc-400" />
+                <.icon name="hero-arrow-long-right-solid" class="size-5 ml-3 text-zinc-400" />
               </.link>
             <% end %>
           </div>
diff --git a/lib/atomic_web/components/sidebar.ex b/lib/atomic_web/components/sidebar.ex
index 083ac4b49..23277ee1b 100644
--- a/lib/atomic_web/components/sidebar.ex
+++ b/lib/atomic_web/components/sidebar.ex
@@ -36,7 +36,7 @@ defmodule AtomicWeb.Components.Sidebar do
       <div class="flex flex-row items-center justify-between">
         <button type="button" class="-m-2.5 pl-6 text-zinc-700 lg:hidden" phx-click={show_mobile_sidebar()}>
           <span class="sr-only">Open sidebar</span>
-          <.icon name={:bars_3} class="!h-6 !w-6" />
+          <.icon name="hero-bars-3" class="!h-6 !w-6" />
         </button>
         <div class="left-1/4 mt-auto -mb-2">
           <span class="sr-only">Open user menu</span>
@@ -53,7 +53,7 @@ defmodule AtomicWeb.Components.Sidebar do
 
               <button type="button" phx-click={hide_mobile_sidebar()} class="absolute top-0 right-0 p-4">
                 <span class="sr-only">Close sidebar</span>
-                <.icon name={:x_mark} class="h-6 w-6 text-zinc-700" />
+                <.icon name="hero-x-mark" class="size-6 text-zinc-700" />
               </button>
             </div>
 
@@ -106,7 +106,7 @@ defmodule AtomicWeb.Components.Sidebar do
                   "text-orange-500"
                 else
                   "text-zinc-400 group-hover:text-orange-500"
-                end} h-6 w-6 shrink-0"
+                end} size-6 shrink-0"
               } />
             <%= page.title %>
           </.link>
@@ -124,14 +124,14 @@ defmodule AtomicWeb.Components.Sidebar do
           <button class="flex w-full select-none flex-row items-center gap-x-2 px-4 py-3 text-sm font-semibold leading-6 text-zinc-700 lg:px-0">
             <AtomicWeb.Components.Avatar.avatar name={@current_user.name} src={user_image(@current_user)} size={:xs} color={:light_gray} class="!text-sm" />
             <span class="text-sm font-semibold leading-6" aria-hidden="true"><%= @current_user.name %></span>
-            <.icon name={:chevron_right} solid class="h-5 w-5" />
+            <.icon name="hero-chevron-right-solid" class="size-5" />
           </button>
         </:wrapper>
       </AtomicWeb.Components.Dropdown.dropdown>
     <% else %>
       <.link navigate={Routes.user_session_path(AtomicWeb.Endpoint, :new)} class="flex select-none items-center space-x-2 px-4 py-3 text-sm font-semibold leading-6 text-zinc-700 lg:px-0">
         <span class="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>
     <% end %>
     """
diff --git a/lib/atomic_web/components/spinner.ex b/lib/atomic_web/components/spinner.ex
index 305a6ca14..73740f81f 100644
--- a/lib/atomic_web/components/spinner.ex
+++ b/lib/atomic_web/components/spinner.ex
@@ -9,7 +9,7 @@ defmodule AtomicWeb.Components.Spinner do
 
   attr :show, :boolean, default: true, doc: "Show or hide spinner."
 
-  attr :size_class, :string, default: nil, doc: "Custom CSS classes for size. eg: h-4 w-4"
+  attr :size_class, :string, default: nil, doc: "Custom CSS classes for size. eg: size-4"
 
   attr :class, :string, default: "", doc: "Additional classes to apply to the component."
 
diff --git a/lib/atomic_web/components/table.ex b/lib/atomic_web/components/table.ex
index f822ebae3..e3e23b60b 100644
--- a/lib/atomic_web/components/table.ex
+++ b/lib/atomic_web/components/table.ex
@@ -85,9 +85,9 @@ defmodule AtomicWeb.Components.Table do
   defp filter_input(assigns) do
     ~H"""
     <div x-data="{ open: false }">
-      <span @click="open = ! open" class="flex h-5 w-5 cursor-pointer justify-center self-center rounded p-1 hover:bg-zinc-200">
+      <span @click="open = ! open" class="size-5 flex cursor-pointer justify-center self-center rounded p-1 hover:bg-zinc-200">
         <span class="self-center">
-          <.icon name={:magnifying_glass} solid class="align-center h-4 w-4" />
+          <.icon name="hero-magnifying-glass-solid" class="align-center size-4" />
         </span>
       </span>
       <div x-show="open" class="absolute -translate-x-3/4 p-2">
@@ -123,17 +123,17 @@ defmodule AtomicWeb.Components.Table do
     ~H"""
     <%= if @direction in [:asc, :asc_nulls_first, :asc_nulls_last] do %>
       <span class="self-center">
-        <.icon name={:chevron_up} class="h-3 w-3" />
+        <.icon name="hero-chevron-up" class="size-3" />
       </span>
     <% end %>
     <%= if @direction in [:desc, :desc_nulls_first, :desc_nulls_last] do %>
       <span class="self-center">
-        <.icon name={:chevron_down} class="h-3 w-3" />
+        <.icon name="hero-chevron-down" class="size-3" />
       </span>
     <% end %>
     <%= if is_nil(@direction) do %>
       <span class="self-center">
-        <.icon name={:chevron_up_down} class="h-3 w-3" />
+        <.icon name="hero-chevron-up-down" class="size-3" />
       </span>
     <% end %>
     """
diff --git a/lib/atomic_web/config.ex b/lib/atomic_web/config.ex
index 46cfbe6d9..4b2f3dc34 100644
--- a/lib/atomic_web/config.ex
+++ b/lib/atomic_web/config.ex
@@ -25,7 +25,7 @@ defmodule AtomicWeb.Config do
         %{
           key: :scanner,
           title: "Scanner",
-          icon: :qr_code,
+          icon: "hero-qr-code",
           url: Routes.scanner_index_path(conn, :index),
           tabs: []
         }
@@ -38,21 +38,21 @@ defmodule AtomicWeb.Config do
         %{
           key: :departments,
           title: "Departments",
-          icon: :cube,
+          icon: "hero-cube",
           url: Routes.department_index_path(conn, :index, current_organization.id),
           tabs: []
         },
         %{
           key: :partners,
           title: "Partners",
-          icon: :user_group,
+          icon: "hero-user-group",
           url: Routes.partner_index_path(conn, :index, current_organization.id),
           tabs: []
         },
         %{
           key: :scanner,
           title: "Scanner",
-          icon: :qr_code,
+          icon: "hero-qr-code",
           url: Routes.scanner_index_path(conn, :index),
           tabs: []
         }
@@ -64,35 +64,35 @@ defmodule AtomicWeb.Config do
       %{
         key: :home,
         title: "Home",
-        icon: :home,
+        icon: "hero-home",
         url: Routes.home_index_path(conn, :index),
         tabs: []
       },
       %{
         key: :calendar,
         title: "Calendar",
-        icon: :calendar,
+        icon: "hero-calendar",
         url: Routes.calendar_show_path(conn, :show),
         tabs: []
       },
       %{
         key: :activities,
         title: "Activities",
-        icon: :academic_cap,
+        icon: "hero-academic-cap",
         url: Routes.activity_index_path(conn, :index),
         tabs: []
       },
       %{
         key: :announcements,
         title: "Announcements",
-        icon: :newspaper,
+        icon: "hero-newspaper",
         url: Routes.announcement_index_path(conn, :index),
         tabs: []
       },
       %{
         key: :organizations,
         title: "Organizations",
-        icon: :building_office,
+        icon: "hero-building-office",
         url: Routes.organization_index_path(conn, :index),
         tabs: []
       }
diff --git a/lib/atomic_web/gettext.ex b/lib/atomic_web/gettext.ex
index 492ca3a55..c2d639349 100644
--- a/lib/atomic_web/gettext.ex
+++ b/lib/atomic_web/gettext.ex
@@ -20,5 +20,5 @@ defmodule AtomicWeb.Gettext do
 
   See the [Gettext Docs](https://hexdocs.pm/gettext) for detailed usage.
   """
-  use Gettext, otp_app: :atomic
+  use Gettext.Backend, otp_app: :atomic
 end
diff --git a/lib/atomic_web/live/activity_live/index.html.heex b/lib/atomic_web/live/activity_live/index.html.heex
index 174c4f853..d99d7663e 100644
--- a/lib/atomic_web/live/activity_live/index.html.heex
+++ b/lib/atomic_web/live/activity_live/index.html.heex
@@ -50,18 +50,18 @@
                 <div class="mt-2 lg:flex lg:justify-between">
                   <div class="lg:flex lg:space-x-3">
                     <p class="mt-2 flex items-center text-sm text-zinc-500 lg:mt-0">
-                      <.icon name={:users} solid class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" />
+                      <.icon name="hero-users-solid" class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" />
                       <%= Enum.count(activity.enrollments) %> / <%= activity.maximum_entries %>
                     </p>
                     <p class="mt-2 flex items-center text-sm text-zinc-500 lg:mt-0">
-                      <.icon name={:calendar} solid class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" />
+                      <.icon name="hero-calendar-solid" class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" />
                       <%= if activity.start do %>
                         <%= display_date(activity.start) %>
                       <% end %>
                     </p>
                     <%= if activity.location do %>
                       <p class="mt-2 flex items-center text-sm text-zinc-500 lg:mt-0">
-                        <.icon name={:map_pin} solid class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" />
+                        <.icon name="hero-map-pin-solid" class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" />
                         <%= activity.location && activity.location.name %>
                       </p>
                     <% end %>
@@ -70,11 +70,11 @@
                 <div class="flex flex-col-reverse lg:flex-row-reverse lg:items-center lg:justify-between">
                   <%= if Activities.verify_maximum_enrollments?(activity.id) do %>
                     <div class="mt-2 flex items-center text-sm text-zinc-500 lg:mt-0">
-                      <.icon name={:bell} solid class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" /> Open
+                      <.icon name="hero-bell-solid" class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" /> Open
                     </div>
                   <% else %>
                     <div class="mt-2 flex items-center text-sm text-zinc-500 lg:mt-0">
-                      <.icon name={:bell} solid class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" /> Closed
+                      <.icon name="hero-bell-solid" class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" /> Closed
                     </div>
                   <% end %>
                 </div>
diff --git a/lib/atomic_web/live/activity_live/show.html.heex b/lib/atomic_web/live/activity_live/show.html.heex
index e99933c41..7863c02c6 100644
--- a/lib/atomic_web/live/activity_live/show.html.heex
+++ b/lib/atomic_web/live/activity_live/show.html.heex
@@ -34,7 +34,7 @@
             </dt>
             <dd class="mt-1 flex text-sm text-zinc-900">
               <div class="flex w-full">
-                <.icon name={:users} solid class="h-5 w-5 text-zinc-400" />
+                <.icon name="hero-users-solid" class="size-5 text-zinc-400" />
                 <div class="pl-2.5">
                   <%= @enrolled %> / <%= @activity.maximum_entries %>
                 </div>
@@ -52,21 +52,21 @@
               <div class="flex flex-col gap-x-2 gap-y-2 md:flex-row">
                 <div class="flex gap-x-2">
                   <div class="text-zinc-900x inset-y-0 my-auto flex w-full gap-y-4 text-sm">
-                    <.icon name={:calendar} solid class="h-5 w-5 text-zinc-400" />
+                    <.icon name="hero-calendar-solid" class="size-5 text-zinc-400" />
                     <p class="block pl-1.5 max-w-6xl">
                       <%= display_date(@activity.start) %>
                     </p>
                   </div>
                 </div>
                 <div class="inset-y-0 my-auto flex md:pl-3">
-                  <.icon name={:clock} solid class="h-5 w-5 text-zinc-400" />
+                  <.icon name="hero-clock-solid" class="size-5 text-zinc-400" />
                   <p class="block pl-1.5 max-w-6xl">
                     <%= display_time(@activity.start) %> - <%= display_time(@activity.finish) %>
                   </p>
                 </div>
                 <div class="flex text-sm md:pl-3">
                   <%= if @activity.location do %>
-                    <.icon name={:map_pin} solid class="h-5 w-5 text-zinc-400" />
+                    <.icon name="hero-map-pin-solid" class="size-5 text-zinc-400" />
                     <.link navigate={@activity.location.url} data-confirm={gettext("Are you sure?")} class="pl-1.5 text-blue-500">
                       <%= @activity.location.name %>
                     </.link>
@@ -139,12 +139,12 @@
   <%= if @has_permissions? do %>
     <.link patch={Routes.activity_edit_path(@socket, :edit, @activity.organization_id, @activity)} class="button">
       <div type="button" class="inline-flex justify-center py-2 px-4 w-fit text-sm font-medium text-zinc-700 bg-white rounded-md border border-zinc-300 shadow-sm hover:bg-zinc-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
-        <.icon name={:pencil} solid class="mr-3 w-5 h-5 text-zinc-400" /> Edit
+        <.icon name="hero-pencil-solid" class="mr-3 w-5 h-5 text-zinc-400" /> Edit
       </div>
     </.link>
     <%= link to: "#", phx_click: "delete", phx_value_id: @activity.id, data: [confirm: "Are you sure?"] do %>
       <div type="button" class="inline-flex justify-center py-2 px-4 w-fit text-sm font-medium text-zinc-700 bg-white rounded-md border border-zinc-300 shadow-sm hover:bg-zinc-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
-        <.icon name={:trash} solid class="mr-3 w-5 h-5 text-zinc-400" /> Delete
+        <.icon name="hero-trash-solid" class="mr-3 w-5 h-5 text-zinc-400" /> Delete
       </div>
     <% end %>
   <% end %>
diff --git a/lib/atomic_web/live/announcement_live/edit.html.heex b/lib/atomic_web/live/announcement_live/edit.html.heex
index 7026edde4..190892171 100644
--- a/lib/atomic_web/live/announcement_live/edit.html.heex
+++ b/lib/atomic_web/live/announcement_live/edit.html.heex
@@ -1,6 +1,6 @@
 <.page title={gettext("Edit Announcement")}>
   <:actions>
-    <.button size={:md} icon={:trash} color={:white} type="delete" phx-click="delete">
+    <.button size={:md} icon="hero-trash" color={:white} type="delete" phx-click="delete">
       <%= gettext("Delete") %>
     </.button>
   </:actions>
diff --git a/lib/atomic_web/live/announcement_live/form_component.html.heex b/lib/atomic_web/live/announcement_live/form_component.html.heex
index 731989009..8f06c9546 100644
--- a/lib/atomic_web/live/announcement_live/form_component.html.heex
+++ b/lib/atomic_web/live/announcement_live/form_component.html.heex
@@ -5,7 +5,7 @@
     <.field field={f[:description]} help_text={gettext("Announcement description")} type="text" placeholder="Description" required />
 
     <div class="mt-8 flex w-full justify-end">
-      <.button size={:md} color={:white} icon={:cube} type="submit"><%= gettext("Save Changes") %></.button>
+      <.button size={:md} color={:white} icon="hero-cube" type="submit"><%= gettext("Save Changes") %></.button>
     </div>
   </.form>
 </div>
diff --git a/lib/atomic_web/live/announcement_live/show.html.heex b/lib/atomic_web/live/announcement_live/show.html.heex
index 4a0c03b56..e48df2ecb 100644
--- a/lib/atomic_web/live/announcement_live/show.html.heex
+++ b/lib/atomic_web/live/announcement_live/show.html.heex
@@ -16,7 +16,7 @@
 <%= if @has_permissions? do %>
   <.link patch={Routes.announcement_edit_path(@socket, :edit, @announcement.organization, @announcement)} class="px-2 button">
     <div type="button" class="inline-flex justify-center py-2 px-4 w-fit text-sm font-medium text-zinc-700 bg-white rounded-md border border-zinc-300 shadow-sm hover:bg-zinc-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
-      <.icon name={:pencil} solid class="mr-3 w-5 h-5 text-zinc-400" /> Edit
+      <.icon name="hero-pencil-solid" class="mr-3 w-5 h-5 text-zinc-400" /> Edit
     </div>
   </.link>
 <% end %>
diff --git a/lib/atomic_web/live/collaborator_live/form_component.ex b/lib/atomic_web/live/collaborator_live/form_component.ex
index 09082e9a9..2232c865f 100644
--- a/lib/atomic_web/live/collaborator_live/form_component.ex
+++ b/lib/atomic_web/live/collaborator_live/form_component.ex
@@ -38,17 +38,17 @@ defmodule AtomicWeb.CollaboratorLive.FormComponent do
       </div>
       <%= if !@collaborator.accepted do %>
         <div class="my-4 flex w-full select-none flex-row justify-center gap-2" aria-label={"#{display_date(@collaborator.inserted_at)} #{display_time(@collaborator.inserted_at)}"}>
-          <.icon class="my-auto h-5 w-5" name={:calendar} />
+          <.icon class="size-5 my-auto" name="hero-calendar" />
           <p><%= gettext("Requested %{requested_at}", requested_at: relative_datetime(@collaborator.inserted_at)) %></p>
         </div>
       <% end %>
       <!-- Action Buttons -->
       <div class="mt-8 flex space-x-2">
         <%= if @collaborator.accepted do %>
-          <.button phx-click="delete" phx-target={@myself} size={:lg} icon={:x_circle} color={:white} full_width><%= gettext("Delete") %></.button>
+          <.button phx-click="delete" phx-target={@myself} size={:lg} icon="hero-x-circle" color={:white} full_width><%= gettext("Delete") %></.button>
         <% else %>
-          <.button phx-click="deny" phx-target={@myself} size={:lg} icon={:x_circle} color={:white} full_width><%= gettext("Deny") %></.button>
-          <.button phx-click="allow" phx-target={@myself} size={:lg} icon={:check_circle} color={:white} full_width><%= gettext("Accept") %></.button>
+          <.button phx-click="deny" phx-target={@myself} size={:lg} icon="hero-x-circle" color={:white} full_width><%= gettext("Deny") %></.button>
+          <.button phx-click="allow" phx-target={@myself} size={:lg} icon="hero-check-circle" color={:white} full_width><%= gettext("Accept") %></.button>
         <% end %>
       </div>
       <!-- Action Confirm Modal -->
@@ -61,13 +61,13 @@ defmodule AtomicWeb.CollaboratorLive.FormComponent do
             <%= display_action_goal_confirm_description(@action_modal, @department) %>
           </p>
           <div class="mt-8 flex flex-row">
-            <.button phx-click="clear-action" class="mr-2" phx-target={@myself} size={:lg} icon={:x_circle} color={:white} full_width><%= gettext("Cancel") %></.button>
+            <.button phx-click="clear-action" class="mr-2" phx-target={@myself} size={:lg} icon="hero-x-circle" color={:white} full_width><%= gettext("Cancel") %></.button>
             <.button
               phx-click="confirm"
               class="ml-2"
               phx-target={@myself}
               size={:lg}
-              icon={:check_circle}
+              icon="hero-check-circle"
               color={
                 if @action_modal in [:delete_collaborator, :deny_request] do
                   :danger
diff --git a/lib/atomic_web/live/department_live/edit.html.heex b/lib/atomic_web/live/department_live/edit.html.heex
index 383119840..878fc3d73 100644
--- a/lib/atomic_web/live/department_live/edit.html.heex
+++ b/lib/atomic_web/live/department_live/edit.html.heex
@@ -9,17 +9,17 @@
     <%= if @live_action in [:edit] do %>
       <div class="flex space-x-4">
         <%= if !@department.archived do %>
-          <.button color={:white} icon={:archive_box} phx-click="set-action" phx-value-action={:archive}>
+          <.button color={:white} icon="hero-archive-box" phx-click="set-action" phx-value-action={:archive}>
             <%= gettext("Archive") %>
           </.button>
-          <.button color={:white} icon={:trash} disabled title={gettext("You can only delete a department after it has been archived.")}>
+          <.button color={:white} icon="hero-trash" disabled title={gettext("You can only delete a department after it has been archived.")}>
             <%= gettext("Delete") %>
           </.button>
         <% else %>
-          <.button color={:white} icon={:archive_box_x_mark} phx-click="set-action" phx-value-action={:unarchive}>
+          <.button color={:white} icon="hero-archive-box-x-mark" phx-click="set-action" phx-value-action={:unarchive}>
             <%= gettext("Unarchive") %>
           </.button>
-          <.button color={:white} icon={:trash} phx-click="set-action" phx-value-action={:delete}>
+          <.button color={:white} icon="hero-trash" phx-click="set-action" phx-value-action={:delete}>
             <%= gettext("Delete") %>
           </.button>
         <% end %>
@@ -53,12 +53,12 @@
       <%= display_action_goal_confirm_description(@action, @department) %>
     </p>
     <div class="mt-8 flex flex-row">
-      <.button phx-click="clear-action" class="mr-2" size={:lg} icon={:x_circle} color={:white} full_width><%= gettext("Cancel") %></.button>
+      <.button phx-click="clear-action" class="mr-2" size={:lg} icon="hero-x-circle" color={:white} full_width><%= gettext("Cancel") %></.button>
       <.button
         phx-click="confirm-action"
         class="mr-2"
         size={:lg}
-        icon={:check_circle}
+        icon="hero-check-circle"
         color={
           if @action == :delete do
             :danger
diff --git a/lib/atomic_web/live/department_live/form_component.ex b/lib/atomic_web/live/department_live/form_component.ex
index d23b6160b..d9b9216a0 100644
--- a/lib/atomic_web/live/department_live/form_component.ex
+++ b/lib/atomic_web/live/department_live/form_component.ex
@@ -29,7 +29,7 @@ defmodule AtomicWeb.DepartmentLive.FormComponent do
         </div>
 
         <div class="mt-8 flex w-full justify-end">
-          <.button size={:md} color={:white} icon={:cube} type="submit"><%= gettext("Save Changes") %></.button>
+          <.button size={:md} color={:white} icon="hero-cube" type="submit"><%= gettext("Save Changes") %></.button>
         </div>
       </.form>
     </div>
diff --git a/lib/atomic_web/live/department_live/index.html.heex b/lib/atomic_web/live/department_live/index.html.heex
index 30c532038..7fec888bf 100644
--- a/lib/atomic_web/live/department_live/index.html.heex
+++ b/lib/atomic_web/live/department_live/index.html.heex
@@ -1,7 +1,7 @@
 <.page title="Departments">
   <:actions>
     <%= if not @empty? and @has_permissions? do %>
-      <.button patch={Routes.department_edit_path(@socket, :new, @current_organization)} icon={:plus}>
+      <.button patch={Routes.department_edit_path(@socket, :new, @current_organization)} icon="hero-plus">
         <%= gettext("New") %>
       </.button>
     <% end %>
diff --git a/lib/atomic_web/live/department_live/show.html.heex b/lib/atomic_web/live/department_live/show.html.heex
index 2807cd7a1..70e19ab49 100644
--- a/lib/atomic_web/live/department_live/show.html.heex
+++ b/lib/atomic_web/live/department_live/show.html.heex
@@ -39,14 +39,13 @@
                           end}"
                         }
                       color={:white}
-                      icon={:user_plus}
-                      icon_variant={:solid}
+                      icon="hero-user-plus-solid"
                       title={gettext("Collaborate")}
                     />
                   <% end %>
                 <% else %>
                   <%= if ! @current_collaborator.accepted do %>
-                    <.button color={:white} icon={:user_plus} icon_variant={:solid} aria-label={gettext("You have requested to collaborate with this department. Please wait for the department owner to accept your request.")} disabled />
+                    <.button color={:white} icon="hero-user-plus-solid" aria-label={gettext("You have requested to collaborate with this department. Please wait for the department owner to accept your request.")} disabled />
                   <% end %>
                 <% end %>
                 <.dropdown
@@ -63,18 +62,18 @@
                             @department.id,
                             tab: "collaborators"
                           ),
-                        icon: :user_group
+                        icon: "hero-user-group"
                       }
                     ] ++
                       if @has_permissions? || (@current_collaborator && @current_collaborator.accepted) do
-                        [%{name: gettext("Edit"), navigate: Routes.department_edit_path(@socket, :edit, @organization, @department, @params), icon: :pencil}]
+                        [%{name: gettext("Edit"), navigate: Routes.department_edit_path(@socket, :edit, @organization, @department, @params), icon: "hero-pencil"}]
                       else
                         []
                       end
                   }
                 >
                   <:wrapper>
-                    <.button icon_variant={:solid} color={:white} icon={:ellipsis_horizontal} />
+                    <.button color={:white} icon="hero-ellipsis-horizontal-solid" />
                   </:wrapper>
                 </.dropdown>
               <% end %>
@@ -94,15 +93,14 @@
                           end}"
                         }
                       color={:white}
-                      icon={:user_plus}
-                      icon_variant={:solid}
+                      icon="hero-user-plus-solid"
                     >
                       <%= gettext("Collaborate") %>
                     </.button>
                   <% end %>
                 <% else %>
                   <%= if ! @current_collaborator.accepted do %>
-                    <.button color={:white} icon={:user_plus} icon_variant={:solid} aria-label={gettext("You have requested to collaborate with this department. Please wait for the department owner to accept your request.")} disabled>
+                    <.button color={:white} icon="hero-user-plus-solid" aria-label={gettext("You have requested to collaborate with this department. Please wait for the department owner to accept your request.")} disabled>
                       <%= gettext("Collaborate") %>
                     </.button>
                   <% end %>
@@ -110,8 +108,7 @@
                 <%= if @has_permissions? || (@current_collaborator && @current_collaborator.accepted) do %>
                   <!-- Collaborators view -->
                   <.button
-                    icon={:user_group}
-                    icon_variant={:solid}
+                    icon="hero-user-group-solid"
                     color={:white}
                     patch={
                       Routes.department_show_path(
@@ -126,13 +123,12 @@
                 <% end %>
                 <!-- Edit department -->
                 <%= if @has_permissions? do %>
-                  <.button icon={:pencil} icon_variant={:solid} color={:white} patch={Routes.department_edit_path(@socket, :edit, @organization, @department, @params)} />
+                  <.button icon="hero-pencil-solid" color={:white} patch={Routes.department_edit_path(@socket, :edit, @organization, @department, @params)} />
                 <% end %>
               <% else %>
                 <!-- Exit collaborators view -->
                 <.button
-                  icon={:arrow_left}
-                  icon_variant={:solid}
+                  icon="hero-arrow-left-solid"
                   color={:white}
                   patch={
                     Routes.department_show_path(
@@ -185,7 +181,7 @@
                 />
                 <!-- People empty state -->
                 <%= if length(@all_collaborators) == 0 do %>
-                  <.icon class="mx-32 text-gray-900" name={:users} />
+                  <.icon class="mx-32 text-gray-900" name="hero-users" />
                   <p class="mb-4 select-none text-center text-gray-900"><%= gettext("This department doesn't have any collaborators yet!") %></p>
                 <% end %>
               </div>
@@ -223,9 +219,9 @@
                     </:col>
                     <:col :let={collaborator}>
                       <%= if collaborator.accepted do %>
-                        <.button icon={:pencil} icon_variant={:solid} color={:white} full_width patch={Routes.department_show_path(@socket, :edit_collaborator, @organization, @department, collaborator, @params)}>Edit</.button>
+                        <.button icon="hero-pencil-solid" color={:white} full_width patch={Routes.department_show_path(@socket, :edit_collaborator, @organization, @department, collaborator, @params)}>Edit</.button>
                       <% else %>
-                        <.button icon={:envelope} icon_variant={:solid} color={:white} full_width patch={Routes.department_show_path(@socket, :edit_collaborator, @organization, @department, collaborator, @params)}>Review</.button>
+                        <.button icon="hero-envelope-solid" color={:white} full_width patch={Routes.department_show_path(@socket, :edit_collaborator, @organization, @department, collaborator, @params)}>Review</.button>
                       <% end %>
                     </:col>
                   </.table>
diff --git a/lib/atomic_web/live/home_live/components/follow_suggestions/suggestion.ex b/lib/atomic_web/live/home_live/components/follow_suggestions/suggestion.ex
index b29697dc2..569489e22 100644
--- a/lib/atomic_web/live/home_live/components/follow_suggestions/suggestion.ex
+++ b/lib/atomic_web/live/home_live/components/follow_suggestions/suggestion.ex
@@ -39,14 +39,14 @@ defmodule AtomicWeb.HomeLive.Components.FollowSuggestions.Suggestion do
       <div class="flex-shrink-0">
         <%= if @is_following do %>
           <button type="button" phx-value-organization_id={@organization.id} phx-click="unfollow" phx-target={@myself} class="z-100 inline-flex items-center gap-x-1.5 text-sm font-semibold leading-6 text-gray-900">
-            <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <svg class="size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
               <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
             </svg>
             <span>Unfollow</span>
           </button>
         <% else %>
           <button type="button" phx-value-organization_id={@organization.id} phx-click="follow" phx-target={@myself} class="z-100 inline-flex items-center gap-x-1.5 text-sm font-semibold leading-6 text-gray-900">
-            <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <svg class="size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
               <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
             </svg>
             <span>Follow</span>
diff --git a/lib/atomic_web/live/home_live/components/schedule.ex b/lib/atomic_web/live/home_live/components/schedule.ex
index 7cac3ecdb..43e7a0bc5 100644
--- a/lib/atomic_web/live/home_live/components/schedule.ex
+++ b/lib/atomic_web/live/home_live/components/schedule.ex
@@ -20,7 +20,7 @@ defmodule AtomicWeb.HomeLive.Components.Schedule do
                     <%= entry.title %>
                   </p>
                   <div class="w-[110px] flex h-6 items-center justify-center space-x-1 rounded-md bg-orange-100 text-orange-500 opacity-70">
-                    <.icon name={:clock} solid class="h-4 w-4" />
+                    <.icon name="hero-clock-solid" class="size-4" />
                     <p class="text-xs font-semibold">
                       <%= display_time(entry.start) %> - <%= display_time(entry.finish) %>
                     </p>
@@ -47,7 +47,7 @@ defmodule AtomicWeb.HomeLive.Components.Schedule do
                     <%= entry.title %>
                   </p>
                   <div class="w-[110px] flex h-6 items-center justify-center space-x-1 rounded-md bg-orange-100 text-orange-500 opacity-70">
-                    <.icon name={:clock} solid class="h-4 w-4" />
+                    <.icon name="hero-clock-solid" class="size-4" />
                     <p class="text-xs font-semibold">
                       <%= pretty_display_date(entry.start) %>
                     </p>
diff --git a/lib/atomic_web/live/organization_live/show.html.heex b/lib/atomic_web/live/organization_live/show.html.heex
index 44e8a5c73..f56835293 100644
--- a/lib/atomic_web/live/organization_live/show.html.heex
+++ b/lib/atomic_web/live/organization_live/show.html.heex
@@ -42,7 +42,7 @@
                                 aria-labelledby="listbox-label"
                               >
                                 <span class="sr-only">Change published status</span>
-                                <svg class="h-5 w-5 text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                <svg class="size-5 text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                   <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
                                 </svg>
                               </button>
@@ -73,12 +73,12 @@
                     <%= if @has_permissions? do %>
                       <.link patch={Routes.organization_edit_path(@socket, :edit, @organization)} class="button">
                         <div type="button" class="inline-flex justify-center py-2 px-4 w-fit text-sm font-medium text-gray-700 bg-white rounded-md border border-gray-300 shadow-sm hover:bg-gray-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
-                          <.icon name={:pencil} solid class="mr-3 w-5 h-5 text-gray-400" /> Edit
+                          <.icon name="hero-pencil-solid" class="mr-3 w-5 h-5 text-gray-400" /> Edit
                         </div>
                       </.link>
                       <%= link to: "#", phx_click: "delete", phx_value_id: @organization.id, data: [confirm: "Are you sure?"] do %>
                         <div type="button" class="inline-flex justify-center py-2 px-4 w-fit text-sm font-medium text-gray-700 bg-white rounded-md border border-gray-300 shadow-sm hover:bg-gray-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
-                          <.icon name={:trash} solid class="mr-3 w-5 h-5 text-gray-400" /> Delete
+                          <.icon name="hero-trash-solid" class="mr-3 w-5 h-5 text-gray-400" /> Delete
                         </div>
                       <% end %>
                     <% end %>
diff --git a/lib/atomic_web/live/partner_live/edit.html.heex b/lib/atomic_web/live/partner_live/edit.html.heex
index 0f8a76911..fc63e6ad5 100644
--- a/lib/atomic_web/live/partner_live/edit.html.heex
+++ b/lib/atomic_web/live/partner_live/edit.html.heex
@@ -9,17 +9,17 @@
     <%= if @live_action in [:edit] do %>
       <div class="flex space-x-4">
         <%= if !@partner.archived do %>
-          <.button color={:white} icon={:archive_box} phx-click="set-action" phx-value-action={:archive}>
+          <.button color={:white} icon="hero-archive-box" phx-click="set-action" phx-value-action={:archive}>
             <%= gettext("Archive") %>
           </.button>
-          <.button color={:white} icon={:trash} disabled title={gettext("You can only delete a department after it has been archived.")}>
+          <.button color={:white} icon="hero-trash" disabled title={gettext("You can only delete a department after it has been archived.")}>
             <%= gettext("Delete") %>
           </.button>
         <% else %>
-          <.button color={:white} icon={:archive_box_x_mark} phx-click="set-action" phx-value-action={:unarchive}>
+          <.button color={:white} icon="hero-archive-box-x-mark" phx-click="set-action" phx-value-action={:unarchive}>
             <%= gettext("Unarchive") %>
           </.button>
-          <.button color={:white} icon={:trash} phx-click="set-action" phx-value-action={:delete}>
+          <.button color={:white} icon="hero-trash" phx-click="set-action" phx-value-action={:delete}>
             <%= gettext("Delete") %>
           </.button>
         <% end %>
@@ -40,12 +40,12 @@
       <%= display_action_goal_confirm_description(@action, @partner) %>
     </p>
     <div class="mt-8 flex flex-row">
-      <.button phx-click="clear-action" class="mr-2" size={:lg} icon={:x_circle} color={:white} full_width><%= gettext("Cancel") %></.button>
+      <.button phx-click="clear-action" class="mr-2" size={:lg} icon="hero-x-circle" color={:white} full_width><%= gettext("Cancel") %></.button>
       <.button
         phx-click="confirm-action"
         class="mr-2"
         size={:lg}
-        icon={:check_circle}
+        icon="hero-check-circle"
         color={
           if @action == :delete do
             :danger
diff --git a/lib/atomic_web/live/partner_live/form_component.ex b/lib/atomic_web/live/partner_live/form_component.ex
index 1e9402213..bd6ec775f 100644
--- a/lib/atomic_web/live/partner_live/form_component.ex
+++ b/lib/atomic_web/live/partner_live/form_component.ex
@@ -45,7 +45,7 @@ defmodule AtomicWeb.PartnerLive.FormComponent do
           <.field type="textarea" field={f[:notes]} placeholder="Notes" />
         </div>
         <div class="mt-8 flex w-full justify-end">
-          <.button size={:md} color={:white} icon={:cube}>Save Changes</.button>
+          <.button size={:md} color={:white} icon="hero-cube">Save Changes</.button>
         </div>
       </.form>
     </div>
diff --git a/lib/atomic_web/live/partner_live/index.html.heex b/lib/atomic_web/live/partner_live/index.html.heex
index 73d31306b..4e7b7e895 100644
--- a/lib/atomic_web/live/partner_live/index.html.heex
+++ b/lib/atomic_web/live/partner_live/index.html.heex
@@ -1,7 +1,7 @@
 <.page title="Partners">
   <:actions>
     <%= if not @empty? and @has_permissions? do %>
-      <.button navigate={Routes.partner_edit_path(@socket, :new, @current_organization)} icon={:plus}>
+      <.button navigate={Routes.partner_edit_path(@socket, :new, @current_organization)} icon="hero-plus">
         New Partner
       </.button>
     <% end %>
@@ -45,7 +45,7 @@
                 <p class="text-md font-semibold leading-6 text-zinc-900"><%= partner.name %></p>
                 <%= if partner.location do %>
                   <div class="flex flex-row items-center gap-x-1 text-sm leading-6 z-1">
-                    <.icon name={:map_pin} class="h-5 w-5 text-zinc-400" />
+                    <.icon name="hero-map-pin" class="size-5 text-zinc-400" />
                     <p class="text-blue-500"><%= partner.location.name %></p>
                   </div>
                 <% end %>
diff --git a/lib/atomic_web/live/partner_live/show.html.heex b/lib/atomic_web/live/partner_live/show.html.heex
index 1f3815899..b585f556e 100644
--- a/lib/atomic_web/live/partner_live/show.html.heex
+++ b/lib/atomic_web/live/partner_live/show.html.heex
@@ -2,7 +2,7 @@
   <:actions>
     <%= if @has_permissions? do %>
       <div class="lg:border-orange-500 lg:block">
-        <.button navigate={Routes.partner_edit_path(@socket, :edit, @organization, @partner)} icon={:pencil}>
+        <.button navigate={Routes.partner_edit_path(@socket, :edit, @organization, @partner)} icon="hero-pencil">
           <%= gettext("Edit Partner") %>
         </.button>
       </div>
@@ -22,7 +22,7 @@
           </div>
           <%= if @partner.location do %>
             <div class="flex flex-row items-center gap-x-1 text-md leading-6">
-              <.icon name={:map_pin} class="h-5 w-5 text-zinc-400" />
+              <.icon name="hero-map-pin" class="size-5 text-zinc-400" />
               <.link class="text-blue-500" href={"https://www.google.com/maps/search/?api=1&query=#{@partner.location.name}"}><%= @partner.location.name %></.link>
             </div>
           <% end %>
@@ -30,25 +30,25 @@
             <div class="grid grid-cols-2 grid-rows-3 lg:flex lg:flex-row lg:gap-x-4">
               <%= if @partner.socials.website do %>
                 <div class="flex flex-row items-center gap-x-1 ">
-                  <.icon name={:globe_alt} class="h-5 w-5 text-zinc-400" />
+                  <.icon name="hero-globe-alt" class="size-5 text-zinc-400" />
                   <.link class="text-blue-500" href={@partner.socials.website}>Website</.link>
                 </div>
               <% end %>
               <%= if @partner.socials.instagram do %>
                 <div class="flex flex-row items-center gap-x-1 gap-y-0 sm:gap-y-2">
-                  <img src="/images/instagram.svg" class="h-5 w-5" alt="Instagram" />
+                  <img src="/images/instagram.svg" class="size-5" alt="Instagram" />
                   <.link class="text-blue-500" href={"https://instagram.com/" <> @partner.socials.instagram}>Instagram</.link>
                 </div>
               <% end %>
               <%= if @partner.socials.facebook do %>
                 <div class="flex flex-row items-center gap-x-1 gap-y-0 sm:gap-y-2">
-                  <img src="/images/facebook.svg" class="h-5 w-5" alt="Facebook" />
+                  <img src="/images/facebook.svg" class="size-5" alt="Facebook" />
                   <.link class="text-blue-500" href={"https://facebook.com/" <> @partner.socials.facebook}>Facebook</.link>
                 </div>
               <% end %>
               <%= if @partner.socials.x do %>
                 <div class="flex flex-row items-center gap-x-1 gap-y-0 sm:gap-y-2">
-                  <img src="/images/x.svg" class="h-5 w-5" alt="X" />
+                  <img src="/images/x.svg" class="size-5" alt="X" />
                   <.link class="text-blue-500" href={"https://x.com/" <> @partner.socials.x}>X</.link>
                 </div>
               <% end %>
@@ -59,7 +59,7 @@
       <div>
         <div class="mt-1 text-zinc-800 py-4 px-2">
           <div class="flex flex-row items-center gap-x-2">
-            <.icon name={:clock} class="h-5 w-5 mb-2" />
+            <.icon name="hero-clock" class="size-5 mb-2" />
             <h2 class="mb-2 flex-1 truncate text-lg font-semibold text-gray-900">Overview</h2>
           </div>
           <span class="py-4">
@@ -70,7 +70,7 @@
         </div>
         <div class="text-zinc-800 py-4 px-2">
           <div class="flex flex-row items-center gap-x-2 text-zinc-800">
-            <.icon name={:signal} class="h-5 w-5 mb-2" />
+            <.icon name="hero-signal" class="size-5 mb-2" />
             <h2 class="mb-2 flex-1 truncate text-lg font-semibold text-gray-900">Benefits</h2>
           </div>
           <span>
@@ -86,7 +86,7 @@
         <%= if @partners do %>
           <div class="flex flex-col gap-x-2 text-zinc-800">
             <div class="flex flex-row items-center gap-x-2 px-2">
-              <.icon name={:star} class="h-5 w-5 mb-2" />
+              <.icon name="hero-star" class="size-5 mb-2" />
               <h2 class="mb-2 flex-1 select-none truncate text-lg font-semibold text-gray-900 py-2">Related Partners</h2>
             </div>
             <div class="sm:grid sm:grid-cols-2 sm:gap-px">
@@ -99,7 +99,7 @@
                     </div>
                     <%= if partner.location do %>
                       <div class="flex flex-row items-center gap-x-1">
-                        <.icon name={:map_pin} class="h-5 w-5 text-zinc-400" />
+                        <.icon name="hero-map-pin" class="size-5 text-zinc-400" />
                         <span class="text-blue-500"><%= partner.location.name %></span>
                       </div>
                     <% end %>
diff --git a/lib/atomic_web/live/profile_live/form_component.html.heex b/lib/atomic_web/live/profile_live/form_component.html.heex
index d0f208a26..6e0705012 100644
--- a/lib/atomic_web/live/profile_live/form_component.html.heex
+++ b/lib/atomic_web/live/profile_live/form_component.html.heex
@@ -55,7 +55,7 @@
           end} relative w-40 h-40 ring-2 ring-zinc-300 rounded-full cursor-pointer bg-zinc-400 sm:w-48 group sm:h-48 hover:bg-tertiary"
         }>
           <div class="flex absolute justify-center items-center w-full h-full">
-            <.icon name={:camera} class="mx-auto w-12 h-12 sm:w-20 sm:h-20 text-white group-hover:text-opacity-70" />
+            <.icon name="hero-camera" class="mx-auto w-12 h-12 sm:w-20 sm:h-20 text-white group-hover:text-opacity-70" />
           </div>
         </div>
         <section>
@@ -65,7 +65,7 @@
             <% end %>
             <article class="flex relative items-center w-40 h-40 sm:w-48 sm:h-48 bg-white rounded-full cursor-pointer upload-entry group">
               <div class="flex absolute z-10 justify-center items-center w-full h-full rounded-full">
-                <.icon name={:camera} class="mx-auto w-12 h-12 sm:w-20 sm:h-20 text-white text-opacity-0 rounded-full group-hover:text-opacity-100" />
+                <.icon name="hero-camera" class="mx-auto w-12 h-12 sm:w-20 sm:h-20 text-white text-opacity-0 rounded-full group-hover:text-opacity-100" />
               </div>
               <figure class="flex justify-center items-center w-full h-full rounded-full group-hover:opacity-80">
                 <.live_img_preview entry={entry} class="object-cover object-center rounded-full w-40 h-40 sm:w-48 sm:h-48 border-4 border-white" />
@@ -78,7 +78,7 @@
     <div class="w-full flex flex-row-reverse mt-8">
       <%= submit do %>
         <div class="inline-flex px-6 py-2 text-sm font-medium text-orange-500 bg-white border-2 border-orange-500 rounded-md shadow-sm hover:bg-orange-600 hover:text-white">
-          <.icon name={:archive_box} solid class="mr-2 -ml-1 w-5 h-5" /> Save
+          <.icon name="hero-archive-box-solid" class="mr-2 -ml-1 w-5 h-5" /> Save
         </div>
       <% end %>
     </div>
diff --git a/lib/atomic_web/templates/layout/app.html.heex b/lib/atomic_web/templates/layout/app.html.heex
index f51c0300f..14b4e0d25 100644
--- a/lib/atomic_web/templates/layout/app.html.heex
+++ b/lib/atomic_web/templates/layout/app.html.heex
@@ -6,7 +6,7 @@
         <div class="p-4">
           <div class="flex items-start">
             <div class="flex-shrink-0">
-              <.icon name={:information_circle} solid class="w-6 h-6 text-blue-400" />
+              <.icon name="hero-information-circle-solid" class="w-6 h-6 text-blue-400" />
             </div>
             <div class="flex-1 mt-1 text-sm font-medium text-zinc-900 ml-3 w-0">
               <%= Phoenix.Flash.get(@flash, :info) %>
@@ -24,7 +24,7 @@
         <div class="p-4">
           <div class="flex items-start">
             <div class="flex-shrink-0">
-              <.icon name={:x_circle} solid class="w-6 h-6 text-red-400" />
+              <.icon name="hero-x-circle-solid" class="w-6 h-6 text-red-400" />
             </div>
             <div class="flex-1 mt-1 text-sm font-medium text-zinc-900 ml-3 w-0">
               <%= Phoenix.Flash.get(@flash, :error) %>
diff --git a/lib/atomic_web/templates/user_change_password/edit.html.heex b/lib/atomic_web/templates/user_change_password/edit.html.heex
index 1875039eb..983425f86 100644
--- a/lib/atomic_web/templates/user_change_password/edit.html.heex
+++ b/lib/atomic_web/templates/user_change_password/edit.html.heex
@@ -6,7 +6,7 @@
     <%= if @error_message do %>
       <div class="w-full sm:px-0 px-4 sm:w-96 mx-4 mt-4 ">
         <div class="flex flex-row w-full alert alert-danger text-sm bg-red-100 border-l-4 border-orange-400 text-red-700 px-4 py-4">
-          <.icon name={:exclamation_circle} solid class="w-5 h-5 mr-2 text-red-400" />
+          <.icon name="hero-exclamation-circle-solid" class="w-5 h-5 mr-2 text-red-400" />
           <div>
             <p><%= @error_message %></p>
           </div>
@@ -22,10 +22,10 @@
           <%= label(f, :current_password, "Current password", class: "sr-only") %>
           <%= password_input(f, :current_password, required: true, placeholder: gettext("Current password"), class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:ring-0 sm:text-sm") %>
           <div x-show="hide" x-on:click="hide = false; document.getElementById('update_password_current_password').type = 'text';" class="px-2 w-fit cursor-pointer">
-            <.icon name={:eye} solid class="w-5 h-auto fill-black hover:fill-black" />
+            <.icon name="hero-eye-solid" class="w-5 h-auto fill-black hover:fill-black" />
           </div>
           <div x-show="!hide" x-on:click="hide = true; document.getElementById('update_password_current_password').type = 'password';" class="px-2 w-fit cursor-pointer">
-            <.icon name={:eye_slash} solid class="w-5 h-auto fill-black hover:fill-black" />
+            <.icon name="hero-eye-slash-solid" class="w-5 h-auto fill-black hover:fill-black" />
           </div>
         </div>
         <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :current_password) %></span>
@@ -36,10 +36,10 @@
           <%= label(f, :password, "New password", class: "sr-only") %>
           <%= password_input(f, :password, required: true, placeholder: gettext("New password"), class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:ring-0 sm:text-sm") %>
           <div x-show="hide" x-on:click="hide = false; document.getElementById('update_password_password').type = 'text';" class="px-2 w-fit cursor-pointer">
-            <.icon name={:eye} solid class="w-5 h-auto fill-black hover:fill-black" />
+            <.icon name="hero-eye-solid" class="w-5 h-auto fill-black hover:fill-black" />
           </div>
           <div x-show="!hide" x-on:click="hide = true; document.getElementById('update_password_password').type = 'password';" class="px-2 w-fit cursor-pointer">
-            <.icon name={:eye_slash} solid class="w-5 h-auto fill-black hover:fill-black" />
+            <.icon name="hero-eye-slash-solid" class="w-5 h-auto fill-black hover:fill-black" />
           </div>
         </div>
         <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :password) %></span>
@@ -54,10 +54,10 @@
             class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:ring-0 sm:text-sm"
           ) %>
           <div x-show="hide_confirm" x-on:click="hide_confirm = false; document.getElementById('update_password_password_confirmation').type = 'text';" class="px-2 w-fit cursor-pointer">
-            <.icon name={:eye} solid class="w-5 h-auto fill-black hover:fill-black" />
+            <.icon name="hero-eye-solid" class="w-5 h-auto fill-black hover:fill-black" />
           </div>
           <div x-show="!hide_confirm" x-on:click="hide_confirm = true; document.getElementById('update_password_password_confirmation').type = 'password';" class="px-2 w-fit cursor-pointer">
-            <.icon name={:eye_slash} solid class="w-5 h-auto fill-black hover:fill-black" />
+            <.icon name="hero-eye-slash-solid" class="w-5 h-auto fill-black hover:fill-black" />
           </div>
         </div>
         <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :password_confirmation) %></span>
diff --git a/lib/atomic_web/templates/user_registration/new.html.heex b/lib/atomic_web/templates/user_registration/new.html.heex
index f86626955..1ffbf4d0a 100644
--- a/lib/atomic_web/templates/user_registration/new.html.heex
+++ b/lib/atomic_web/templates/user_registration/new.html.heex
@@ -6,7 +6,7 @@
     <%= if @changeset.action do %>
       <div class="w-full sm:px-0 px-4 sm:w-96 mx-4 mt-4 ">
         <div class="flex flex-row w-full alert alert-danger text-sm bg-red-100 border-l-4 border-orange-400 text-red-700 px-4 py-4">
-          <.icon name={:exclamation_circle} solid class="w-5 h-5 mr-2 text-red-400" />
+          <.icon name="hero-exclamation-circle-solid" class="w-5 h-5 mr-2 text-red-400" />
           <div>
             <p>Oops, something went wrong!</p>
           </div>
@@ -34,10 +34,10 @@
             class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:outline-none focus:ring-0 sm:text-sm"
           ) %>
           <div x-show="hide" x-on:click="hide = false; document.getElementById('user_password').type = 'text';" class="px-2 w-fit cursor-pointer">
-            <.icon name={:eye} solid class="w-5 h-auto fill-black hover:fill-black" />
+            <.icon name="hero-eye-solid" class="w-5 h-auto fill-black hover:fill-black" />
           </div>
           <div x-show="!hide" x-on:click="hide = true; document.getElementById('user_password').type = 'password';" class="px-2 w-fit cursor-pointer">
-            <.icon name={:eye_slash} solid class="w-5 h-auto fill-black hover:fill-black" />
+            <.icon name="hero-eye-slash-solid" class="w-5 h-auto fill-black hover:fill-black" />
           </div>
         </div>
         <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :password) %></span>
@@ -52,10 +52,10 @@
             class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:outline-none focus:ring-0 sm:text-sm"
           ) %>
           <div x-show="hide_confirm" x-on:click="hide_confirm = false; document.getElementById('user_password_confirmation').type = 'text';" class="px-2 w-fit cursor-pointer">
-            <.icon name={:eye} solid class="w-5 h-auto fill-black hover:fill-black" />
+            <.icon name="hero-eye-solid" class="w-5 h-auto fill-black hover:fill-black" />
           </div>
           <div x-show="!hide_confirm" x-on:click="hide_confirm = true; document.getElementById('user_password_confirmation').type = 'password';" class="px-2 w-fit cursor-pointer">
-            <.icon name={:eye_slash} solid class="w-5 h-auto fill-black hover:fill-black" />
+            <.icon name="hero-eye-slash-solid" class="w-5 h-auto fill-black hover:fill-black" />
           </div>
         </div>
         <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :password_confirmation) %></span>
diff --git a/lib/atomic_web/templates/user_reset_password/edit.html.heex b/lib/atomic_web/templates/user_reset_password/edit.html.heex
index cfab89f5f..9b6ddc621 100644
--- a/lib/atomic_web/templates/user_reset_password/edit.html.heex
+++ b/lib/atomic_web/templates/user_reset_password/edit.html.heex
@@ -6,7 +6,7 @@
     <%= if @error_message do %>
       <div class="w-full sm:px-0 px-4 sm:w-96 mx-4 mt-4 ">
         <div class="flex flex-row w-full alert alert-danger text-sm bg-red-100 border-l-4 border-orange-400 text-red-700 px-4 py-4">
-          <.icon name={:exclamation_circle} solid class="w-5 h-5 mr-2 text-red-400" />
+          <.icon name="hero-exclamation_circle-solid" class="w-5 h-5 mr-2 text-red-400" />
           <div>
             <p><%= @error_message %></p>
           </div>
@@ -20,10 +20,10 @@
           <%= label(f, :password, "New password", class: "sr-only") %>
           <%= password_input(f, :password, required: true, placeholder: gettext("New password"), class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:ring-0 sm:text-sm") %>
           <div x-show="hide" x-on:click="hide = false; document.getElementById('user_password').type = 'text';" class="px-2 w-fit cursor-pointer">
-            <.icon name={:eye} solid class="w-5 h-auto fill-black hover:fill-black" />
+            <.icon name="hero-eye-solid" class="w-5 h-auto fill-black hover:fill-black" />
           </div>
           <div x-show="!hide" x-on:click="hide = true; document.getElementById('user_password').type = 'password';" class="px-2 w-fit cursor-pointer">
-            <.icon name={:eye_slash} solid class="w-5 h-auto fill-black hover:fill-black" />
+            <.icon name="hero-eye-slash-solid" class="w-5 h-auto fill-black hover:fill-black" />
           </div>
         </div>
         <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :password) %></span>
@@ -38,10 +38,10 @@
             class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:ring-0 sm:text-sm"
           ) %>
           <div x-show="hide_confirm" x-on:click="hide_confirm = false; document.getElementById('user_password_confirmation').type = 'text';" class="px-2 w-fit cursor-pointer">
-            <.icon name={:eye} solid class="w-5 h-auto fill-black hover:fill-black" />
+            <.icon name="hero-eye-solid" class="w-5 h-auto fill-black hover:fill-black" />
           </div>
           <div x-show="!hide_confirm" x-on:click="hide_confirm = true; document.getElementById('user_password_confirmation').type = 'password';" class="px-2 w-fit cursor-pointer">
-            <.icon name={:eye_slash} solid class="w-5 h-auto fill-black hover:fill-black" />
+            <.icon name="hero-eye-slash-solid" class="w-5 h-auto fill-black hover:fill-black" />
           </div>
         </div>
         <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :password_confirmation) %></span>
diff --git a/lib/atomic_web/templates/user_reset_password/new.html.heex b/lib/atomic_web/templates/user_reset_password/new.html.heex
index 0cecf5d94..47cf1f5e5 100644
--- a/lib/atomic_web/templates/user_reset_password/new.html.heex
+++ b/lib/atomic_web/templates/user_reset_password/new.html.heex
@@ -6,7 +6,7 @@
     <%= if @error_message do %>
       <div class="w-full sm:px-0 px-4 sm:w-96 mx-4 mt-4 ">
         <div class="flex flex-row w-full alert alert-danger text-sm bg-red-100 border-l-4 border-orange-400 text-red-700 px-4 py-4">
-          <.icon name={:exclamation_circle} solid class="w-5 h-5 mr-2 text-red-400" />
+          <.icon name="hero-exclamation-circle-solid" class="w-5 h-5 mr-2 text-red-400" />
           <div>
             <p><%= @error_message %></p>
           </div>
diff --git a/lib/atomic_web/templates/user_session/new.html.heex b/lib/atomic_web/templates/user_session/new.html.heex
index 2d6bb6f58..19c6f5377 100644
--- a/lib/atomic_web/templates/user_session/new.html.heex
+++ b/lib/atomic_web/templates/user_session/new.html.heex
@@ -6,7 +6,7 @@
     <%= if @error_message do %>
       <div class="w-full sm:px-0 px-4 sm:w-96 mx-4 mt-4 ">
         <div class="flex flex-row w-full alert alert-danger text-sm bg-red-100 border-l-4 border-orange-400 text-red-700 px-4 py-4">
-          <.icon name={:exclamation_circle} solid class="w-5 h-5 mr-2 text-red-400" />
+          <.icon name="hero-exclamation-circle-solid" class="w-5 h-5 mr-2 text-red-400" />
           <div>
             <p><%= @error_message %></p>
           </div>
@@ -32,10 +32,10 @@
           class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:ring-0 sm:text-sm"
         ) %>
         <div x-show="hide" x-on:click="hide = false; document.getElementById('user_password').type = 'text';" class="px-2 w-fit cursor-pointer">
-          <.icon name={:eye} solid class="w-5 h-auto fill-zinc-900 hover:fill-black" />
+          <.icon name="hero-eye-solid" class="w-5 h-auto fill-zinc-900 hover:fill-black" />
         </div>
         <div x-show="!hide" x-on:click="hide = true; document.getElementById('user_password').type = 'password';" class="px-2 w-fit cursor-pointer">
-          <.icon name={:eye_slash} solid class="w-5 h-auto fill-zinc-900 hover:fill-black" />
+          <.icon name="hero-eye-slash-solid" class="w-5 h-auto fill-zinc-900 hover:fill-black" />
         </div>
       </div>
     </div>
@@ -43,7 +43,7 @@
     <div class="flex flex-row mx-4 w-full sm:w-96 justify-between">
       <div class="ml-4 sm:ml-0 flex flex-col space-y-2">
         <div class="flex items-center">
-          <%= checkbox(f, :remember_me, class: "h-4 w-4 rounded border-zinc-300 text-orange-500 fill-orange-500 focus:ring-orange-500") %>
+          <%= checkbox(f, :remember_me, class: "size-4 rounded border-zinc-300 text-orange-500 fill-orange-500 focus:ring-orange-500") %>
           <%= label(f, :remember_me, gettext("Remember me"), class: "ml-2 block text-sm text-zinc-900") %>
         </div>
       </div>
diff --git a/lib/atomic_web/templates/user_setup/edit.html.heex b/lib/atomic_web/templates/user_setup/edit.html.heex
index df4dbf5d1..686b451fd 100644
--- a/lib/atomic_web/templates/user_setup/edit.html.heex
+++ b/lib/atomic_web/templates/user_setup/edit.html.heex
@@ -12,7 +12,7 @@
     <%= if @changeset.action do %>
       <div class="w-full sm:px-0 px-4 sm:w-96 mx-4 mt-4 ">
         <div class="flex flex-row w-full alert alert-danger text-sm bg-red-100 border-l-4 border-orange-400 text-red-700 px-4 py-4">
-          <.icon name={:exclamation_circle} solid class="w-5 h-5 mr-2 text-red-400" />
+          <.icon name="hero-exclamation-circle-solid" class="w-5 h-5 mr-2 text-red-400" />
           <div>
             <p>Oops, something went wrong!</p>
           </div>
diff --git a/lib/atomic_web/views/helpers.ex b/lib/atomic_web/views/helpers.ex
index 75bdce693..5fca71f43 100644
--- a/lib/atomic_web/views/helpers.ex
+++ b/lib/atomic_web/views/helpers.ex
@@ -3,8 +3,7 @@ defmodule AtomicWeb.Helpers do
   A module with helper functions to display data in views
   """
   use Phoenix.HTML
-
-  import AtomicWeb.Gettext
+  use Gettext, backend: AtomicWeb.Gettext
 
   alias Timex.Format.DateTime.Formatters.Relative
 
diff --git a/mix.exs b/mix.exs
index 338e8792a..5101de7e2 100644
--- a/mix.exs
+++ b/mix.exs
@@ -62,11 +62,20 @@ defmodule Atomic.MixProject do
       # frontend
       {:tailwind, "~> 0.1", runtime: Mix.env() == :dev},
       {:tailwind_formatter, "~> 0.3.7", only: [:dev, :test], runtime: false},
-      {:heroicons, "~> 0.5.3"},
       {:esbuild, "~> 0.4", runtime: Mix.env() == :dev},
       {:flop_phoenix, "~> 0.20.0"},
       {:phoenix_storybook, "~> 0.5.6"},
 
+      # icons
+      {:heroicons,
+       github: "tailwindlabs/heroicons",
+       tag: "v2.1.5",
+       sparse: "optimized",
+       app: false,
+       compile: false,
+       depth: 1,
+       override: true},
+
       # monitoring
       {:telemetry_metrics, "~> 0.6"},
       {:telemetry_poller, "~> 1.0"},
diff --git a/mix.lock b/mix.lock
index 2d2480764..70db7f132 100644
--- a/mix.lock
+++ b/mix.lock
@@ -14,22 +14,22 @@
   "decimal": {:hex, :decimal, "2.1.1", "5611dca5d4b2c3dd497dec8f68751f1f1a54755e8ed2a966c2633cf885973ad6", [:mix], [], "hexpm", "53cfe5f497ed0e7771ae1a475575603d77425099ba5faef9394932b35020ffcc"},
   "doctest_formatter": {:hex, :doctest_formatter, "0.2.1", "61d5674463ae0bf3249f58ae965c33f24e304662b03e7ebc1d46ceab584b545c", [:mix], [], "hexpm", "b2dad6d81b36800a4fd22888adcfdd97c955d9acf20d57cedc92c638125925a6"},
   "earmark": {:hex, :earmark, "1.4.47", "7e7596b84fe4ebeb8751e14cbaeaf4d7a0237708f2ce43630cfd9065551f94ca", [:mix], [], "hexpm", "3e96bebea2c2d95f3b346a7ff22285bc68a99fbabdad9b655aa9c6be06c698f8"},
-  "ecto": {:hex, :ecto, "3.11.2", "e1d26be989db350a633667c5cda9c3d115ae779b66da567c68c80cfb26a8c9ee", [:mix], [{:decimal, "~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "3c38bca2c6f8d8023f2145326cc8a80100c3ffe4dcbd9842ff867f7fc6156c65"},
-  "ecto_sql": {:hex, :ecto_sql, "3.11.3", "4eb7348ff8101fbc4e6bbc5a4404a24fecbe73a3372d16569526b0cf34ebc195", [:mix], [{:db_connection, "~> 2.4.1 or ~> 2.5", [hex: :db_connection, repo: "hexpm", optional: false]}, {:ecto, "~> 3.11.0", [hex: :ecto, repo: "hexpm", optional: false]}, {:myxql, "~> 0.6", [hex: :myxql, repo: "hexpm", optional: true]}, {:postgrex, "~> 0.16 or ~> 1.0", [hex: :postgrex, repo: "hexpm", optional: true]}, {:tds, "~> 2.1.1 or ~> 2.2", [hex: :tds, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.0 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "e5f36e3d736b99c7fee3e631333b8394ade4bafe9d96d35669fca2d81c2be928"},
+  "ecto": {:hex, :ecto, "3.12.3", "1a9111560731f6c3606924c81c870a68a34c819f6d4f03822f370ea31a582208", [:mix], [{:decimal, "~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "9efd91506ae722f95e48dc49e70d0cb632ede3b7a23896252a60a14ac6d59165"},
+  "ecto_sql": {:hex, :ecto_sql, "3.12.0", "73cea17edfa54bde76ee8561b30d29ea08f630959685006d9c6e7d1e59113b7d", [:mix], [{:db_connection, "~> 2.4.1 or ~> 2.5", [hex: :db_connection, repo: "hexpm", optional: false]}, {:ecto, "~> 3.12", [hex: :ecto, repo: "hexpm", optional: false]}, {:myxql, "~> 0.7", [hex: :myxql, repo: "hexpm", optional: true]}, {:postgrex, "~> 0.19 or ~> 1.0", [hex: :postgrex, repo: "hexpm", optional: true]}, {:tds, "~> 2.1.1 or ~> 2.2", [hex: :tds, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.0 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "dc9e4d206f274f3947e96142a8fdc5f69a2a6a9abb4649ef5c882323b6d512f0"},
   "elixir_make": {:hex, :elixir_make, "0.8.4", "4960a03ce79081dee8fe119d80ad372c4e7badb84c493cc75983f9d3bc8bde0f", [:mix], [{:castore, "~> 0.1 or ~> 1.0", [hex: :castore, repo: "hexpm", optional: true]}, {:certifi, "~> 2.0", [hex: :certifi, repo: "hexpm", optional: true]}], "hexpm", "6e7f1d619b5f61dfabd0a20aa268e575572b542ac31723293a4c1a567d5ef040"},
   "elixlsx": {:hex, :elixlsx, "0.5.1", "3b4129c7059c7bd2ed4e2ff5f6c485410ab125058bee2e9de6e0eb8417176803", [:mix], [], "hexpm", "25d778d43ea1ae86df8dd20170842d324086c0cab40503eb484a3779a6e2254c"},
   "esbuild": {:hex, :esbuild, "0.8.1", "0cbf919f0eccb136d2eeef0df49c4acf55336de864e63594adcea3814f3edf41", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}, {:jason, "~> 1.4", [hex: :jason, repo: "hexpm", optional: false]}], "hexpm", "25fc876a67c13cb0a776e7b5d7974851556baeda2085296c14ab48555ea7560f"},
   "ex_machina": {:hex, :ex_machina, "2.7.0", "b792cc3127fd0680fecdb6299235b4727a4944a09ff0fa904cc639272cd92dc7", [:mix], [{:ecto, "~> 2.2 or ~> 3.0", [hex: :ecto, repo: "hexpm", optional: true]}, {:ecto_sql, "~> 3.0", [hex: :ecto_sql, repo: "hexpm", optional: true]}], "hexpm", "419aa7a39bde11894c87a615c4ecaa52d8f107bbdd81d810465186f783245bf8"},
-  "expo": {:hex, :expo, "1.0.0", "647639267e088717232f4d4451526e7a9de31a3402af7fcbda09b27e9a10395a", [:mix], [], "hexpm", "18d2093d344d97678e8a331ca0391e85d29816f9664a25653fd7e6166827827c"},
+  "expo": {:hex, :expo, "1.1.0", "f7b9ed7fb5745ebe1eeedf3d6f29226c5dd52897ac67c0f8af62a07e661e5c75", [:mix], [], "hexpm", "fbadf93f4700fb44c331362177bdca9eeb8097e8b0ef525c9cc501cb9917c960"},
   "faker": {:hex, :faker, "0.18.0", "943e479319a22ea4e8e39e8e076b81c02827d9302f3d32726c5bf82f430e6e14", [:mix], [], "hexpm", "bfbdd83958d78e2788e99ec9317c4816e651ad05e24cfd1196ce5db5b3e81797"},
-  "file_system": {:hex, :file_system, "1.0.0", "b689cc7dcee665f774de94b5a832e578bd7963c8e637ef940cd44327db7de2cd", [:mix], [], "hexpm", "6752092d66aec5a10e662aefeed8ddb9531d79db0bc145bb8c40325ca1d8536d"},
+  "file_system": {:hex, :file_system, "1.0.1", "79e8ceaddb0416f8b8cd02a0127bdbababe7bf4a23d2a395b983c1f8b3f73edd", [:mix], [], "hexpm", "4414d1f38863ddf9120720cd976fce5bdde8e91d8283353f0e31850fa89feb9e"},
   "floki": {:hex, :floki, "0.36.2", "a7da0193538c93f937714a6704369711998a51a6164a222d710ebd54020aa7a3", [:mix], [], "hexpm", "a8766c0bc92f074e5cb36c4f9961982eda84c5d2b8e979ca67f5c268ec8ed580"},
   "flop": {:hex, :flop, "0.17.2", "9408f71a91350f8904e221a6b82e4429acee5aba5c1abbfd7901d2465b7aa44c", [:mix], [{:ecto, "~> 3.5", [hex: :ecto, repo: "hexpm", optional: false]}], "hexpm", "8bd987e353bffff3687cc7203bfdeb83942d8de6172dc833d651438d477115fc"},
   "flop_phoenix": {:hex, :flop_phoenix, "0.20.0", "acb2d94c79a2184a6c78c542fc552b0a14565a06f4e48479ded9dced398277dc", [:mix], [{:flop, ">= 0.17.1 and < 0.22.0", [hex: :flop, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.6.0 or ~> 1.7.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 3.3.0", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 0.19.0", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}], "hexpm", "b7a328e2aa634278560973bdaac4eebcb326f945a5832c02413730c1cbc4417f"},
   "gen_stage": {:hex, :gen_stage, "1.2.1", "19d8b5e9a5996d813b8245338a28246307fd8b9c99d1237de199d21efc4c76a1", [:mix], [], "hexpm", "83e8be657fa05b992ffa6ac1e3af6d57aa50aace8f691fcf696ff02f8335b001"},
-  "gettext": {:hex, :gettext, "0.25.0", "98a95a862a94e2d55d24520dd79256a15c87ea75b49673a2e2f206e6ebc42e5d", [:mix], [{:expo, "~> 0.5.1 or ~> 1.0", [hex: :expo, repo: "hexpm", optional: false]}], "hexpm", "38e5d754e66af37980a94fb93bb20dcde1d2361f664b0a19f01e87296634051f"},
+  "gettext": {:hex, :gettext, "0.26.1", "38e14ea5dcf962d1fc9f361b63ea07c0ce715a8ef1f9e82d3dfb8e67e0416715", [:mix], [{:expo, "~> 0.5.1 or ~> 1.0", [hex: :expo, repo: "hexpm", optional: false]}], "hexpm", "01ce56f188b9dc28780a52783d6529ad2bc7124f9744e571e1ee4ea88bf08734"},
   "hackney": {:hex, :hackney, "1.20.1", "8d97aec62ddddd757d128bfd1df6c5861093419f8f7a4223823537bad5d064e2", [:rebar3], [{:certifi, "~> 2.12.0", [hex: :certifi, repo: "hexpm", optional: false]}, {:idna, "~> 6.1.0", [hex: :idna, repo: "hexpm", optional: false]}, {:metrics, "~> 1.0.0", [hex: :metrics, repo: "hexpm", optional: false]}, {:mimerl, "~> 1.1", [hex: :mimerl, repo: "hexpm", optional: false]}, {:parse_trans, "3.4.1", [hex: :parse_trans, repo: "hexpm", optional: false]}, {:ssl_verify_fun, "~> 1.1.0", [hex: :ssl_verify_fun, repo: "hexpm", optional: false]}, {:unicode_util_compat, "~> 0.7.0", [hex: :unicode_util_compat, repo: "hexpm", optional: false]}], "hexpm", "fe9094e5f1a2a2c0a7d10918fee36bfec0ec2a979994cff8cfe8058cd9af38e3"},
-  "heroicons": {:hex, :heroicons, "0.5.5", "c2bcb05a90f010df246a5a2a2b54cac15483b5de137b2ef0bead77fcdf06e21a", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}, {:phoenix_live_view, ">= 0.18.2", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}], "hexpm", "2f4bf929440fecd5191ba9f40e5009b0f75dc993d765c0e4d068fcb7026d6da1"},
+  "heroicons": {:git, "https://github.com/tailwindlabs/heroicons.git", "ad0ad1f6d51bd64dcd67e363d2b2833a8de25154", [tag: "v2.1.5", sparse: "optimized"]},
   "idna": {:hex, :idna, "6.1.1", "8a63070e9f7d0c62eb9d9fcb360a7de382448200fbbd1b106cc96d3d8099df8d", [:rebar3], [{:unicode_util_compat, "~> 0.7.0", [hex: :unicode_util_compat, repo: "hexpm", optional: false]}], "hexpm", "92376eb7894412ed19ac475e4a86f7b413c1b9fbb5bd16dccd57934157944cea"},
   "inflex": {:hex, :inflex, "2.0.0", "db69d542b8fdb23ac667f9bc0c2395a3983fa2da6ae2efa7ab5dc541928f7a75", [:mix], [], "hexpm", "c018852409bd48b03ad96ed53594186bc074bdd1519043a0ad1fa5697aac4399"},
   "jason": {:hex, :jason, "1.4.4", "b9226785a9aa77b6857ca22832cffa5d5011a667207eb2a0ad56adb5db443b8a", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "c5eb0cab91f094599f94d55bc63409236a8ec69a21a67814529e8d5f6cc90b3b"},
@@ -56,25 +56,25 @@
   "phoenix_template": {:hex, :phoenix_template, "1.0.4", "e2092c132f3b5e5b2d49c96695342eb36d0ed514c5b252a77048d5969330d639", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}], "hexpm", "2c0c81f0e5c6753faf5cca2f229c9709919aba34fab866d3bc05060c9c444206"},
   "phoenix_view": {:hex, :phoenix_view, "2.0.4", "b45c9d9cf15b3a1af5fb555c674b525391b6a1fe975f040fb4d913397b31abf4", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}], "hexpm", "4e992022ce14f31fe57335db27a28154afcc94e9983266835bb3040243eb620b"},
   "plug": {:hex, :plug, "1.16.1", "40c74619c12f82736d2214557dedec2e9762029b2438d6d175c5074c933edc9d", [:mix], [{:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.1.1 or ~> 1.2 or ~> 2.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.3 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "a13ff6b9006b03d7e33874945b2755253841b238c34071ed85b0e86057f8cddc"},
-  "plug_cowboy": {:hex, :plug_cowboy, "2.7.1", "87677ffe3b765bc96a89be7960f81703223fe2e21efa42c125fcd0127dd9d6b2", [:mix], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:cowboy_telemetry, "~> 0.3", [hex: :cowboy_telemetry, repo: "hexpm", optional: false]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "02dbd5f9ab571b864ae39418db7811618506256f6d13b4a45037e5fe78dc5de3"},
+  "plug_cowboy": {:hex, :plug_cowboy, "2.7.2", "fdadb973799ae691bf9ecad99125b16625b1c6039999da5fe544d99218e662e4", [:mix], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:cowboy_telemetry, "~> 0.3", [hex: :cowboy_telemetry, repo: "hexpm", optional: false]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "245d8a11ee2306094840c000e8816f0cbed69a23fc0ac2bcf8d7835ae019bb2f"},
   "plug_crypto": {:hex, :plug_crypto, "1.2.5", "918772575e48e81e455818229bf719d4ab4181fcbf7f85b68a35620f78d89ced", [:mix], [], "hexpm", "26549a1d6345e2172eb1c233866756ae44a9609bd33ee6f99147ab3fd87fd842"},
-  "postgrex": {:hex, :postgrex, "0.19.0", "f7d50e50cb42e0a185f5b9a6095125a9ab7e4abccfbe2ab820ab9aa92b71dbab", [:mix], [{:db_connection, "~> 2.1", [hex: :db_connection, repo: "hexpm", optional: false]}, {:decimal, "~> 1.5 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:table, "~> 0.1.0", [hex: :table, repo: "hexpm", optional: true]}], "hexpm", "dba2d2a0a8637defbf2307e8629cb2526388ba7348f67d04ec77a5d6a72ecfae"},
+  "postgrex": {:hex, :postgrex, "0.19.1", "73b498508b69aded53907fe48a1fee811be34cc720e69ef4ccd568c8715495ea", [:mix], [{:db_connection, "~> 2.1", [hex: :db_connection, repo: "hexpm", optional: false]}, {:decimal, "~> 1.5 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:table, "~> 0.1.0", [hex: :table, repo: "hexpm", optional: true]}], "hexpm", "8bac7885a18f381e091ec6caf41bda7bb8c77912bb0e9285212829afe5d8a8f8"},
   "qrcode_ex": {:hex, :qrcode_ex, "0.1.1", "8907a7558325babd30f7f43ff85a0169ef65c30820d68e90d792802318f9a062", [:mix], [], "hexpm", "9eb0b397fb3a1c3b16e55b6de6f845a0b4e7b7100ade39eb59fad98fb62455a7"},
   "quantum": {:hex, :quantum, "3.5.3", "ee38838a07761663468145f489ad93e16a79440bebd7c0f90dc1ec9850776d99", [:mix], [{:crontab, "~> 1.1", [hex: :crontab, repo: "hexpm", optional: false]}, {:gen_stage, "~> 0.14 or ~> 1.0", [hex: :gen_stage, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.3 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}, {:telemetry_registry, "~> 0.2", [hex: :telemetry_registry, repo: "hexpm", optional: false]}], "hexpm", "500fd3fa77dcd723ed9f766d4a175b684919ff7b6b8cfd9d7d0564d58eba8734"},
   "ranch": {:hex, :ranch, "1.8.0", "8c7a100a139fd57f17327b6413e4167ac559fbc04ca7448e9be9057311597a1d", [:make, :rebar3], [], "hexpm", "49fbcfd3682fab1f5d109351b61257676da1a2fdbe295904176d5e521a2ddfe5"},
   "ssl_verify_fun": {:hex, :ssl_verify_fun, "1.1.7", "354c321cf377240c7b8716899e182ce4890c5938111a1296add3ec74cf1715df", [:make, :mix, :rebar3], [], "hexpm", "fe4c190e8f37401d30167c8c405eda19469f34577987c76dde613e838bbc67f8"},
-  "swoosh": {:hex, :swoosh, "1.16.10", "04be6e2eb1a31aa0aa21a731175c81cc3998189456a92daf13d44a5c754afcf5", [:mix], [{:bandit, ">= 1.0.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:cowboy, "~> 1.1 or ~> 2.4", [hex: :cowboy, repo: "hexpm", optional: true]}, {:ex_aws, "~> 2.1", [hex: :ex_aws, repo: "hexpm", optional: true]}, {:finch, "~> 0.6", [hex: :finch, repo: "hexpm", optional: true]}, {:gen_smtp, "~> 0.13 or ~> 1.0", [hex: :gen_smtp, repo: "hexpm", optional: true]}, {:hackney, "~> 1.9", [hex: :hackney, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:mail, "~> 0.2", [hex: :mail, repo: "hexpm", optional: true]}, {:mime, "~> 1.1 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:mua, "~> 0.2.3", [hex: :mua, repo: "hexpm", optional: true]}, {:multipart, "~> 0.4", [hex: :multipart, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: true]}, {:plug_cowboy, ">= 1.0.0", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:req, "~> 0.5 or ~> 1.0", [hex: :req, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "756be04db173c0cbe318f1dfe2bcc88aa63aed78cf5a4b02b61b36ee11fc716a"},
+  "swoosh": {:hex, :swoosh, "1.17.0", "4a082a6ce4d60b1f48ffa725c8da0e2304504569ff550f4ed2d088c923039cb0", [:mix], [{:bandit, ">= 1.0.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:cowboy, "~> 1.1 or ~> 2.4", [hex: :cowboy, repo: "hexpm", optional: true]}, {:ex_aws, "~> 2.1", [hex: :ex_aws, repo: "hexpm", optional: true]}, {:finch, "~> 0.6", [hex: :finch, repo: "hexpm", optional: true]}, {:gen_smtp, "~> 0.13 or ~> 1.0", [hex: :gen_smtp, repo: "hexpm", optional: true]}, {:hackney, "~> 1.9", [hex: :hackney, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:mail, "~> 0.2", [hex: :mail, repo: "hexpm", optional: true]}, {:mime, "~> 1.1 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:mua, "~> 0.2.3", [hex: :mua, repo: "hexpm", optional: true]}, {:multipart, "~> 0.4", [hex: :multipart, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: true]}, {:plug_cowboy, ">= 1.0.0", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:req, "~> 0.5 or ~> 1.0", [hex: :req, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "659b8bc25f7483b872d051a7f0731fb8d5312165be0d0302a3c783b566b0a290"},
   "tailwind": {:hex, :tailwind, "0.2.3", "277f08145d407de49650d0a4685dc062174bdd1ae7731c5f1da86163a24dfcdb", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}], "hexpm", "8e45e7a34a676a7747d04f7913a96c770c85e6be810a1d7f91e713d3a3655b5d"},
   "tailwind_formatter": {:hex, :tailwind_formatter, "0.3.7", "2728d031e6803dfddf63f1dd7c64b5b9fd70ffdf635709c50f47589f4fb48861", [:mix], [{:phoenix_live_view, ">= 0.17.6", [hex: :phoenix_live_view, repo: "hexpm", optional: true]}], "hexpm", "3d91ac4d4622505b09c0f4678512281515b4fbe7644f012da1bd2722f5880185"},
-  "telemetry": {:hex, :telemetry, "1.2.1", "68fdfe8d8f05a8428483a97d7aab2f268aaff24b49e0f599faa091f1d4e7f61c", [:rebar3], [], "hexpm", "dad9ce9d8effc621708f99eac538ef1cbe05d6a874dd741de2e689c47feafed5"},
+  "telemetry": {:hex, :telemetry, "1.3.0", "fedebbae410d715cf8e7062c96a1ef32ec22e764197f70cda73d82778d61e7a2", [:rebar3], [], "hexpm", "7015fc8919dbe63764f4b4b87a95b7c0996bd539e0d499be6ec9d7f3875b79e6"},
   "telemetry_metrics": {:hex, :telemetry_metrics, "0.6.2", "2caabe9344ec17eafe5403304771c3539f3b6e2f7fb6a6f602558c825d0d0bfb", [:mix], [{:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "9b43db0dc33863930b9ef9d27137e78974756f5f198cae18409970ed6fa5b561"},
   "telemetry_poller": {:hex, :telemetry_poller, "1.1.0", "58fa7c216257291caaf8d05678c8d01bd45f4bdbc1286838a28c4bb62ef32999", [:rebar3], [{:telemetry, "~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "9eb9d9cbfd81cbd7cdd24682f8711b6e2b691289a0de6826e58452f28c103c8f"},
   "telemetry_registry": {:hex, :telemetry_registry, "0.3.2", "701576890320be6428189bff963e865e8f23e0ff3615eade8f78662be0fc003c", [:mix, :rebar3], [{:telemetry, "~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "e7ed191eb1d115a3034af8e1e35e4e63d5348851d556646d46ca3d1b4e16bab9"},
   "timex": {:hex, :timex, "3.7.11", "bb95cb4eb1d06e27346325de506bcc6c30f9c6dea40d1ebe390b262fad1862d1", [:mix], [{:combine, "~> 0.10", [hex: :combine, repo: "hexpm", optional: false]}, {:gettext, "~> 0.20", [hex: :gettext, repo: "hexpm", optional: false]}, {:tzdata, "~> 1.1", [hex: :tzdata, repo: "hexpm", optional: false]}], "hexpm", "8b9024f7efbabaf9bd7aa04f65cf8dcd7c9818ca5737677c7b76acbc6a94d1aa"},
-  "tzdata": {:hex, :tzdata, "1.1.1", "20c8043476dfda8504952d00adac41c6eda23912278add38edc140ae0c5bcc46", [:mix], [{:hackney, "~> 1.17", [hex: :hackney, repo: "hexpm", optional: false]}], "hexpm", "a69cec8352eafcd2e198dea28a34113b60fdc6cb57eb5ad65c10292a6ba89787"},
+  "tzdata": {:hex, :tzdata, "1.1.2", "45e5f1fcf8729525ec27c65e163be5b3d247ab1702581a94674e008413eef50b", [:mix], [{:hackney, "~> 1.17", [hex: :hackney, repo: "hexpm", optional: false]}], "hexpm", "cec7b286e608371602318c414f344941d5eb0375e14cfdab605cca2fe66cba8b"},
   "unicode_util_compat": {:hex, :unicode_util_compat, "0.7.0", "bc84380c9ab48177092f43ac89e4dfa2c6d62b40b8bd132b1059ecc7232f9a78", [:rebar3], [], "hexpm", "25eee6d67df61960cf6a794239566599b09e17e668d3700247bc498638152521"},
   "waffle": {:hex, :waffle, "1.1.9", "8ce5ca9e59fa5491da67a2df57b8711d93223df3c3e5c21ad2acdedc41a0f51a", [:mix], [{:ex_aws, "~> 2.1", [hex: :ex_aws, repo: "hexpm", optional: true]}, {:ex_aws_s3, "~> 2.1", [hex: :ex_aws_s3, repo: "hexpm", optional: true]}, {:hackney, "~> 1.9", [hex: :hackney, repo: "hexpm", optional: false]}, {:sweet_xml, "~> 0.6", [hex: :sweet_xml, repo: "hexpm", optional: true]}], "hexpm", "307c63cfdfb4624e7c423868a128ccfcb0e5291ae73a9deecb3a10b7a3eb277c"},
   "waffle_ecto": {:hex, :waffle_ecto, "0.0.12", "e5c17c49b071b903df71861c642093281123142dc4e9908c930db3e06795b040", [:mix], [{:ecto, "~> 3.0", [hex: :ecto, repo: "hexpm", optional: false]}, {:waffle, "~> 1.0", [hex: :waffle, repo: "hexpm", optional: false]}], "hexpm", "585fe6371057066d2e8e3383ddd7a2437ff0668caf3f4cbf5a041e0de9837168"},
   "websock": {:hex, :websock, "0.5.3", "2f69a6ebe810328555b6fe5c831a851f485e303a7c8ce6c5f675abeb20ebdadc", [:mix], [], "hexpm", "6105453d7fac22c712ad66fab1d45abdf049868f253cf719b625151460b8b453"},
-  "websock_adapter": {:hex, :websock_adapter, "0.5.6", "0437fe56e093fd4ac422de33bf8fc89f7bc1416a3f2d732d8b2c8fd54792fe60", [:mix], [{:bandit, ">= 0.6.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.6", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:websock, "~> 0.5", [hex: :websock, repo: "hexpm", optional: false]}], "hexpm", "e04378d26b0af627817ae84c92083b7e97aca3121196679b73c73b99d0d133ea"},
+  "websock_adapter": {:hex, :websock_adapter, "0.5.7", "65fa74042530064ef0570b75b43f5c49bb8b235d6515671b3d250022cb8a1f9e", [:mix], [{:bandit, ">= 0.6.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.6", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:websock, "~> 0.5", [hex: :websock, repo: "hexpm", optional: false]}], "hexpm", "d0f478ee64deddfec64b800673fd6e0c8888b079d9f3444dd96d2a98383bdbd1"},
 }
diff --git a/storybook/components/badge.story.exs b/storybook/components/badge.story.exs
index 458e228a0..bc1cdf8e9 100644
--- a/storybook/components/badge.story.exs
+++ b/storybook/components/badge.story.exs
@@ -294,7 +294,7 @@ defmodule AtomicWeb.Storybook.Components.Badges do
           %Variation{
             id: :xs,
             attributes: %{
-              icon: :cake,
+              icon: "hero-cake",
               size: :xs
             },
             slots: [
@@ -306,7 +306,7 @@ defmodule AtomicWeb.Storybook.Components.Badges do
           %Variation{
             id: :sm,
             attributes: %{
-              icon: :cake,
+              icon: "hero-cake",
               size: :sm
             },
             slots: [
@@ -318,7 +318,7 @@ defmodule AtomicWeb.Storybook.Components.Badges do
           %Variation{
             id: :md,
             attributes: %{
-              icon: :cake,
+              icon: "hero-cake",
               size: :md
             },
             slots: [
@@ -330,7 +330,7 @@ defmodule AtomicWeb.Storybook.Components.Badges do
           %Variation{
             id: :lg,
             attributes: %{
-              icon: :cake,
+              icon: "hero-cake",
               size: :lg
             },
             slots: [
@@ -342,7 +342,7 @@ defmodule AtomicWeb.Storybook.Components.Badges do
           %Variation{
             id: :xl,
             attributes: %{
-              icon: :cake,
+              icon: "hero-cake",
               size: :xl
             },
             slots: [
@@ -422,7 +422,7 @@ defmodule AtomicWeb.Storybook.Components.Badges do
             id: :icon_left,
             attributes: %{
               size: :md,
-              icon: :trophy,
+              icon: "hero-trophy",
               icon_position: :left
             },
             slots: [
@@ -435,7 +435,7 @@ defmodule AtomicWeb.Storybook.Components.Badges do
             id: :icon_right,
             attributes: %{
               size: :md,
-              icon: :trophy,
+              icon: "hero-trophy",
               icon_position: :right
             },
             slots: [
@@ -454,8 +454,7 @@ defmodule AtomicWeb.Storybook.Components.Badges do
             id: :mini,
             attributes: %{
               size: :md,
-              icon: :radio,
-              icon_variant: :mini
+              icon: "hero-radio-mini"
             },
             slots: [
               """
@@ -467,8 +466,7 @@ defmodule AtomicWeb.Storybook.Components.Badges do
             id: :solid,
             attributes: %{
               size: :md,
-              icon: :radio,
-              icon_variant: :solid
+              icon: "hero-radio-solid"
             },
             slots: [
               """
@@ -480,8 +478,7 @@ defmodule AtomicWeb.Storybook.Components.Badges do
             id: :outline,
             attributes: %{
               size: :md,
-              icon: :radio,
-              icon_variant: :outline
+              icon: "hero-radio"
             },
             slots: [
               """
diff --git a/storybook/components/button.story.exs b/storybook/components/button.story.exs
index 1b4f1cbc5..ec7dc08b0 100644
--- a/storybook/components/button.story.exs
+++ b/storybook/components/button.story.exs
@@ -699,7 +699,7 @@ defmodule AtomicWeb.Storybook.Components.Button do
           %Variation{
             id: :xs,
             attributes: %{
-              icon: :cake,
+              icon: "hero-cake",
               size: :xs
             },
             slots: [
@@ -711,7 +711,7 @@ defmodule AtomicWeb.Storybook.Components.Button do
           %Variation{
             id: :sm,
             attributes: %{
-              icon: :cake,
+              icon: "hero-cake",
               size: :sm
             },
             slots: [
@@ -723,7 +723,7 @@ defmodule AtomicWeb.Storybook.Components.Button do
           %Variation{
             id: :md,
             attributes: %{
-              icon: :cake,
+              icon: "hero-cake",
               size: :md
             },
             slots: [
@@ -735,7 +735,7 @@ defmodule AtomicWeb.Storybook.Components.Button do
           %Variation{
             id: :lg,
             attributes: %{
-              icon: :cake,
+              icon: "hero-cake",
               size: :lg
             },
             slots: [
@@ -747,7 +747,7 @@ defmodule AtomicWeb.Storybook.Components.Button do
           %Variation{
             id: :xl,
             attributes: %{
-              icon: :cake,
+              icon: "hero-cake",
               size: :xl
             },
             slots: [
@@ -766,7 +766,7 @@ defmodule AtomicWeb.Storybook.Components.Button do
             id: :icon_left,
             attributes: %{
               size: :md,
-              icon: :trophy,
+              icon: "hero-trophy",
               icon_position: :left
             },
             slots: [
@@ -779,7 +779,7 @@ defmodule AtomicWeb.Storybook.Components.Button do
             id: :icon_right,
             attributes: %{
               size: :md,
-              icon: :trophy,
+              icon: "hero-trophy",
               icon_position: :right
             },
             slots: [
@@ -798,8 +798,7 @@ defmodule AtomicWeb.Storybook.Components.Button do
             id: :mini,
             attributes: %{
               size: :md,
-              icon: :radio,
-              icon_variant: :mini
+              icon: "hero-radio-mini"
             },
             slots: [
               """
@@ -811,8 +810,7 @@ defmodule AtomicWeb.Storybook.Components.Button do
             id: :solid,
             attributes: %{
               size: :md,
-              icon: :radio,
-              icon_variant: :solid
+              icon: "hero-radio-solid"
             },
             slots: [
               """
@@ -824,8 +822,7 @@ defmodule AtomicWeb.Storybook.Components.Button do
             id: :outline,
             attributes: %{
               size: :md,
-              icon: :radio,
-              icon_variant: :outline
+              icon: "hero-radio"
             },
             slots: [
               """
diff --git a/storybook/components/dropdown.story.exs b/storybook/components/dropdown.story.exs
index 919383a56..0136bfca0 100644
--- a/storybook/components/dropdown.story.exs
+++ b/storybook/components/dropdown.story.exs
@@ -78,11 +78,10 @@ defmodule AtomicWeb.Storybook.Components.Dropdown do
             id: :button,
             attributes: %{
               id: "dropdown-solid-icons",
-              icon_variant: :solid,
               items: [
-                %{name: "Profile", navigate: "#", icon: :user},
-                %{name: "Settings", navigate: "#", icon: :cog},
-                %{name: "Logout", navigate: "#", icon: :arrow_left_on_rectangle}
+                %{name: "Profile", navigate: "#", icon: "hero-users-solid"},
+                %{name: "Settings", navigate: "#", icon: "hero-cog-solid"},
+                %{name: "Logout", navigate: "#", icon: "hero-arrow-left-on-rectangle-solid"}
               ],
               orientation: :down
             },
@@ -98,11 +97,10 @@ defmodule AtomicWeb.Storybook.Components.Dropdown do
             id: :top,
             attributes: %{
               id: "dropdown-outline-icons",
-              icon_variant: :outline,
               items: [
-                %{name: "Profile", navigate: "#", icon: :user},
-                %{name: "Settings", navigate: "#", icon: :cog},
-                %{name: "Logout", navigate: "#", icon: :arrow_left_on_rectangle}
+                %{name: "Profile", navigate: "#", icon: "hero-user"},
+                %{name: "Settings", navigate: "#", icon: "hero-cog"},
+                %{name: "Logout", navigate: "#", icon: "hero-arrow-left-on-rectangle"}
               ],
               orientation: :top
             },
diff --git a/storybook/components/icon.story.exs b/storybook/components/icon.story.exs
index 364c37b08..3a3924dbb 100644
--- a/storybook/components/icon.story.exs
+++ b/storybook/components/icon.story.exs
@@ -7,7 +7,7 @@ defmodule AtomicWeb.Storybook.Components.Icon do
 
   def template do
     """
-    <span class="h-8 w-8">
+    <span class="size-8">
       <.lsb-variation />
     </span>
     """
@@ -18,31 +18,35 @@ defmodule AtomicWeb.Storybook.Components.Icon do
       %Variation{
         id: :default,
         attributes: %{
-          name: :academic_cap
+          name: "hero-academic-cap"
         }
       },
       %Variation{
         id: :outline,
         description: "Outline",
         attributes: %{
-          name: :academic_cap,
-          outline: true
+          name: "hero-academic-cap"
         }
       },
       %Variation{
         id: :solid,
         description: "Solid",
         attributes: %{
-          name: :academic_cap,
-          solid: true
+          name: "hero-academic-cap-solid"
         }
       },
       %Variation{
         id: :mini,
         description: "Mini",
         attributes: %{
-          name: :academic_cap,
-          mini: true
+          name: "hero-academic-cap-mini"
+        }
+      },
+      %Variation{
+        id: :micro,
+        description: "Micro",
+        attributes: %{
+          name: "hero-academic-cap-micro"
         }
       }
     ]
diff --git a/storybook/components/tabs.story.exs b/storybook/components/tabs.story.exs
index 81224f96c..0d941a43d 100644
--- a/storybook/components/tabs.story.exs
+++ b/storybook/components/tabs.story.exs
@@ -67,11 +67,11 @@ defmodule AtomicWeb.Storybook.Components.Tabs do
         slots: [
           """
           <.tab active={true}>
-            <.icon name={:home} class="h-5 w-5 mr-2" />
+            <.icon name="hero-home" class="size-5 mr-2" />
             All
           </.tab>
           <.tab>
-            <.icon name={:star} class="h-5 w-5 mr-2" />
+            <.icon name="hero-star" class="size-5 mr-2" />
             Following
           </.tab>
           """
diff --git a/storybook/icons.story.exs b/storybook/icons.story.exs
deleted file mode 100644
index 6ff438190..000000000
--- a/storybook/icons.story.exs
+++ /dev/null
@@ -1,27 +0,0 @@
-defmodule Storybook.Icons do
-  use PhoenixStorybook.Story, :page
-
-  import AtomicWeb.Components.Icon
-
-  def doc, do: "Icons available to use in the application."
-
-  def render(assigns) do
-    ~H"""
-    <div>
-      <div class="grid grid-cols-[repeat(auto-fill,minmax(8rem,1fr))] gap-x-6 gap-y-4 pb-16 pt-10 sm:pt-11 md:pt-12">
-        <%= for {name, _} <- Heroicons.__info__(:functions) |> Enum.drop(2) do %>
-          <div class="text-center">
-            <div onclick={"navigator.clipboard.writeText(':#{name}');"} title={"Click to copy :#{name}"} class="flex flex-col items-center justify-center rounded-lg border px-4 py-6 text-center hover:cursor-pointer hover:bg-gray-50">
-              <span class="block h-12 w-12">
-                <.icon name={name} />
-              </span>
-              <p class="mx-2 max-w-full truncate py-2 text-xs text-gray-500">:<%= name %></p>
-            </div>
-            <p class="py-2 text-sm"><%= name |> to_string() |> String.replace("_", " ") |> String.capitalize() %></p>
-          </div>
-        <% end %>
-      </div>
-    </div>
-    """
-  end
-end