diff --git a/blog/index.html b/blog/index.html
index bfc9ba6..f79f24c 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -60,12 +60,12 @@
 <!-- blog index -->
 <div id="blog" class="terminal">
     <div aria-hidden="true" class="term-titlebar">
-        <i class="ph-fill ph-terminal"></i>
+        <svg class="phosphor-icon term-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM77.66,173.66a8,8,0,0,1-11.32-11.32L100.69,128,66.34,93.66A8,8,0,0,1,77.66,82.34l40,40a8,8,0,0,1,0,11.32ZM192,176H128a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Z"></path></svg>
         <p><a href="#blog">~/blog</a> <a href="./rss.xml"><i class="ph-bold ph-rss-simple" style="text-decoration: none !important; vertical-align: middle;" alt="rss feed"></i></a></p>
         <div> <div id="minimize-btn"></div> <div id="maximize-btn"></div> <div id="close-btn"></div> </div>
     </div>
     <section>
-        <p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/blog</span> <span class="status"><i class="ph-fill ph-dot-outline"></i></span> cat blog</p>
+        <p aria-hidden="true" class="term-input"><span class="folder"><svg class="phosphor-icon" style="margin-right:-8px;" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M232,88V200.89A15.13,15.13,0,0,1,216.89,216H40a16,16,0,0,1-16-16V64A16,16,0,0,1,40,48H93.33a16.12,16.12,0,0,1,9.6,3.2L130.67,72H216A16,16,0,0,1,232,88Z"></path></svg> ~/blog</span> <span class="status"><i class="ph-fill ph-dot-outline"></i></span> cat blog</p>
         <h1><a href="#blog">blog</a> <a href="./rss.xml"><i class="ph-bold ph-rss" style="text-decoration: none !important; vertical-align: middle;" alt="rss feed"></a></i></h1>
         <small>alternatively; rantpage</small>
         <p>welcome to my "blog", or whatever this is supposed to be. i rant about random things and make large writeups that probably won't make sense or contain many errors. thanks for stopping by!</p>
@@ -83,7 +83,7 @@
             <p><a href="./my-thoughts-on-social-media"><i class="ph-bold ph-arrow-bend-down-right"></i> read it!</a></p>
         </article>
     </section>
-    <p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/blog</span> <span class="status"><i class="ph-fill ph-dot-outline"></i></span> <span class="blink">█</span></p>
+    <p aria-hidden="true" class="term-input"><span class="folder"><svg class="phosphor-icon" style="margin-right:-8px;" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M232,88V200.89A15.13,15.13,0,0,1,216.89,216H40a16,16,0,0,1-16-16V64A16,16,0,0,1,40,48H93.33a16.12,16.12,0,0,1,9.6,3.2L130.67,72H216A16,16,0,0,1,232,88Z"></path></svg> ~/blog</span> <span class="status"><i class="ph-fill ph-dot-outline"></i></span> <span class="blink">█</span></p>
 </div>
 
 <!-- webrings and credits -->
diff --git a/fedi-guide/index.html b/fedi-guide/index.html
index d21e31a..c6ae993 100644
--- a/fedi-guide/index.html
+++ b/fedi-guide/index.html
@@ -70,12 +70,12 @@
 <!-- fedi guide introduction -->
 <div id="fedi-guide" class="terminal">
     <div aria-hidden="true" class="term-titlebar">
-        <i class="ph-fill ph-terminal"></i>
+        <svg class="phosphor-icon term-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM77.66,173.66a8,8,0,0,1-11.32-11.32L100.69,128,66.34,93.66A8,8,0,0,1,77.66,82.34l40,40a8,8,0,0,1,0,11.32ZM192,176H128a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Z"></path></svg>
         <p><a href="#fedi-guide">~/fedi-guide</a></p>
         <div> <div id="minimize-btn"></div> <div id="maximize-btn"></div> <div id="close-btn"></div> </div>
     </div>
     <section>
-        <p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/fedi-guide</span> <span class="status"><i class="ph-fill ph-dot-outline"></i></span> ./fedi_guide</p>
+        <p aria-hidden="true" class="term-input"><span class="folder"><svg class="phosphor-icon" style="margin-right:-8px;" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M232,88V200.89A15.13,15.13,0,0,1,216.89,216H40a16,16,0,0,1-16-16V64A16,16,0,0,1,40,48H93.33a16.12,16.12,0,0,1,9.6,3.2L130.67,72H216A16,16,0,0,1,232,88Z"></path></svg> ~/fedi-guide</span> <span class="status"><i class="ph-fill ph-dot-outline"></i></span> ./fedi_guide</p>
         <p style="text-align: center; margin-bottom: -1em;">welcome to...</p>
         <h1 style="text-align: center;"><a href="#fedi-guide">ruben's <small>opinionated</small> fediverse guide!</a></h1>
         <p>hi there! this is my own attempt at making a guide to introduce users to the fediverse, as comfortably and easy as i can try to make it.</p>
@@ -106,7 +106,7 @@
 <!-- "fediverse"...?-->
 <div id="fedi-guide" class="terminal">
     <div aria-hidden="true" class="term-titlebar">
-        <i class="ph-fill ph-terminal"></i>
+        <svg class="phosphor-icon term-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM77.66,173.66a8,8,0,0,1-11.32-11.32L100.69,128,66.34,93.66A8,8,0,0,1,77.66,82.34l40,40a8,8,0,0,1,0,11.32ZM192,176H128a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Z"></path></svg>
         <p><a href="#fedi-guide">"fediverse"...?</a></p>
         <div> <div id="minimize-btn"></div> <div id="maximize-btn"></div> <div id="close-btn"></div> </div>
     </div>
diff --git a/index.html b/index.html
index 37fd024..7f19b02 100644
--- a/index.html
+++ b/index.html
@@ -26,34 +26,34 @@
 
 <!-- top navbar -->
 <div class="navbar">
-    <a class="nav-base nav-baselink" href="/"><i class="ph-bold ph-squares-four"></i> synth <small>dot</small> download!</a>
+    <a class="nav-base nav-baselink" href="/"><svg class="phosphor-icon" style="fill:var(--base) !important;" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M100,36H56A20,20,0,0,0,36,56v44a20,20,0,0,0,20,20h44a20,20,0,0,0,20-20V56A20,20,0,0,0,100,36ZM96,96H60V60H96ZM200,36H156a20,20,0,0,0-20,20v44a20,20,0,0,0,20,20h44a20,20,0,0,0,20-20V56A20,20,0,0,0,200,36Zm-4,60H160V60h36Zm-96,40H56a20,20,0,0,0-20,20v44a20,20,0,0,0,20,20h44a20,20,0,0,0,20-20V156A20,20,0,0,0,100,136Zm-4,60H60V160H96Zm104-60H156a20,20,0,0,0-20,20v44a20,20,0,0,0,20,20h44a20,20,0,0,0,20-20V156A20,20,0,0,0,200,136Zm-4,60H160V160h36Z"></path></svg> synth <small>dot</small> download!</a>
     <details class="nav-base nav-baselink-mobile">
-        <summary><i style="pointer-events:none;" class="ph-bold ph-squares-four"></i> s <i style="pointer-events:none;" class="ph-bold ph-dot"></i> d!</summary>
+        <summary><svg class="phosphor-icon" style="fill:var(--base) !important;pointer-events:none;" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M100,36H56A20,20,0,0,0,36,56v44a20,20,0,0,0,20,20h44a20,20,0,0,0,20-20V56A20,20,0,0,0,100,36ZM96,96H60V60H96ZM200,36H156a20,20,0,0,0-20,20v44a20,20,0,0,0,20,20h44a20,20,0,0,0,20-20V56A20,20,0,0,0,200,36Zm-4,60H160V60h36Zm-96,40H56a20,20,0,0,0-20,20v44a20,20,0,0,0,20,20h44a20,20,0,0,0,20-20V156A20,20,0,0,0,100,136Zm-4,60H60V160H96Zm104-60H156a20,20,0,0,0-20,20v44a20,20,0,0,0,20,20h44a20,20,0,0,0,20-20V156A20,20,0,0,0,200,136Zm-4,60H160V160h36Z"></path></svg> s <svg class="phosphor-icon" style="fill:var(--base) !important;pointer-events:none;" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M144,128a16,16,0,1,1-16-16A16,16,0,0,1,144,128Z"></path></svg> d!</summary>
         <ul>
             <li>
-                <a href="/"><i class="ph-bold ph-house"></i> home</a>
+                <a href="/"><svg class="phosphor-icon" style="padding-right:.2rem;" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M222.14,105.85l-80-80a20,20,0,0,0-28.28,0l-80,80A19.86,19.86,0,0,0,28,120v96a12,12,0,0,0,12,12h64a12,12,0,0,0,12-12V164h24v52a12,12,0,0,0,12,12h64a12,12,0,0,0,12-12V120A19.86,19.86,0,0,0,222.14,105.85ZM204,204H164V152a12,12,0,0,0-12-12H104a12,12,0,0,0-12,12v52H52V121.65l76-76,76,76Z"></path></svg> home</a>
             </li>
             <li>
-                <a href="/me"><i class="ph-bold ph-user"></i> about me</a>
+                <a href="/me"><svg class="phosphor-icon" style="padding-right:.2rem;" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M234.38,210a123.36,123.36,0,0,0-60.78-53.23,76,76,0,1,0-91.2,0A123.36,123.36,0,0,0,21.62,210a12,12,0,1,0,20.77,12c18.12-31.32,50.12-50,85.61-50s67.49,18.69,85.61,50a12,12,0,0,0,20.77-12ZM76,96a52,52,0,1,1,52,52A52.06,52.06,0,0,1,76,96Z"></path></svg> about me</a>
             </li>
             <li>
-                <a href="/blog"><i class="ph-bold ph-article"></i> blog</a>
+                <a href="/blog"><svg class="phosphor-icon" style="padding-right:.2rem;" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M216,36H40A20,20,0,0,0,20,56V200a20,20,0,0,0,20,20H216a20,20,0,0,0,20-20V56A20,20,0,0,0,216,36Zm-4,160H44V60H212ZM68,92A12,12,0,0,1,80,80h96a12,12,0,0,1,0,24H80A12,12,0,0,1,68,92Zm0,36a12,12,0,0,1,12-12h96a12,12,0,0,1,0,24H80A12,12,0,0,1,68,128Zm0,36a12,12,0,0,1,12-12h96a12,12,0,0,1,0,24H80A12,12,0,0,1,68,164Z"></path></svg> blog</a>
             </li>
             <li>
-                <a href="/#socials-and-contacts"><i class="ph-bold ph-link"></i> links</a>
+                <a href="/#socials-and-contacts"><svg class="phosphor-icon" style="padding-right:.2rem;" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M117.18,188.74a12,12,0,0,1,0,17l-5.12,5.12A58.26,58.26,0,0,1,70.6,228h0A58.62,58.62,0,0,1,29.14,127.92L63.89,93.17a58.64,58.64,0,0,1,98.56,28.11,12,12,0,1,1-23.37,5.44,34.65,34.65,0,0,0-58.22-16.58L46.11,144.89A34.62,34.62,0,0,0,70.57,204h0a34.41,34.41,0,0,0,24.49-10.14l5.11-5.12A12,12,0,0,1,117.18,188.74ZM226.83,45.17a58.65,58.65,0,0,0-82.93,0l-5.11,5.11a12,12,0,0,0,17,17l5.12-5.12a34.63,34.63,0,1,1,49,49L175.1,145.86A34.39,34.39,0,0,1,150.61,156h0a34.63,34.63,0,0,1-33.69-26.72,12,12,0,0,0-23.38,5.44A58.64,58.64,0,0,0,150.56,180h.05a58.28,58.28,0,0,0,41.47-17.17l34.75-34.75a58.62,58.62,0,0,0,0-82.91Z"></path></svg> links</a>
             </li>
         </ul>
     </details>
     <nav class="nav-base nav-links">
-        <a href="/"><i class="ph-bold ph-house"></i> home</a>
-        <i class="ph-bold ph-dot"></i>
-        <a href="/me"><i class="ph-bold ph-user"></i> about me</a>
-        <i class="ph-bold ph-dot"></i>
-        <a href="/blog"><i class="ph-bold ph-article"></i> blog</a>
-        <i class="ph-bold ph-dot"></i>
-        <a href="/#socials-and-contacts"><i class="ph-bold ph-link"></i> links</a>
+        <a href="/"><svg class="phosphor-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M222.14,105.85l-80-80a20,20,0,0,0-28.28,0l-80,80A19.86,19.86,0,0,0,28,120v96a12,12,0,0,0,12,12h64a12,12,0,0,0,12-12V164h24v52a12,12,0,0,0,12,12h64a12,12,0,0,0,12-12V120A19.86,19.86,0,0,0,222.14,105.85ZM204,204H164V152a12,12,0,0,0-12-12H104a12,12,0,0,0-12,12v52H52V121.65l76-76,76,76Z"></path></svg> home</a>
+        <svg class="phosphor-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M144,128a16,16,0,1,1-16-16A16,16,0,0,1,144,128Z"></path></svg>
+        <a href="/me"><svg class="phosphor-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M234.38,210a123.36,123.36,0,0,0-60.78-53.23,76,76,0,1,0-91.2,0A123.36,123.36,0,0,0,21.62,210a12,12,0,1,0,20.77,12c18.12-31.32,50.12-50,85.61-50s67.49,18.69,85.61,50a12,12,0,0,0,20.77-12ZM76,96a52,52,0,1,1,52,52A52.06,52.06,0,0,1,76,96Z"></path></svg> about me</a>
+        <svg class="phosphor-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M144,128a16,16,0,1,1-16-16A16,16,0,0,1,144,128Z"></path></svg>
+        <a href="/blog"><svg class="phosphor-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M216,36H40A20,20,0,0,0,20,56V200a20,20,0,0,0,20,20H216a20,20,0,0,0,20-20V56A20,20,0,0,0,216,36Zm-4,160H44V60H212ZM68,92A12,12,0,0,1,80,80h96a12,12,0,0,1,0,24H80A12,12,0,0,1,68,92Zm0,36a12,12,0,0,1,12-12h96a12,12,0,0,1,0,24H80A12,12,0,0,1,68,128Zm0,36a12,12,0,0,1,12-12h96a12,12,0,0,1,0,24H80A12,12,0,0,1,68,164Z"></path></svg> blog</a>
+        <svg class="phosphor-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M144,128a16,16,0,1,1-16-16A16,16,0,0,1,144,128Z"></path></svg>
+        <a href="/#socials-and-contacts"><svg class="phosphor-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M117.18,188.74a12,12,0,0,1,0,17l-5.12,5.12A58.26,58.26,0,0,1,70.6,228h0A58.62,58.62,0,0,1,29.14,127.92L63.89,93.17a58.64,58.64,0,0,1,98.56,28.11,12,12,0,1,1-23.37,5.44,34.65,34.65,0,0,0-58.22-16.58L46.11,144.89A34.62,34.62,0,0,0,70.57,204h0a34.41,34.41,0,0,0,24.49-10.14l5.11-5.12A12,12,0,0,1,117.18,188.74ZM226.83,45.17a58.65,58.65,0,0,0-82.93,0l-5.11,5.11a12,12,0,0,0,17,17l5.12-5.12a34.63,34.63,0,1,1,49,49L175.1,145.86A34.39,34.39,0,0,1,150.61,156h0a34.63,34.63,0,0,1-33.69-26.72,12,12,0,0,0-23.38,5.44A58.64,58.64,0,0,0,150.56,180h.05a58.28,58.28,0,0,0,41.47-17.17l34.75-34.75a58.62,58.62,0,0,0,0-82.91Z"></path></svg> links</a>
     </nav>
-    <p aria-hidden="true" class="nav-base nav-systray"><i class="ph-bold ph-bell"></i> <i class="ph-bold ph-speaker-high"></i> <i class="ph-bold ph-network"></i> <i class="ph-bold ph-battery-full"></i> <i class="ph-bold ph-power"></i></p>
+    <p aria-hidden="true" class="nav-base nav-systray"><svg class="phosphor-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M225.29,165.93C216.61,151,212,129.57,212,104a84,84,0,0,0-168,0c0,25.58-4.59,47-13.27,61.93A20.08,20.08,0,0,0,30.66,186,19.77,19.77,0,0,0,48,196H84.18a44,44,0,0,0,87.64,0H208a19.77,19.77,0,0,0,17.31-10A20.08,20.08,0,0,0,225.29,165.93ZM128,212a20,20,0,0,1-19.6-16h39.2A20,20,0,0,1,128,212ZM54.66,172C63.51,154,68,131.14,68,104a60,60,0,0,1,120,0c0,27.13,4.48,50,13.33,68Z"></path></svg> <svg class="phosphor-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M157.27,21.22a12,12,0,0,0-12.64,1.31L75.88,76H32A20,20,0,0,0,12,96v64a20,20,0,0,0,20,20H75.88l68.75,53.47A12,12,0,0,0,164,224V32A12,12,0,0,0,157.27,21.22ZM36,100H68v56H36Zm104,99.46L92,162.13V93.87l48-37.33ZM212,128a44,44,0,0,1-11,29.11,12,12,0,1,1-18-15.88,20,20,0,0,0,0-26.43,12,12,0,0,1,18-15.86A43.94,43.94,0,0,1,212,128Zm40,0a83.87,83.87,0,0,1-21.39,56,12,12,0,0,1-17.89-16,60,60,0,0,0,0-80,12,12,0,1,1,17.88-16A83.87,83.87,0,0,1,252,128Z"></path></svg> <svg class="phosphor-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M232,108H140V92h4a20,20,0,0,0,20-20V40a20,20,0,0,0-20-20H112A20,20,0,0,0,92,40V72a20,20,0,0,0,20,20h4v16H24a12,12,0,0,0,0,24H52v24H48a20,20,0,0,0-20,20v32a20,20,0,0,0,20,20H80a20,20,0,0,0,20-20V176a20,20,0,0,0-20-20H76V132H180v24h-4a20,20,0,0,0-20,20v32a20,20,0,0,0,20,20h32a20,20,0,0,0,20-20V176a20,20,0,0,0-20-20h-4V132h28a12,12,0,0,0,0-24ZM116,44h24V68H116ZM76,204H52V180H76Zm128,0H180V180h24Z"></path></svg> <svg class="phosphor-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M196,52H28A28,28,0,0,0,0,80v96a28,28,0,0,0,28,28H196a28,28,0,0,0,28-28V80A28,28,0,0,0,196,52Zm4,124a4,4,0,0,1-4,4H28a4,4,0,0,1-4-4V80a4,4,0,0,1,4-4H196a4,4,0,0,1,4,4Zm-16-72v48a12,12,0,0,1-24,0V104a12,12,0,0,1,24,0Zm-40,0v48a12,12,0,0,1-24,0V104a12,12,0,0,1,24,0Zm-40,0v48a12,12,0,0,1-24,0V104a12,12,0,0,1,24,0Zm-40,0v48a12,12,0,0,1-24,0V104a12,12,0,0,1,24,0Zm192,0v48a12,12,0,0,1-24,0V104a12,12,0,0,1,24,0Z"></path></svg> <svg class="phosphor-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M116,128V48a12,12,0,0,1,24,0v80a12,12,0,0,1-24,0Zm66.55-82a12,12,0,0,0-13.1,20.1C191.41,80.37,204,103,204,128a76,76,0,0,1-152,0c0-25,12.59-47.63,34.55-61.95A12,12,0,0,0,73.45,46C44.56,64.78,28,94.69,28,128a100,100,0,0,0,200,0C228,94.69,211.44,64.78,182.55,46Z"></path></svg></p>
 </div>
 
 <!-- simple site introduction -->
@@ -62,11 +62,11 @@
         having to use everything like *this*. maybe figure out how to do it all
     without needing to use everything in a div so we can only just use <p class="term-title"> or something -->
     <div aria-hidden="true" class="term-titlebar">
-        <i class="ph-fill ph-terminal"></i>
+        <svg class="phosphor-icon term-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM77.66,173.66a8,8,0,0,1-11.32-11.32L100.69,128,66.34,93.66A8,8,0,0,1,77.66,82.34l40,40a8,8,0,0,1,0,11.32ZM192,176H128a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Z"></path></svg>
         <p><a href="#site">~</a></p>
         <div> <div id="minimize-btn"></div> <div id="maximize-btn"></div> <div id="close-btn"></div> </div>
     </div>
-    <p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~</span> <span class="status">•</span> <span style="padding-left:11px;">cat index.html</span></p>
+    <p aria-hidden="true" class="term-input"><span class="folder"><svg class="phosphor-icon" style="margin-right:-8px;" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M232,88V200.89A15.13,15.13,0,0,1,216.89,216H40a16,16,0,0,1-16-16V64A16,16,0,0,1,40,48H93.33a16.12,16.12,0,0,1,9.6,3.2L130.67,72H216A16,16,0,0,1,232,88Z"></path></svg> ~</span> <span class="status">•</span> <span style="padding-left:11px;">cat index.html</span></p>
     <section>
         <p>hey! welcome to</p>
         <img id="logo" loading="lazy" src="/assets/synth-download.webp" alt="synth.download" /> 
@@ -78,12 +78,12 @@
 <!-- buttons -->
 <div id="buttons" class="terminal">
     <div aria-hidden="true" class="term-titlebar">
-        <i class="ph-fill ph-terminal"></i>
+        <svg class="phosphor-icon term-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM77.66,173.66a8,8,0,0,1-11.32-11.32L100.69,128,66.34,93.66A8,8,0,0,1,77.66,82.34l40,40a8,8,0,0,1,0,11.32ZM192,176H128a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Z"></path></svg>
         <p><a href="#buttons">~/buttons</a></p>
         <div> <div id="minimize-btn"></div> <div id="maximize-btn"></div> <div id="close-btn"></div> </div>
     </div>
     <section>
-        <p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/buttons</span> <span class="status">•</span> <span style="padding-left:11px;">cat buttons</span></p>
+        <p aria-hidden="true" class="term-input"><span class="folder"><svg class="phosphor-icon" style="margin-right:-8px;" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M232,88V200.89A15.13,15.13,0,0,1,216.89,216H40a16,16,0,0,1-16-16V64A16,16,0,0,1,40,48H93.33a16.12,16.12,0,0,1,9.6,3.2L130.67,72H216A16,16,0,0,1,232,88Z"></path></svg> ~/buttons</span> <span class="status">•</span> <span style="padding-left:11px;">cat buttons</span></p>
         <span style="color: var(--red);">if any are broken and/or missing, poke me.</span>
         <div class="buttons">
             <p>friends!</p>      
@@ -166,7 +166,7 @@
             </button>
         </div>
     </section>
-    <p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/buttons</span> <span class="status">•</span> <span class="blink">█</span></p>
+    <p aria-hidden="true" class="term-input"><span class="folder"><svg class="phosphor-icon" style="margin-right:-8px;" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M232,88V200.89A15.13,15.13,0,0,1,216.89,216H40a16,16,0,0,1-16-16V64A16,16,0,0,1,40,48H93.33a16.12,16.12,0,0,1,9.6,3.2L130.67,72H216A16,16,0,0,1,232,88Z"></path></svg> ~/buttons</span> <span class="status">•</span> <span class="blink">█</span></p>
 </div>
 
 <!-- webrings and credits -->
diff --git a/me/dni/index.html b/me/dni/index.html
index b89516b..9582060 100644
--- a/me/dni/index.html
+++ b/me/dni/index.html
@@ -58,12 +58,12 @@
 <!-- dni -->
 <div id="do-not-interact" class="terminal">
     <div aria-hidden="true" class="term-titlebar">
-        <i class="ph-fill ph-terminal"></i>
+        <svg class="phosphor-icon term-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM77.66,173.66a8,8,0,0,1-11.32-11.32L100.69,128,66.34,93.66A8,8,0,0,1,77.66,82.34l40,40a8,8,0,0,1,0,11.32ZM192,176H128a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Z"></path></svg>
         <p><a href="#do-not-interact">~/do-not-interact</a></p>
         <div> <div id="minimize-btn"></div> <div id="maximize-btn"></div> <div id="close-btn"></div> </div>
     </div>
     <section>
-        <p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/do-not-interact</span> <span class="status"><i class="ph-fill ph-dot-outline"></i></span> cat dni.txt</p>
+        <p aria-hidden="true" class="term-input"><span class="folder"><svg class="phosphor-icon" style="margin-right:-8px;" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M232,88V200.89A15.13,15.13,0,0,1,216.89,216H40a16,16,0,0,1-16-16V64A16,16,0,0,1,40,48H93.33a16.12,16.12,0,0,1,9.6,3.2L130.67,72H216A16,16,0,0,1,232,88Z"></path></svg> ~/do-not-interact</span> <span class="status"><i class="ph-fill ph-dot-outline"></i></span> cat dni.txt</p>
         <h1><a href="#do-not-interact">do not interact</a></h1>
         <p>my own dni list. also includes specific bits for other platforms such as the fediverse.</p>
         <span id="seperator"></span>
@@ -96,7 +96,7 @@
         <p>feel free to send a follow request if you think you pass all of the above or aren't on an instance i dislike a bit too much! <i class="ph-bold ph-heart" style="align-content:center;color:var(--green);"></i></p>
         <p>if you'd like to ask for reasons with the list above, feel free to send a DM.</p>
     </section>
-    <p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/do-not-interact</span> <span class="status"><i class="ph-fill ph-dot-outline"></i></span> <span class="blink">█</span></p>
+    <p aria-hidden="true" class="term-input"><span class="folder"><svg class="phosphor-icon" style="margin-right:-8px;" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M232,88V200.89A15.13,15.13,0,0,1,216.89,216H40a16,16,0,0,1-16-16V64A16,16,0,0,1,40,48H93.33a16.12,16.12,0,0,1,9.6,3.2L130.67,72H216A16,16,0,0,1,232,88Z"></path></svg> ~/do-not-interact</span> <span class="status"><i class="ph-fill ph-dot-outline"></i></span> <span class="blink">█</span></p>
 </div>
 
 <!-- webrings and credits -->
diff --git a/me/index.html b/me/index.html
index 564d407..184edeb 100644
--- a/me/index.html
+++ b/me/index.html
@@ -92,11 +92,11 @@
         having to use everything like *this*. maybe figure out how to do it all
     without needing to use everything in a div so we can only just use <p class="term-title"> or something -->
     <div aria-hidden="true" class="term-titlebar">
-        <i class="ph-fill ph-terminal"></i>
+        <svg class="phosphor-icon term-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM77.66,173.66a8,8,0,0,1-11.32-11.32L100.69,128,66.34,93.66A8,8,0,0,1,77.66,82.34l40,40a8,8,0,0,1,0,11.32ZM192,176H128a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Z"></path></svg>
         <p><a href="#sneexy">~/sneexy</a></p>
         <div> <div id="minimize-btn"></div> <div id="maximize-btn"></div> <div id="close-btn"></div> </div>
     </div>
-    <p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/sneexy</span> <span class="status">•</span> <span style="padding-left:11px;">cat sneexy</span></p>
+    <p aria-hidden="true" class="term-input"><span class="folder"><svg class="phosphor-icon" style="margin-right:-8px;" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M232,88V200.89A15.13,15.13,0,0,1,216.89,216H40a16,16,0,0,1-16-16V64A16,16,0,0,1,40,48H93.33a16.12,16.12,0,0,1,9.6,3.2L130.67,72H216A16,16,0,0,1,232,88Z"></path></svg> ~/sneexy</span> <span class="status">•</span> <span style="padding-left:11px;">cat sneexy</span></p>
     <section>
         <img id="logo" loading="lazy" src="/assets/sneexy.webp" alt="Sneexy" /> <br>
         <audio controls loop src="/assets/ASimpleMachine.mp3"></audio> <br>
@@ -131,12 +131,12 @@
 <!-- about me -->
 <div id="about-me" class="terminal">
     <div aria-hidden="true" class="term-titlebar">
-        <i class="ph-fill ph-terminal"></i>
+        <svg class="phosphor-icon term-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM77.66,173.66a8,8,0,0,1-11.32-11.32L100.69,128,66.34,93.66A8,8,0,0,1,77.66,82.34l40,40a8,8,0,0,1,0,11.32ZM192,176H128a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Z"></path></svg>
         <p><a href="#about-me">~/about-me</a></p>
         <div> <div id="minimize-btn"></div> <div id="maximize-btn"></div> <div id="close-btn"></div> </div>
     </div>
     <section>
-        <p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/about-me</span> <span class="status">•</span> <span style="padding-left:11px;">cat abt-me</span></p>
+        <p aria-hidden="true" class="term-input"><span class="folder"><svg class="phosphor-icon" style="margin-right:-8px;" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M232,88V200.89A15.13,15.13,0,0,1,216.89,216H40a16,16,0,0,1-16-16V64A16,16,0,0,1,40,48H93.33a16.12,16.12,0,0,1,9.6,3.2L130.67,72H216A16,16,0,0,1,232,88Z"></path></svg> ~/about-me</span> <span class="status">•</span> <span style="padding-left:11px;">cat abt-me</span></p>
         <h2><a href="#about-me">about me</a></h2>
         <p>some <span class="rainbow">gay</span> 18 year old synth computer enjoyer with adhd (and probably autism), with access to the internet and nothing to do. i like big round things.</p>
         <p>i consider myself to be a Professional Computer Toucher™. in both soulless boxes running either corporate or free software and robot-aligned beings <small>(you know, synths or protogens. love em!)</small>.</p>
@@ -149,18 +149,18 @@
         <p>Certified™ idiot <small>(i think this one is obvious)</small></p>
         <p>usually pretty tired and sometimes full of ideas that i just can't bring myself to execute.</p>
     </section>
-    <p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/about-me</span> <span class="status">•</span> <span class="blink">█</span></p>
+    <p aria-hidden="true" class="term-input"><span class="folder"><svg class="phosphor-icon" style="margin-right:-8px;" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M232,88V200.89A15.13,15.13,0,0,1,216.89,216H40a16,16,0,0,1-16-16V64A16,16,0,0,1,40,48H93.33a16.12,16.12,0,0,1,9.6,3.2L130.67,72H216A16,16,0,0,1,232,88Z"></path></svg> ~/about-me</span> <span class="status">•</span> <span class="blink">█</span></p>
 </div>
 
 <!-- socials -->
 <div id="socials-and-contacts" class="terminal">
     <div aria-hidden="true" class="term-titlebar">
-        <i class="ph-fill ph-terminal"></i>
+        <svg class="phosphor-icon term-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM77.66,173.66a8,8,0,0,1-11.32-11.32L100.69,128,66.34,93.66A8,8,0,0,1,77.66,82.34l40,40a8,8,0,0,1,0,11.32ZM192,176H128a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Z"></path></svg>
         <p><a href="#socials-and-contacts">~/socials-and-contacts</a></p>
         <div> <div id="minimize-btn"></div> <div id="maximize-btn"></div> <div id="close-btn"></div> </div>
     </div>
     <section>
-        <p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/socials-and-contacts</span> <span class="status">•</span> <span style="padding-left:11px;">cat socials</span></p>
+        <p aria-hidden="true" class="term-input"><span class="folder"><svg class="phosphor-icon" style="margin-right:-8px;" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M232,88V200.89A15.13,15.13,0,0,1,216.89,216H40a16,16,0,0,1-16-16V64A16,16,0,0,1,40,48H93.33a16.12,16.12,0,0,1,9.6,3.2L130.67,72H216A16,16,0,0,1,232,88Z"></path></svg> ~/socials-and-contacts</span> <span class="status">•</span> <span style="padding-left:11px;">cat socials</span></p>
         <h2><a href="#socials-and-contacts">socials n' contacts</a></h2>
         <p>these are my <i>public facing</i> accounts and contact methods. if i know you well, you may ask me for anything else. <small>(e.g discord, matrix etc.)</small></span></p>
         <div class="socials-contacts-list">
@@ -201,17 +201,17 @@
             </span>
         </div>
     </section>
-    <p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/socials-and-contacts</span> <span class="status">•</span> <span class="blink">█</span></p>
+    <p aria-hidden="true" class="term-input"><span class="folder"><svg class="phosphor-icon" style="margin-right:-8px;" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M232,88V200.89A15.13,15.13,0,0,1,216.89,216H40a16,16,0,0,1-16-16V64A16,16,0,0,1,40,48H93.33a16.12,16.12,0,0,1,9.6,3.2L130.67,72H216A16,16,0,0,1,232,88Z"></path></svg> ~/socials-and-contacts</span> <span class="status">•</span> <span class="blink">█</span></p>
 </div>
 
 <!-- "fun" facts -->
 <div id="fun-facts" class="terminal">
     <div aria-hidden="true" class="term-titlebar">
-        <i class="ph-fill ph-terminal"></i>
+        <svg class="phosphor-icon term-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM77.66,173.66a8,8,0,0,1-11.32-11.32L100.69,128,66.34,93.66A8,8,0,0,1,77.66,82.34l40,40a8,8,0,0,1,0,11.32ZM192,176H128a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Z"></path></svg>
         <p><a href="#fun-facts">~/fun-facts</a></p>
         <div> <div id="minimize-btn"></div> <div id="maximize-btn"></div> <div id="close-btn"></div> </div>
     </div>
-    <p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/fun-facts</span> <span class="status">•</span> <span style="padding-left:11px;">cat fun-facts</span></p>
+    <p aria-hidden="true" class="term-input"><span class="folder"><svg class="phosphor-icon" style="margin-right:-8px;" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M232,88V200.89A15.13,15.13,0,0,1,216.89,216H40a16,16,0,0,1-16-16V64A16,16,0,0,1,40,48H93.33a16.12,16.12,0,0,1,9.6,3.2L130.67,72H216A16,16,0,0,1,232,88Z"></path></svg> ~/fun-facts</span> <span class="status">•</span> <span style="padding-left:11px;">cat fun-facts</span></p>
     <section>
         <h2><a href="#fun-facts">"fun" facts</a></h2>
         <ul>
@@ -223,18 +223,18 @@
             <li>i am <i>still</i> <b><i>terrible</i></b> at spelling. still made mistakes even when making this site. online dictionaries my beloved.</li>
         </ul>
     </section>
-    <p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/fun-facts</span> <span class="status">•</span> <span class="blink">█</span></p>
+    <p aria-hidden="true" class="term-input"><span class="folder"><svg class="phosphor-icon" style="margin-right:-8px;" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M232,88V200.89A15.13,15.13,0,0,1,216.89,216H40a16,16,0,0,1-16-16V64A16,16,0,0,1,40,48H93.33a16.12,16.12,0,0,1,9.6,3.2L130.67,72H216A16,16,0,0,1,232,88Z"></path></svg> ~/fun-facts</span> <span class="status">•</span> <span class="blink">█</span></p>
 </div>
 
 <!-- quotes -->
 <div id="quotes" class="terminal">
     <div aria-hidden="true" class="term-titlebar">
-        <i class="ph-fill ph-terminal"></i>
+        <svg class="phosphor-icon term-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM77.66,173.66a8,8,0,0,1-11.32-11.32L100.69,128,66.34,93.66A8,8,0,0,1,77.66,82.34l40,40a8,8,0,0,1,0,11.32ZM192,176H128a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Z"></path></svg>
         <p><a href="#quotes">~/quotes</a></p>
         <div> <div id="minimize-btn"></div> <div id="maximize-btn"></div> <div id="close-btn"></div> </div>
     </div>
     <section>
-        <p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/quotes</span> <span class="status">•</span> <span style="padding-left:11px;">cat quotes</span></p>
+        <p aria-hidden="true" class="term-input"><span class="folder"><svg class="phosphor-icon" style="margin-right:-8px;" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M232,88V200.89A15.13,15.13,0,0,1,216.89,216H40a16,16,0,0,1-16-16V64A16,16,0,0,1,40,48H93.33a16.12,16.12,0,0,1,9.6,3.2L130.67,72H216A16,16,0,0,1,232,88Z"></path></svg> ~/quotes</span> <span class="status">•</span> <span style="padding-left:11px;">cat quotes</span></p>
         <h2><a href="#quotes">quotes</a></h2>
         <p>quotes left behind from friends! usually from the fediverse!</p>
         <div class="socials-contacts-list">
@@ -268,7 +268,7 @@
             </blockquote>
         </div>
     </section>
-    <p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/quotes</span> <span class="status">•</span> <span class="blink">█</span></p>
+    <p aria-hidden="true" class="term-input"><span class="folder"><svg class="phosphor-icon" style="margin-right:-8px;" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M232,88V200.89A15.13,15.13,0,0,1,216.89,216H40a16,16,0,0,1-16-16V64A16,16,0,0,1,40,48H93.33a16.12,16.12,0,0,1,9.6,3.2L130.67,72H216A16,16,0,0,1,232,88Z"></path></svg> ~/quotes</span> <span class="status">•</span> <span class="blink">█</span></p>
 </div>
 
 <!-- webrings and credits -->
diff --git a/style.css b/style.css
index 7cdc344..983b263 100644
--- a/style.css
+++ b/style.css
@@ -24,9 +24,10 @@ body {
         margin: -10px 0px -20px;
 
         /* terminal icon */
-        .ph-terminal {
-            font-size: 25px;
-            align-self: center;
+        .phosphor-icon.term-icon {
+            width: 25px !important;
+            height: 25px !important;
+            align-self: center !important;
         }
         
         /* title text */
@@ -70,6 +71,10 @@ body {
             background-color: var(--crust);
             border-radius: 3em;
             padding: 0px 12px 0px 12px;
+
+            .phosphor-icon {
+                fill: var(--sapphire) !important;
+            }
         }
         .status {
             color: var(--green);
@@ -337,6 +342,16 @@ h1 a:hover {
     text-decoration: underline;
 }
 
+/* the phosphor icons svgs */
+.phosphor-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+    padding-bottom: .2rem;
+    vertical-align: middle !important;
+    color: var(--text) !important;
+    fill: var(--text) !important;
+}
+
 /* line seperator */
 
 #seperator {
@@ -354,18 +369,6 @@ summary {
     display: flex;
 } 
 
-summary::after {
-    font-family: "Phosphor-Fill" !important;
-    content: '\e136';
-    align-self: center;
-    margin-left: .70em;
-    transition: 0.2s;
-}
-
-details[open] > summary::after {
-    transform: rotate(180deg);
-}
-
 /* styled summary styling */
 
 details.styled {
@@ -695,7 +698,7 @@ footer {
             color: var(--crust);
             padding: .3em;
             border-radius: 8px;
-            width: 5.4em;
+            width: 4.7em;
 
             i:not(:first-child) {
                 margin-left: -.5em;