diff --git a/werewolves/src/pages/role_page/adjudicator.rs b/werewolves/src/pages/role_page/adjudicator.rs
index 6dd90b1..933cad6 100644
--- a/werewolves/src/pages/role_page/adjudicator.rs
+++ b/werewolves/src/pages/role_page/adjudicator.rs
@@ -15,7 +15,7 @@
 use werewolves_proto::{message::PublicIdentity, role::Killer};
 use yew::prelude::*;
 
-use crate::components::{Icon, IconSource, IdentitySpan};
+use crate::components::{Icon, IconSource, IconType, IdentitySpan};
 
 #[function_component]
 pub fn AdjudicatorPage1() -> Html {
@@ -24,7 +24,7 @@ pub fn AdjudicatorPage1() -> Html {
             <h1 class="defensive">{"ADJUDICATOR"}</h1>
             <div class="information defensive faint">
                 <h4>{"PICK A PLAYER"}</h4>
-                <Icon source={IconSource::Killer}/>
+                <Icon source={IconSource::Killer} icon_type={IconType::Fit}/>
                 <h4 class="yellow">{"YOU WILL CHECK IF THEY APPEAR AS A KILLER"}</h4>
             </div>
         </div>
@@ -48,12 +48,12 @@ pub fn AdjudicatorResult(
     let icon = match killer {
         Killer::Killer => html! {
             <Icon
-                source={IconSource::Killer}
+                source={IconSource::Killer} icon_type={IconType::Fit}
             />
         },
         Killer::NotKiller => html! {
             <Icon
-                source={IconSource::RedX}
+                source={IconSource::RedX} icon_type={IconType::Fit}
             />
         },
     };
diff --git a/werewolves/src/pages/role_page/arcanist.rs b/werewolves/src/pages/role_page/arcanist.rs
index 25b935f..524fb86 100644
--- a/werewolves/src/pages/role_page/arcanist.rs
+++ b/werewolves/src/pages/role_page/arcanist.rs
@@ -26,10 +26,10 @@ pub fn ArcanistPage1() -> Html {
                 {"PICK TWO PLAYERS"}
                 <div class="icons">
                     <Icon source={IconSource::Village}
-                        icon_type={IconType::Informational}
+                        icon_type={IconType::Fit}
                     />
                     <Icon source={IconSource::Wolves}
-                        icon_type={IconType::Informational}
+                        icon_type={IconType::Fit}
                     />
                 </div>
                 <span class="yellow">{"YOU WILL COMPARE THEIR ALIGNMENTS"}</span>
@@ -57,10 +57,10 @@ pub fn ArcanistResult(
     };
     let icons = match alignment_eq {
         AlignmentEq::Same => html! {
-            <Icon source={IconSource::Equal} icon_type={IconType::Informational} />
+            <Icon source={IconSource::Equal} icon_type={IconType::Fit} />
         },
         AlignmentEq::Different => html! {
-            <Icon source={IconSource::NotEqual} icon_type={IconType::Informational} />
+            <Icon source={IconSource::NotEqual} icon_type={IconType::Fit} />
         },
     };
     html! {
diff --git a/werewolves/src/pages/role_page/beholder.rs b/werewolves/src/pages/role_page/beholder.rs
index 8356a1e..b1e130d 100644
--- a/werewolves/src/pages/role_page/beholder.rs
+++ b/werewolves/src/pages/role_page/beholder.rs
@@ -23,7 +23,7 @@ pub fn BeholderPage1() -> Html {
             <h1 class="intel">{"BEHOLDER"}</h1>
             <div class="information intel faint">
                 {"PICK A PLAYER"}
-                <Icon source={IconSource::Beholder} icon_type={IconType::Informational}/>
+                <Icon source={IconSource::Beholder} icon_type={IconType::Fit}/>
                 {"YOU WILL SEE WHAT INFORMATION THEY MAY HAVE GATHERED"}
                 <span class="yellow">{"SHOULD THEY DIE TONIGHT"}</span>
             </div>
@@ -38,7 +38,7 @@ pub fn BeholderWakePage1() -> Html {
             <h1 class="intel">{"BEHOLDER"}</h1>
             <div class="information intel faint">
                 {"YOUR TARGET HAS DIED"}
-                <Icon source={IconSource::Beholder} icon_type={IconType::Informational}/>
+                <Icon source={IconSource::Beholder} icon_type={IconType::Fit}/>
                 <span class="yellow">{"THIS IS THE LAST PIECE OF INFORMATION THEY SAW"}</span>
             </div>
         </div>
@@ -53,7 +53,7 @@ pub fn BeholderSawNothing() -> Html {
             <div class="information intel faint">
                 <h1>{"YOUR TARGET HAS DIED"}</h1>
                 <div class="info-icon-grow">
-                    <Icon source={IconSource::RedX}/>
+                    <Icon source={IconSource::RedX} icon_type={IconType::Fit}/>
                 </div>
                 <h1>{"BUT SAW NOTHING"}</h1>
             </div>
@@ -68,7 +68,7 @@ pub fn BeholderSawEverything() -> Html {
             <h1 class="intel">{"BEHOLDER"}</h1>
             <div class="information intel faint">
                 {"YOUR TARGET HAS DIED"}
-                <Icon source={IconSource::Beholder} icon_type={IconType::Informational}/>
+                <Icon source={IconSource::Beholder} icon_type={IconType::Fit}/>
                 <span>
                     {"BUT SAW "}
                     <em class="red">
diff --git a/werewolves/src/pages/role_page/empath.rs b/werewolves/src/pages/role_page/empath.rs
index e93d21d..74874f4 100644
--- a/werewolves/src/pages/role_page/empath.rs
+++ b/werewolves/src/pages/role_page/empath.rs
@@ -47,12 +47,12 @@ pub fn EmpathResult(EmpathResultProps { scapegoat, target }: &EmpathResultProps)
     let icon = match scapegoat {
         true => html! {
             <Icon
-                source={IconSource::Scapegoat} icon_type={IconType::Informational}
+                source={IconSource::Scapegoat} icon_type={IconType::Fit}
             />
         },
         false => html! {
             <Icon
-                source={IconSource::RedX} icon_type={IconType::Informational}
+                source={IconSource::RedX} icon_type={IconType::Fit}
             />
         },
     };
diff --git a/werewolves/src/pages/role_page/gravedigger.rs b/werewolves/src/pages/role_page/gravedigger.rs
index 6fd021c..530d129 100644
--- a/werewolves/src/pages/role_page/gravedigger.rs
+++ b/werewolves/src/pages/role_page/gravedigger.rs
@@ -29,7 +29,7 @@ pub fn GravediggerPage1() -> Html {
                     <span class="yellow">{"DEAD"}</span>
                     {" PLAYER"}
                 </span>
-                <Icon source={IconSource::Gravedigger} icon_type={IconType::Informational}/>
+                <Icon source={IconSource::Gravedigger} icon_type={IconType::Fit}/>
                 <span class="yellow">
                     {"YOU WILL LEARN THEIR ROLE"}
                 </span>
@@ -74,7 +74,7 @@ pub fn GravediggerResultPage(
             <h1 class="intel">{"GRAVEDIGGER"}</h1>
             <div class="information intel faint">
                 <IdentitySpan ident={target.clone()}/>
-                <Icon source={icon} icon_type={IconType::Informational}/>
+                <Icon source={icon} icon_type={IconType::Fit}/>
                 {text}
             </div>
         </div>
diff --git a/werewolves/src/pages/role_page/guardian.rs b/werewolves/src/pages/role_page/guardian.rs
index 76c418d..76f98e4 100644
--- a/werewolves/src/pages/role_page/guardian.rs
+++ b/werewolves/src/pages/role_page/guardian.rs
@@ -90,7 +90,7 @@ pub fn GuardianPagePreviousGuard(GuardianPageProps { previous }: &GuardianPagePr
             <h1 class="defensive">{"GUARDIAN"}</h1>
             <div class="information defensive faint">
                 {"LAST TIME YOU GUARDED"}
-                <Icon source={IconSource::ShieldAndSword} icon_type={IconType::Informational}/>
+                <Icon source={IconSource::ShieldAndSword} icon_type={IconType::Fit}/>
                 <div class="info-player-list">
                     <CharacterTargetCard ident={previous.clone()} />
                 </div>
diff --git a/werewolves/src/pages/role_page/hunter.rs b/werewolves/src/pages/role_page/hunter.rs
index 434c98e..8373e0c 100644
--- a/werewolves/src/pages/role_page/hunter.rs
+++ b/werewolves/src/pages/role_page/hunter.rs
@@ -23,7 +23,7 @@ pub fn HunterPage1() -> Html {
             <h1 class="offensive">{"HUNTER"}</h1>
             <div class="information offensive faint">
                 {"SET A HUNTER'S TRAP ON A PLAYER"}
-                <Icon source={IconSource::Hunter} icon_type={IconType::Informational}/>
+                <Icon source={IconSource::Hunter} icon_type={IconType::Fit}/>
                 <span class="yellow">
                     {"IF YOU DIE TONIGHT, OR ARE EXECUTED TOMORROW "}
                     {"THIS PLAYER WILL DIE AT NIGHT"}
diff --git a/werewolves/src/pages/role_page/insomniac.rs b/werewolves/src/pages/role_page/insomniac.rs
index 97b288f..f56cda6 100644
--- a/werewolves/src/pages/role_page/insomniac.rs
+++ b/werewolves/src/pages/role_page/insomniac.rs
@@ -24,7 +24,7 @@ pub fn InsomniacPage1() -> Html {
             <h1 class="intel">{"INSOMNIAC"}</h1>
             <div class="information intel faint">
                 {"YOUR SLEEP IS INTERRUPTED"}
-                <Icon source={IconSource::Insomniac} icon_type={IconType::Informational}/>
+                <Icon source={IconSource::Insomniac} icon_type={IconType::Fit}/>
                 {"YOU'VE NOTICED VISITORS IN THE NIGHT"}
             </div>
         </div>
diff --git a/werewolves/src/pages/role_page/militia.rs b/werewolves/src/pages/role_page/militia.rs
index 130645e..e8ec1e1 100644
--- a/werewolves/src/pages/role_page/militia.rs
+++ b/werewolves/src/pages/role_page/militia.rs
@@ -27,7 +27,7 @@ pub fn MilitiaPage1() -> Html {
                     <span class="yellow">{"ONCE PER GAME"}</span>
                     {" KILL ABILITY"}
                 </span>
-                <Icon source={IconSource::Sword} icon_type={IconType::Informational}/>
+                <Icon source={IconSource::Sword} icon_type={IconType::Fit}/>
                 <span class="yellow">
                     {"PICK A PLAYER "}
                     {"OR GO BACK TO SLEEP"}
diff --git a/werewolves/src/pages/role_page/mortician.rs b/werewolves/src/pages/role_page/mortician.rs
index cf7c2f2..d5a8a1c 100644
--- a/werewolves/src/pages/role_page/mortician.rs
+++ b/werewolves/src/pages/role_page/mortician.rs
@@ -24,7 +24,7 @@ pub fn MorticianPage1() -> Html {
             <h1 class="intel">{"MORTICIAN"}</h1>
             <div class="information intel faint">
                 <span>{"PICK A "}<span class="yellow">{"DEAD"}</span>{" PLAYER"}</span>
-                <Icon source={IconSource::Mortician} icon_type={IconType::Informational}/>
+                <Icon source={IconSource::Mortician} icon_type={IconType::Fit}/>
                 <span class="yellow">
                     {"YOU WILL LEARN THE CAUSE "}
                     {"OF THEIR DEATH"}
@@ -66,7 +66,7 @@ pub fn MorticianResultPage(
             <div class="information intel faint">
                 <IdentitySpan ident={target.clone()}/>
                 {"DIED TO"}
-                <Icon source={icon} icon_type={IconType::Informational}/>
+                <Icon source={icon} icon_type={IconType::Fit}/>
                 <span class="yellow">{text}</span>
             </div>
         </div>
diff --git a/werewolves/src/pages/role_page/power_seer.rs b/werewolves/src/pages/role_page/power_seer.rs
index de42be9..243b20d 100644
--- a/werewolves/src/pages/role_page/power_seer.rs
+++ b/werewolves/src/pages/role_page/power_seer.rs
@@ -16,7 +16,7 @@
 use werewolves_proto::{message::PublicIdentity, role::Powerful};
 use yew::prelude::*;
 
-use crate::components::{Icon, IconSource, IdentitySpan};
+use crate::components::{Icon, IconSource, IconType, IdentitySpan};
 
 #[function_component]
 pub fn PowerSeerPage1() -> Html {
@@ -26,7 +26,7 @@ pub fn PowerSeerPage1() -> Html {
             <div class="information intel faint">
                 {"PICK A PLAYER"}
                 <div class="info-icon-grow">
-                    <Icon source={IconSource::Powerful} />
+                    <Icon source={IconSource::Powerful} icon_type={IconType::Fit}/>
                 </div>
                 <span class="yellow">{"YOU WILL CHECK IF THEY ARE POWERFUL"}</span>
             </div>
@@ -49,12 +49,12 @@ pub fn PowerSeerResult(PowerSeerResultProps { powerful, target }: &PowerSeerResu
     let icon = match powerful {
         Powerful::Powerful => html! {
             <Icon
-                source={IconSource::Powerful}
+                source={IconSource::Powerful} icon_type={IconType::Fit}
             />
         },
         Powerful::NotPowerful => html! {
             <Icon
-                source={IconSource::RedX}
+                source={IconSource::RedX} icon_type={IconType::Fit}
             />
         },
     };
diff --git a/werewolves/src/pages/role_page/protector.rs b/werewolves/src/pages/role_page/protector.rs
index 9d63863..efc271d 100644
--- a/werewolves/src/pages/role_page/protector.rs
+++ b/werewolves/src/pages/role_page/protector.rs
@@ -23,7 +23,7 @@ pub fn ProtectorPage1() -> Html {
             <h1 class="defensive">{"PROTECTOR"}</h1>
             <div class="information defensive faint">
                 {"PICK A PLAYER"}
-                <Icon source={IconSource::Shield} icon_type={IconType::Informational}/>
+                <Icon source={IconSource::Shield} icon_type={IconType::Fit}/>
                 <span class="yellow">{"YOU WILL PROTECT THEM FROM A DEATH TONIGHT"}</span>
             </div>
         </div>
diff --git a/werewolves/src/pages/role_page/pyremaster.rs b/werewolves/src/pages/role_page/pyremaster.rs
index 16cdd7f..ba8c231 100644
--- a/werewolves/src/pages/role_page/pyremaster.rs
+++ b/werewolves/src/pages/role_page/pyremaster.rs
@@ -23,7 +23,7 @@ pub fn PyremasterPage1() -> Html {
             <h1 class="offensive">{"PYREMASTER"}</h1>
             <div class="information offensive faint">
                 {"YOU CAN CHOOSE TO THROW A PLAYER ON THE PYRE"}
-                <Icon source={IconSource::Pyremaster} icon_type={IconType::Informational}/>
+                <Icon source={IconSource::Pyremaster} icon_type={IconType::Fit}/>
                 <span>
                     {"IF YOU KILL "}
                     <span class="yellow">{"TWO"}</span>
diff --git a/werewolves/src/pages/role_page/seer.rs b/werewolves/src/pages/role_page/seer.rs
index 44a5964..75055ae 100644
--- a/werewolves/src/pages/role_page/seer.rs
+++ b/werewolves/src/pages/role_page/seer.rs
@@ -30,8 +30,8 @@ pub fn SeerPage1() -> Html {
             <div class="information intel faint">
                 {"PICK A PLAYER"}
                 <div class="icons">
-                    <Icon source={IconSource::Village} icon_type={IconType::Informational} />
-                    <Icon source={IconSource::Wolves} icon_type={IconType::Informational} />
+                    <Icon source={IconSource::Village} icon_type={IconType::Fit} />
+                    <Icon source={IconSource::Wolves} icon_type={IconType::Fit} />
                 </div>
                 <span class="yellow">{"YOU WILL CHECK THEIR ALIGNMENT"}</span>
             </div>