diff --git a/docs/src/components/GitHubStats.svelte b/docs/src/components/GitHubStats.svelte
index 133cac1..95f454a 100644
--- a/docs/src/components/GitHubStats.svelte
+++ b/docs/src/components/GitHubStats.svelte
@@ -1,5 +1,4 @@
 <script>
-  import MyIcon from './MyIcon.astro';
   import { onMount } from 'svelte';
 
   let error = false;
@@ -33,12 +32,12 @@
 {#if !error && !loading}
   <div class="github">
     <a class="category" href="https://github.com/tomalaforge/angular-challenges">
-      <MyIcon name="star" />
+      <slot name="star"/>
       <div>{stargazersCount}</div>
     </a>
 
     <div class="category fork">
-      <MyIcon name="fork" viewBox="0 0 16 16" />
+      <slot name="fork"/>
       <div>{forksCount}</div>
     </div>
   </div>
diff --git a/docs/src/components/SiteTitle.astro b/docs/src/components/SiteTitle.astro
index 64177d9..f878f6b 100644
--- a/docs/src/components/SiteTitle.astro
+++ b/docs/src/components/SiteTitle.astro
@@ -1,6 +1,7 @@
 ---
 import Default from '@astrojs/starlight/components/SiteTitle.astro';
 import GitHubStats from './GitHubStats.svelte';
+import MyIcon from './MyIcon.astro';
 
 ---
 
@@ -8,6 +9,9 @@ import GitHubStats from './GitHubStats.svelte';
   <slot />
 </Default>
 
-<GitHubStats client:load />
+<GitHubStats client:load >
+  <MyIcon name="star" slot="star" />
+  <MyIcon name="fork" viewBox="0 0 16 16" slot="fork"/>
+</GitHubStats>