diff --git a/docs/assets/mingcute--file-info-line.svg b/docs/assets/mingcute--file-info-line.svg
new file mode 100644
index 0000000..ad90e0f
--- /dev/null
+++ b/docs/assets/mingcute--file-info-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><rect width="24" height="24" fill="none"/><g fill="none"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="#3b82f6" d="M13.586 2A2 2 0 0 1 15 2.586L19.414 7A2 2 0 0 1 20 8.414V20a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2ZM12 4H6v16h12V10h-4.5A1.5 1.5 0 0 1 12 8.5zm-.01 10c.558 0 1.01.452 1.01 1.01v1.124A1 1 0 0 1 12.5 18h-.49A1.01 1.01 0 0 1 11 16.99V16a1 1 0 1 1 0-2zm.01-3a1 1 0 1 1 0 2a1 1 0 0 1 0-2m2-6.586V8h3.586z"/></g></svg>
\ No newline at end of file
diff --git a/docs/assets/mingcute--file-zip-line.svg b/docs/assets/mingcute--file-zip-line.svg
new file mode 100644
index 0000000..3307918
--- /dev/null
+++ b/docs/assets/mingcute--file-zip-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><rect width="24" height="24" fill="none"/><g fill="none" fill-rule="evenodd"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="#14b8a6" d="M13.586 2a2 2 0 0 1 1.284.467l.13.119L19.414 7a2 2 0 0 1 .578 1.238l.008.176V20a2 2 0 0 1-1.85 1.995L18 22H6a2 2 0 0 1-1.995-1.85L4 20V4a2 2 0 0 1 1.85-1.995L6 2zm0 2H6v16h3v-2.5a1.5 1.5 0 0 1 1.356-1.493L10.5 16h3a1.5 1.5 0 0 1 1.493 1.356L15 17.5V20h3V8.414zM13 18h-2v2h2zm-2-5a1 1 0 1 1 0 2h-1a1 1 0 1 1 0-2zm3-2a1 1 0 1 1 0 2h-1a1 1 0 1 1 0-2zm-3-2a1 1 0 0 1 .117 1.993L11 11h-1a1 1 0 0 1-.117-1.993L10 9zm3-2a1 1 0 0 1 .117 1.993L14 9h-1a1 1 0 0 1-.117-1.993L13 7z"/></g></svg>
\ No newline at end of file
diff --git a/docs/assets/mingcute--magic-3-line.svg b/docs/assets/mingcute--magic-3-line.svg
new file mode 100644
index 0000000..4335d7f
--- /dev/null
+++ b/docs/assets/mingcute--magic-3-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><rect width="24" height="24" fill="none"/><g fill="none" fill-rule="evenodd"><path d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z"/><path fill="#ec4899" d="m8.464 4.222l12.021 12.02a1.01 1.01 0 0 1 0 1.415l-2.828 2.828a1 1 0 0 1-1.414 0L4.222 8.465a2 2 0 0 1 0-2.829l1.414-1.414a2 2 0 0 1 2.828 0M5 11.5c.444 0 .758.269.95.632l.053.112a3.87 3.87 0 0 0 1.385 1.672l.21.128c.358.202.62.525.62.955c0 .38-.203.68-.5.882l-.115.072a3.8 3.8 0 0 0-1.49 1.573l-.105.22c-.187.422-.512.754-1.008.754c-.452 0-.761-.274-.954-.641l-.054-.113a3.83 3.83 0 0 0-1.384-1.664l-.206-.126c-.359-.202-.621-.526-.621-.957c0-.383.208-.68.505-.883l.116-.072a3.76 3.76 0 0 0 1.482-1.565l.113-.236C4.18 11.826 4.51 11.5 5 11.5m5.586-2.328l-1.414 1.414l7.778 7.778l1.414-1.414zm6.845-1.77c.238-.481.8-.513 1.082-.097l.056.096c.216.435.574.804 1.043 1.04c.494.246.501.87.004 1.116a2.35 2.35 0 0 0-.954.872l-.09.164c-.24.486-.804.518-1.085.102l-.056-.096a2.3 2.3 0 0 0-.872-.945l-.17-.094c-.466-.232-.497-.79-.097-1.063l.092-.054a2.33 2.33 0 0 0 .957-.878l.09-.164ZM7.051 5.635L5.635 7.05l2.121 2.122l1.415-1.415L7.05 5.636ZM13.5 2c.294 0 .51.167.654.399l.06.11c.238.477.618.894 1.11 1.187l.196.107c.275.137.48.373.48.697c0 .283-.157.5-.38.64l-.105.06c-.52.26-.932.654-1.205 1.115l-.1.183c-.14.284-.374.502-.71.502c-.294 0-.51-.167-.654-.399l-.06-.11a2.9 2.9 0 0 0-1.11-1.187l-.196-.107c-.275-.137-.48-.374-.48-.698c0-.282.157-.499.38-.64l.105-.058c.52-.262.932-.654 1.205-1.116l.1-.183c.14-.284.374-.502.71-.502"/></g></svg>
\ No newline at end of file
diff --git a/docs/assets/mingcute--microphone-line.svg b/docs/assets/mingcute--microphone-line.svg
new file mode 100644
index 0000000..90668c4
--- /dev/null
+++ b/docs/assets/mingcute--microphone-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><rect width="24" height="24" fill="none"/><g fill="none"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="#f97316" d="M3.868 4.368a7 7 0 0 1 11.74 6.656l-.069.256l3.4 4.372a2.7 2.7 0 0 1 .387 2.632c.1.03.222.046.372.016l.118-.031a1 1 0 0 1 .632 1.897a2.77 2.77 0 0 1-2.546-.389a2.7 2.7 0 0 1-2.586-.22l-.164-.117l-4.372-3.401a7 7 0 0 1-6.911-11.67ZM14.577 13.3a7 7 0 0 1-1.777 1.777l3.58 2.784a.7.7 0 0 0 .98-.981zM12.92 6.459l-.203.336a20 20 0 0 1-2.84 3.584a20 20 0 0 1-3.583 2.839l-.336.203a5.001 5.001 0 0 0 6.962-6.962m-1.498-1.41a5.002 5.002 0 0 0-6.874 6.874l.324-.183a18 18 0 0 0 3.592-2.775a18 18 0 0 0 2.552-3.223l.116-.19l.203-.347z"/></g></svg>
\ No newline at end of file
diff --git a/docs/assets/mingcute--photo-album-line.svg b/docs/assets/mingcute--photo-album-line.svg
new file mode 100644
index 0000000..2387bfc
--- /dev/null
+++ b/docs/assets/mingcute--photo-album-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><rect width="24" height="24" fill="none"/><g fill="none"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="#22c55e" d="M20 6a2 2 0 0 1 2 2v11.333a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm-8.268 7.944L7.136 18.54l-.066.06l-.07.054v.68h13v-.68l-.07-.053l-.066-.06l-2.24-2.24l-.353.354l.055.055a1 1 0 0 1-1.32 1.497l-.094-.083zM17 3a2 2 0 0 1 1.995 1.85L19 5H5a1 1 0 0 0-.993.883L4 6v12a2 2 0 0 1-1.995-1.85L2 16V6a3 3 0 0 1 2.824-2.995L5 3zm3 5H7v7.848L10.848 12a1.25 1.25 0 0 1 1.768 0l3.241 3.24l.884-.883a1.25 1.25 0 0 1 1.768 0L20 15.848zm-3.5 1.5a1.5 1.5 0 1 1 0 3a1.5 1.5 0 0 1 0-3"/></g></svg>
\ No newline at end of file
diff --git a/docs/assets/mingcute--video-line.svg b/docs/assets/mingcute--video-line.svg
new file mode 100644
index 0000000..47632ca
--- /dev/null
+++ b/docs/assets/mingcute--video-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><rect width="24" height="24" fill="none"/><g fill="none" fill-rule="evenodd"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="#a855f7" d="M20 3a2 2 0 0 1 1.995 1.85L22 5v14a2 2 0 0 1-1.85 1.995L20 21H4a2 2 0 0 1-1.995-1.85L2 19V5a2 2 0 0 1 1.85-1.995L4 3zm0 2H4v14h16zm-9.66 2.638l.518.23l.338.16l.387.19l.43.218l.47.25l.507.28l.266.152l.518.305l.474.292l.43.273l.38.253l.48.33l.364.263l.095.07a1.234 1.234 0 0 1 0 1.98l-.323.235l-.44.308l-.356.239l-.405.263l-.453.283l-.499.3l-.534.309l-.509.282l-.471.25l-.43.22l-.386.188l-.622.288l-.23.1a1.234 1.234 0 0 1-1.714-.99l-.058-.565l-.032-.374l-.042-.664l-.023-.508l-.015-.555l-.004-.294l-.002-.305q0-.31.006-.6l.015-.555l.023-.507l.027-.457l.03-.401l.075-.744a1.235 1.235 0 0 1 1.715-.992m.611 2.501l-.436-.218l-.029.487l-.022.551l-.013.61l-.002.325l.002.325l.013.609l.01.283l.026.52l.015.235l.434-.218l.487-.256l.535-.294l.284-.162l.551-.326l.494-.306l.436-.28l.196-.13l-.407-.27l-.466-.294a30 30 0 0 0-.803-.48l-.283-.161l-.534-.294z"/></g></svg>
\ No newline at end of file
diff --git a/docs/examples.md b/docs/examples.md
index 5597b6f..e49b66f 100644
--- a/docs/examples.md
+++ b/docs/examples.md
@@ -11,24 +11,36 @@ features:
       details: Extract various metadata from an input media file.
       link: /examples/metadata-extraction
       target: _self
+      icon:
+        src: ./assets/mingcute--file-info-line.svg
     - title: Thumbnail generation
       details: Generate multiple small thumbnails for a video track.
       link: /examples/thumbnail-generation
       target: _self
+      icon:
+        src: ./assets/mingcute--photo-album-line.svg
     - title: Media player (advanced)
       details: "A full video & audio media player, implemented from scratch with Mediabunny, with microsecond playback accuracy."
       link: /examples/media-player
       target: _self
+      icon:
+        src: ./assets/mingcute--video-line.svg
     - title: File compression
       details: Convert an input file to a highly-compressed MP4 file.
       link: /examples/file-compression
       target: _self
+      icon:
+        src: ./assets/mingcute--file-zip-line.svg
     - title: Procedural video generation
       details: Generate a video file as fast as the hardware allows.
       link: /examples/procedural-generation
       target: _self
+      icon:
+        src: ./assets/mingcute--magic-3-line.svg
     - title: Live recording
       details: Record a video from live sources and stream it to a video element.
       link: /examples/live-recording	
       target: _self
+      icon:
+        src: ./assets/mingcute--microphone-line.svg
 ---
diff --git a/docs/index.md b/docs/index.md
index 3e72f87..a5dc294 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -108,6 +108,14 @@ const sponsors = {
 	</div>
 </div>
 
+<div class="mx-auto w-full max-w-92 text-xl mt-20">
+
+```bash
+npm install mediabunny
+```
+
+</div>
+
 <div class="space-y-16 mt-18">
 <div class="flex flex-col lg:flex-row lg:gap-20 lg:items-center">
 <div class="flex-1 min-w-0">
diff --git a/examples/file-compression/index.html b/examples/file-compression/index.html
index d424ac6..6ec1051 100644
--- a/examples/file-compression/index.html
+++ b/examples/file-compression/index.html
@@ -12,7 +12,7 @@
 	</head>
 
 	<body class="flex flex-col items-center py-10 bg-zinc-50 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 px-2">
-		<h1 class="text-3xl font-bold text-teal-800 dark:text-teal-200 text-center">File compression example</h1>
+		<h1 class="text-3xl font-bold text-teal-500 text-center">File compression example</h1>
 		<p class="max-w-lg text-center">Select or drop a media file, and Mediabunny will convert it to a heavily-compressed MP4 file.</p>
 
 		<div class="flex gap-2 mt-4">
diff --git a/examples/live-recording/index.html b/examples/live-recording/index.html
index 2472c1f..92aa8bf 100644
--- a/examples/live-recording/index.html
+++ b/examples/live-recording/index.html
@@ -12,7 +12,7 @@
 	</head>
 
 	<body class="flex flex-col items-center py-10 bg-zinc-50 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 px-2">
-		<h1 class="text-3xl font-bold text-orange-800 dark:text-orange-200 text-center">Live recording example</h1>
+		<h1 class="text-3xl font-bold text-orange-500 text-center">Live recording example</h1>
 		<p class="max-w-lg text-center">The live canvas state and your microphone input will be written into a fragmented MP4 file and live-streamed to a <code>&lt;video&gt;</code> element.</p>
 
 		<button id="toggle-button" class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 px-5 py-2 mt-4">
diff --git a/examples/media-player/index.html b/examples/media-player/index.html
index 6403599..a5d5e62 100644
--- a/examples/media-player/index.html
+++ b/examples/media-player/index.html
@@ -12,7 +12,7 @@
 	</head>
 
 	<body class="flex flex-col items-center py-10 bg-zinc-50 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 px-2 h-svh">
-		<h1 class="text-3xl font-bold text-purple-800 dark:text-purple-200 text-center">Media player example</h1>
+		<h1 class="text-3xl font-bold text-purple-500 text-center">Media player example</h1>
 		<p class="max-w-lg text-center">Select or drop a media file, and a fully custom, Mediabunny-powered player will appear.</p>
 
 		<div class="flex gap-2 mt-4">
diff --git a/examples/metadata-extraction/index.html b/examples/metadata-extraction/index.html
index 273d34b..35d45d8 100644
--- a/examples/metadata-extraction/index.html
+++ b/examples/metadata-extraction/index.html
@@ -12,7 +12,7 @@
 	</head>
 
 	<body class="flex flex-col items-center py-10 bg-zinc-50 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 px-2">
-		<h1 class="text-3xl font-bold text-blue-800 dark:text-blue-200 text-center">Metadata extraction example</h1>
+		<h1 class="text-3xl font-bold text-blue-500 text-center">Metadata extraction example</h1>
 		<p class="max-w-lg text-center">Select or drop a media file, and Mediabunny will start extracting various metadata about that file.</p>
 
 		<div class="flex gap-2 mt-4">
diff --git a/examples/procedural-generation/index.html b/examples/procedural-generation/index.html
index 6193cf3..8736d85 100644
--- a/examples/procedural-generation/index.html
+++ b/examples/procedural-generation/index.html
@@ -12,7 +12,7 @@
 	</head>
 
 	<body class="flex flex-col items-center py-10 bg-zinc-50 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 px-2">
-		<h1 class="text-3xl font-bold text-teal-800 dark:text-teal-200 text-center">Procedural generation example</h1>
+		<h1 class="text-3xl font-bold text-pink-500 text-center">Procedural generation example</h1>
 		<p class="max-w-lg text-center">Using Mediabunny, this page will procedurally generate a video of musical bouncing balls as fast as possible.</p>
 
 		<div class="flex flex-col gap-6 mt-8 w-full max-w-80">
diff --git a/examples/thumbnail-generation/index.html b/examples/thumbnail-generation/index.html
index e6e43f1..dcda928 100644
--- a/examples/thumbnail-generation/index.html
+++ b/examples/thumbnail-generation/index.html
@@ -12,7 +12,7 @@
 	</head>
 
 	<body class="flex flex-col items-center py-10 bg-gray-50 text-gray-800 dark:bg-zinc-900 dark:text-zinc-200 px-2">
-		<h1 class="text-3xl font-bold text-emerald-800 dark:text-emerald-200 text-center">Thumbnail generation example</h1>
+		<h1 class="text-3xl font-bold text-green-500 text-center">Thumbnail generation example</h1>
 		<p class="max-w-lg text-center">Select or drop a media file, and Mediabunny will extract video thumbnails for it.</p>
 
 		<div class="flex gap-2 mt-4">