diff --git a/lib/cobblemon_ui/type_chart.ex b/lib/cobblemon_ui/type_chart.ex
index f46a2d0..fba0a7d 100644
--- a/lib/cobblemon_ui/type_chart.ex
+++ b/lib/cobblemon_ui/type_chart.ex
@@ -248,25 +248,8 @@ defmodule CobblemonUi.TypeChart do
   def type_text_color(_), do: "text-base-content/50"
 
   @doc """
-  Returns a heroicon name for each type.
+  Returns the static asset path for a type's SVG icon.
   """
-  def type_icon("normal"), do: "hero-minus-circle"
-  def type_icon("fire"), do: "hero-fire"
-  def type_icon("water"), do: "hero-beaker"
-  def type_icon("grass"), do: "hero-puzzle-piece"
-  def type_icon("electric"), do: "hero-bolt"
-  def type_icon("ice"), do: "hero-cloud"
-  def type_icon("fighting"), do: "hero-hand-raised"
-  def type_icon("poison"), do: "hero-beaker"
-  def type_icon("ground"), do: "hero-globe-americas"
-  def type_icon("flying"), do: "hero-paper-airplane"
-  def type_icon("psychic"), do: "hero-eye"
-  def type_icon("bug"), do: "hero-bug-ant"
-  def type_icon("rock"), do: "hero-cube"
-  def type_icon("ghost"), do: "hero-moon"
-  def type_icon("dragon"), do: "hero-star"
-  def type_icon("dark"), do: "hero-moon"
-  def type_icon("steel"), do: "hero-shield-check"
-  def type_icon("fairy"), do: "hero-sparkles"
-  def type_icon(_), do: "hero-question-mark-circle"
+  def type_icon_path(type) when type in @types, do: "/images/types/#{type}.svg"
+  def type_icon_path(_), do: nil
 end
diff --git a/lib/cobblemon_ui_web/live/pokemon_components.ex b/lib/cobblemon_ui_web/live/pokemon_components.ex
index 482de5d..3e6bf91 100644
--- a/lib/cobblemon_ui_web/live/pokemon_components.ex
+++ b/lib/cobblemon_ui_web/live/pokemon_components.ex
@@ -386,7 +386,7 @@ defmodule CobblemonUiWeb.PokemonComponents do
             phx-click="select_type"
             phx-value-type={t}
             class={[
-              "inline-flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-xs font-semibold capitalize transition-all duration-150 border cursor-pointer",
+              "inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-semibold capitalize transition-all duration-150 border cursor-pointer",
               if(@selected_type == t,
                 do: "ring-2 ring-primary/60 border-primary/40 bg-base-100 shadow-md scale-105",
                 else:
@@ -395,9 +395,11 @@ defmodule CobblemonUiWeb.PokemonComponents do
             ]}
           >
             <span class={[
-              "inline-block w-2.5 h-2.5 rounded-full shrink-0",
-              type_bg(@selected_type == t, t)
-            ]} />
+              "inline-flex items-center justify-center w-5 h-5 rounded-full shrink-0 p-0.5",
+              TypeChart.type_color(t)
+            ]}>
+              <img src={TypeChart.type_icon_path(t)} alt={t} class="w-3.5 h-3.5" />
+            </span>
             {t}
           </button>
         </div>
@@ -411,7 +413,11 @@ defmodule CobblemonUiWeb.PokemonComponents do
               "w-12 h-12 rounded-xl flex items-center justify-center shrink-0 shadow-sm",
               TypeChart.type_color(@selected_type)
             ]}>
-              <.icon name={TypeChart.type_icon(@selected_type)} class="size-6 text-white drop-shadow" />
+              <img
+                src={TypeChart.type_icon_path(@selected_type)}
+                alt={@selected_type}
+                class="w-7 h-7 drop-shadow"
+              />
             </div>
             <div>
               <h4 class="font-bold text-base-content capitalize text-xl">{@selected_type}</h4>
@@ -568,15 +574,16 @@ defmodule CobblemonUiWeb.PokemonComponents do
         "text-white border-white/10"
       ]}
     >
-      <.icon name={TypeChart.type_icon(@type_name)} class="size-3 drop-shadow" />
+      <img
+        src={TypeChart.type_icon_path(@type_name)}
+        alt={@type_name}
+        class="w-3.5 h-3.5 drop-shadow"
+      />
       {@type_name}
     </button>
     """
   end
 
-  defp type_bg(true, type), do: TypeChart.type_color(type)
-  defp type_bg(false, type), do: TypeChart.type_color(type) <> "/60"
-
   # --- Helpers ---
 
   defp gender_symbol("male"), do: "♂"