fix(packages/icons): fixes arrow-big icons

fix(redirects): Fixes icon alias redirects on site (#4122 )
2026-11-11 13:28:19 +00:00 · 2026-03-10 19:03:08 +01:00 · 2026-03-10 18:58:34 +01:00 · 2026-03-06 10:45:21 +01:00 · 2026-03-06 09:15:50 +01:00 · 2026-03-06 09:12:49 +01:00
386 changed files with 6352 additions and 8040 deletions
@@ -13,19 +13,16 @@ body:
      description: Which Lucide packages are affected? You may select more than one.
      options:
        - label: lucide
-        - label: lucide-angular (old version)
-        - label: '@lucide/angular (new version)'
-        - label: '@lucide/astro'
+        - label: lucide-angular
        - label: lucide-flutter
        - label: lucide-preact
        - label: lucide-react
        - label: lucide-react-native
        - label: lucide-solid
-        - label: lucide-static
-        - label: lucide-svelte (old version)
-        - label: `@lucide/svelte (new version)`
+        - label: lucide-svelte
        - label: lucide-vue
        - label: lucide-vue-next
+        - label: lucide-astro
        - label: Figma plugin
        - label: source/main
        - label: other/not relevant
@@ -13,23 +13,19 @@ body:
      description: Which Lucide project do you wish this feature were added to? You may select more than one.
      options:
        - label: lucide
-        - label: lucide-angular (old version)
-        - label: '@lucide/angular (new version)'
-        - label: '@lucide/astro'
+        - label: lucide-angular
        - label: lucide-flutter
        - label: lucide-preact
        - label: lucide-react
        - label: lucide-react-native
        - label: lucide-solid
-        - label: lucide-static
-        - label: lucide-svelte (old version)
-        - label: `@lucide/svelte (new version)`
+        - label: lucide-svelte
        - label: lucide-vue
        - label: lucide-vue-next
+        - label: lucide-astro
        - label: Figma plugin
        - label: all JS packages
        - label: site
-        - label: other/not relevant
    validations:
      required: true
  - type: textarea
@@ -59,7 +59,6 @@
 🅰️ angular package:
  - changed-files:
      - any-glob-to-any-file:
-          - 'packages/angular/*'
          - 'packages/lucide-angular/*'

 # For changes in the lucide preact package
@@ -1,41 +0,0 @@
-name: Lucide Angular checks
-
-on:
-  pull_request:
-    paths:
-      - packages/angular/**
-      - tools/build-icons/**
-      - pnpm-lock.yaml
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
-        with:
-          cache: 'pnpm'
-          node-version-file: 'package.json'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Build
-        run: pnpm --filter @lucide/angular build
-
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
-        with:
-          cache: 'pnpm'
-          node-version-file: 'package.json'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Test
-        run: pnpm --filter @lucide/angular test
@@ -7,17 +7,26 @@ on:
    paths:
      - icons/**/*.svg

+  workflow_dispatch:
+    inputs:
+      version:
+        description: Version
+        required: true
+
 permissions:
  id-token: write # Required for OIDC
  contents: write

+# This is added to make sure we wait until last release is done, this is needed for the font-build process
+concurrency:
+  group: continuous-integration
+
 jobs:
  create-release:
-    if: github.repository == 'lucide-icons/lucide' && startsWith(github.event.head_commit.message, 'feat(icons)')
+    if: github.repository == 'lucide-icons/lucide' && startsWith(github.event.head_commit.message, 'feat(icons)') && github.event_name != 'workflow_dispatch'
    runs-on: ubuntu-latest
    outputs:
      VERSION: ${{ steps.new-version.outputs.NEW_VERSION }}
-
    steps:
      - uses: actions/checkout@v6
      - uses: pnpm/action-setup@v4
@@ -69,3 +78,10 @@ jobs:
    secrets: inherit
    with:
      version: ${{ needs.create-release.outputs.VERSION }}
+
+  dispatch-release:
+    if: github.event_name == 'workflow_dispatch'
+    uses: './.github/workflows/release.yml'
+    secrets: inherit
+    with:
+      version: ${{ inputs.version }}
@@ -28,7 +28,7 @@ jobs:
              { [ -n "$ICON_NAME_SECTION" ] && echo "$ICON_NAME_SECTION" | grep -iqE "$SAFE_KEY|$SAFE_VALUE"; }; then

              gh issue close ${{ github.event.issue.number }} \
-                --reason "not_planned" \
+                --reason "not planned" \
                --comment "It looks like this request is about **${VALUE}**, which is a brand logo.

          Lucide **does not accept** brand logos, and we do not plan to add them in the future. This is due to a combination of **legal restrictions**, **design consistency concerns**, and **practical maintenance reasons**.
@@ -20,9 +20,6 @@ jobs:
      - name: Install dependencies
        run: pnpm install --frozen-lockfile

-      - name: Outline svg Icons
-        run: pnpm build:outline-icons
-
      - name: Create font in ./lucide-font
        run: pnpm build:font

@@ -41,3 +41,19 @@ jobs:

      - name: Test
        run: pnpm --filter @lucide/svelte test
+
+  typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v6
+        with:
+          cache: 'pnpm'
+          node-version-file: 'package.json'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Test
+        run: pnpm --filter @lucide/svelte typecheck
@@ -12,16 +12,13 @@ on:
        description: Version
        type: string

-  workflow_dispatch:
-    inputs:
-      version:
-        description: Version
-        required: true
-
 permissions:
  id-token: write # Required for OIDC
  contents: write

+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+
 jobs:
  pre-release:
    if: github.repository == 'lucide-icons/lucide' && contains('["ericfennis", "karsa-mistmere", "jguddas"]', github.actor)
@@ -58,7 +55,6 @@ jobs:
            'lucide-preact',
            'lucide-solid',
            'lucide-svelte',
-            '@lucide/angular',
            '@lucide/astro',
            '@lucide/svelte',
          ]
@@ -136,11 +132,10 @@ jobs:
      - name: Install dependencies
        run: pnpm install --frozen-lockfile

-      - name: Outline svg Icons
-        run: pnpm build:outline-icons
-
      - name: Create font in ./lucide-font
-        run: pnpm build:font
+        run: pnpm build:font --saveCodePoints
+        env:
+          BLOB_READ_WRITE_TOKEN: ${{ secrets.BLOB_READ_WRITE_TOKEN }}

      - name: 'Upload to Artifacts'
        uses: actions/upload-artifact@v4
@@ -14,12 +14,15 @@ coverage
 stats
 *.log
 outlined
+lucide-font
 packages/**/src/icons/*.js
 packages/**/src/icons/*.ts
 packages/**/src/icons/*.tsx
 packages/**/src/aliases/*.ts
 packages/**/src/aliases.ts
 !packages/**/src/aliases/index.ts
+packages/**/src/utils/*.ts
+!packages/shared/src/utils/*.ts
 packages/**/src/dynamicIconImports.ts
 packages/**/DynamicIcon.d.ts
 packages/**/dynamicIconImports.js
@@ -40,7 +43,7 @@ docs/.vitepress/.temp
 docs/.vitepress/data/iconNodes
 docs/.vitepress/data/iconMetaData.ts
 docs/.vitepress/data/releaseMetaData.json
-docs/.vitepress/data/releaseMetaData
+docs/.vitepress/data/releaseMetadata
 docs/.vitepress/data/categoriesData.json
 docs/.vitepress/data/iconDetails
 docs/.vitepress/data/relatedIcons.json
@@ -1,6 +1,6 @@
 ISC License

-Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2023 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2025.
+Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2026 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2026.

 Permission to use, copy, modify, and/or distribute this software for any
 purpose with or without fee is hereby granted, provided that the above
@@ -18,7 +18,7 @@ OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

 The MIT License (MIT) (for portions derived from Feather)

-Copyright (c) 2013-2023 Cole Bemis
+Copyright (c) 2013-2026 Cole Bemis

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -88,7 +88,16 @@ Thank you to all the people who contributed to Lucide!

 <a href="https://www.digitalocean.com/?refcode=b0877a2caebd&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge"><img src="docs/public/digitalocean.svg" width="200" alt="DigitalOcean Referral Badge" /></a>

+[//]: <> (Open Collective backers)
 ### Awesome backers 🍺

-<a href="https://github.com/pdfme/pdfme"><img src="docs/public/sponsors/pdfme.svg" width="180" alt="pdfme sponsor badge" /></a>
-<a href="https://www.fina.money/"><img src="docs/public/sponsors/fina-money.png" width="180" alt="Fina Money sponsor badge" /></a>
+<a href="https://github.com/pdfme/pdfme"><img src="docs/public/sponsors/pdfme.svg" width="180" alt="pdfme – Open-source PDF generation library built with TypeScript and React." /></a>
+<a href="https://www.paxhistoria.co/"><img src="docs/public/sponsors/paxhistoria.svg?" width="180" alt="Pax Historia – An alternate history sandbox game" /></a>
+
+### Backers ☕
+
+<a href="https://www.fina.money/"><img src="docs/public/sponsors/fina-money.png" width="180" alt="Fina Money – Modular Finance Tracker" /></a>
+
+### Other contributors 💸
+
+You can find all our past and non-recurring financial contributors at [our Open Collective page](https://opencollective.com/lucide-icons).
@@ -2,6 +2,7 @@
  "adobe": "Adobe",
  "airplay": "AirPlay",
  "amazon": "Amazon",
+  "android": "Android",
  "angular": "Angular",
  "aws": "AWS",
  "azure": "Azure",
@@ -1,3 +1,4 @@
+import { eventHandler, setResponseHeader } from 'h3';
 import iconMetaData from '../../data/iconMetaData';

 export default eventHandler((event) => {
@@ -1,3 +1,4 @@
+import { eventHandler, setResponseHeader } from 'h3';
 import iconNodes from '../../data/iconNodes/index.ts';
 import { IconNodeWithKeys } from '../../theme/types';
 import iconMetaData from '../../data/iconMetaData';
@@ -1,6 +1,6 @@
 import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
 import { renderToString, renderToStaticMarkup } from 'react-dom/server';
-import { createElement } from 'react';
+import React from 'react';
 import SvgPreview from '../../lib/SvgPreview/index.tsx';
 import iconNodes from '../../data/iconNodes';
 import createLucideIcon from 'lucide-react/src/createLucideIcon';
@@ -34,36 +34,29 @@ export default eventHandler((event) => {
    const iconNode = iconNodes[backdropName];

    const LucideIcon = createLucideIcon(backdropName, iconNode);
-    const svg = renderToStaticMarkup(createElement(LucideIcon));
+    const svg = renderToStaticMarkup(<LucideIcon />);
    const backdropString = svg.replaceAll('\n', '').replace(/<svg[^>]*>|<\/svg>/g, '');

    children.push(
-      createElement(Backdrop, {
-        backdropString,
-        src: src.replace(/<svg[^>]*>|<\/svg>/g, ''),
-        color: '#777',
-      }),
+      <Backdrop
+        backdropString={backdropString}
+        src={src.replace(/<svg[^>]*>|<\/svg>/g, '')}
+        color="#777"
+      />,
    );
  }

-  const svg = Buffer.from(
-    // We can't use jsx here, is not supported here by nitro.
-    renderToString(
-      createElement(
-        SvgPreview,
-        {
-          src: src.replace(/<svg[^>]*>|<\/svg>/g, ''),
-          height,
-          width,
-          showGrid: true,
-        },
-        children,
-      ),
-    ),
-  ).toString('utf8');
-
  defaultContentType(event, 'image/svg+xml');
  setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');

-  return svg;
+  return renderToString(
+    <SvgPreview
+      src={src.replace(/<svg[^>]*>|<\/svg>/g, '')}
+      showGrid
+      height={height}
+      width={width}
+    >
+      {children}
+    </SvgPreview>,
+  );
 });
@@ -1,6 +1,6 @@
 import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
 import { renderToString, renderToStaticMarkup } from 'react-dom/server';
-import { createElement } from 'react';
+import React from 'react';
 import Diff from '../../../lib/SvgPreview/Diff.tsx';
 import iconNodes from '../../../data/iconNodes';
 import createLucideIcon from 'lucide-react/src/createLucideIcon';
@@ -26,21 +26,26 @@ export default eventHandler((event) => {

  const children = [];

+  const Icon = createLucideIcon(name, iconNodes[name]);
+
  const oldSrc = iconNodes[name]
-    ? renderToStaticMarkup(createElement(createLucideIcon(name, iconNodes[name])))
+    ? renderToStaticMarkup(<Icon />)
        .replaceAll('\n', '')
        .replace(/<svg[^>]*>|<\/svg>/g, '')
    : '';

-  const svg = Buffer.from(
-    // We can't use jsx here, is not supported here by nitro.
-    renderToString(
-      createElement(Diff, { oldSrc, newSrc, showGrid: true, height, width }, children),
-    ),
-  ).toString('utf8');
-
  defaultContentType(event, 'image/svg+xml');
  setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');

-  return svg;
+  return renderToString(
+    <Diff
+      oldSrc={oldSrc}
+      newSrc={newSrc}
+      showGrid
+      height={height}
+      width={width}
+    >
+      {children}
+    </Diff>,
+  );
 });
@@ -1,17 +1,12 @@
 import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
-import { Resvg, initWasm } from '@resvg/resvg-wasm';
 import iconNodes from '../../../data/iconNodes';
-import wasm from './loadWasm';
 import { createElement } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import createLucideIcon from 'lucide-react/src/createLucideIcon';
-
-var initializedResvg = initWasm(wasm);
+import sharp from 'sharp';

 export default eventHandler(async (event) => {
  const { params = {} } = event.context;
-  await initializedResvg;
-
  const imageSize = 96;
  const name = params.data.split('/').at(-3);
  const iconSizeString = params.data.split('/').at(-2);
@@ -45,9 +40,7 @@ export default eventHandler(async (event) => {
    )
    .replace(/<\/svg>/, '</g></svg>');

-  const resvg = new Resvg(svg, { background: '#000' });
-  const pngData = resvg.render();
-  const pngBuffer = Buffer.from(pngData.asPng());
+  const pngBuffer = await sharp(Buffer.from(svg)).png().toBuffer();

  defaultContentType(event, 'image/svg+xml');
  setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');
@@ -67,7 +60,7 @@ export default eventHandler(async (event) => {
    <image
      width="${imageSize}"
      height="${prevSvg ? imageSize * 2 : imageSize}"
-      href="data:image/png;base64,${pngBuffer.toString('base64')}"
+       href="data:image/png;base64,${pngBuffer.toString('base64')}"
      image-rendering="pixelated"
    />
  </mask>
@@ -1,16 +0,0 @@
-import fs from 'fs';
-import module from 'node:module';
-/* WASM_IMPORT */
-
-let wasm;
-
-if (process.env.NODE_ENV === 'development') {
-  const require = module.createRequire(import.meta.url);
-
-  wasm = fs.readFileSync(require.resolve('@resvg/resvg-wasm/index_bg.wasm'));
-} else {
-  // @ts-ignore
-  wasm = resvg_wasm;
-}
-
-export default wasm;
@@ -1,44 +0,0 @@
-import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
-import { renderToString } from 'react-dom/server';
-import { createElement } from 'react';
-import SvgPreview from '../../../lib/SvgPreview/index.tsx';
-import createLucideIcon, { IconNode } from 'lucide-react/src/createLucideIcon';
-import { parseSync } from 'svgson';
-
-export default eventHandler((event) => {
-  const { params } = event.context;
-
-  const [strokeWidth, svgData] = params.data.split('/');
-  const data = svgData.slice(0, -4);
-
-  const src = Buffer.from(data, 'base64').toString('utf8');
-
-  const Icon = createLucideIcon(
-    'icon',
-    parseSync(src.includes('<svg') ? src : `<svg>${src}</svg>`).children.map(
-      ({ name, attributes }) => [name, attributes],
-    ) as IconNode,
-  );
-
-  const svg = Buffer.from(
-    // We can't use jsx here, is not supported here by nitro.
-    renderToString(createElement(Icon, { strokeWidth }))
-      .replace(/fill\="none"/, 'fill="#fff"')
-      .replace(
-        />/,
-        `><style>
-        @media screen and (prefers-color-scheme: light) {
-          svg { fill: transparent !important; }
-        }
-        @media screen and (prefers-color-scheme: dark) {
-          svg { stroke: #fff; fill: transparent !important; }
-        }
-      </style>`,
-      ),
-  ).toString('utf8');
-
-  defaultContentType(event, 'image/svg+xml');
-  setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');
-
-  return svg;
-});
@@ -0,0 +1,37 @@
+import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
+import { renderToString } from 'react-dom/server';
+import React from 'react';
+import Icon from 'lucide-react/src/Icon';
+import type { IconNode } from 'lucide-react/src/types';
+import { parseSync } from 'svgson';
+
+export default eventHandler((event) => {
+  const { params } = event.context;
+
+  const [strokeWidth, svgData] = params.data.split('/');
+  const data = svgData.slice(0, -4);
+
+  const src = Buffer.from(data, 'base64').toString('utf8');
+  const iconNode = parseSync(src.includes('<svg') ? src : `<svg>${src}</svg>`).children.map(
+    ({ name, attributes }) => [name, attributes],
+  ) as IconNode;
+
+  defaultContentType(event, 'image/svg+xml');
+  setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');
+
+  return renderToString(
+    <Icon
+      iconNode={iconNode}
+      strokeWidth={strokeWidth}
+    >
+      <style>
+        {`@media screen and (prefers-color-scheme: light) {
+          svg { fill: transparent !important; }
+        }
+        @media screen and (prefers-color-scheme: dark) {
+          svg { stroke: #fff; fill: transparent !important; }
+        }`}
+      </style>
+    </Icon>,
+  );
+});
@@ -1,6 +1,6 @@
 import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
 import { renderToString } from 'react-dom/server';
-import { createElement } from 'react';
+import React from 'react';
 import Diff from '../../../lib/SvgPreview/Diff.tsx';

 export default eventHandler((event) => {
@@ -41,15 +41,18 @@ export default eventHandler((event) => {
    return '';
  }

-  const svg = Buffer.from(
-    // We can't use jsx here, is not supported here by nitro.
-    renderToString(
-      createElement(Diff, { oldSrc, newSrc, showGrid: true, height, width }, children),
-    ),
-  ).toString('utf8');
-
  defaultContentType(event, 'image/svg+xml');
  setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');

-  return svg;
+  return renderToString(
+    <Diff
+      oldSrc={oldSrc}
+      newSrc={newSrc}
+      showGrid
+      height={height}
+      width={width}
+    >
+      {children}
+    </Diff>,
+  );
 });
@@ -22,6 +22,7 @@ export default eventHandler((event) => {
  const height = getQuery(event).height || undefined;
  const color = getQuery(event).color || undefined;
  const strokeWidth = getQuery(event).strokeWidth || undefined;
+  const background = getQuery(event).background || undefined;

  const LucideIcon = createLucideIcon(params.iconName, iconNode);

@@ -32,6 +33,7 @@ export default eventHandler((event) => {
        height,
        color: color ? `#${color}` : undefined,
        strokeWidth,
+        style: background ? { background } : undefined,
      }),
    ),
  ).toString('utf8');
@@ -1,3 +1,4 @@
+import { eventHandler, setResponseHeader } from 'h3';
 import iconMetaData from '../../data/iconMetaData';

 export default eventHandler((event) => {
@@ -1,3 +0,0 @@
-export default eventHandler(() => {
-  return { nitro: 'Is Awesome! asda' };
-});
@@ -1,6 +1,7 @@
 import { fileURLToPath, URL } from 'node:url';
 import { defineConfig } from 'vitepress';
 import sidebar from './sidebar';
+import getStructuredData from './getStructuredData';

 const title = 'Lucide';
 const socialTitle = 'Lucide Icons';
@@ -9,6 +10,7 @@ const description = 'Beautiful & consistent icon toolkit made by the community.'
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
  title,
+  titleTemplate: ':title \u2013 Lucide',
  description,
  cleanUrls: true,
  outDir: '.vercel/output/static',
@@ -150,8 +152,36 @@ export default defineConfig({
      },
    ],
  ],
+  async transformPageData(pageData) {
+    if (
+      pageData.relativePath.startsWith('icons/') &&
+      !pageData.relativePath.startsWith('icons/lab/') &&
+      pageData.params?.name
+    ) {
+      const iconName = pageData.params.name;
+      pageData.title = `${iconName} icon details`;
+
+      const taggedAs = pageData.params?.tags?.length
+        ? `Tagged as: ${pageData.params.tags.join(', ')}.`
+        : '';
+      const categorizedIn = pageData.params?.category?.length
+        ? `Categorized in: ${pageData.params.category.join(', ')}.`
+        : '';
+
+      pageData.description =
+        `Details and related icons for ${iconName} icon. ${taggedAs} ${categorizedIn}`.trim();
+
+      const structuredData = await getStructuredData(iconName, pageData);
+
+      pageData.frontmatter.head ??= [];
+      pageData.frontmatter.head.push([
+        'script',
+        { type: 'application/ld+json' },
+        JSON.stringify(structuredData),
+      ]);
+    }
+  },
  themeConfig: {
-    // https://vitepress.dev/reference/default-theme-config
    logo: {
      light: '/logo.light.svg',
      dark: '/logo.dark.svg',
@@ -171,5 +171,24 @@
    ],
    "source": "https://github.com/heyvito/lucide-rails",
    "documentation": "https://github.com/heyvito/lucide-rails/blob/master/README.md"
+  },
+  {
+    "name": "lucide-web-components",
+    "description": "Implementation of Lucide icons in Web Components custom elements.",
+    "icon": "/framework-logos/web-components.svg",
+    "shields": [
+      {
+        "alt": "Latest Stable Version",
+        "src": "https://img.shields.io/npm/v/@dile/iconlib",
+        "href": "https://dile-components.com/icons/lucide-icons/"
+      },
+      {
+        "alt": "Total Downloads",
+        "src": "https://img.shields.io/npm/dt/@dile/iconlib",
+        "href": "https://dile-components.com/icons/lucide-icons/"
+      }
+    ],
+    "source": "https://github.com/Polydile/dile-components",
+    "documentation": "https://github.com/Polydile/dile-components/blob/master/packages/iconlib/README.md"
  }
 ]
@@ -0,0 +1,46 @@
+import { PageData } from 'vitepress';
+
+export default async function getStructuredData(iconName: string, pageData: PageData) {
+  const url = `https://lucide.dev/icons/${iconName}`;
+
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'WebPage',
+    '@id': url,
+    name: pageData.title,
+    description: pageData.description,
+    url,
+    inLanguage: 'en',
+    isPartOf: {
+      '@type': 'WebSite',
+      name: 'Lucide Icons',
+      url: 'https://lucide.dev',
+    },
+    breadcrumb: {
+      '@type': 'BreadcrumbList',
+      itemListElement: [
+        { '@type': 'ListItem', position: 1, name: 'Icons', item: 'https://lucide.dev/icons' },
+        { '@type': 'ListItem', position: 2, name: iconName, item: url },
+      ],
+    },
+    mainEntity: {
+      '@type': 'ImageObject',
+      '@id': `${url}#icon`,
+      name: iconName,
+      // TODO: Add support for description extraction from icon metadata
+      // description: 'An ...SVG icon from the Lucide icon set.',
+      contentUrl: `https://lucide.dev/api/icons/${iconName}}?width=24&height=24&background=white`,
+      thumbnailUrl: `https://lucide.dev/api/icons/${iconName}}?width=256&height=256&background=white`,
+      encodingFormat: 'image/svg+xml',
+      keywords: pageData.params?.tags,
+      width: 24,
+      height: 24,
+      creator: {
+        '@type': 'Organization',
+        name: 'Lucide Icons',
+      },
+      datePublished: pageData?.params?.createdRelease?.date,
+      dateModified: pageData?.params?.changedRelease?.date,
+    },
+  };
+}
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';

 interface BackdropProps {
  src: string;
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { PathProps, Path } from './types';
 import getPaths, { assert } from './utils';
 import { GapViolationHighlight } from './GapViolationHighlight.tsx';
@@ -389,15 +389,18 @@ const Handles = ({
  </g>
 );

-const SvgPreview = React.forwardRef<
-  SVGSVGElement,
-  {
-    height?: number;
-    width?: number;
-    src: string | ReturnType<typeof getPaths>;
-    showGrid?: boolean;
-  } & React.SVGProps<SVGSVGElement>
->(({ src, children, height = 24, width = 24, showGrid = false, ...props }, ref) => {
+interface SvgPreviewProps extends React.SVGProps<SVGSVGElement> {
+  height?: number;
+  width?: number;
+  src: string | ReturnType<typeof getPaths>;
+  showGrid?: boolean;
+  children?: React.ReactNode;
+}
+
+const SvgPreview = (
+  { src, children, height = 24, width = 24, showGrid = false, ...props }: SvgPreviewProps,
+  ref,
+) => {
  const subGridSize =
    Math.max(height, width) % 3 === 0
      ? Math.max(height, width) > 24
@@ -494,7 +497,7 @@ const SvgPreview = React.forwardRef<
      {children}
    </svg>
  );
-});
+};

 SvgPreview.displayName = 'SvgPreview';

@@ -1,4 +1,4 @@
-import memoize from 'lodash/memoize';
+import { memoize } from 'lodash-es';
 import SVGPathCommander from 'svg-path-commander';
 import { Path } from './types';

@@ -8,7 +8,7 @@ export type Path = {
  prev: Point;
  next: Point;
  isStart: boolean;
-  circle?: { x: number; y: number; r: number };
+  circle?: { x: number; y: number; r: number; tangentIntersection?: Point };
  cp1?: Point;
  cp2?: Point;
  c: ReturnType<typeof getCommands>[number];
@@ -1,10 +1,8 @@
 import { INode, parseSync } from 'svgson';
-// @ts-ignore
 import toPath from 'element-to-path';
-// @ts-ignore
 import { SVGPathData, encodeSVGPath } from 'svg-pathdata';
 import { Path, Point } from './types';
-import memoize from 'lodash/memoize';
+import { memoize } from 'lodash-es';

 function assertNever(x: never): never {
  throw new Error('Unknown type: ' + x['type']);
@@ -113,16 +113,16 @@ import { LucideAngularModule, $PascalCase } from 'lucide-angular';
  ];
 };

+const highlighter = await createHighlighter({
+  themes: ['github-light', 'github-dark'],
+  langs: Object.keys(bundledLanguages),
+});
+
 export type ThemeOptions =
  | ThemeRegistration
  | { light: ThemeRegistration; dark: ThemeRegistration };

-const highLightCode = async (code: string, lang: string, active?: boolean) => {
-  const highlighter = await createHighlighter({
-    themes: ['github-light', 'github-dark'],
-    langs: Object.keys(bundledLanguages),
-  });
-
+export const highLightCode = async (code: string, lang: string, active?: boolean) => {
  const highlightedCode = highlighter
    .codeToHtml(code, {
      lang,
@@ -1,5 +1,4 @@
-import { bundledLanguages, type ThemeRegistration } from 'shiki';
-import { createHighlighter } from 'shiki';
+import { highLightCode } from './createCodeExamples';

 type CodeExampleType = {
  title: string;
@@ -105,45 +104,17 @@ import { $CamelCase } from '@lucide/lab';

@NgModule({
  imports: [
-    LucideAngularModule.pick({ $CamelCase })
+    LucideAngularModule.pick({ $PascalCase: $CamelCase })
  ],
 })

 // app.component.html
-<lucide-icon name="$CamelCase"></lucide-icon>
+<lucide-icon name="$PascalCase"></lucide-icon>
 `,
    },
  ];
 };

-export type ThemeOptions =
-  | ThemeRegistration
-  | { light: ThemeRegistration; dark: ThemeRegistration };
-
-const highLightCode = async (code: string, lang: string, active?: boolean) => {
-  const highlighter = await createHighlighter({
-    themes: ['github-light', 'github-dark'],
-    langs: Object.keys(bundledLanguages),
-  });
-
-  const highlightedCode = highlighter
-    .codeToHtml(code, {
-      lang,
-      themes: {
-        light: 'github-light',
-        dark: 'github-dark',
-      },
-      defaultColor: false,
-    })
-    .replace('shiki-themes', 'shiki-themes vp-code');
-
-  return `<div class="language-${lang} ${active ? 'active' : ''}">
-  <button title="Copy Code" class="copy"></button>
-  <span class="lang">${lang}</span>
-  ${highlightedCode}
-  </div>`;
-};
-
 export default async function createCodeExamples() {
  const codes = getIconCodes();

@@ -101,9 +101,11 @@ const value = computed({
 }

 .color-picker:hover,
-.color-picker:focus {
+.color-picker:focus-within {
  border-color: var(--vp-c-brand);
-  background: var(--vp-c-bg-alt);
+}
+.color-picker:focus-within {
+  background-color: var(--vp-c-bg);
 }

 .color-input[value='currentColor'] {
@@ -48,7 +48,6 @@ defineProps({
 .fake-input:hover,
 .fake-input:focus {
  border-color: var(--vp-c-brand);
-  background: var(--vp-c-bg-alt);
 }

 .shortcut {
@@ -35,6 +35,8 @@ const updateShortcutSpacing = () => {
  });
 };

+const isMac = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
+
 onMounted(updateShortcutSpacing);
 watch(() => props.shortcut, updateShortcutSpacing);

@@ -73,6 +75,7 @@ defineExpose({
      v-if="type === 'search' && modelValue"
      class="clear-button"
      aria-label="Clear input"
+      :style="{ right: isMac ? '50px' : '68px' }"
    >
      <Icon
        :iconNode="x"
@@ -115,7 +118,9 @@ defineExpose({
 .input:hover,
 .input:focus {
  border-color: var(--vp-c-brand);
-  background: var(--vp-c-bg-alt);
+}
+.input:focus {
+  background-color: var(--vp-c-bg);
 }

 .input.has-icon {
@@ -124,7 +129,7 @@ defineExpose({

 .clear-button {
  position: absolute;
-  right: 56px;
+  right: 68px;
  top: 9px;
  padding: 4px;
  transition: background-color .25s;
@@ -147,10 +152,32 @@ defineExpose({
  pointer-events: none;
 }

+.input[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+  display: none;
+}
+
+.input[type="search"]::-ms-clear {
+  display: none;
+}
+
+.input[type="search"]::-o-clear {
+  display: none;
+}
+
+.input[type="search"]::-moz-clear {
+  display: none;
+}
+
@media (hover: none) {
  .shortcut {
    display: none;
  }
+
+  .clear-button {
+    right: 16px !important;
+  }
 }
 </style>

@@ -163,4 +190,7 @@ defineExpose({
  color: var(--vp-c-text-2);
  pointer-events: none;
 }
+.input-wrapper > svg:has(+ .input.has-icon:focus) {
+  color: var(--vp-c-text-1);
+}
 </style>
@@ -153,7 +153,7 @@ function handleCloseDrawer() {
  >
    <StickyBar class="category-search">
      <InputSearch
-        :placeholder="`Search ${icons.length} icons ...`"
+        :placeholder="`Search ${icons.length} icons…`"
        v-model="searchQuery"
        :shortcut="kbdSearchShortcut"
        class="input-wrapper"
@@ -129,7 +129,7 @@ function handleCloseDrawer() {
  >
    <StickyBar>
      <InputSearch
-        :placeholder="`Search ${icons.length} icons ...`"
+        :placeholder="`Search ${icons.length} icons…`"
        v-model="searchQuery"
        ref="searchInput"
        :shortcut="kbdSearchShortcut"
@@ -1,5 +1,7 @@
 ---
 aside: false
+title: Contributing to Lucide
+description: Guidelines and instructions for contributing to the Lucide project.
 ---

 <!--@include: ../CONTRIBUTING.md -->
@@ -10,6 +10,11 @@ because they can quickly give information.
 However, not everyone can understand them easily. When using icons it is very important to consider
 the following aspects of accessibility.

+::: info
+By default, we hide icons from screen readers using `aria-hidden="true"`.
+You can make them accessible yourself by following the guidelines below.
+:::
+
 ## Provide visible labels

 Icons are a helpful tool to improve perception, but they aren't a replacement for text.
@@ -167,3 +167,15 @@ import { coconut } from '@lucide/lab';
 })
 export class AppModule { }
 ```
+
+## Accessibility
+
+By default, we hide icons from screen readers using `aria-hidden="true"`.
+
+You can add accessibility attributes using aria-labels.
+
+```html
+<lucide-icon name="check" aria-label="Task completed"></lucide-icon>
+```
+
+For best practices on accessibility, please see our [accessibility guide](../advanced/accessibility.md).
@@ -192,3 +192,19 @@ import LucideIcon from './LucideIcon.astro';

 <LucideIcon name="Menu" />
 ```
+
+## Accessibility
+
+By default, we hide icons from screen readers using `aria-hidden="true"`.
+
+You can add accessibility attributes using aria-labels.
+
+```jsx
+---
+import { Check } from '@lucide/astro';
+---
+
+<Check aria-label="Task completed" />
+```
+
+For best practices on accessibility, please see our [accessibility guide](../advanced/accessibility.md).
@@ -131,3 +131,19 @@ const App = () => {

 export default App;
 ```
+
+## Accessibility
+
+By default, we hide icons from screen readers using `aria-hidden="true"`.
+
+You can add accessibility attributes using aria-labels.
+
+```jsx
+import { Check } from 'lucide-preact';
+
+const App = () => {
+  return <Check aria-label="Task completed" />;
+};
+```
+
+For best practices on accessibility, please see our [accessibility guide](../advanced/accessibility.md).
@@ -109,3 +109,19 @@ const App = () => (
  <DynamicIcon name="camera" color="red" size={48} />
 );
 ```
+
+## Accessibility
+
+By default, we hide icons from screen readers using `aria-hidden="true"`.
+
+You can add accessibility attributes using aria-labels.
+
+```jsx
+import { Check } from 'lucide-react';
+
+const App = () => {
+  return <Check aria-label="Task completed" />;
+};
+```
+
+For best practices on accessibility, please see our [accessibility guide](../advanced/accessibility.md).
@@ -144,3 +144,19 @@ const App = () => {

 export default App;
 ```
+
+## Accessibility
+
+By default, we hide icons from screen readers using `aria-hidden="true"`.
+
+You can add accessibility attributes using aria-labels.
+
+```jsx
+import { Check } from 'lucide-solid';
+
+const App = () => {
+  return <Check aria-label="Task completed" />;
+};
+```
+
+For best practices on accessibility, please see our [accessibility guide](../advanced/accessibility.md).
@@ -331,3 +331,19 @@ The example below imports all ES Modules, so exercise caution when using it. Imp

 <LucideIcon name="Menu" />
 ```
+
+## Accessibility
+
+By default, we hide icons from screen readers using `aria-hidden="true"`.
+
+You can add accessibility attributes using aria-labels.
+
+```svelte
+<script>
+  import { Check } from '@lucide/svelte';
+</script>
+
+<Check aria-label="Task completed" />
+```
+
+For best practices on accessibility, please see our [accessibility guide](../advanced/accessibility.md).
@@ -146,3 +146,25 @@ All other props listed above also work on the `Icon` Component.
  </div>
 </template>
 ```
+
+## Accessibility
+
+By default, we hide icons from screen readers using `aria-hidden="true"`.
+
+You can add accessibility attributes using aria-labels.
+
+```vue
+<script setup>
+import { Check } from 'lucide-vue-next';
+</script>
+
+<template>
+  <Check
+    color="red"
+    :size="32"
+    aria-label="Task completed"
+  />
+</template>
+```
+
+For best practices on accessibility, please see our [accessibility guide](../advanced/accessibility.md).
@@ -62,6 +62,7 @@ Here is a complete example with unpkg
  </script>
 </body>
 ```
+We strongly suggest you anchor to a specific version, such as `https://unpkg.com/lucide@x.xxx.x/dist/umd/lucide.min.js`, rather than using `@latest`. 

 ### With ESModules

@@ -203,3 +204,23 @@ createIcons({
  }
 });
 ```
+
+## Accessibility
+
+By default, we hide icons from screen readers using `aria-hidden="true"`.
+
+You can add accessibility attributes using aria-labels.
+
+```html
+<!DOCTYPE html>
+<body>
+  <i data-lucide="house" aria-label="Home icon"></i>
+
+  <script src="https://unpkg.com/lucide@latest"></script>
+  <script>
+    lucide.createIcons();
+  </script>
+</body>
+```
+
+For best practices on accessibility, please see our [accessibility guide](../advanced/accessibility.md).
@@ -1,4 +1,6 @@
 ---
+title: Categories
+description: Explore Lucide icons organized into various categories for easier browsing.
 layout: page
 outline: 2
 outlineTitle: Categories
@@ -1,4 +1,6 @@
 ---
+title: Icons
+description: Browse all Lucide icons.
 layout: page
 outline: 2
 outlineTitle: Categories
@@ -2,6 +2,7 @@
 # https://vitepress.dev/reference/default-theme-home-page
 layout: home
 markdownStyles: false
+titleTemplate: false

 head:
  - - link
@@ -1,4 +1,6 @@
 ---
+title: License
+description: Review the licensing terms for using Lucide icons and resources.
 aside: false
 editLink: false
 ---
@@ -1,32 +1,10 @@
-import copy from 'rollup-plugin-copy';
-import replace from '@rollup/plugin-replace';
-
 export default defineNitroConfig({
-  compatibilityDate: '2025-07-30',
-  preset: 'vercel_edge',
+  compatibilityDate: '2026-02-26',
+  preset: 'vercel',
  srcDir: '.vitepress',
  routeRules: {
    '/api/**': { cors: false },
  },
-  rollupConfig: {
-    external: ['@resvg/resvg-wasm/index_bg.wasm', './index_bg.wasm?module'],
-    plugins: [
-      copy({
-        targets: [
-          {
-            src: './node_modules/@resvg/resvg-wasm/index_bg.wasm',
-            dest: './.vercel/output/functions/__nitro.func',
-          },
-        ],
-      }),
-      replace({
-        include: ['./**/*.ts'],
-        '/* WASM_IMPORT */': 'import resvg_wasm from "./index_bg.wasm?module";',
-        delimiters: ['', ''],
-        preventAssignment: false,
-      }),
-    ],
-  },
  esbuild: {
    options: {
      jsxFactory: 'React.createElement',
@@ -20,7 +20,7 @@
    "dev": "npx nitropack dev",
    "prebuild:api": "npx nitropack prepare",
    "build:api": "npx nitropack build",
-    "build": "pnpm run /^prebuild:.*/ && pnpm run /^build:.*/ && pnpm postbuild:vercelJson",
+    "build": "pnpm run /^prebuild:.*/ && pnpm run build:api && pnpm run build:docs && pnpm postbuild:vercelJson",
    "preview": "node .output/server/index.mjs"
  },
  "author": "Eric Fennis",
@@ -31,7 +31,8 @@
    "@lucide/shared": "workspace:*",
    "@rollup/plugin-replace": "^6.0.3",
    "@types/semver": "^7.7.1",
-    "nitropack": "2.8.1",
+    "h3": "^1.15.4",
+    "nitropack": "^2.12.4",
    "rollup-plugin-copy": "^3.5.0",
    "svg-path-commander": "^2.1.11",
    "vitepress": "^1.6.4"
@@ -39,20 +40,19 @@
  "dependencies": {
    "@floating-ui/vue": "^1.1.9",
    "@headlessui/vue": "^1.7.23",
-    "@resvg/resvg-wasm": "^2.6.2",
    "@vueuse/components": "^14.0.0",
    "@vueuse/core": "^14.0.0",
    "element-to-path": "^1.2.1",
    "fuse.js": "^7.1.0",
    "jszip": "^3.10.1",
-    "lodash": "^4.17.21",
-    "lodash-es": "^4.17.21",
+    "lodash-es": "^4.17.23",
    "lucide-react": "workspace:*",
    "lucide-vue-next": "workspace:*",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
    "sandpack-vue3": "3.1.11",
    "semver": "^7.7.3",
+    "sharp": "^0.34.5",
    "shiki": "^3.15.0",
    "simple-git": "^3.30.0",
    "sitemap": "^7.1.2",
@@ -1,4 +1,6 @@
 ---
+title: Packages
+description: Discover the various packages available in the Lucide ecosystem.
 layout: page
 outline: 2
 outlineTitle: Packages
@@ -0,0 +1 @@
+<svg width="161" height="132" viewBox="0 0 161 132" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="0%" y1="50%" y2="50%" id="a"><stop stop-color="#2A3B8F" offset="0%"/><stop stop-color="#29ABE2" offset="100%"/></linearGradient><linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="c"><stop stop-color="#B4D44E" offset="0%"/><stop stop-color="#E7F716" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path fill="#166DA5" d="M160.6 65.9l-17.4 29.3-24.4-29.7 24.4-28.9z"/><path fill="#8FDB69" d="M141.3 100.2l-26.5-31.7-15.9 26.6 24.7 36.1z"/><path fill="#166DA5" d="M141 31.4l-26.2 31.8-15.9-26.6L123.6.9z"/><path fill="url(#a)" opacity=".95" d="M61.1 31.4H141L123.4.7H78.7z M114.8 63.3H159l-15.9-26.8H98.8"/><path fill="url(#c)" opacity=".95" d="M141.3 100.3H61l17.6 30.5h45z M114.8 68.4H159l-15.9 26.8H98.8"/><path fill="#010101" d="M78.6 130.8L41 65.8 79.1.8H37.9L.4 65.8l37.5 65z"/></g></svg>
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="138" height="42" fill="none" viewBox="0 0 138 42">
+  <path fill="#fff" fill-rule="evenodd" d="M138 4a3.997 3.997 0 0 0-4-4H4a4 4 0 0 0-4 4v34a4 4 0 0 0 4 4h130a4 4 0 0 0 4-4z" clip-rule="evenodd"/>
+  <path fill="#000" fill-rule="evenodd" d="M27.963 16.943q1.08 0 1.864.43.783.428 1.212 1.154v-1.454h3.653V27.53H31.04v-1.454q-.429.727-1.23 1.156-.783.43-1.846.43-1.248 0-2.274-.653-1.006-.653-1.603-1.864-.578-1.23-.578-2.852t.578-2.834q.597-1.211 1.604-1.863a4.15 4.15 0 0 1 2.273-.653m1.175 3.188q-.82 0-1.36.577-.542.56-.542 1.585 0 1.006.541 1.602.54.579 1.36.579.802 0 1.343-.579.558-.578.56-1.602-.001-1.007-.56-1.585a1.76 1.76 0 0 0-1.342-.577" clip-rule="evenodd"/>
+  <path fill="#000" d="M75.361 16.943q2.05 0 3.225 1.006t1.361 2.648h-3.3q-.092-.504-.447-.765-.335-.28-.913-.28-.447 0-.69.169a.55.55 0 0 0-.223.465q0 .373.429.579.428.186 1.379.39 1.137.243 1.882.541.765.3 1.324.969.578.653.578 1.79 0 .914-.541 1.64-.522.727-1.51 1.156-.969.41-2.293.41-1.417 0-2.535-.466-1.1-.485-1.752-1.304a3.47 3.47 0 0 1-.708-1.883h3.542q.075.503.466.782.39.28.968.28.448 0 .71-.186a.57.57 0 0 0 .26-.485q0-.39-.428-.578-.43-.185-1.417-.41-1.12-.223-1.865-.503a3.25 3.25 0 0 1-1.304-.914q-.54-.633-.54-1.715 0-.93.502-1.677.504-.765 1.473-1.211.989-.448 2.367-.448"/>
+  <path fill="#000" fill-rule="evenodd" d="M94.305 16.943q1.564 0 2.796.653a4.8 4.8 0 0 1 1.957 1.863q.726 1.212.727 2.834 0 1.621-.727 2.852a4.8 4.8 0 0 1-1.957 1.864q-1.25.652-2.815.652-1.566 0-2.814-.652a4.8 4.8 0 0 1-1.939-1.864q-.709-1.212-.709-2.852 0-1.622.71-2.834a4.95 4.95 0 0 1 1.956-1.863q1.248-.653 2.815-.653m0 3.168q-.746 0-1.25.56-.502.56-.502 1.622 0 1.08.484 1.64.485.559 1.25.56.763-.001 1.267-.56.52-.578.521-1.64 0-1.063-.521-1.622a1.61 1.61 0 0 0-1.25-.56M118.921 16.943q1.081 0 1.864.43.783.428 1.212 1.154v-1.454h3.653V27.53h-3.653v-1.454q-.429.727-1.23 1.156-.784.43-1.846.43-1.248 0-2.274-.653-1.006-.653-1.603-1.864-.577-1.23-.577-2.852t.577-2.834q.597-1.211 1.603-1.863a4.15 4.15 0 0 1 2.274-.653m1.175 3.188q-.82 0-1.361.577-.54.56-.541 1.585 0 1.006.541 1.602.541.579 1.361.579.8 0 1.342-.579.558-.578.559-1.602 0-1.007-.559-1.585a1.77 1.77 0 0 0-1.342-.577M17.81 14.39q1.584 0 2.683.558 1.119.56 1.678 1.548.56.988.56 2.274 0 1.193-.56 2.18-.54.97-1.66 1.567-1.099.577-2.701.577H16v4.436h-3.653V14.39zM16 20.186h1.454q1.548 0 1.547-1.416 0-1.436-1.547-1.436h-1.454z" clip-rule="evenodd"/>
+  <path fill="#000" d="m41.658 19.702 1.51-2.629h4.008l-3.56 5.331 3.69 5.126h-4.1l-1.884-2.628-1.49 2.628h-4.009l3.487-5.424-3.635-5.033h4.1zM55.42 19.33h4.456v-4.94h3.653v13.14h-3.653v-5.274h-4.455v5.274h-3.653V14.39h3.653zM69.18 27.53h-3.654V17.073h3.654zM85.919 17.073h1.9v3.038h-1.9v3.505q0 .429.186.615.204.187.671.187h1.063v3.112h-1.585q-4.008 0-4.008-3.97v-3.449H80.96v-3.038h1.286v-2.535h3.673zM108.205 20.876h-1.024q-1.194 0-1.772.466-.577.465-.577 1.622v4.566h-3.654V17.073h3.654v1.846a4.76 4.76 0 0 1 1.491-1.417 3.6 3.6 0 0 1 1.882-.521zM113.075 27.53h-3.653V17.073h3.653zM67.372 12.339q.95 0 1.528.54.597.542.597 1.361 0 .801-.597 1.342-.577.523-1.528.523-.97 0-1.565-.523a1.76 1.76 0 0 1-.579-1.342q0-.82.579-1.36.596-.54 1.565-.541M111.268 12.339q.95 0 1.528.54.596.542.597 1.361 0 .801-.597 1.342-.578.522-1.528.523-.97 0-1.567-.523a1.76 1.76 0 0 1-.577-1.342q0-.82.577-1.36.597-.54 1.567-.541"/>
+</svg>
@@ -14,32 +14,38 @@ const iconAliasesRedirectRoutes = Object.entries(iconMetaData)
    const aliasRouteMatches = aliases.map((alias) => alias.name).join('|');

    return {
-      src: `/icons/${aliasRouteMatches}`,
-      status: 302,
+      src: `^/icons/(${aliasRouteMatches})$`,
+      status: 308,
      headers: {
        Location: `/icons/${iconName}`,
      },
    };
  });

-const vercelRouteConfig = {
-  version: 3,
-  overrides: {},
-  cleanUrls: true,
-  routes: [
-    {
-      handle: 'filesystem',
-    },
-    {
-      src: '(?<url>/api/.*)',
-      dest: '/__nitro?url=$url',
-    },
-    ...iconAliasesRedirectRoutes,
-  ],
-};
+const vercelOutputJSON = path.resolve(currentDir, '.vercel/output/config.json');
+
+const vercelConfig = await fs.promises.readFile(vercelOutputJSON, 'utf-8');
+
+const vercelRouteConfig = JSON.parse(vercelConfig);
+
+vercelRouteConfig.routes = [...iconAliasesRedirectRoutes, ...vercelRouteConfig.routes];
+
+// Adjust the existing catch-all route to only catch API routes, so that we can add a new catch-all route for 404s
+const allCatchRoute = '/(.*)';
+const fallBackIndex = vercelRouteConfig.routes.findIndex((route) => route.src === allCatchRoute);
+
+if (fallBackIndex === -1) {
+  throw new Error(
+    `Could not find the expected catch-all route with src "${allCatchRoute}" in the existing Vercel config. Please make sure that the existing config has a catch-all route and that its src is "${allCatchRoute}".`,
+  );
+}
+
+vercelRouteConfig.routes[fallBackIndex].src = '/api/(.*)';
+vercelRouteConfig.routes.push({
+  src: allCatchRoute,
+  dest: '/404.html',
+});

 const output = JSON.stringify(vercelRouteConfig, null, 2);

-const vercelOutputJSON = path.resolve(currentDir, '.vercel/output/config.json');
-
 await fs.promises.writeFile(vercelOutputJSON, output, 'utf-8');
@@ -1,4 +1,5 @@
 ---
+title: Showcase
 layout: page
 outline: 2
 outlineTitle: Showcase
@@ -2,6 +2,8 @@
  "extends": "./.nitro/types/tsconfig.json",
  "compilerOptions": {
    "jsx": "react",
+    "jsxFactory": "React.createElement",
+    "jsxFragmentFactory": "React.Fragment",
    "allowImportingTsExtensions": true,
    "allowSyntheticDefaultImports": true,
    "noEmit": true,
@@ -1,4 +1,6 @@
 {
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "fluid": true,
  "cleanUrls": true,
  "github": {
    "silent": true
@@ -9,6 +9,6 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M15 11a1 1 0 0 0 1 1h2.939a1 1 0 0 1 .75 1.811l-6.835 6.836a1.207 1.207 0 0 1-1.707 0L4.31 13.81a1 1 0 0 1 .75-1.811H8a1 1 0 0 0 1-1V9a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1z" />
+  <path d="M14 8a1 1 0 0 1 1 1v2a1 1 0 0 0 1 1h3a1 1 0 0 1 .707 1.707l-7 7a1 1 0 0 1-1.338.069l-7.076-7.069A1 1 0 0 1 5 12h3a1 1 0 0 0 1-1V9a1 1 0 0 1 1-1z" />
  <path d="M9 4h6" />
 </svg>
@@ -9,5 +9,5 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M15 11a1 1 0 0 0 1 1h2.939a1 1 0 0 1 .75 1.811l-6.835 6.836a1.207 1.207 0 0 1-1.707 0L4.31 13.81a1 1 0 0 1 .75-1.811H8a1 1 0 0 0 1-1V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1z" />
+  <path d="M9 11a1 1 0 0 1-1 1H5a1 1 0 0 0-.707 1.707l7 7a1 1 0 0 0 1.338.069l7.076-7.069A1 1 0 0 0 19 12h-3a1 1 0 0 1-1-1V5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1z" />
 </svg>
@@ -9,6 +9,6 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M13 9a1 1 0 0 1-1-1V5.061a1 1 0 0 0-1.811-.75l-6.835 6.836a1.207 1.207 0 0 0 0 1.707l6.835 6.835a1 1 0 0 0 1.811-.75V16a1 1 0 0 1 1-1h2a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1z" />
+  <path d="M10.293 19.707A1 1 0 0 0 12 19v-3a1 1 0 0 1 1-1h2a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-2a1 1 0 0 1-1-1V5a1 1 0 0 0-1.707-.707l-7 7a1 1 0 0 0-.069 1.338z" />
  <path d="M20 9v6" />
 </svg>
@@ -9,5 +9,5 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M13 9a1 1 0 0 1-1-1V5.061a1 1 0 0 0-1.811-.75l-6.835 6.836a1.207 1.207 0 0 0 0 1.707l6.835 6.835a1 1 0 0 0 1.811-.75V16a1 1 0 0 1 1-1h6a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1z" />
+  <path d="M10.293 19.707A1 1 0 0 0 12 19v-3a1 1 0 0 1 1-1h6a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-6a1 1 0 0 1-1-1V5a1 1 0 0 0-1.707-.707l-7 7a1 1 0 0 0-.069 1.338z" />
 </svg>
@@ -9,6 +9,6 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M11 9a1 1 0 0 0 1-1V5.061a1 1 0 0 1 1.811-.75l6.836 6.836a1.207 1.207 0 0 1 0 1.707l-6.836 6.835a1 1 0 0 1-1.811-.75V16a1 1 0 0 0-1-1H9a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1z" />
+  <path d="M11 9a1 1 0 0 0 1-1V5a1 1 0 0 1 1.707-.707l7 7a1 1 0 0 1 .069 1.338l-7.069 7.076A1 1 0 0 1 12 19v-3a1 1 0 0 0-1-1H9a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1z" />
  <path d="M4 9v6" />
 </svg>
@@ -9,5 +9,5 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M11 9a1 1 0 0 0 1-1V5.061a1 1 0 0 1 1.811-.75l6.836 6.836a1.207 1.207 0 0 1 0 1.707l-6.836 6.835a1 1 0 0 1-1.811-.75V16a1 1 0 0 0-1-1H5a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1z" />
+  <path d="M11 9a1 1 0 0 0 1-1V5a1 1 0 0 1 1.707-.707l7 7a1 1 0 0 1 .069 1.338l-7.069 7.076A1 1 0 0 1 12 19v-3a1 1 0 0 0-1-1H5a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1z" />
 </svg>
@@ -9,6 +9,6 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M9 13a1 1 0 0 0-1-1H5.061a1 1 0 0 1-.75-1.811l6.836-6.835a1.207 1.207 0 0 1 1.707 0l6.835 6.835a1 1 0 0 1-.75 1.811H16a1 1 0 0 0-1 1v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z" />
+  <path d="M4.293 10.293A1 1 0 0 0 5 12h3a1 1 0 0 1 1 1v2a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-2a1 1 0 0 1 1-1h3a1 1 0 0 0 .707-1.707l-7-7a1 1 0 0 0-1.338-.069z" />
  <path d="M9 20h6" />
 </svg>
@@ -9,5 +9,5 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M9 13a1 1 0 0 0-1-1H5.061a1 1 0 0 1-.75-1.811l6.836-6.835a1.207 1.207 0 0 1 1.707 0l6.835 6.835a1 1 0 0 1-.75 1.811H16a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z" />
+  <path d="M4.293 10.293A1 1 0 0 0 5 12h3a1 1 0 0 1 1 1v6a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-6a1 1 0 0 1 1-1h3a1 1 0 0 0 .707-1.707l-7-7a1 1 0 0 0-1.338-.069z" />
 </svg>
@@ -9,6 +9,6 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M4.929 4.929 19.07 19.071" />
  <circle cx="12" cy="12" r="10" />
+  <path d="M4.929 4.929 19.07 19.071" />
 </svg>
@@ -2,7 +2,8 @@
  "$schema": "../icon.schema.json",
  "contributors": [
    "karsa-mistmere",
-    "jamiemlaw"
+    "jamiemlaw",
+    "jguddas"
  ],
  "tags": [
    "plaster",
@@ -13,7 +13,7 @@
  <path d="M10 14.01h.01" />
  <path d="M14 10.01h.01" />
  <path d="M14 14.01h.01" />
-  <path d="M18 6v11.5" />
+  <path d="M18 6v12" />
  <path d="M6 6v12" />
  <rect x="2" y="6" width="20" height="12" rx="2" />
 </svg>
@@ -1,7 +1,8 @@
 {
  "$schema": "../icon.schema.json",
  "contributors": [
-    "danielbayley"
+    "danielbayley",
+    "jguddas"
  ],
  "tags": [
    "alarm",
@@ -10,6 +10,6 @@
  stroke-linejoin="round"
 >
  <path d="M10.268 21a2 2 0 0 0 3.464 0" />
-  <path d="M13.916 2.314A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.74 7.327A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673 9 9 0 0 1-.585-.665" />
-  <circle cx="18" cy="8" r="3" />
+  <path d="M11.68 2.009A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673c-.824-.85-1.678-1.731-2.21-3.348" />
+  <circle cx="18" cy="5" r="3" />
 </svg>
@@ -5,6 +5,15 @@
    "mittalyashu"
  ],
  "tags": [
+    "cryptocurrency",
+    "digital",
+    "blockchain",
+    "finance",
+    "coin",
+    "market",
+    "decentralized",
+    "investment",
+    "crypto",
    "currency",
    "money",
    "payment"
@@ -9,9 +9,9 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="m19 3 1 1" />
-  <path d="m20 2-4.5 4.5" />
-  <path d="M20 7.898V21a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" />
-  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2h7.844" />
-  <circle cx="14" cy="8" r="2" />
+  <path d="M13 2H6.5A2.5 2.5 0 0 0 4 4.5v15" />
+  <path d="M17 2v6" />
+  <path d="M17 4h2" />
+  <path d="M20 15.2V21a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" />
+  <circle cx="17" cy="10" r="2" />
 </svg>
@@ -1,7 +1,8 @@
 {
  "$schema": "../icon.schema.json",
  "contributors": [
-    "danielbayley"
+    "danielbayley",
+    "jguddas"
  ],
  "tags": [
    "read",
@@ -9,6 +9,6 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2Z" />
+  <path d="M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z" />
  <path d="m9 10 2 2 4-4" />
 </svg>
@@ -2,7 +2,8 @@
  "$schema": "../icon.schema.json",
  "contributors": [
    "siarie",
-    "ericfennis"
+    "ericfennis",
+    "jguddas"
  ],
  "tags": [
    "delete",
@@ -9,6 +9,6 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />
-  <line x1="15" x2="9" y1="10" y2="10" />
+  <path d="M15 10H9" />
+  <path d="M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z" />
 </svg>
@@ -2,7 +2,8 @@
  "$schema": "../icon.schema.json",
  "contributors": [
    "siarie",
-    "ericfennis"
+    "ericfennis",
+    "jguddas"
  ],
  "tags": [
    "add"
@@ -9,7 +9,7 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />
-  <line x1="12" x2="12" y1="7" y2="13" />
-  <line x1="15" x2="9" y1="10" y2="10" />
+  <path d="M12 7v6" />
+  <path d="M15 10H9" />
+  <path d="M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z" />
 </svg>
@@ -1,7 +1,8 @@
 {
  "$schema": "../icon.schema.json",
  "contributors": [
-    "danielbayley"
+    "danielbayley",
+    "jguddas"
  ],
  "tags": [
    "read",
@@ -9,7 +9,7 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2Z" />
  <path d="m14.5 7.5-5 5" />
+  <path d="M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z" />
  <path d="m9.5 7.5 5 5" />
 </svg>
@@ -4,9 +4,18 @@
    "colebemis",
    "csandman",
    "siarie",
-    "ericfennis"
+    "ericfennis",
+    "jguddas"
  ],
  "tags": [
+    "save",
+    "favorite",
+    "mark",
+    "label",
+    "attachment",
+    "file",
+    "stick",
+    "pin",
    "read",
    "clip",
    "marker",
@@ -9,5 +9,5 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />
+  <path d="M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z" />
 </svg>
@@ -2,7 +2,8 @@
  "$schema": "../icon.schema.json",
  "contributors": [
    "danielbayley",
-    "jamiemlaw"
+    "jamiemlaw",
+    "jguddas"
  ],
  "tags": [
    "issue",
@@ -10,13 +10,15 @@
  stroke-linejoin="round"
 >
  <path d="M12 20v-8" />
+  <path d="M12.656 7H14a4 4 0 0 1 4 4v1.344" />
  <path d="M14.12 3.88 16 2" />
-  <path d="M15 7.13V6a3 3 0 0 0-5.14-2.1L8 2" />
-  <path d="M18 12.34V11a4 4 0 0 0-4-4h-1.3" />
+  <path d="M17.123 17.123A6 6 0 0 1 6 14v-3a4 4 0 0 1 1.72-3.287" />
  <path d="m2 2 20 20" />
  <path d="M21 5a4 4 0 0 1-3.55 3.97" />
-  <path d="M22 13h-3.34" />
+  <path d="M22 13h-3.344" />
  <path d="M3 21a4 4 0 0 1 3.81-4" />
+  <path d="M3 5a4 4 0 0 0 3.55 3.97" />
  <path d="M6 13H2" />
-  <path d="M7.7 7.7A4 4 0 0 0 6 11v3a6 6 0 0 0 11.13 3.13" />
+  <path d="m8 2 1.88 1.88" />
+  <path d="M9.712 4.06A3 3 0 0 1 15 6v1.13" />
 </svg>
@@ -9,8 +9,8 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
+  <circle cx="12" cy="12" r="10" />
  <line x1="8" x2="16" y1="12" y2="12" />
  <line x1="12" x2="12" y1="16" y2="16" />
  <line x1="12" x2="12" y1="8" y2="8" />
-  <circle cx="12" cy="12" r="10" />
 </svg>
@@ -9,7 +9,7 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
+  <circle cx="12" cy="12" r="10" />
  <path d="M7 10h10" />
  <path d="M7 14h10" />
-  <circle cx="12" cy="12" r="10" />
 </svg>
@@ -9,8 +9,8 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
+  <circle cx="12" cy="12" r="10" />
  <path d="M10 16V9.5a1 1 0 0 1 5 0" />
  <path d="M8 12h4" />
  <path d="M8 16h7" />
-  <circle cx="12" cy="12" r="10" />
 </svg>
@@ -9,7 +9,7 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
+  <circle cx="12" cy="12" r="10" />
  <path d="M12 7v4" />
  <path d="M7.998 9.003a5 5 0 1 0 8-.005" />
-  <circle cx="12" cy="12" r="10" />
 </svg>
@@ -9,6 +9,6 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M22 2 2 22" />
  <circle cx="12" cy="12" r="10" />
+  <path d="M22 2 2 22" />
 </svg>
@@ -9,6 +9,6 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M11.051 7.616a1 1 0 0 1 1.909.024l.737 1.452a1 1 0 0 0 .737.535l1.634.256a1 1 0 0 1 .588 1.806l-1.172 1.168a1 1 0 0 0-.282.866l.259 1.613a1 1 0 0 1-1.541 1.134l-1.465-.75a1 1 0 0 0-.912 0l-1.465.75a1 1 0 0 1-1.539-1.133l.258-1.613a1 1 0 0 0-.282-.867l-1.156-1.152a1 1 0 0 1 .572-1.822l1.633-.256a1 1 0 0 0 .737-.535z" />
  <circle cx="12" cy="12" r="10" />
+  <path d="M11.051 7.616a1 1 0 0 1 1.909.024l.737 1.452a1 1 0 0 0 .737.535l1.634.256a1 1 0 0 1 .588 1.806l-1.172 1.168a1 1 0 0 0-.282.866l.259 1.613a1 1 0 0 1-1.541 1.134l-1.465-.75a1 1 0 0 0-.912 0l-1.465.75a1 1 0 0 1-1.539-1.133l.258-1.613a1 1 0 0 0-.282-.867l-1.156-1.152a1 1 0 0 1 .572-1.822l1.633-.256a1 1 0 0 0 .737-.535z" />
 </svg>
@@ -3,7 +3,8 @@
  "contributors": [
    "it-is-not",
    "ericfennis",
-    "danielbayley"
+    "danielbayley",
+    "torfmuer"
  ],
  "tags": [
    "movie",
@@ -9,8 +9,8 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3Z" />
-  <path d="m6.2 5.3 3.1 3.9" />
-  <path d="m12.4 3.4 3.1 4" />
-  <path d="M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" />
+  <path d="m12.296 3.464 3.02 3.956" />
+  <path d="M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3z" />
+  <path d="M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+  <path d="m6.18 5.276 3.1 3.899" />
 </svg>
@@ -2,7 +2,8 @@
  "$schema": "../icon.schema.json",
  "contributors": [
    "karsa-mistmere",
-    "ericfennis"
+    "ericfennis",
+    "Spleefies"
  ],
  "tags": [
    "paste",
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				<svg width="161" height="132" viewBox="0 0 161 132" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="0%" y1="50%" y2="50%" id="a"><stop stop-color="#2A3B8F" offset="0%"/><stop stop-color="#29ABE2" offset="100%"/></linearGradient><linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="c"><stop stop-color="#B4D44E" offset="0%"/><stop stop-color="#E7F716" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path fill="#166DA5" d="M160.6 65.9l-17.4 29.3-24.4-29.7 24.4-28.9z"/><path fill="#8FDB69" d="M141.3 100.2l-26.5-31.7-15.9 26.6 24.7 36.1z"/><path fill="#166DA5" d="M141 31.4l-26.2 31.8-15.9-26.6L123.6.9z"/><path fill="url(#a)" opacity=".95" d="M61.1 31.4H141L123.4.7H78.7z M114.8 63.3H159l-15.9-26.8H98.8"/><path fill="url(#c)" opacity=".95" d="M141.3 100.3H61l17.6 30.5h45z M114.8 68.4H159l-15.9 26.8H98.8"/><path fill="#010101" d="M78.6 130.8L41 65.8 79.1.8H37.9L.4 65.8l37.5 65z"/></g></svg>