diff --git a/core/models.ts b/core/models.ts
index e00f02b..a8930b7 100644
--- a/core/models.ts
+++ b/core/models.ts
@@ -231,6 +231,10 @@ export class SummonerIcon extends CommunityDragonObject {
     this.descriptions = json.descriptions.map((x: any) => new Description(x));
     this.rarities = json.rarities.map((x: any) => new Rarity(x));
   }
+
+  getImage(version: string): string {
+    return this.resolveClientPath({path: this.imagePath ?? "", args: {version: version, locale: "default"}});
+  }
 }
 
 export class WardSkin extends CommunityDragonObject {
diff --git a/pages/summoner-icons/index.vue b/pages/summoner-icons/index.vue
new file mode 100644
index 0000000..8c2f286
--- /dev/null
+++ b/pages/summoner-icons/index.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="d-flex flex-column gap-2">
+      <h1>Summoner Icons</h1>
+
+      <vc:search></vc:search>
+
+      <vc:pagination path="/SummonerIcon" list="@Model.Icons.Pages"></vc:pagination>
+
+
+      <div class="overflow-hidden rounded border border-light border-opacity-25 p-4">
+          <table class="sortable table table-borderless">
+              <thead>
+                  <tr>
+                      <th scope="col">Id</th>
+                      <th scope="col">Icon</th>
+                      <th scope="col">Title</th>
+                  </tr>
+              </thead>
+              <tbody>
+                <tr v-for="icon in icons" :key="icon.id">
+                        <th scope="row">
+                            <NuxtLink class="text-decoration-none text-light" :to="`/summoner-icons/overview/${icon.id}`">
+                                {{ icon.id }}
+                            </NuxtLink>
+                        </th>
+                        <td>
+                            <NuxtLink class="text-decoration-none text-light" :to="`/summoner-icons/overview/${icon.id}`">
+                                <img :src="icon.getImage('latest')" width="32" height="32" loading="lazy" onerror="this.onerror = null; this.src='/img/error.png'"/>
+                            </NuxtLink>
+                        </td>
+                        <td>
+                            <NuxtLink class="text-decoration-none text-light" :to="`/summoner-icons/overview/${icon.id}`">
+                                @icon.Title
+                            </NuxtLink>
+                        </td>
+                </tr>
+              </tbody>
+          </table>
+      </div>
+
+      <vc:pagination path="/SummonerIcon" list="@Model.Icons.Pages"></vc:pagination>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Pagination from '~/components/Pagination.vue';
+import useClient from '../../composables/useClient';
+
+const { client } = useClient();
+
+const icons = await client.summonerIcons.listAsync({locale: "default", version: "latest"});
+</script>
\ No newline at end of file