diff --git a/.vitepress/theme/components/Identicon.vue b/.vitepress/theme/components/Identicon.vue
new file mode 100644
index 00000000..ada63e44
--- /dev/null
+++ b/.vitepress/theme/components/Identicon.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { useLocalStorage } from '@vueuse/core'
+import { createIdenticon } from 'identicons-esm'
+import { ref, watch } from 'vue'
+
+const initialValue = 'NQ07 0000 0000 0000 0000 0000 0000 0000 0000'
+const input = useLocalStorage('identicon', initialValue)
+const identicon = ref<string>('')
+
+watch(input, async () => {
+  if (!input.value)
+    return
+  identicon.value = await createIdenticon(input.value, { format: 'image/svg+xml' })
+}, { immediate: true })
+
+watch(input, async () => {
+  if (input.value === 'nimiq') {
+    const { default: confetti } = await import('canvas-confetti')
+    confetti({ particleCount: 300, spread: 360, origin: { y: 0.6 } })
+  }
+})
+</script>
+
+<template>
+  <form nq-mt-32 relative @submit.prevent>
+    <input v-model="input" type="text" placeholder="Enter something..." rounded-full text-lg px-16 w-full mx-auto nq-input-box py-4>
+    <template v-if="input === initialValue">
+      <svg absolute top-0 right--16 op-30 version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 279.15007472985735 165.48889560262165" width="279.15007472985735" height="165.48889560262165" scale-60>
+        <g stroke-linecap="round"><g transform="translate(130.41382362914226 106.16812588849137) rotate(0 -59.645037997946844 -47.79570511661953)"><path d="M0.77 1.07 C-12.46 -3.4, -59.08 -9.78, -79.13 -25.98 C-99.17 -42.19, -112.66 -84.37, -119.52 -96.17 M-0.29 0.58 C-13.17 -3.8, -56.89 -8.78, -76.91 -24.73 C-96.93 -40.69, -113.13 -83.23, -120.41 -95.15" stroke="#1e1e1e" stroke-width="2" fill="none" /></g><g transform="translate(130.41382362914226 106.16812588849137) rotate(0 -59.645037997946844 -47.79570511661953)"><path d="M-119.78 -96.3 L-107.95 -84.02 L-120.85 -78.72 L-118.82 -95.84" stroke="none" stroke-width="0" fill="#1e1e1e" fill-rule="evenodd" /><path d="M-120.41 -95.15 C-115.24 -93.44, -113.47 -89.58, -108.62 -85.88 M-120.41 -95.15 C-117.01 -93.34, -114.79 -90.12, -108.62 -85.88 M-108.62 -85.88 C-109.85 -84.12, -112.19 -82.78, -119.94 -80.16 M-108.62 -85.88 C-111.12 -83.99, -113.6 -82.71, -119.94 -80.16 M-119.94 -80.16 C-120.16 -83.62, -119.06 -87.29, -120.41 -95.15 M-119.94 -80.16 C-120.36 -85.44, -119.42 -89.46, -120.41 -95.15 M-120.41 -95.15 C-120.41 -95.15, -120.41 -95.15, -120.41 -95.15 M-120.41 -95.15 C-120.41 -95.15, -120.41 -95.15, -120.41 -95.15" stroke="#1e1e1e" stroke-width="2" fill="none" /></g></g></svg>
+      <p style="font-family: Segoe Script, Bradley Hand, Comic Sans;" absolute right-0 top-90 rotate--10 text-sm op-80>
+        You can write anything!
+      </p>
+    </template>
+    <p v-if="input === 'nimiq'" absolute right-0 top-36 text-xs op-80>
+      You found the secret word! Take a cookie 🍪
+    </p>
+    <p v-if="input === 'albatross'" absolute right-0 top-36 text-xs op-80 text-right>
+      Nope. Keep trying.
+      <br>
+      Nonetheless, this identicon rocks 🤘
+    </p>
+  </form>
+  <img :src="identicon" alt="Identicon" class="not-zoomable" nq-mt-16 size-180 mx-auto>
+</template>
diff --git a/.vitepress/theme/components/IdenticonBuilder.vue b/.vitepress/theme/components/IdenticonBuilder.vue
new file mode 100644
index 00000000..5d8f0855
--- /dev/null
+++ b/.vitepress/theme/components/IdenticonBuilder.vue
@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import type { Colors, Section, Sections } from 'identicons-esm'
+import { useLocalStorage } from '@vueuse/core'
+import { ensambleSvg, formatIdenticon, getIdenticonsParams, colors as identiconColors, identiconFeatures } from 'identicons-esm'
+import { TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger } from 'radix-vue'
+import { computed, onMounted, ref } from 'vue'
+import { downloadBlob } from '../composables/icons/pack'
+import PillSelector from './PillSelector.vue'
+
+const initialParams = ref<{ sections: Sections, colors: Colors }>()
+
+interface Svg { path: string, svg: string }
+
+const entries = Object.entries(identiconFeatures)
+const bottom = ref<Svg[]>(entries.filter(([path]) => path.includes('bottom')).map(([path, svg]) => ({ path, svg })))
+const top = ref<Svg[]>(entries.filter(([path]) => path.includes('top')).map(([path, svg]) => ({ path, svg })))
+const face = ref<Svg[]>(entries.filter(([path]) => path.includes('face')).map(([path, svg]) => ({ path, svg })))
+const sides = ref<Svg[]>(entries.filter(([path]) => path.includes('sides')).map(([path, svg]) => ({ path, svg })))
+
+const options = Object.fromEntries(['bottom', 'top', 'face', 'sides', 'colors'].map(value => ([value, { label: value }])))
+const activeSection = useLocalStorage<Section | 'colors'>('active-variant', 'bottom')
+const activeFeatures = computed(() => {
+  if (activeSection.value === 'bottom')
+    return bottom.value
+  if (activeSection.value === 'top')
+    return top.value
+  if (activeSection.value === 'face')
+    return face.value
+  if (activeSection.value === 'sides')
+    return sides.value
+  return []
+})
+const activeBottom = ref('')
+const activeTop = ref('')
+const activeFace = ref('')
+const activeSides = ref('')
+const activeMain = ref('')
+const activeAccent = ref('')
+const activeBackground = ref('')
+const colors = computed(() => ({
+  main: activeMain.value,
+  accent: activeAccent.value,
+  background: activeBackground.value,
+}))
+const sections = computed(() => ({
+  bottom: activeBottom.value,
+  top: activeTop.value,
+  face: activeFace.value,
+  sides: activeSides.value,
+}))
+onMounted(async () => {
+  initialParams.value = await getIdenticonsParams('nimiq')
+  reset()
+})
+
+function reset() {
+  activeBottom.value = initialParams.value?.sections.bottom
+  activeTop.value = initialParams.value?.sections.top
+  activeFace.value = initialParams.value?.sections.face
+  activeSides.value = initialParams.value?.sections.sides
+  activeMain.value = initialParams.value?.colors.main
+  activeAccent.value = initialParams.value?.colors.accent
+  activeBackground.value = initialParams.value?.colors.background
+}
+
+const isDirty = computed(() => {
+  return activeBottom.value !== initialParams.value?.sections.bottom
+    || activeTop.value !== initialParams.value?.sections.top
+    || activeFace.value !== initialParams.value?.sections.face
+    || activeSides.value !== initialParams.value?.sections.sides
+    || activeMain.value !== initialParams.value?.colors.main
+    || activeAccent.value !== initialParams.value?.colors.accent
+    || activeBackground.value !== initialParams.value?.colors.background
+})
+
+const identicon = computed(() => ensambleSvg({ colors: colors.value, sections: sections.value }))
+
+function getSvg(svgContent: string) {
+  const { accent, main } = initialParams.value?.colors || { accent: '#000', main: '#fff' }
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160"><g fill="${accent}" clip-path="url(#a)" color="${main}">${svgContent}</g></svg>`
+}
+
+function isSelected(svg: string) {
+  switch (activeSection.value) {
+    case 'bottom':
+      return activeBottom.value === svg
+    case 'top':
+      return activeTop.value === svg
+    case 'face':
+      return activeFace.value === svg
+    case 'sides':
+      return activeSides.value === svg
+  }
+}
+
+function select(svg: string) {
+  switch (activeSection.value) {
+    case 'bottom':
+      activeBottom.value = svg
+      break
+    case 'top':
+      activeTop.value = svg
+      break
+    case 'face':
+      activeFace.value = svg
+      break
+    case 'sides':
+      activeSides.value = svg
+      break
+  }
+}
+
+async function downloadSvg() {
+  const svg = await formatIdenticon(identicon.value, { format: 'svg' })
+  downloadBlob(new Blob([svg], { type: 'image/svg+xml;charset=utf-8' }), 'identicon.svg')
+}
+</script>
+
+<template>
+  <div class="nq-no-prose">
+    <div nq-mb-32 flex="~ items-end justify-center wrap gap-x-16" relative>
+      <div nq-mb-32 size-80 v-html="identicon" />
+      <div nq-mb-32 size-128 v-html="identicon" />
+      <div nq-mb-32 size-196 v-html="identicon" />
+      <TooltipProvider>
+        <TooltipRoot>
+          <TooltipTrigger bottom-40 op-80 aria-label="Let's play a game" flex="~ items-center gap-8" absolute right-0>
+            <div i-nimiq:basketball text-16 />
+          </TooltipTrigger>
+          <TooltipPortal>
+            <TooltipContent z-100 side="bottom" :collision-padding="8" :side-offset="4" align="start" bg="gradient-neutral dark:neutral-100" border-subtle-light text-white p-20 pb-12 rounded-8 max-w-360 text-14 border="base white/20" nq-prose-compact>
+              <h3>
+                Let's play a game!
+              </h3>
+
+              <p mt-12>
+                Using the text input on top of this page, you need to find the secret word that creates the identicon.
+              </p>
+
+              <button v-if="isDirty" nq-pill nq-pill-blue px-12 py-2 font-semibold mb-8 nq-mt-24 @click="reset">
+                See identicon
+              </button>
+              <TooltipArrow as-child>
+                <div i-nimiq:tooltip-triangle text-darkblue rotate-180 h-7 />
+              </TooltipArrow>
+            </TooltipContent>
+          </TooltipPortal>
+        </TooltipRoot>
+      </TooltipProvider>
+      <div flex="~ col items-end" absolute top-0 right-0>
+        <span nq-label text-10 hidden sm:block>Download</span>
+        <button nq-ghost-btn mt-8 text-12 px-4 bg-neutral-0 py-2 font-semibold op-80 @click="downloadSvg">
+          SVG
+        </button>
+      </div>
+    </div>
+    <form @submit.prevent="">
+      <PillSelector v-model="activeSection" :options mx-auto />
+      <ul flex="~ gap-x-32 gap-y-64 items-center wrap" list-none nq-mt-12>
+        <li
+          v-for="({ path, svg }) in activeFeatures" :key="path" :class="{ 'bg-neutral-300': isSelected(svg) }"
+          rounded-8
+        >
+          <button group bg-transparent @click="select(svg)">
+            <div size-60 v-html="getSvg(svg)" />
+          </button>
+        </li>
+      </ul>
+      <div v-if="activeSection === 'colors'" w-full nq-mt-32 sm:w-max mx-auto>
+        <div flex="~ col sm:row sm:items-center gap-8" nq-mt-32 w-full block>
+          <span sm:ml-auto sm:mr-16 text-10 nq-label>Main color</span>
+          <div flex="~ wrap gap-8" max-sm:nq-mt-12>
+            <div
+              v-for="color in identiconColors" :key="color"
+              :style="`--c: ${color}; background: ${color}`" size-20 cursor-pointer rounded-full transition-colors
+              :class="{ 'ring-2.5 ring-offset-2 ring-$c': color === activeMain, 'op-45 hocus:op-100': color !== activeMain }"
+              @click="activeMain = color"
+            />
+          </div>
+        </div>
+
+        <div flex="~ col sm:row sm:items-center gap-8" nq-mt-32 w-full block>
+          <span sm:ml-auto sm:mr-16 text-10 nq-label>Background color</span>
+          <div flex="~ wrap gap-8" max-sm:nq-mt-12>
+            <div
+              v-for="color in identiconColors" :key="color"
+              :style="`--c: ${color}; background: ${color}`" size-20 cursor-pointer rounded-full transition-colors
+              :class="{ 'ring-2.5 ring-offset-2 ring-$c': color === activeBackground, 'op-45 hocus:op-100': color !== activeBackground }"
+              @click="activeBackground = color"
+            />
+          </div>
+        </div>
+
+        <div flex="~ col sm:row sm:items-center gap-8" nq-mt-32 w-full block>
+          <span sm:ml-auto sm:mr-16 text-10 nq-label>Accent color</span>
+          <div flex="~ wrap gap-8" max-sm:nq-mt-12>
+            <div
+              v-for="color in identiconColors" :key="color"
+              :style="`--c: ${color}; background: ${color}`" size-20 cursor-pointer rounded-full transition-colors
+              :class="{ 'ring-2.5 ring-offset-2 ring-$c': color === activeAccent, 'op-45 hocus:op-100': color !== activeAccent }"
+              @click="activeAccent = color"
+            />
+          </div>
+        </div>
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/.vitepress/theme/style.css b/.vitepress/theme/style.css
index 9cd9d653..75da8324 100644
--- a/.vitepress/theme/style.css
+++ b/.vitepress/theme/style.css
@@ -101,7 +101,7 @@ h2 {
 }
 
 .nq-subline {
-  --uno: nq-subline text-neutral-700 mt-24;
+  --uno: nq-subline text-neutral-700 mt-24 text-20|22;
 }
 
 .VPHome {
diff --git a/build/ui/identicons.md b/build/ui/identicons.md
new file mode 100644
index 00000000..c2cca57c
--- /dev/null
+++ b/build/ui/identicons.md
@@ -0,0 +1,159 @@
+# Nimiq Identicons
+
+<div flex="~ items-baseline gap-16 justify-start" mt-20 nq-mb-48 class="nq-raw">
+    <a href="https://www.nimiq.com/blog/nimiq-identicons/" nq-pill-tertiary nq-pill-sm cursor-pointer nq-arrow flex="~ gap-8 items-center" un-text="neutral-900">
+      <div i-nimiq:info op-80 />
+      Blog Post
+    </a>
+    <a href="https://github.com/onmax/nimiq-identicons" nq-pill-tertiary nq-pill-sm cursor-pointer nq-arrow flex="~ gap-8 items-center" un-text="neutral-900">
+      <div i-nimiq:logos-github op-80 />
+      Source code
+    </a>
+  </div>
+
+A simple, visually recognizable way to verify addresses.{.nq-subline}
+
+<Identicon />
+
+## More than 9 Million combintations!
+
+Each Identicon is a unique combination of colors and shapes based on an account's hash, providing instant visual confirmation.
+
+<Suspense>
+  <IdenticonBuilder mt-16 />
+</Suspense>
+
+## Installation
+
+To start using Nimiq Identicons in your project, run:
+
+::: code-group
+
+```bash [npm]
+npm install identicons-esm
+```
+
+```bash [yarn]
+yarn add identicons-esm
+```
+
+```bash [pnpm]
+pnpm add identicons-esm
+```
+
+```bash [bun]
+bun add identicons-esm
+```
+:::
+
+## Basic Usage
+
+Import and create an identicon using `createIdenticon`:
+
+```ts
+import { createIdenticon } from 'identicons-esm'
+
+const input = 'Your input here'
+const svg = await createIdenticon(input)
+```
+
+## Customization
+
+For specific colors or sections of the identicon, use `getIdenticonsParams`:
+
+```ts
+import { ensambleSvg, formatIdenticon, getIdenticonsParams } from 'identicons-esm'
+
+const input = 'Your input here'
+const { colors, sections } = await getIdenticonsParams(input)
+
+// You can modify any parameter as you wish
+// colors.background, colors.main, colors.accent
+// sections.top, sections.bottom, sections.sides, sections.face (SVG paths)
+
+// Generate SVG string
+const customSvg = ensambleSvg({ colors, sections, /* Other optional values to overwrite default backgroundShape, innerShadow, circleShape */ })
+
+// Also possible to change the Identicon format
+const formatted = formatIdenticon(customSvg, { format: 'image/svg+xml' })
+```
+
+## Migration from Legacy
+
+This module has updated performance and packaging over the legacy version.
+
+<details>
+
+<summary>
+
+### Generating a SVG {.nq-no-prose}
+
+</summary>
+
+<div px-20>
+
+#### Old {.mt-0}
+
+```js
+import Identicons from '@nimiq/identicons/dist/identicons.min.js'
+IdenticonsLegacy.svgPath = '@nimiq/identicons/dist/identicons.min.svg'
+
+const input = 'Your input here'
+const svg = await Identicons.svg(input)
+```
+
+#### New {.mt-0}
+
+```js
+import { createIdenticon } from 'identicons-esm'
+
+const input = 'Your input here'
+const svg = await createIdenticon(input)
+```
+
+</div>
+
+</details>
+
+<details>
+
+<summary>
+
+### Generating a Data URI {.nq-no-prose}
+
+</summary>
+
+<div px-20>
+
+#### Old {.mt-0}
+
+```js
+import Identicons from '@nimiq/identicons/dist/identicons.min.js'
+IdenticonsLegacy.svgPath = '@nimiq/identicons/dist/identicons.min.svg'
+
+const input = 'Your input here'
+const svg = await Identicons.toDataUri(input)
+```
+
+#### New {.mt-0}
+
+```ts
+import { createIdenticon } from 'identicons-esm'
+
+const input = 'Your input here'
+const svg = await createIdenticon(input, { format: 'image/svg+xml' })
+```
+
+</div>
+
+</details>
+
+### Discontiuned functions
+
+There are functions in the original library that are not included in this implementation due to lack of use. These functions are:
+
+- `makeLetterHash`
+- `wordsByEntropy`
+- `Identicons.render`
+- `Identicons.image`
+- `Identicons.placeholder`
diff --git a/package.json b/package.json
index 6da6fdbb..042d0f66 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,9 @@
     "@unhead/vue": "^1.11.10",
     "@unocss/reset": "^0.63.6",
     "@vueuse/core": "^11.1.0",
+    "canvas-confetti": "^1.9.3",
     "iconify-icon": "^2.1.0",
+    "identicons-esm": "^0.0.9",
     "json2md": "^2.0.1",
     "jszip": "^3.10.1",
     "markdown-it-mathjax3": "^4.3.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9cb72ef8..d10b73c5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,9 +23,15 @@ importers:
       '@vueuse/core':
         specifier: ^11.1.0
         version: 11.1.0(vue@3.5.12(typescript@5.6.3))
+      canvas-confetti:
+        specifier: ^1.9.3
+        version: 1.9.3
       iconify-icon:
         specifier: ^2.1.0
         version: 2.1.0
+      identicons-esm:
+        specifier: ^0.0.9
+        version: 0.0.9
       json2md:
         specifier: ^2.0.1
         version: 2.0.1
@@ -1685,6 +1691,9 @@ packages:
   caniuse-lite@1.0.30001669:
     resolution: {integrity: sha512-DlWzFDJqstqtIVx1zeSpIMLjunf5SmwOw0N2Ck/QSQdS8PLS4+9HrLaYei4w8BIAL7IB/UEDu889d8vhCTPA0w==}
 
+  canvas-confetti@1.9.3:
+    resolution: {integrity: sha512-rFfTURMvmVEX1gyXFgn5QMn81bYk70qa0HLzcIOSVEyl57n6o9ItHeBtUSWdvKAPY0xlvBHno4/v3QPrT83q9g==}
+
   caseless@0.12.0:
     resolution: {integrity: sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==}
 
@@ -2696,6 +2705,9 @@ packages:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
 
+  identicons-esm@0.0.9:
+    resolution: {integrity: sha512-X3ltGKmsAVnruBUZ80Px0cSizNvGJLSFsEBd9194ODTclYQuZhfXX0J5/qR62dj87fcfMS+9YJRvGGzC/WXxZQ==}
+
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
@@ -6222,6 +6234,8 @@ snapshots:
 
   caniuse-lite@1.0.30001669: {}
 
+  canvas-confetti@1.9.3: {}
+
   caseless@0.12.0: {}
 
   ccount@2.0.1: {}
@@ -7425,6 +7439,8 @@ snapshots:
     dependencies:
       safer-buffer: 2.1.2
 
+  identicons-esm@0.0.9: {}
+
   ieee754@1.2.1: {}
 
   ignore@5.3.2: {}