diff --git a/examples/portfolio/src/components/Icon.astro b/examples/portfolio/src/components/Icon.astro
index 661d6cccc..1eccb9991 100644
--- a/examples/portfolio/src/components/Icon.astro
+++ b/examples/portfolio/src/components/Icon.astro
@@ -25,6 +25,7 @@ const gradientId = 'icon-gradient-' + Math.round(Math.random() * 10e12).toString
viewBox="0 0 256 256"
aria-hidden="true"
stroke={gradient ? `url(#${gradientId})` : color}
+ fill={gradient ? `url(#${gradientId})` : color}
{...attrs}
>
diff --git a/examples/portfolio/src/components/IconPaths.ts b/examples/portfolio/src/components/IconPaths.ts
index 0238c8358..f2e959f62 100644
--- a/examples/portfolio/src/components/IconPaths.ts
+++ b/examples/portfolio/src/components/IconPaths.ts
@@ -1,4 +1,15 @@
-/** Icons adapted from https://phosphoricons.com/ */
+/**
+ * Icons adapted from https://phosphoricons.com/
+ *
+ * Want to add more?
+ * 1. Find the icon you want on Phosphor Icons.
+ * 2. Click “Copy SVG”.
+ * 3. Paste the SVG code in your editor.
+ * 4. Remove the `