From a37879544c82d9cd5294b9ee6bb65e73caa5f4ff Mon Sep 17 00:00:00 2001
From: Eric Fennis <eric.fennis@gmail.com>
Date: Wed, 28 Oct 2026 08:49:32 +0100
Subject: [PATCH] chore(docs|site): Remove Plausible, add tracking events and
 privacy statement (#5092)

* feat(docs): track homepage, icons page and icon drawer interactions with OpenPanel

Adds track/trackDebounced helpers around the shared OpenPanel instance and
sends events for hero actions, home search, packages, the style customizers,
homepage scroll depth, icon search (start, queries, no results), sort,
Lab library toggle, and the drawer's See in action, copy and studio buttons.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011GcWdCmSmcDiiAazR5mNUD

* feat(docs): send homepage scroll depth once on page leave

Instead of one event per milestone, record the deepest scroll position and
send a single home_scroll_depth event (percent + milestone) when the visitor
navigates away, closes the tab, or hides it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011GcWdCmSmcDiiAazR5mNUD

* feat(docs): simplify scroll depth tracking to the position on page leave

Drop the max-depth composable and send a single scroll_depth event with the
current scroll percentage before a route change and on visibilitychange,
pagehide and beforeunload, for every page.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011GcWdCmSmcDiiAazR5mNUD

* refactor(docs): move scroll depth tracking into the OpenPanel utils

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011GcWdCmSmcDiiAazR5mNUD

* refactor(docs): move router and browser tracking setup into the OpenPanel utils

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011GcWdCmSmcDiiAazR5mNUD

* Add privacy-policy

* adjust text

* Remove plausible

---------

Co-authored-by: Claude <noreply@anthropic.com>
---
 docs/.vitepress/getHeadConfig.ts              |  15 ---
 .../theme/components/home/HomeHeroAfter.vue   |  34 +++---
 .../components/home/HomeIconCustomizer.vue    |  15 ++-
 .../components/home/HomePackagesSection.vue   |  29 +++--
 .../theme/components/icons/CopyCodeButton.vue |  14 ++-
 .../theme/components/icons/CopySVGButton.vue  |  10 ++
 .../components/icons/EditInStudioButton.vue   |  17 ++-
 .../theme/components/icons/IconInfo.vue       |  17 ++-
 .../theme/components/icons/IconsOverview.vue  |  30 +++++-
 .../icons/SidebarExternalLibrarySelect.vue    |  21 ++--
 .../icons/SidebarIconCustomizer.vue           |  15 ++-
 .../theme/composables/useTrackStyleChanges.ts |  21 ++++
 docs/.vitepress/theme/index.ts                |   7 +-
 docs/.vitepress/theme/utils/openpanel.ts      | 102 +++++++++++++++++-
 docs/privacy.md                               |  76 +++++++++++++
 15 files changed, 358 insertions(+), 65 deletions(-)
 create mode 100644 docs/.vitepress/theme/composables/useTrackStyleChanges.ts
 create mode 100644 docs/privacy.md

diff --git a/docs/.vitepress/getHeadConfig.ts b/docs/.vitepress/getHeadConfig.ts
index 82b742f82..3399c1f4e 100644
--- a/docs/.vitepress/getHeadConfig.ts
+++ b/docs/.vitepress/getHeadConfig.ts
@@ -9,13 +9,6 @@ const getHeadConfig = ({
   description: string;
   socialTitle?: string;
 }): HeadConfig[] => [
-  [
-    'link',
-    {
-      rel: 'preconnect',
-      href: 'https://analytics.lucide.dev',
-    },
-  ],
   [
     'link',
     {
@@ -23,14 +16,6 @@ const getHeadConfig = ({
       href: 'https://insights.lucide.dev',
     },
   ],
-  [
-    'script',
-    {
-      src: 'https://analytics.lucide.dev/js/script.js',
-      'data-domain': 'lucide.dev',
-      defer: '',
-    },
-  ],
   [
     'meta',
     {
diff --git a/docs/.vitepress/theme/components/home/HomeHeroAfter.vue b/docs/.vitepress/theme/components/home/HomeHeroAfter.vue
index 38a64d14b..6c80cecf8 100644
--- a/docs/.vitepress/theme/components/home/HomeHeroAfter.vue
+++ b/docs/.vitepress/theme/components/home/HomeHeroAfter.vue
@@ -2,41 +2,46 @@
 import { useRouter } from 'vitepress';
 import Badge from '../base/Badge.vue';
 import HomeContainer from './HomeContainer.vue';
-import { data } from './HomeHeroIconsCard.data'
-import FakeInput from '../base/FakeInput.vue'
-import { nextTick, provide } from 'vue'
+import { data } from './HomeHeroIconsCard.data';
+import FakeInput from '../base/FakeInput.vue';
+import { nextTick, provide } from 'vue';
 import useSearchShortcut from '../../utils/useSearchShortcut';
+import { track } from '../../utils/openpanel';
 
-const { go } = useRouter()
+const { go } = useRouter();
 
 const { shortcutText: kbdSearchShortcut } = useSearchShortcut(() => {
-  go('/icons/?focus')
-})
+  track('home_search_click', { via: 'shortcut' });
+  go('/icons/?focus');
+});
+
+function onSearchClick() {
+  track('home_search_click', { via: 'click' });
+  go('/icons/?focus');
+}
 
 const enableTransitions = () =>
   'startViewTransition' in document &&
-  window.matchMedia('(prefers-reduced-motion: no-preference)').matches
-
+  window.matchMedia('(prefers-reduced-motion: no-preference)').matches;
 
 async function handleClick(event: MouseEvent) {
   if (!enableTransitions()) {
-    go('/icons/?focus')
+    go('/icons/?focus');
     return;
   }
 
-
   await document.startViewTransition(async () => {
     await go('/icons/?focus');
-    await nextTick()
-  }).ready
+    await nextTick();
+  }).ready;
 }
 </script>
 <template>
   <FakeInput
-    @click="go('/icons/?focus')"
+    @click="onSearchClick"
     :shortcut="kbdSearchShortcut"
     class="search-box"
-    >
+  >
     Search {{ data.iconsCount }} icons...
   </FakeInput>
 </template>
@@ -47,5 +52,4 @@ async function handleClick(event: MouseEvent) {
   width: 100%;
   margin-top: 24px;
 }
-
 </style>
diff --git a/docs/.vitepress/theme/components/home/HomeIconCustomizer.vue b/docs/.vitepress/theme/components/home/HomeIconCustomizer.vue
index b5599fedc..5e752549d 100644
--- a/docs/.vitepress/theme/components/home/HomeIconCustomizer.vue
+++ b/docs/.vitepress/theme/components/home/HomeIconCustomizer.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, onMounted } from 'vue';
 import { useIconStyle } from '../../composables/useIconStyle';
 import HomeContainer from './HomeContainer.vue';
 import RangeSlider from '../base/RangeSlider.vue';
@@ -8,9 +8,20 @@ import ColorPicker from '../base/ColorPicker.vue';
 import ResetButton from '../base/ResetButton.vue';
 import HomeIconCustomizerIcons from './HomeIconCustomizerIcons.vue';
 import Switch from '../base/Switch.vue';
+import useTrackStyleChanges from '../../composables/useTrackStyleChanges';
+import { track } from '../../utils/openpanel';
 
 const { color, strokeWidth, size, nonScalingStroke, isCustomized, resetStyle } = useIconStyle();
 
+onMounted(() => {
+  useTrackStyleChanges('home_customizer_change', { color, strokeWidth, size, nonScalingStroke });
+});
+
+function onReset() {
+  track('home_customizer_reset');
+  resetStyle();
+}
+
 const iconStyle = computed(() => ({
   '--home-icon-color': color.value,
   '--home-icon-stroke-width': String(strokeWidth.value),
@@ -26,7 +37,7 @@ const iconStyle = computed(() => ({
           Style as you please
           <ResetButton
             :disabled="!isCustomized"
-            @click="resetStyle"
+            @click="onReset"
           />
         </h2>
         <p class="copy">
diff --git a/docs/.vitepress/theme/components/home/HomePackagesSection.vue b/docs/.vitepress/theme/components/home/HomePackagesSection.vue
index cfc13d320..010e4dfa9 100644
--- a/docs/.vitepress/theme/components/home/HomePackagesSection.vue
+++ b/docs/.vitepress/theme/components/home/HomePackagesSection.vue
@@ -1,11 +1,17 @@
 <script setup lang="ts">
-import HomeContainer from './HomeContainer.vue'
-import HomeSectionTitle from './HomeSectionTitle.vue'
+import HomeContainer from './HomeContainer.vue';
+import HomeSectionTitle from './HomeSectionTitle.vue';
 import { useRouter } from 'vitepress';
-import { data } from './HomePackagesSection.data'
+import { data } from './HomePackagesSection.data';
 import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue';
+import { track } from '../../utils/openpanel';
 
-const { go } = useRouter()
+const { go } = useRouter();
+
+function onPackageClick(name: string, path: string) {
+  track('home_package_click', { package: name });
+  go(path);
+}
 </script>
 
 <template>
@@ -16,7 +22,7 @@ const { go } = useRouter()
         v-for="{ name, label, path, logo, logoDark } in data.packages"
         :href="path"
         class="package-logo"
-        @click.prevent="go(path)"
+        @click.prevent="onPackageClick(name, path)"
       >
         <img
           :src="logo"
@@ -34,13 +40,18 @@ const { go } = useRouter()
       </a>
     </div>
     <div class="more-button-wrapper">
-      <VPButton text="And more" href="/packages" theme="alt" class="more-button"/>
+      <VPButton
+        text="And more"
+        href="/packages"
+        theme="alt"
+        class="more-button"
+        @click="track('home_packages_more_click')"
+      />
     </div>
   </HomeContainer>
 </template>
 
 <style scoped>
-
 .image-logo {
   object-fit: contain;
   width: 36px;
@@ -63,11 +74,11 @@ const { go } = useRouter()
 }
 
 .package-logo {
-  transition: opacity ease-in .15s;
+  transition: opacity ease-in 0.15s;
 }
 
 .package-logo:hover {
-  opacity: .6;
+  opacity: 0.6;
 }
 
 html.dark .image-logo.light {
diff --git a/docs/.vitepress/theme/components/icons/CopyCodeButton.vue b/docs/.vitepress/theme/components/icons/CopyCodeButton.vue
index 9a50081b3..7f3f83ffe 100644
--- a/docs/.vitepress/theme/components/icons/CopyCodeButton.vue
+++ b/docs/.vitepress/theme/components/icons/CopyCodeButton.vue
@@ -4,11 +4,18 @@ import { toPascalCase } from '@lucide/shared';
 import ButtonMenu from '../base/ButtonMenu.vue';
 import { useIconStyleContext } from '../../composables/useIconStyle';
 import useConfetti from '../../composables/useConfetti';
+import { track } from '../../utils/openpanel';
 
 const props = defineProps<{
   name: string;
   popoverPosition?: 'top' | 'bottom';
+  trackingSource?: 'drawer' | 'page';
 }>();
+
+function trackCopy(action: string) {
+  track('icon_copy', { icon: props.name, action, source: props.trackingSource });
+}
+
 const { size, color, strokeWidth, nonScalingStroke } = useIconStyleContext();
 const { animate, confetti } = useConfetti();
 const componentName = computed(() => {
@@ -40,12 +47,14 @@ function copyJSX() {
 }
 
 function copyComponentName() {
+  trackCopy('copy_component_name');
   const code = componentName.value;
 
   navigator.clipboard.writeText(code);
 }
 
 function copyVue() {
+  trackCopy('copy_vue');
   let attrs = [''];
 
   if (size.value && size.value !== 24) {
@@ -70,6 +79,7 @@ function copyVue() {
 }
 
 function copyAngular() {
+  trackCopy('copy_angular');
   let attrs = [''];
 
   attrs.push(`name="${props.name}"`);
@@ -106,10 +116,10 @@ function copyAngular() {
     data-confetti-text="Copied!"
     :popoverPosition="popoverPosition"
     :options="[
-      { text: 'Copy JSX', onClick: copyJSX },
+      { text: 'Copy JSX', onClick: () => (trackCopy('copy_jsx'), copyJSX()) },
       { text: 'Copy Component Name', onClick: copyComponentName },
       { text: 'Copy Vue', onClick: copyVue },
-      { text: 'Copy Svelte', onClick: copyJSX },
+      { text: 'Copy Svelte', onClick: () => (trackCopy('copy_svelte'), copyJSX()) },
       { text: 'Copy Angular', onClick: copyAngular },
     ]"
   />
diff --git a/docs/.vitepress/theme/components/icons/CopySVGButton.vue b/docs/.vitepress/theme/components/icons/CopySVGButton.vue
index 6e2fb79d0..ff8bbfb15 100644
--- a/docs/.vitepress/theme/components/icons/CopySVGButton.vue
+++ b/docs/.vitepress/theme/components/icons/CopySVGButton.vue
@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import ButtonMenu from '../base/ButtonMenu.vue';
 import { useIconStyleContext } from '../../composables/useIconStyle';
 import useConfetti from '../../composables/useConfetti';
+import { track } from '../../utils/openpanel';
 import getSVGIcon from '../../utils/getSVGIcon';
 import downloadData from '../../utils/downloadData';
 
@@ -12,13 +13,19 @@ const confettiText = ref(copiedText);
 const props = defineProps<{
   name: string;
   popoverPosition?: 'top' | 'bottom';
+  trackingSource?: 'drawer' | 'page';
 }>();
 
+function trackCopy(action: string) {
+  track('icon_copy', { icon: props.name, action, source: props.trackingSource });
+}
+
 const { size } = useIconStyleContext();
 
 const { animate, confetti } = useConfetti();
 
 function copySVG() {
+  trackCopy('copy_svg');
   confettiText.value = copiedText;
   const svgString = getSVGIcon();
 
@@ -28,6 +35,7 @@ function copySVG() {
 }
 
 function copyDataUrl() {
+  trackCopy('copy_data_url');
   confettiText.value = copiedText;
   const svgString = getSVGIcon();
 
@@ -39,6 +47,7 @@ function copyDataUrl() {
 }
 
 function downloadSVG() {
+  trackCopy('download_svg');
   confettiText.value = downloadText;
   const svgString = getSVGIcon();
 
@@ -47,6 +56,7 @@ function downloadSVG() {
 }
 
 function downloadPNG() {
+  trackCopy('download_png');
   confettiText.value = downloadText;
   const svgString = getSVGIcon();
 
diff --git a/docs/.vitepress/theme/components/icons/EditInStudioButton.vue b/docs/.vitepress/theme/components/icons/EditInStudioButton.vue
index 33e53a324..04184d370 100644
--- a/docs/.vitepress/theme/components/icons/EditInStudioButton.vue
+++ b/docs/.vitepress/theme/components/icons/EditInStudioButton.vue
@@ -4,11 +4,15 @@ import { IconEntity } from '../../types';
 import getStudioLink from '../../utils/getStudioLink';
 import Button from '../base/Button.vue';
 import Icon from '@lucide/vue/src/Icon.ts';
+import { track } from '../../utils/openpanel';
 
-defineProps<{
-  icon: IconEntity
-}>()
+const props = defineProps<{
+  icon: IconEntity;
+}>();
 
+function onClick() {
+  track('icon_edit_in_studio_click', { icon: props.icon.name });
+}
 </script>
 
 <template>
@@ -16,8 +20,13 @@ defineProps<{
     :href="getStudioLink(icon.name, icon.iconNode, 'icon-info')"
     target="_blank"
     rel="noopener noreferrer"
+    @click="onClick"
   >
-    <Icon :iconNode="pencilSparkles" name="pencil-sparkles" :size="24" />
+    <Icon
+      :iconNode="pencilSparkles"
+      name="pencil-sparkles"
+      :size="24"
+    />
     <span class="text">Edit in studio</span>
   </Button>
 </template>
diff --git a/docs/.vitepress/theme/components/icons/IconInfo.vue b/docs/.vitepress/theme/components/icons/IconInfo.vue
index 1aa8cb76d..4724ceadb 100644
--- a/docs/.vitepress/theme/components/icons/IconInfo.vue
+++ b/docs/.vitepress/theme/components/icons/IconInfo.vue
@@ -11,8 +11,9 @@ import createLucideIcon from '@lucide/vue/src/createLucideIcon';
 import { diamond } from '../../../data/iconNodes';
 import deprecationReasonTemplate from '../../../../../tools/build-icons/utils/deprecationReasonTemplate.ts';
 import type { IconDeprecationReason } from '../../../../../tools/build-icons/types.ts';
-import IconTags from "./IconTags.vue"
+import IconTags from './IconTags.vue';
 import getStudioLink from '../../utils/getStudioLink';
+import { track } from '../../utils/openpanel';
 
 const props = defineProps<{
   icon: IconEntity;
@@ -40,6 +41,14 @@ const iconPath = computed(() => {
 
   return `icons/${props.icon.name}`;
 });
+
+const isDetailPage = computed(() => !!page.value?.relativePath?.startsWith?.(iconPath.value));
+const trackingSource = computed(() => (isDetailPage.value ? 'page' : 'drawer'));
+
+function onSeeInAction() {
+  track('icon_see_in_action_click', { icon: props.icon.name });
+  go(iconPath.value);
+}
 </script>
 
 <template>
@@ -79,18 +88,20 @@ const iconPath = computed(() => {
 
     <div class="group buttons">
       <VPButton
-        v-if="!page?.relativePath?.startsWith?.(iconPath)"
+        v-if="!isDetailPage"
         :href="iconPath"
         text="See in action"
-        @click="go(iconPath)"
+        @click="onSeeInAction"
       />
       <CopySVGButton
         :name="icon.name"
         :popoverPosition="popoverPosition"
+        :trackingSource="trackingSource"
       />
       <CopyCodeButton
         :name="icon.name"
         :popoverPosition="popoverPosition"
+        :trackingSource="trackingSource"
       />
     </div>
     <slot name="footer" />
diff --git a/docs/.vitepress/theme/components/icons/IconsOverview.vue b/docs/.vitepress/theme/components/icons/IconsOverview.vue
index a5dde2d5b..f53b9b2a5 100644
--- a/docs/.vitepress/theme/components/icons/IconsOverview.vue
+++ b/docs/.vitepress/theme/components/icons/IconsOverview.vue
@@ -17,6 +17,7 @@ import CarbonAdOverlay from './CarbonAdOverlay.vue';
 import useSearchPlaceholder from '../../utils/useSearchPlaceholder.ts';
 import Icon from '@lucide/vue/src/Icon';
 import { listSortDescending } from '~/.vitepress/data/iconNodes';
+import { track, trackDebounced } from '../../utils/openpanel';
 
 const ICON_SIZE = 56;
 const ICON_GRID_GAP = 8;
@@ -33,7 +34,7 @@ const SORTING = [
     name: 'Name',
     value: 'name',
   },
-]
+];
 
 const initialGridItems = computed(() => {
   if (containerWidth.value === 0) return 120;
@@ -49,7 +50,7 @@ const props = defineProps<{
 }>();
 
 const activeIconName = ref(null);
-const selectedSort = ref(SORTING[0])
+const selectedSort = ref(SORTING[0]);
 
 const { execute: fetchTags, data: tags, isFetching: isFetchingTags } = useFetchTags();
 const {
@@ -170,6 +171,31 @@ watch(searchQueryDebounced, () => {
   scrollTo(0);
 });
 
+let hasStartedSearching = false;
+
+watch(searchQueryDebounced, (query) => {
+  if (query === '') return;
+
+  if (!hasStartedSearching) {
+    hasStartedSearching = true;
+    track('icons_search_start');
+  }
+
+  trackDebounced('icons_search', 'icons_search', { query, results: searchResults.value.length });
+});
+
+// Debounced so only the query the visitor settles on is tracked, not every keystroke.
+watch(searchPlaceholder, ({ isNoResults, isBrand }) => {
+  const query = searchQueryDebounced.value;
+  if (!isNoResults || isSearchMetadataLoading.value || !query) return;
+
+  trackDebounced('icons_search_no_results', 'icons_search_no_results', { query, isBrand });
+});
+
+watch(selectedSort, (sort) => {
+  track('icons_sort_change', { sort: sort.value });
+});
+
 function handleCloseDrawer() {
   setActiveIconName('');
 
diff --git a/docs/.vitepress/theme/components/icons/SidebarExternalLibrarySelect.vue b/docs/.vitepress/theme/components/icons/SidebarExternalLibrarySelect.vue
index bed212467..7dd0c7bf2 100644
--- a/docs/.vitepress/theme/components/icons/SidebarExternalLibrarySelect.vue
+++ b/docs/.vitepress/theme/components/icons/SidebarExternalLibrarySelect.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import Checkbox from '../base/Checkbox.vue'
-import SidebarTitle from './SidebarTitle.vue'
+import Checkbox from '../base/Checkbox.vue';
+import SidebarTitle from './SidebarTitle.vue';
 import { useExternalLibs } from '../../composables/useExternalLibs';
 import { ExternalLibs } from '../../types';
+import { watch } from 'vue';
+import { track } from '../../utils/openpanel';
 
 interface ExternalLibrary {
   name: string;
@@ -12,18 +14,25 @@ interface ExternalLibrary {
 const externalLibraries: ExternalLibrary[] = [
   {
     name: 'Lab',
-    value: 'lab'
+    value: 'lab',
   },
 ];
 
 const { selectedLibs } = useExternalLibs();
+
+watch(selectedLibs, (libs, previousLibs) => {
+  for (const { value } of externalLibraries) {
+    const enabled = libs.includes(value);
+    if (enabled !== previousLibs.includes(value)) {
+      track('icons_external_lib_toggle', { library: value, enabled });
+    }
+  }
+});
 </script>
 
 <template>
   <div class="external-library-select">
-    <SidebarTitle>
-      Include external libs
-    </SidebarTitle>
+    <SidebarTitle> Include external libs </SidebarTitle>
     <ul>
       <li
         v-for="library in externalLibraries"
diff --git a/docs/.vitepress/theme/components/icons/SidebarIconCustomizer.vue b/docs/.vitepress/theme/components/icons/SidebarIconCustomizer.vue
index fc23a0b81..5b86325fc 100644
--- a/docs/.vitepress/theme/components/icons/SidebarIconCustomizer.vue
+++ b/docs/.vitepress/theme/components/icons/SidebarIconCustomizer.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, onMounted } from 'vue';
 import { useMounted } from '@vueuse/core';
 import { useIconStyleContext } from '../../composables/useIconStyle';
 import RangeSlider from '../base/RangeSlider.vue';
@@ -7,6 +7,8 @@ import InputField from '../base/InputField.vue';
 import ColorPicker from '../base/ColorPicker.vue';
 import ResetButton from '../base/ResetButton.vue';
 import Switch from '../base/Switch.vue';
+import useTrackStyleChanges from '../../composables/useTrackStyleChanges';
+import { track } from '../../utils/openpanel';
 
 const { color, strokeWidth, size, nonScalingStroke, isCustomized, resetStyle } =
   useIconStyleContext();
@@ -15,6 +17,15 @@ const { color, strokeWidth, size, nonScalingStroke, isCustomized, resetStyle } =
 // otherwise the hydrated DOM keeps the stale `disabled` attribute on the reset button.
 const isMounted = useMounted();
 const showCustomized = computed(() => isMounted.value && isCustomized.value);
+
+onMounted(() => {
+  useTrackStyleChanges('icons_customizer_change', { color, strokeWidth, size, nonScalingStroke });
+});
+
+function onReset() {
+  track('icons_customizer_reset');
+  resetStyle();
+}
 </script>
 
 <template>
@@ -26,7 +37,7 @@ const showCustomized = computed(() => isMounted.value && isCustomized.value);
       <h2 class="card-title">Customizer</h2>
       <ResetButton
         :disabled="!showCustomized"
-        @click="resetStyle"
+        @click="onReset"
       />
     </div>
     <InputField
diff --git a/docs/.vitepress/theme/composables/useTrackStyleChanges.ts b/docs/.vitepress/theme/composables/useTrackStyleChanges.ts
new file mode 100644
index 000000000..d239fee22
--- /dev/null
+++ b/docs/.vitepress/theme/composables/useTrackStyleChanges.ts
@@ -0,0 +1,21 @@
+import { watch, type Ref } from 'vue';
+import { trackDebounced } from '../utils/openpanel';
+
+interface StyleRefs {
+  color: Ref<string>;
+  strokeWidth: Ref<number>;
+  size: Ref<number>;
+  nonScalingStroke: Ref<boolean>;
+}
+
+/**
+ * Tracks user changes to the icon style controls. Call it from `onMounted` so values
+ * restored from local storage don't count as a change.
+ */
+export default function useTrackStyleChanges(eventName: string, style: StyleRefs) {
+  (Object.keys(style) as (keyof StyleRefs)[]).forEach((option) => {
+    watch(style[option], (value) => {
+      trackDebounced(`${eventName}:${option}`, eventName, { option, value });
+    });
+  });
+}
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index a57ee5357..ed5af6873 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,4 +1,4 @@
-import { h, nextTick } from 'vue';
+import { h } from 'vue';
 import DefaultTheme from 'vitepress/theme';
 import './style.css';
 import 'virtual:group-icons.css';
@@ -12,7 +12,7 @@ import { CATEGORY_VIEW_CONTEXT, categoryViewContext } from './composables/useCat
 import { EXTERNAL_LIBS_CONTEXT, externalLibContext } from './composables/useExternalLibs';
 import SideBarNavBefore from './layouts/SideBarNavBefore.vue';
 import SnackPlayer from './components/editors/SnackPlayer.vue';
-import { op } from './utils/openpanel';
+import { setupTracking } from './utils/openpanel';
 
 const theme: Partial<Theme> = {
   extends: DefaultTheme,
@@ -33,8 +33,7 @@ const theme: Partial<Theme> = {
     app.provide(EXTERNAL_LIBS_CONTEXT, externalLibContext);
     app.component('SnackPlayer', SnackPlayer);
 
-    // Wait for VitePress to update the document title before tracking the page view.
-    router.onAfterRouteChange = () => nextTick(() => op?.screenView());
+    setupTracking(router);
   },
 };
 
diff --git a/docs/.vitepress/theme/utils/openpanel.ts b/docs/.vitepress/theme/utils/openpanel.ts
index 10717ecbc..8040b740e 100644
--- a/docs/.vitepress/theme/utils/openpanel.ts
+++ b/docs/.vitepress/theme/utils/openpanel.ts
@@ -1,10 +1,12 @@
+import { nextTick } from 'vue';
+import type { Router } from 'vitepress';
 import { OpenPanel } from '@openpanel/web';
 
 const clientId = import.meta.env.VITE_OPENPANEL_CLIENT_ID;
 
 /**
  * Shared OpenPanel instance, only created in the browser and when a client ID is configured.
- * Page views are tracked from the VitePress router (see theme/index.ts) instead of
+ * Page views are tracked from the VitePress router (see `setupTracking`) instead of
  * `trackScreenViews`, so the page title is already updated when the event is sent.
  */
 export const op =
@@ -17,3 +19,101 @@ export const op =
         trackAttributes: false,
       })
     : undefined;
+
+type TrackProperties = Record<string, unknown>;
+
+/**
+ * Track a custom event. No-op during SSR or when OpenPanel isn't configured.
+ */
+export function track(name: string, properties?: TrackProperties) {
+  op?.track(name, properties);
+}
+
+const debounceTimers = new Map<string, ReturnType<typeof setTimeout>>();
+
+/**
+ * Track an event only once the input settles, e.g. while dragging a slider.
+ * Calls sharing the same `key` replace each other until `delay` has passed.
+ */
+export function trackDebounced(
+  key: string,
+  name: string,
+  properties?: TrackProperties,
+  delay = 1000,
+) {
+  if (!op) return;
+
+  clearTimeout(debounceTimers.get(key));
+  debounceTimers.set(
+    key,
+    setTimeout(() => {
+      debounceTimers.delete(key);
+      track(name, properties);
+    }, delay),
+  );
+}
+
+// Only one scroll depth event per page leave: closing a tab fires visibilitychange, pagehide
+// and beforeunload. Starts as sent, because VitePress also calls onBeforeRouteChange for the
+// initial page load.
+let scrollDepthSent = true;
+
+/**
+ * Track how far (in percent) the visitor scrolled down the current page.
+ * Sends at most once until `resetScrollDepth` is called.
+ */
+function trackScrollDepth() {
+  if (scrollDepthSent) return;
+  scrollDepthSent = true;
+
+  const { scrollHeight, clientHeight } = document.documentElement;
+  const scrollable = scrollHeight - clientHeight;
+  const percent = scrollable > 0 ? Math.round((window.scrollY / scrollable) * 100) : 100;
+
+  track('scroll_depth', { percent });
+}
+
+/**
+ * Allow the next page leave to be tracked again, e.g. after a route change.
+ */
+function resetScrollDepth() {
+  scrollDepthSent = false;
+}
+
+/**
+ * Hooks page views, scroll depth and the home hero actions up to the VitePress router and
+ * the browser. Called once from `enhanceApp`.
+ */
+export function setupTracking(router: Router) {
+  // Track before the route changes, VitePress resets the scroll position for the new page.
+  router.onBeforeRouteChange = () => {
+    if (!import.meta.env.SSR) trackScrollDepth();
+  };
+
+  router.onAfterRouteChange = () => {
+    resetScrollDepth();
+    // Wait for VitePress to update the document title before tracking the page view.
+    return nextTick(() => op?.screenView());
+  };
+
+  if (import.meta.env.SSR) return;
+
+  document.addEventListener('visibilitychange', () => {
+    if (document.visibilityState === 'hidden') {
+      trackScrollDepth();
+    } else {
+      resetScrollDepth();
+    }
+  });
+  window.addEventListener('pagehide', trackScrollDepth);
+  window.addEventListener('beforeunload', trackScrollDepth);
+
+  // The hero actions are rendered by VitePress from the home page frontmatter,
+  // so clicks on them are picked up with a delegated listener.
+  document.addEventListener('click', (event) => {
+    const link = (event.target as Element | null)?.closest?.('.VPHero .actions a');
+    if (link) {
+      track('home_hero_click', { text: link.textContent?.trim() });
+    }
+  });
+}
diff --git a/docs/privacy.md b/docs/privacy.md
new file mode 100644
index 000000000..756de39dc
--- /dev/null
+++ b/docs/privacy.md
@@ -0,0 +1,76 @@
+---
+title: Privacy Statement
+description: How lucide.dev handles your data, which services we use, and what is stored in your browser.
+aside: false
+editLink: false
+---
+
+# Privacy Statement
+
+_Last updated: 27 October 2026_
+
+Lucide is an open-source project. We built lucide.dev to collect as little about you as possible: We aim to collect as little personal data as possible. We don't sell your personal data, and we don't require an account to browse our website. This page explains what does happen when you visit, and why.
+
+This statement covers **lucide.dev** only. Our merch shop (merch.lucide.dev), GitHub, Discord, Open Collective and other sites we link to have their own privacy policies.
+
+## Who is responsible
+
+lucide.dev is run by the Lucide Icons, based in the Netherlands. For questions about this statement or your data, contact us at [info@lucide.dev](mailto:info@lucide.dev).
+
+## What we collect and why
+
+### Hosting
+
+The site runs on [Vercel](https://vercel.com/legal/privacy-policy). Like any web server, Vercel processes your IP address, browser user agent and the pages you request so it can deliver the site and protect it against abuse. These logs are stored for 1 day and are not used to profile you.
+
+### Analytics
+
+We use privacy-friendly analytics to see which pages and icons are popular, so we know what to improve. We run **OpenPanel** on our own subdomain (insights.lucide.dev), and the data it collects is stored in the EU. It counts page views and how the site is used: which icons are copied or opened in Lucide Studio, when an icon search starts, changes to the icon customiser and sorting, clicks on the home page buttons and packages, and how far down a page you scroll.
+
+OpenPanel doesn't set cookies or store anything in your browser. Along with these events it records general information such as the referring site, browser type, device type and country. Visits are counted with a temporary, anonymised identifier that cannot be used to recognise you on other sites or on later days. We don't track clicks on outgoing links, and we never combine this data with other sources.
+
+### Search
+
+Site search is provided by [Algolia DocSearch](https://www.algolia.com/policies/privacy/). When you use the search box, what you type and your IP address are sent to Algolia to return results. Your recent searches are kept in your own browser (see below).
+
+### Advertising
+
+On some pages, a single ad is shown by [Carbon Ads](https://www.carbonads.net/privacy) (BuySellAds). The ads help fund the project's development. Ads are chosen by the content of the page, not by your interests or browsing history. To show an ad, count impressions and clicks, and prevent fraud, Carbon receives your IP address (used to estimate your country) and basic browser information. Carbon's privacy policy describes how it handles this data.
+
+### Third-party images
+
+Contributor and team avatars are loaded directly from GitHub, so GitHub receives your IP address when those images load. See [GitHub's privacy statement](https://docs.github.com/site-policy/privacy-policies/github-general-privacy-statement).
+
+The version and download badges on the packages page are loaded from [Shields.io](https://shields.io), so Shields.io receives your IP address when those images load.
+
+## Cookies and browser storage
+
+lucide.dev does not use tracking or advertising cookies of its own.
+
+| What | Type | Purpose | Duration |
+| --- | --- | --- | --- |
+| Deployment version (`__vdpl`) | Cookie (Vercel) | Keeps you on the same version of the site while it's being updated, so pages don't break mid-visit | Session |
+| Icon customiser settings | Local storage | Remembers the size, stroke width, colour and stroke scaling you chose | Until you clear them |
+| Appearance | Local storage | Remembers light or dark mode | Until you clear them |
+| Framework choice | Local storage | Remembers which framework you're reading the docs for | Until you clear them |
+| Recent and favourite searches | Local storage | Shows them in the search box | Until you clear them |
+
+These items are needed for features you use, or they store choices you made yourself. They never leave your browser, and you can clear them at any time in your browser settings.
+
+## Legal basis
+
+We process this data on the basis of our legitimate interest (Article 6(1)(f) GDPR) in running a fast, secure and sustainable website: hosting and protecting the site, understanding how it is used, and funding the project through non-tracking ads. We keep data minimal and avoid identifying individual visitors.
+
+## International transfers
+
+Vercel, Algolia, Carbon Ads, GitHub and Shields.io may process data outside the European Economic Area, including in the United States. Where this happens, these providers rely on safeguards such as the EU–US Data Privacy Framework or the European Commission's Standard Contractual Clauses.
+
+## Your rights
+
+Under the GDPR you have the right to access, correct or delete your personal data, to restrict or object to its processing, and to data portability. Because we don't link analytics data to individuals, we usually can't find data that belongs to you specifically, but we're happy to help. Contact us at [info@lucide.dev](mailto:info@lucide.dev).
+
+You also have the right to file a complaint with a data protection authority. In the Netherlands, that is the [Autoriteit Persoonsgegevens](https://autoriteitpersoonsgegevens.nl).
+
+## Changes
+
+If we add new services or change how we handle data, we'll update this page and the date at the top. The full history of this page is available in our [GitHub repository](https://github.com/lucide-icons/lucide/commits/main/docs/privacy.md).