diff --git a/ux.symfony.com/src/Controller/Icons/IconsController.php b/ux.symfony.com/src/Controller/Icons/IconsController.php
index 774bb221862..8da9f87531c 100644
--- a/ux.symfony.com/src/Controller/Icons/IconsController.php
+++ b/ux.symfony.com/src/Controller/Icons/IconsController.php
@@ -42,7 +42,7 @@ public function index(
         ];
         $iconSets = array_map(fn ($iconSet) => $iconSetRepository->find($iconSet), $iconSets);
 
-        return $this->render('icons/index.html.twig', [
+        return $this->render('ux_packages/icons.html.twig', [
             'package' => $packageRepository->find('icons'),
             'iconSets' => $iconSets,
         ]);
diff --git a/ux.symfony.com/src/Service/UxPackageRepository.php b/ux.symfony.com/src/Service/UxPackageRepository.php
index 0810e0e8def..483c7d47497 100644
--- a/ux.symfony.com/src/Service/UxPackageRepository.php
+++ b/ux.symfony.com/src/Service/UxPackageRepository.php
@@ -25,7 +25,7 @@ public function findAll(?string $query = null): array
                 'icons',
                 'UX Icons',
                 'app_icons',
-                '#fff',
+                'purple',
                 'linear-gradient(to bottom right, cyan, purple)',
                 'SVG icons made easy',
                 'Render SVG icons seamlessly from your Twig templates.',
diff --git a/ux.symfony.com/templates/icons/_aside.html.twig b/ux.symfony.com/templates/icons/_aside.html.twig
deleted file mode 100644
index 704224eb53a..00000000000
--- a/ux.symfony.com/templates/icons/_aside.html.twig
+++ /dev/null
@@ -1,24 +0,0 @@
-<aside style="background-color: var(--bs-secondary-bg-subtle);" class="mt-5">
-    <div class="container-fluid container-xxl p-4 p-md-5">
-        <div style="display: grid; gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));">
-            <twig:DocsLink
-                title="Documentation"
-                text="Get going with the official Symfony doc."
-                url="https://symfony.com/bundles/ux-icons/current/index.html"
-                icon="symfony"
-            />
-            <twig:DocsLink
-                title="Screencasts"
-                text="Watch UX screencasts on SymfonyCasts."
-                url="https://symfonycasts.com/screencast/stimulus"
-                icon="symfonycast"
-            />
-            <twig:DocsLink
-                title="Community"
-                text="Feedback · support · contributions."
-                url="https://github.com/symfony/ux"
-                icon="github"
-            />
-        </div>
-    </div>
-</aside>
diff --git a/ux.symfony.com/templates/icons/index.html.twig b/ux.symfony.com/templates/icons/index.html.twig
deleted file mode 100644
index eb0bbad4668..00000000000
--- a/ux.symfony.com/templates/icons/index.html.twig
+++ /dev/null
@@ -1,73 +0,0 @@
-{% extends 'base.html.twig' %}
-
-{% block javascripts %}
-    {{ parent() }}
-    <meta name="turbo-prefetch" content="false">
-{% endblock %}
-
-{% set meta = {
-    title: 'UX Icons - SVG icons made easy',
-    description: 'Render SVG icons seamlessly from your Twig templates. Find the perfect icon among 200,000 choices from the most popular icon sets.',
-    canonical: url('app_icons'),
-    social: {
-        title: 'Symfony UX Icons - SVG icons made easy',
-        description: 'Render SVG icons seamlessly from your Twig templates. Find the perfect icon among 200,000 choices from the most popular icon sets.',
-        image: {
-            url: absolute_url(asset(package.getSocialImage('1200x675'))),
-            type: 'image/png',
-            width: 1200,
-            height: 675,
-            alt: package.humanName ~ ' - Component Icon',
-        },
-    }
-} %}
-
-{% block content %}
-
-    <div class="hero">
-        <div class="container-fluid container-xxl px-4 pt-4 px-md-5">
-            <p class="eyebrows text-center mt-5">SVG icons made easy</p>
-            <h1 class="text-center">
-                <a href="{{ url('app_icons') }}">UX Icons</a>
-            </h1>
-            <div style="font-size: 1rem; line-height: 1.75rem;" class="mt-4 text-center demo-introduction">
-                <p>
-                    Render SVG icons seamlessly from your Twig templates.
-                <br/>
-                    Find the <code>perfect icon</code> among <code>200,000 choices</code> from the most popular <code>icon sets</code>.
-                </p>
-            </div>
-        </div>
-    </div>
-
-    <section class="container-fluid container-xxl px-4 px-md-5 py-3">
-        <twig:Icon:IconSearch/>
-    </section>
-
-    <section class="container-fluid container-xxl px-4 px-md-5 py-3">
-        <p class="eyebrows" style="margin: 4rem 0 0;">Iconic Packages</p>
-        <div class="d-md-flex justify-content-md-between text-center align-items-center text-md-start">
-            <h2 class="ubuntu pt-2 component-headlines">Popular <em class="rainbow-emphasis">Icon Sets</em></h2>
-        </div>
-        <div class="mt-3 mt-md-5">
-            <div style="display:grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 2rem;">
-                {% for icon_set in iconSets %}
-                    <twig:Icon:IconSetCard
-                        iconSet="{{ icon_set }}"
-                        index="{{ loop.index0 }}"
-                    />
-                {% endfor %}
-            </div>
-        </div>
-    </section>
-
-{% endblock %}
-
-{% block aside %}
-    {{ include('icons/_aside.html.twig') }}
-{% endblock %}
-
-{% block body %}
-    {{ parent() }}
-    <twig:Icon:IconModal/>
-{% endblock %}
diff --git a/ux.symfony.com/templates/ux_packages/icons.html.twig b/ux.symfony.com/templates/ux_packages/icons.html.twig
new file mode 100644
index 00000000000..03f4281d8dc
--- /dev/null
+++ b/ux.symfony.com/templates/ux_packages/icons.html.twig
@@ -0,0 +1,52 @@
+{% extends 'ux_packages/package.html.twig' %}
+
+{% block javascripts %}
+    {{ parent() }}
+    <meta name="turbo-prefetch" content="false">
+{% endblock %}
+
+{% block package_header %}
+    {% component PackageHeader with {
+        package: 'icons',
+        eyebrowText: 'SVG icons made easy'
+    } %}
+        {% block title_header %}
+            UX Icons
+        {% endblock %}
+
+        {% block sub_content %}
+            Render SVG icons seamlessly from your Twig templates.
+            <br/>
+            Find the <code>perfect icon</code> among <code>200,000 choices</code> from the most popular <code>icon sets</code>.
+        {% endblock %}
+    {% endcomponent %}
+{% endblock %}
+
+{% block package_content %}
+    <section class="container-fluid container-xxl px-4 px-md-5 py-3">
+        <twig:Icon:IconSearch/>
+    </section>
+
+    <section class="container-fluid container-xxl px-4 px-md-5 py-3">
+        <p class="eyebrows" style="margin: 4rem 0 0;">Iconic Packages</p>
+        <div class="d-md-flex justify-content-md-between text-center align-items-center text-md-start">
+            <h2 class="ubuntu pt-2 component-headlines">Popular <em class="rainbow-emphasis">Icon Sets</em></h2>
+        </div>
+        <div class="mt-3 mt-md-5">
+            <div style="display:grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 2rem;">
+                {% for icon_set in iconSets %}
+                    <twig:Icon:IconSetCard
+                        iconSet="{{ icon_set }}"
+                        index="{{ loop.index0 }}"
+                    />
+                {% endfor %}
+            </div>
+        </div>
+    </section>
+
+{% endblock %}
+
+{% block body %}
+    {{ parent() }}
+    <twig:Icon:IconModal/>
+{% endblock %}