feat(icons): added monitor-cloud icon (#3037 )

* [github] Added issue template forms * [github] yaml => yml * Syntax fixes * Further syntax fixes * Sort issue templates * Update 02_bug_report.yml * Added icons/monitor-cloud.svg * Added icons/monitor-cloud.json --------- Co-authored-by: Karsa <karsa@karsa.org> Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
Updated icons/sword.svg (#3421 )
2026-11-11 13:28:19 +00:00 · 2025-10-16 13:55:01 +02:00 · 2025-10-16 13:53:00 +02:00 · 2025-10-16 13:48:06 +02:00 · 2025-10-10 15:47:55 +02:00 · 2025-10-06 21:03:54 +02:00
672 changed files with 7876 additions and 3077 deletions
@@ -7,8 +7,10 @@ body:
      value: |
        Before submitting an icon request check if it has already been requested. If there is an open request, please add a 👍.

-        **Important note**: No new brand logos are allowed, see https://github.com/lucide-icons/lucide/issues/670.
-        Existing brand icons will also be phased out. For brand icons, consider using https://simpleicons.org, which offers purpose-built SVGs that are also on a 24×24px grid.
+        > [!CAUTION]
+        > New brand logos are **not** allowed, see our official statement: https://github.com/lucide-icons/lucide/blob/main/BRAND_LOGOS_STATEMENT.md.
+        >
+        > Existing brand icons are being phased out. Consider using https://simpleicons.org, which offers purpose-built SVGs that are also on a 24×24px grid.
  - type: input
    id: name
    attributes:
@@ -41,9 +43,9 @@ body:
          required: true
        - label: I have searched existing icons to make sure it does not already exist and I didn't find any.
          required: true
-        - label: I am not requesting a brand logo and the art is not protected by copyright.
+        - label: I am not requesting a brand logo and the art is not protected by copyright, see more at https://github.com/lucide-icons/lucide/blob/main/BRAND_LOGOS_STATEMENT.md
          required: true
-        - label: I am not requesting an icon that includes religious, political imagery or hate symbols.
+        - label: I am not requesting an icon that includes religious, war/violence related, political imagery or hate symbols.
          required: true
        - label: I have provided appropriate use cases for the icon(s) requested.
          required: true
@@ -25,10 +25,12 @@ Common scopes: icons, docs, studio, site, dev

 ### Concept <!-- ONLY for new icons -->
 <!-- All of these requirements must be fulfilled. -->
+<!-- IMPORTANT! Please read our official statement on brand logos in Lucide: -->
+<!-- https://github.com/lucide-icons/lucide/blob/main/BRAND_LOGOS_STATEMENT.md -->
 - [ ] I have provided valid use cases for each icon.
- [ ] I have not added any a brand or logo icon.
+- [ ] I have [not added any brand or logo icon](https://github.com/lucide-icons/lucide/blob/main/BRAND_LOGOS_STATEMENT.md).
 - [ ] I have not used any hate symbols.
- [ ] I have not included any religious or political imagery.
+- [ ] I have not included any religious, war/violence related or political imagery.

 ### Author, credits & license<!-- ONLY for new icons. -->
 <!-- Please choose one of the following, and put an "x" next to it. -->
@@ -16,7 +16,7 @@ jobs:
      - name: Check for blocked phrases in issue title
        run: |
          ISSUE_TITLE=$(jq -r '.issue.title' "$GITHUB_EVENT_PATH")
-          BLOCKED_PHRASES=("twitter" "whatsapp" "logo" "google" "tiktok" "facebook" "slack" "discord" "bluesky" "spotify" "behance" "pix" "x.com")
+          BLOCKED_PHRASES=("twitter" "whatsapp" "logo" "google" "tiktok" "facebook" "slack" "discord" "bluesky" "spotify" "behance" "pix" "x.com" "telegram")

          # Check title and body for blocked phrases
          for PHRASE in "${BLOCKED_PHRASES[@]}"
@@ -0,0 +1,37 @@
+name: Pull request tags suggestions
+
+on:
+  pull_request_target:
+    paths:
+      - 'icons/*.json'
+
+jobs:
+  pull-request-tags-suggestions:
+    name: Pull Request Tags Suggestions
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: write
+
+    steps:
+      #  We checkout the main branch of main repository for security reasons.
+      #  This is to prevent the workflow from running on a forked repository.
+      - uses: actions/checkout@v4
+        with:
+          repository: lucide-icons/lucide
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          cache: 'pnpm'
+          node-version-file: 'package.json'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Generate comment markup
+        run: node ./scripts/suggestTags.mts
+        env:
+          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+          PULL_REQUEST_NUMBER: ${{ github.event.number }}
+          COMMIT_SHA: ${{ github.event.pull_request.head.sha }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -48,7 +48,6 @@ jobs:
            'lucide',
            'lucide-react',
            'lucide-react-native',
-            'lucide-vue',
            'lucide-vue-next',
            'lucide-angular',
            'lucide-preact',
@@ -4,6 +4,7 @@
 .obsidian
 .now
 .idea
+.env
 node_modules
 dist
 build
@@ -1,4 +1,5 @@
 {
+  "$schema": "https://raw.githubusercontent.com/Yash-Singh1/vscode-snippets-json-schema/main/schema.json",
  "Lucide SVG": {
    "scope": "xml",
    "description": "Base SVG with Lucide attributes.",
@@ -51,6 +52,16 @@
    ],
    "body": "<circle cx=\"${2:12}\" cy=\"${3:$2}\" r=\"${1|10,2,.5\" fill=\"currentColor|}\" />"
  },
+  "Squircle": {
+    "scope": "xml",
+    "description": "SVG `path` with Lucide defaults.",
+    "prefix": [
+      "squircle",
+      "path",
+      "<path"
+    ],
+    "body": "<path d=\"M12 3c7.2 0 9 1.8 9 9s-1.8 9-9 9-9-1.8-9-9 1.8-9 9-9\" />"
+  },
  "Ellipse": {
    "scope": "xml",
    "description": "SVG `ellipse`.",
@@ -0,0 +1,71 @@
+# Our Official Stance on Including Brand Logos in Lucide
+
+## TL;DR
+
+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**.
+
+If you need brand logos, we recommend [Simple Icons](https://simpleicons.org/), which provides an extensive, legally safer collection of brand marks.
+
+---
+
+## 1. Historical Context
+
+This is not a new debate — other icon sets have gone through the same discussion:
+
+- **Material Design Icons** [deprecated all brand icons](https://github.com/Templarian/MaterialDesign/issues/6602) because they didn't fit the style, didn't work well in one color, and often looked out of place in a 24×24px grid.
+- **Feather Icons** [came to the same conclusion](https://github.com/feathericons/feather/issues/763): brand logos have their own style, and forcing them into another inevitably leads to aesthetic compromises.
+- **Lucide** learned from these examples — we'd rather focus on making a consistent set of non-brand icons that all work together.
+
+## 2. Legal Considerations
+
+Most brand logos:
+- Are **protected by trademark or copyright**.
+- Have **strict rules** for how they can be used (colors, spacing, proportions, etc.).
+- **Don't allow modification** — but we'd have to change them to fit Lucide's style.
+
+This means adding them could:
+1. Break copyright or trademark law.
+2. Make both you and the Lucide project legally responsible.
+3. Force us to review every new request one by one for legal issues — something we simply can't do.
+
+> **Note:** Simple Icons avoids this by keeping logos exactly as the brand provides them — though even they sometimes face [legal challenges](https://github.com/simple-icons/simple-icons/issues/11236).
+
+## 3. Design & Consistency
+
+Lucide is all about **visual consistency**.
+
+Adding brand logos would:
+- Break [our own design rules](https://lucide.dev/guide/design/icon-design-guide#icon-design-principles) for shapes, proportions, and stroke.
+- Mix two fundamentally different categories of graphics (pictograms vs. corporate logos).
+- Create a library where a subset of icons will always look "out of place".
+
+If the logos are not in Lucide's style, why include them in Lucide at all? Better to use them from a dedicated brand icon source.
+
+## 4. Maintenance Burden
+
+Even with our current **"no brand icon requests"** policy, people still request them regularly.
+
+Having any brand icons in the set:
+- Makes people think we might add more in the future.
+- Leads to repeated requests and the same conversations over and over.
+- Wastes maintainer time redirecting people to the same explanation.
+
+Removing them entirely solves this problem.
+
+## 5. Recommended Alternatives
+
+If you need brand icons, try:
+- [Simple Icons](https://simpleicons.org/): offers a huge range of brands, in consistent SVG format, using a 24×24 viewBox, the same as ours.
+- Official brand asset pages: most major companies provide downloadable SVGs.
+
+You can use these alongside Lucide without bloating our core library.
+
+## Final Words
+
+Lucide is an **icon** set, not a **logo** set.
+
+Logos belong in dedicated logo resources.
+
+We're focusing on what Lucide does best: providing a clean, cohesive, and legally safe collection of open-source icons.
@@ -1,6 +1,6 @@
 ISC License

-Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022.
+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.

 Permission to use, copy, modify, and/or distribute this software for any
 purpose with or without fee is hereby granted, provided that the above
@@ -13,3 +13,27 @@ ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
 WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
 ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
 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
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
@@ -57,6 +57,12 @@ For more info on how to contribute please see the [contribution guidelines](http

 Caught a mistake or want to contribute to the documentation? [Edit this page on Github](https://github.com/lucide-icons/lucide/blob/main/README.md)

+## About brand logos
+
+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**.
+
+[Click here to read our official statement about brand logos in Lucide.](./BRAND_LOGOS_STATEMENT.md)
+
 ## Community

 Join the community on our [Discord](https://discord.gg/EH6nSts) server!
@@ -84,5 +90,5 @@ Thank you to all the people who contributed to Lucide!

 ### Awesome backers 🍺

-<a href="https://www.scipress.io?utm_source=lucide"><img src="docs/public/sponsors/scipress.svg" width="180" alt="Scipress sponsor badge" /></a>
 <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>
@@ -13,10 +13,12 @@ export default eventHandler((event) => {
  const data = pathData.at(-1).slice(0, -4);
  const [name] = pathData;

-  const src = Buffer.from(data, 'base64')
-    .toString('utf8')
-    .replaceAll('\n', '')
-    .replace(/<svg[^>]*>|<\/svg>/g, '');
+  const src = Buffer.from(data, 'base64').toString('utf8').replaceAll('\n', '');
+
+  const width = parseInt((src.includes('<svg ') ? src.match(/width="(\d+)"/)?.[1] : null) ?? '24');
+  const height = parseInt(
+    (src.includes('<svg ') ? src.match(/height="(\d+)"/)?.[1] : null) ?? '24',
+  );

  const children = [];

@@ -38,7 +40,7 @@ export default eventHandler((event) => {
    children.push(
      createElement(Backdrop, {
        backdropString,
-        src,
+        src: src.replace(/<svg[^>]*>|<\/svg>/g, ''),
        color: '#777',
      }),
    );
@@ -46,7 +48,18 @@ export default eventHandler((event) => {

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

  defaultContentType(event, 'image/svg+xml');
@@ -17,6 +17,13 @@ export default eventHandler((event) => {
    .replaceAll('\n', '')
    .replace(/<svg[^>]*>|<\/svg>/g, '');

+  const width = parseInt(
+    (newSrc.includes('<svg ') ? newSrc.match(/width="(\d+)"/)?.[1] : null) ?? '24',
+  );
+  const height = parseInt(
+    (newSrc.includes('<svg ') ? newSrc.match(/height="(\d+)"/)?.[1] : null) ?? '24',
+  );
+
  const children = [];

  const oldSrc = iconNodes[name]
@@ -27,7 +34,9 @@ export default eventHandler((event) => {

  const svg = Buffer.from(
    // We can't use jsx here, is not supported here by nitro.
-    renderToString(createElement(Diff, { oldSrc, newSrc, showGrid: true }, children)),
+    renderToString(
+      createElement(Diff, { oldSrc, newSrc, showGrid: true, height, width }, children),
+    ),
  ).toString('utf8');

  defaultContentType(event, 'image/svg+xml');
@@ -1,6 +1,10 @@
 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);

@@ -9,27 +13,37 @@ export default eventHandler(async (event) => {
  await initializedResvg;

  const imageSize = 96;
-  const [iconSizeString, svgData] = params.data.split('/');
+  const name = params.data.split('/').at(-3);
+  const iconSizeString = params.data.split('/').at(-2);
+  const svgData = params.data.split('/').at(-1);
  const iconSize = parseInt(iconSizeString, 10);
  const data = svgData.slice(0, -4);

+  const prevSvg = iconNodes[name]
+    ? renderToStaticMarkup(createElement(createLucideIcon(name, iconNodes[name])))
+    : undefined;
+
  const src = Buffer.from(data, 'base64').toString('utf8');
  const svg = (src.includes('<svg') ? src : `<svg>${src}</svg>`)
    .replace(/(\r\n|\n|\r)/gm, '')
    .replace(
-      /<svg[^>]*/,
+      /<svg[^>]*>/,
      `<svg
  xmlns="http://www.w3.org/2000/svg"
  width="${iconSize}"
-  height="${iconSize}"
-  viewBox="0 0 24 24"
+  height="${prevSvg ? iconSize * 2 : iconSize}"
+  viewBox="0 0 24 ${prevSvg ? 48 : 24}"
  fill="none"
  stroke="#fff"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
+  >
+  ${prevSvg?.replaceAll('\n', '').replace(/<svg[^>]*>|<\/svg>/g, '')}
+  <g transform="translate(0, ${prevSvg ? 24 : 0})">
 `,
-    );
+    )
+    .replace(/<\/svg>/, '</g></svg>');

  const resvg = new Resvg(svg, { background: '#000' });
  const pngData = resvg.render();
@@ -39,7 +53,7 @@ export default eventHandler(async (event) => {
  setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');

  return `
-<svg xmlns="http://www.w3.org/2000/svg" width="${imageSize}" height="${imageSize}" viewBox="0 0 ${imageSize} ${imageSize}">
+<svg xmlns="http://www.w3.org/2000/svg" width="${imageSize}" height="${prevSvg ? imageSize * 2 : imageSize}" viewBox="0 0 ${imageSize} ${prevSvg ? imageSize * 2 : imageSize}">
  <style>
    @media screen and (prefers-color-scheme: light) {
      #fallback-background { fill: transparent; }
@@ -52,20 +66,20 @@ export default eventHandler(async (event) => {
  <mask id="mask">
    <image
      width="${imageSize}"
-      height="${imageSize}"
+      height="${prevSvg ? imageSize * 2 : imageSize}"
      href="data:image/png;base64,${pngBuffer.toString('base64')}"
      image-rendering="pixelated"
    />
  </mask>
  <rect
    id="fallback-background"
-    width="${imageSize}"
-    height="${imageSize}" ry="${imageSize / 24}"
+    width="100%"
+    height="100%" ry="${imageSize / 24}"
    fill="#fff"
  />
  <rect
-    width="${imageSize}"
-    height="${imageSize}"
+    width="100%"
+    height="100%"
    fill="#000"
    mask="url(#mask)"
  />
@@ -36,6 +36,13 @@ export default defineConfig({
    },
  },
  head: [
+    [
+      'link',
+      {
+        rel: 'preconnect',
+        href: 'https://analytics.lucide.dev',
+      },
+    ],
    [
      'script',
      {
@@ -7,6 +7,14 @@
      "dark": "/company-logos/vercel-dark.svg"
    }
  },
+  {
+    "name": "MDN Web Docs",
+    "url": "https://developer.mozilla.org/",
+    "image": {
+      "light": "/company-logos/mdn-light.svg",
+      "dark": "/company-logos/mdn-dark.svg"
+    }
+  },
  {
    "name": "Supabase",
    "url": "https://supabase.com",
@@ -23,6 +31,14 @@
      "dark": "/company-logos/obsidian-dark.svg"
    }
  },
+  {
+    "name": "Nuxt",
+    "url": "https://nuxt.com/",
+    "image": {
+      "light": "/company-logos/nuxt-light.svg",
+      "dark": "/company-logos/nuxt-dark.svg"
+    }
+  },
  {
    "name": "Open Collective",
    "url": "https://opencollective.com",
@@ -77,7 +77,7 @@
    "source": "https://github.com/swisnl/nuxt-lucide-icons",
    "documentation": "https://github.com/swisnl/nuxt-lucide-icons/blob/main/README.md"
  },
-    {
+  {
    "name": "lucide-lustre",
    "description": "A library providing https://lucide.dev icons to lustre.",
    "icon": "/framework-logos/lustre.webp",
@@ -95,5 +95,24 @@
    ],
    "source": "https://github.com/dinkelspiel/lucide_lustre",
    "documentation": "https://github.com/dinkelspiel/lucide_lustre/blob/master/README.md"
+  },
+  {
+    "name": "lucide_icons_flutter",
+    "description": "A library providing https://lucide.dev icons to lustre.",
+    "icon": "/framework-logos/flutter.svg",
+    "shields": [
+      {
+        "alt": "Latest Stable Version",
+        "src": "https://img.shields.io/pub/v/lucide_icons_flutter",
+        "href": "https://pub.dev/packages/lucide_icons_flutter"
+      },
+      {
+        "alt": "Total Downloads",
+        "src": "https://img.shields.io/pub/dm/lucide_icons_flutter",
+        "href": "https://pub.dev/packages/lucide_icons_flutter"
+      }
+    ],
+    "source": "https://github.com/vqh2602/lucide-flutter-main",
+    "documentation": "https://pub.dev/documentation/lucide_icons_flutter/latest/"
  }
-]
+]
@@ -53,8 +53,8 @@ const Backdrop = ({
        <rect
          x="0"
          y="0"
-          width="24"
-          height="24"
+          width="100%"
+          height="100%"
          fill="#fff"
          stroke="none"
        />
@@ -67,8 +67,8 @@ const Backdrop = ({
        <rect
          x="0"
          y="0"
-          width="24"
-          height="24"
+          width="100%"
+          height="100%"
          opacity={0.5}
          fill={`url(#pattern-${id})`}
          stroke="none"
@@ -7,15 +7,17 @@ const SvgPreview = React.forwardRef<
  {
    oldSrc: string;
    newSrc: string;
+    height: number;
+    width: number;
  } & React.SVGProps<SVGSVGElement>
->(({ oldSrc, newSrc, children, ...props }, ref) => {
+>(({ oldSrc, newSrc, children, height, width, ...props }, ref) => {
  return (
    <svg
      ref={ref}
      xmlns="http://www.w3.org/2000/svg"
-      width={24}
-      height={24}
-      viewBox="0 0 24 24"
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
@@ -25,6 +27,8 @@ const SvgPreview = React.forwardRef<
    >
      <style>{darkModeCss}</style>
      <Grid
+        width={width}
+        height={height}
        strokeWidth={0.1}
        stroke="#777"
        strokeOpacity={0.3}
@@ -37,8 +41,8 @@ const SvgPreview = React.forwardRef<
        <rect
          x="0"
          y="0"
-          width="24"
-          height="24"
+          width="100%"
+          height="100%"
          fill="#000"
          stroke="none"
        />
@@ -0,0 +1,137 @@
+import React from 'react';
+import pathToPoints from './path-to-points';
+import { Path, PathProps } from './types';
+
+export const GapViolationHighlight = ({
+  radius,
+  stroke,
+  strokeWidth,
+  strokeOpacity,
+  paths,
+  ...props
+}: {
+  paths: Path[];
+} & PathProps<'stroke' | 'strokeOpacity' | 'strokeWidth', 'd'>) => {
+  const id = React.useId();
+
+  const groupedPaths = Object.entries(
+    paths.reduce(
+      (groups, val) => {
+        const key = val.c.id;
+        groups[key] = [...(groups[key] || []), val];
+        return groups;
+      },
+      {} as Record<number, Path[]>,
+    ),
+  );
+
+  const groups: Group[] = [];
+
+  for (const [, paths] of groupedPaths) {
+    const d = paths.map((path) => path.d).join(' ');
+    const points = paths.flatMap((path) => pathToPoints(path));
+    groups.push({ id: d, points });
+  }
+
+  const mergedGroups = mergeGroups(groups, 2);
+
+  return (
+    <g {...props}>
+      <defs xmlns="http://www.w3.org/2000/svg">
+        <pattern
+          id={`backdrop-pattern-${id}`}
+          width=".1"
+          height=".1"
+          patternUnits="userSpaceOnUse"
+          patternTransform="rotate(45 50 50)"
+        >
+          <line
+            stroke={stroke}
+            strokeWidth={0.1}
+            y2={1}
+          />
+          <line
+            stroke={stroke}
+            strokeWidth={0.1}
+            y2={1}
+          />
+        </pattern>
+      </defs>
+      {mergedGroups.flatMap((ds, idx, arr) =>
+        arr.slice(0, idx).map((val, i) => (
+          <g
+            strokeWidth={strokeWidth}
+            key={i}
+          >
+            <mask
+              id={`svg-preview-backdrop-mask-${id}-${i}`}
+              maskUnits="userSpaceOnUse"
+            >
+              <path
+                stroke="white"
+                d={val.join(' ')}
+              />
+            </mask>
+            <path
+              d={ds.join(' ')}
+              stroke={`url(#backdrop-pattern-${id})`}
+              strokeWidth={strokeWidth}
+              strokeOpacity={strokeOpacity}
+              mask={`url(#svg-preview-backdrop-mask-${id}-${i})`}
+            />
+          </g>
+        )),
+      )}
+    </g>
+  );
+};
+
+type Point = { x: number; y: number };
+type Group = { id: string; points: Point[] };
+
+// Euclidean distance
+function distance(a: Point, b: Point): number {
+  return Math.hypot(a.x - b.x, a.y - b.y);
+}
+
+// Check if two groups should be merged based on minimum distance
+function shouldMerge(a: Group, b: Group, minDistance: number): boolean {
+  for (const pa of a.points) {
+    for (const pb of b.points) {
+      if (distance(pa, pb) <= minDistance) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+// Merge groups and return arrays of merged group IDs
+function mergeGroups(groups: Group[], minDistance: number): string[][] {
+  const mergedGroups: Group[][] = groups.map((g) => [g]);
+
+  let changed = true;
+  while (changed) {
+    changed = false;
+
+    outer: for (let i = 0; i < mergedGroups.length; i++) {
+      for (let j = i + 1; j < mergedGroups.length; j++) {
+        // Check if any group in mergedGroups[i] should merge with any in mergedGroups[j]
+        if (
+          mergedGroups[i].some((ga) =>
+            mergedGroups[j].some((gb) => shouldMerge(ga, gb, minDistance)),
+          )
+        ) {
+          // Merge group j into group i
+          mergedGroups[i] = [...mergedGroups[i], ...mergedGroups[j]];
+          mergedGroups.splice(j, 1);
+          changed = true;
+          break outer;
+        }
+      }
+    }
+  }
+
+  // Return only arrays of IDs
+  return mergedGroups.map((groupList) => groupList.map((g) => g.id));
+}
@@ -1,6 +1,7 @@
 import React from 'react';
 import { PathProps, Path } from './types';
-import { getPaths, assert } from './utils';
+import getPaths, { assert } from './utils';
+import { GapViolationHighlight } from './GapViolationHighlight.tsx';

 export const darkModeCss = `
  @media screen and (prefers-color-scheme: light) {
@@ -20,10 +21,16 @@ export const darkModeCss = `

 export const Grid = ({
  radius,
-  fill = '#fff',
+  fill,
+  height,
+  width,
+  subGridSize = 0,
  ...props
 }: {
+  height: number;
+  width: number;
  strokeWidth: number;
+  subGridSize?: number;
  radius: number;
 } & PathProps<'stroke', 'strokeWidth'>) => (
  <g
@@ -33,43 +40,53 @@ export const Grid = ({
  >
    <rect
      className="svg-preview-grid-rect"
-      width={24 - props.strokeWidth}
-      height={24 - props.strokeWidth}
+      width={width - props.strokeWidth}
+      height={height - props.strokeWidth}
      x={props.strokeWidth / 2}
      y={props.strokeWidth / 2}
      rx={radius}
      fill={fill}
    />
    <path
-      strokeDasharray={'0 0.1 ' + '0.1 0.15 '.repeat(11) + '0 0.15'}
+      strokeDasharray={
+        '0 0.1 ' + '0.1 0.15 '.repeat(subGridSize ? subGridSize * 4 - 1 : 95) + '0 0.15'
+      }
      strokeWidth={0.1}
      d={
        props.d ||
-        new Array(Math.floor(24 - 1))
-          .fill(null)
-          .map((_, i) => i)
-          .filter((i) => i % 3 !== 2)
-          .flatMap((i) => [
-            `M${props.strokeWidth} ${i + 1}h${24 - props.strokeWidth * 2}`,
-            `M${i + 1} ${props.strokeWidth}v${24 - props.strokeWidth * 2}`,
-          ])
-          .join('')
-      }
-    />
-    <path
-      d={
-        props.d ||
-        new Array(Math.floor(24 - 1))
-          .fill(null)
-          .map((_, i) => i)
-          .filter((i) => i % 3 === 2)
-          .flatMap((i) => [
-            `M${props.strokeWidth} ${i + 1}h${24 - props.strokeWidth * 2}`,
-            `M${i + 1} ${props.strokeWidth}v${24 - props.strokeWidth * 2}`,
-          ])
-          .join('')
+        [
+          ...new Array(Math.floor(width - 1))
+            .fill(null)
+            .map((_, i) => i)
+            .filter((i) => !subGridSize || i % subGridSize !== subGridSize - 1)
+            .flatMap((i) => [`M${i + 1} ${props.strokeWidth}v${height - props.strokeWidth * 2}`]),
+          ...new Array(Math.floor(height - 1))
+            .fill(null)
+            .map((_, i) => i)
+            .filter((i) => !subGridSize || i % subGridSize !== subGridSize - 1)
+            .flatMap((i) => [`M${props.strokeWidth} ${i + 1}h${width - props.strokeWidth * 2}`]),
+        ].join('')
      }
    />
+    {!!subGridSize && (
+      <path
+        d={
+          props.d ||
+          [
+            ...new Array(Math.floor(width - 1))
+              .fill(null)
+              .map((_, i) => i)
+              .filter((i) => i % subGridSize === subGridSize - 1)
+              .flatMap((i) => [`M${i + 1} ${props.strokeWidth}v${height - props.strokeWidth * 2}`]),
+            ...new Array(Math.floor(height - 1))
+              .fill(null)
+              .map((_, i) => i)
+              .filter((i) => i % subGridSize === subGridSize - 1)
+              .flatMap((i) => [`M${props.strokeWidth} ${i + 1}h${width - props.strokeWidth * 2}`]),
+          ].join('')
+        }
+      />
+    )}
  </g>
 );

@@ -99,6 +116,7 @@ const Shadow = ({
      >
        {groupedPaths.map(([id, paths]) => (
          <mask
+            key={`svg-preview-shadow-mask-${id}`}
            id={`svg-preview-shadow-mask-${id}`}
            maskUnits="userSpaceOnUse"
            strokeOpacity="1"
@@ -108,8 +126,8 @@ const Shadow = ({
            <rect
              x={0}
              y={0}
-              width={24}
-              height={24}
+              width="100%"
+              height="100%"
              fill="#fff"
              stroke="none"
              rx={radius}
@@ -152,30 +170,34 @@ const ColoredPath = ({
  colors,
  paths,
  ...props
-}: { paths: Path[]; colors: string[] } & PathProps<never, 'd' | 'stroke'>) => (
-  <g
-    className="svg-preview-colored-path-group"
-    {...props}
-  >
-    {paths.map(({ d, c }, i) => (
-      <path
-        key={i}
-        d={d}
-        stroke={colors[(c.name === 'path' ? i : c.id) % colors.length]}
-      />
-    ))}
-  </g>
-);
+}: { paths: Path[]; colors: string[] } & PathProps<never, 'd' | 'stroke'>) => {
+  let idx = 0;
+  return (
+    <g
+      className="svg-preview-colored-path-group"
+      {...props}
+    >
+      {paths.map(({ d, c }, i) => (
+        <path
+          key={i}
+          d={d}
+          stroke={colors[(c.name === 'path' ? idx++ : c.id) % colors.length]}
+        />
+      ))}
+    </g>
+  );
+};

 const ControlPath = ({
  paths,
  radius,
  pointSize,
  ...props
-}: { pointSize: number; paths: Path[]; radius: number } & PathProps<
-  'stroke' | 'strokeWidth',
-  'd'
->) => {
+}: {
+  pointSize: number;
+  paths: Path[];
+  radius: number;
+} & PathProps<'stroke' | 'strokeWidth', 'd'>) => {
  const controlPaths = paths.map((path, i) => {
    const element = paths.filter((p) => p.c.id === path.c.id);
    const lastElement = element.at(-1)?.next;
@@ -207,8 +229,8 @@ const ControlPath = ({
                <rect
                  x="0"
                  y="0"
-                  width="24"
-                  height="24"
+                  width="100%"
+                  height="100%"
                  fill="#fff"
                  stroke="none"
                  rx={radius}
@@ -243,7 +265,7 @@ const ControlPath = ({
            )
            .join('')}
        />
-        {controlPaths.map(({ d, prev, next, startMarker, endMarker }, i) => (
+        {controlPaths.map(({ prev, next, startMarker, endMarker }, i) => (
          <React.Fragment key={i}>
            {startMarker && (
              <circle
@@ -279,11 +301,37 @@ const Radii = ({
      {...props}
    >
      {paths.map(
-        ({ c, prev, next, circle }, i) =>
+        ({ circle, next, prev, c }, i) =>
          circle && (
            <React.Fragment key={i}>
-              {c.name !== 'circle' && (
-                <path d={`M${prev.x} ${prev.y} ${circle.x} ${circle.y} ${next.x} ${next.y}`} />
+              {circle.tangentIntersection && c.name === 'path' && (
+                <>
+                  <circle
+                    cx={next.x * 2 - circle.tangentIntersection.x}
+                    cy={next.y * 2 - circle.tangentIntersection.y}
+                    r={0.25}
+                  />
+                  <circle
+                    cx={prev.x * 2 - circle.tangentIntersection.x}
+                    cy={prev.y * 2 - circle.tangentIntersection.y}
+                    r={0.25}
+                  />
+                  <path
+                    d={`M${next.x * 2 - circle.tangentIntersection.x} ${
+                      next.y * 2 - circle.tangentIntersection.y
+                    }L${circle.tangentIntersection.x} ${circle.tangentIntersection.y}L${prev.x * 2 - circle.tangentIntersection.x} ${
+                      prev.y * 2 - circle.tangentIntersection.y
+                    }`}
+                  />
+                  <circle
+                    cx={circle.tangentIntersection.x}
+                    cy={circle.tangentIntersection.y}
+                    r={0.25}
+                  />
+                </>
+              )}
+              {c.name === 'path' && (
+                <path d={`M${next.x} ${next.y}L${circle.x} ${circle.y}L${prev.x} ${prev.y}`} />
              )}
              <circle
                cy={circle.y}
@@ -313,55 +361,60 @@ const Radii = ({
 const Handles = ({
  paths,
  ...props
-}: { paths: Path[] } & PathProps<
-  'strokeWidth' | 'stroke' | 'strokeDasharray' | 'strokeOpacity',
-  any
->) => {
-  return (
-    <g
-      className="svg-preview-handles-group"
-      {...props}
-    >
-      {paths.map(({ c, prev, next, cp1, cp2 }) => (
-        <>
-          {cp1 && <path d={`M${prev.x} ${prev.y} ${cp1.x} ${cp1.y}`} />}
-          {cp1 && (
-            <circle
-              cy={cp1.y}
-              cx={cp1.x}
-              r={0.25}
-            />
-          )}
-          {cp2 && <path d={`M${next.x} ${next.y} ${cp2.x} ${cp2.y}`} />}
-          {cp2 && (
-            <circle
-              cy={cp2.y}
-              cx={cp2.x}
-              r={0.25}
-            />
-          )}
-        </>
-      ))}
-    </g>
-  );
-};
+}: { paths: Path[] } & PathProps<'strokeWidth' | 'stroke' | 'strokeOpacity', any>) => (
+  <g
+    className="svg-preview-handles-group"
+    {...props}
+  >
+    {paths.map(({ c, prev, next, cp1, cp2 }, i) => (
+      <React.Fragment key={i}>
+        {cp1 && <path d={`M${prev.x} ${prev.y} ${cp1.x} ${cp1.y}`} />}
+        {cp1 && (
+          <circle
+            cy={cp1.y}
+            cx={cp1.x}
+            r={0.25}
+          />
+        )}
+        {cp2 && <path d={`M${next.x} ${next.y} ${cp2.x} ${cp2.y}`} />}
+        {cp2 && (
+          <circle
+            cy={cp2.y}
+            cx={cp2.x}
+            r={0.25}
+          />
+        )}
+      </React.Fragment>
+    ))}
+  </g>
+);

 const SvgPreview = React.forwardRef<
  SVGSVGElement,
  {
+    height?: number;
+    width?: number;
    src: string | ReturnType<typeof getPaths>;
    showGrid?: boolean;
  } & React.SVGProps<SVGSVGElement>
->(({ src, children, showGrid = false, ...props }, ref) => {
+>(({ src, children, height = 24, width = 24, showGrid = false, ...props }, ref) => {
+  const subGridSize =
+    Math.max(height, width) % 3 === 0
+      ? Math.max(height, width) > 24
+        ? 12
+        : 3
+      : Math.max(height, width) % 5 === 0
+        ? 5
+        : 0;
  const paths = typeof src === 'string' ? getPaths(src) : src;

  return (
    <svg
      ref={ref}
      xmlns="http://www.w3.org/2000/svg"
-      width={24}
-      height={24}
-      viewBox="0 0 24 24"
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
@@ -372,8 +425,12 @@ const SvgPreview = React.forwardRef<
      <style>{darkModeCss}</style>
      {showGrid && (
        <Grid
+          height={height}
+          width={width}
+          subGridSize={subGridSize}
          strokeWidth={0.1}
          stroke="#777"
+          mask="url(#svg-preview-bounding-box-mask)"
          strokeOpacity={0.3}
          radius={1}
        />
@@ -385,6 +442,12 @@ const SvgPreview = React.forwardRef<
        radius={1}
        strokeOpacity={0.15}
      />
+      <GapViolationHighlight
+        paths={paths}
+        stroke="red"
+        strokeOpacity={0.75}
+        strokeWidth={4}
+      />
      <Handles
        paths={paths}
        strokeWidth={0.12}
@@ -433,4 +496,6 @@ const SvgPreview = React.forwardRef<
  );
 });

+SvgPreview.displayName = 'SvgPreview';
+
 export default SvgPreview;
@@ -0,0 +1,19 @@
+import memoize from 'lodash/memoize';
+import SVGPathCommander from 'svg-path-commander';
+import { Path } from './types';
+
+function pathToPoints({ d, prev, next }: Path, interval = 1) {
+  const commander = new SVGPathCommander(d);
+  const points = [];
+  try {
+    const totalLength = commander.getTotalLength();
+    points.push(prev);
+    for (let i = interval; i < totalLength - interval; i += interval) {
+      points.push(commander.getPointAtLength(i));
+    }
+    points.push(next);
+  } catch (err) {}
+  return points;
+}
+
+export default memoize(pathToPoints);
@@ -1,7 +1,10 @@
 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';

 function assertNever(x: never): never {
  throw new Error('Unknown type: ' + x['type']);
@@ -44,17 +47,21 @@ const extractNodes = (node: INode): INode[] => {
  return [];
 };

-export const getNodes = (src: string) =>
-  extractNodes(parseSync(src.includes('<svg') ? src : `<svg>${src}</svg>`));
+export const getNodes = memoize((src: string) =>
+  extractNodes(parseSync(src.includes('<svg') ? src : `<svg>${src}</svg>`)),
+);

 export const getCommands = (src: string) =>
  getNodes(src)
    .map(convertToPathNode)
    .flatMap(({ d, name }, idx) =>
-      new SVGPathData(d).toAbs().commands.map((c, cIdx) => ({ ...c, id: idx, idx: cIdx, name })),
+      new SVGPathData(d)
+        .toAbs()
+        // @ts-ignore
+        .commands.map((c, cIdx) => ({ ...c, id: idx, idx: cIdx, name })),
    );

-export const getPaths = (src: string) => {
+const getPaths = (src: string) => {
  const commands = getCommands(src.includes('<svg') ? src : `<svg>${src}</svg>`);
  const paths: Path[] = [];
  let prev: Point | undefined = undefined;
@@ -237,6 +244,7 @@ export const getPaths = (src: string) => {
        break;
      }
      default: {
+        // @ts-ignore
        assertNever(c);
      }
    }
@@ -244,7 +252,7 @@ export const getPaths = (src: string) => {
  return paths;
 };

-export const arcEllipseCenter = (
+const arcEllipseCenter = (
  x1: number,
  y1: number,
  rx: number,
@@ -296,5 +304,52 @@ export const arcEllipseCenter = (
    M2[1][0] * Cp[0] + M2[1][1] * Cp[1] + V3[1],
  ];

-  return { x: C[0], y: C[1] };
+  return {
+    x: C[0],
+    y: C[1],
+    tangentIntersection: intersectTangents(
+      { x: x1, y: y1 },
+      { x: x2, y: y2 },
+      { x: C[0], y: C[1] },
+    ),
+  };
 };
+
+function getTangentDirection(p: Point, center: Point): Point {
+  // Tangent is perpendicular to the radius vector (rotate radius 90°)
+  const dx = p.x - center.x;
+  const dy = p.y - center.y;
+  return { x: -dy, y: dx }; // 90° rotation
+}
+
+function intersectTangents(start: Point, end: Point, center: Point): Point | null {
+  const t1 = getTangentDirection(start, center);
+  const t2 = getTangentDirection(end, center);
+
+  // Solve: start + λ * t1 = end + μ * t2
+  const A = [
+    [t1.x, -t2.x],
+    [t1.y, -t2.y],
+  ];
+  const b = [end.x - start.x, end.y - start.y];
+
+  // Compute determinant
+  const det = A[0][0] * A[1][1] - A[0][1] * A[1][0];
+
+  if (Math.abs(det) < 1e-10) {
+    // Lines are parallel, no intersection
+    return null;
+  }
+
+  const invDet = 1 / det;
+
+  const lambda = (b[0] * A[1][1] - b[1] * A[0][1]) * invDet;
+
+  // Intersection point = start + lambda * t1
+  return {
+    x: start.x + lambda * t1.x,
+    y: start.y + lambda * t1.y,
+  };
+}
+
+export default memoize(getPaths);
@@ -1,5 +1,4 @@
-import { bundledLanguages, type ThemeRegistration } from 'shikiji';
-import { getHighlighter } from 'shikiji';
+import { bundledLanguages, getHighlighter, type ThemeRegistration } from 'shikiji';

 type CodeExampleType = {
  title: string;
@@ -102,13 +101,8 @@ import { LucideAngularModule, $PascalCase } from 'lucide-angular';
    },
    {
      language: 'html',
-      title: 'Icon Font',
-      code: `<style>
-@import ('~lucide-static/font/Lucide.css');
-</style>
-
-<div class="icon-$Name"></div>
-`,
+      title: 'Icon font',
+      code: `<div class="icon-$Name"></div>`,
    },
  ];
 };
@@ -178,6 +178,8 @@ const DiamondIcon = createLucideIcon('Diamond', diamond)
  stroke-width: var(--customize-strokeWidth, 2);
  width: calc(var(--customize-size, 24) * 1px);
  height: calc(var(--customize-size, 24) * 1px);
+  max-width: 3rem;
+  max-height: 3rem;
 }

 html.absolute-stroke-width .lucide-icon.customizable {
@@ -26,10 +26,9 @@ const iconComponent = computed(() => {
    <component
      ref="previewIcon"
      :is="iconComponent"
-      :width="size"
-      :height="size"
-      :stroke="color"
-      :stroke-width="absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth"
+      :size="size"
+      :color="color"
+      :strokeWidth="absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth"
    />
    <svg class="icon-grid" :viewBox="`0 0 ${size} ${size}`" fill="none" stroke-width="0.1" xmlns="http://www.w3.org/2000/svg">
      <g :key="`grid-${i}`" v-for="(_, i) in gridLines">
@@ -110,7 +110,7 @@ const customizingActive = computed(() => {
        name="size"
        v-model="size"
        :min="16"
-        :max="48"
+        :max="256"
        :step="4"
      />
    </InputField>
@@ -2,7 +2,7 @@

 import { ref, inject, Ref } from 'vue';

-export const ICON_STYLE_CONTEXT = Symbol('size');
+export const ICON_STYLE_CONTEXT = Symbol('style');

 interface IconSizeContext {
  size: Ref<number>;
@@ -25,6 +25,7 @@
  --vp-code-editor-string: #032f62;

  --vp-c-text-4: rgba(60, 60, 67, 0.32);
+  --vp-home-hero-name-color: var(--vp-c-text);
 }

 .dark {
@@ -60,36 +61,15 @@
 .VPHomeHero .image-container {
  transform: none;
  width: 100%;
-  /* padding: 0 24px; */
 }

-/* .VPHomeHero .container {
-  flex-direction: column-reverse;
-} */
-.VPHomeHero .container .main {
-  /* flex:1; */
-  flex-shirk: 0;
-}
-
-.VPHomeHero .container .main h1.name {
-  color: var(--vp-c-text);
-}
-.VPHomeHero .container .main h1.name .clip {
-  color: inherit;
-  -webkit-text-fill-color: unset;
-  color: var(--vp-c-text);
-  font-size: 36px;
-}
-
-.VPHomeHero .container .main h1::first-line {
+.VPHomeHero .name::first-line {
  color: var(--vp-c-brand);
 }

-/*  */
 .VPHomeHero .container .image {
  margin: 0;
  order: 2;
-  /* flex: 1; */
  margin-top: 32px;
 }

@@ -98,10 +78,6 @@
  justify-content: flex-end;
 }

-.VPHomeHero .container .image-bg {
-  display: none;
-}
-
 .VPFeature .icon {
  background-color: var(--vp-c-bg);
 }
@@ -115,12 +91,6 @@
  padding-left: 0;
 }

-@media (min-width: 640px) {
-  .VPHomeHero .container .main h1.name .clip {
-    font-size: unset;
-  }
-}
-
@media (min-width: 960px) {
  .VPHomeHero .container .image {
    order: 1;
@@ -140,18 +110,11 @@
  .VPHomeHero .container .image-container {
    display: block;
  }
-
-  .VPHomeHero .container .main h1.name {
-  }
 }

 .VPNavBarHamburger .container > span {
  border-radius: 2px;
 }
-/*
-html:has(* .outline-link:target) {
-  scroll-behavior: smooth;
-} */

 .sp-wrapper + * {
  margin-top: 24px;
@@ -183,7 +146,6 @@ html:has(* .outline-link:target) {
  font-size: 14px;
  font-weight: 500;
  position: relative;
-  /* box-sizing: content-box; */
 }

 .sp-wrapper .sp-tabs .sp-tab-button:after {
@@ -7,7 +7,7 @@ nextPage:

 # What is Lucide?

-Lucide is an open-source icon library that provides 1000+ vector (svg) files for displaying icons and symbols in digital and non-digital projects. The library aims to make it easier for designers and developers to incorporate icons into their projects by providing several official [packages](/packages) to make it easier to use these icons in your project.
+Lucide is an open-source icon library that provides 1000+ vector (svg) files for displaying icons and symbols in digital and non-digital projects. The library aims to make it easier for designers and developers to incorporate icons into their projects by providing several official [packages](/packages).

 ## Available Icons

@@ -87,8 +87,7 @@ const App = () => (

 ## Dynamic Icon Component

-It is possible to create one generic icon component to load icons, but it is not recommended.
-Since it is importing all icons during build. This increases build time and the different modules it will create.
+It is possible to create one generic icon component to load icons. But it is not recommended, since it is importing all icons during the build. This increases build time and the different modules it will create.

 `DynamicIcon` is useful for applications that want to show icons dynamically by icon name. For example, when using a content management system with where icon names are stored in a database.

@@ -1,24 +1,38 @@
 # Lucide Static

-This package include the following lucide implementations:
+This package includes the following implementations of Lucide icons:

- All SVG files
+- Individual SVG files
 - SVG sprite
- Icon fonts
- JavaScript library containing strings of SVGs.
+- Icon font files
+- A JavaScript library exporting SVG strings

-## Why lucide-static?
+## Who is this for?

-This package is suitable for specific use cases, for example if you want to use icon fonts, SVG sprites, normal SVGs or Common.js SVG strings in your javascript project.
+`lucide-static` is suitable for _very specific use cases_ where you want to use Lucide icons without relying on a JavaScript framework or component system. It's ideal for:

-::: warning
-While they can be useful for prototyping, it is not recommended to use the SVG sprites or icon fonts provided by this package in production web apps as all the available icons are included in the app, hence increasing loading time and data usage. We recommend to use a bundler and tree-shaking to make sure only the icons you use are bundled with your app. Tree-shaking is only available in these packages: [lucide](lucide), [lucide-react](lucide-react), [lucide-vue](lucide-vue), [lucide-vue-next](lucide-vue-next), [lucide-angular](lucide-angular), [lucide-preact](lucide-preact)
+- Projects that use icon fonts with plain CSS or utility-first frameworks
+- Embedding raw SVG files or sprites directly in HTML
+- Using SVGs as CSS background images
+- Importing SVG strings into Node.js (CommonJS) environments
+
+::: danger
+### Not recommended for production {#production-warning}
+
+SVG sprites and icon fonts include **all icons**, which can significantly increase your app's bundle size and load time.
+
+For production environments, we recommend using a bundler with tree-shaking support to include only the icons you actually use. Consider using:
+
+- [lucide](lucide)
+- [lucide-react](lucide-react)
+- [lucide-vue](lucide-vue)
+- [lucide-vue-next](lucide-vue-next)
+- [lucide-angular](lucide-angular)
+- [lucide-preact](lucide-preact)
 :::

 ## Installation

-## Package Managers
-
 ::: code-group

 ```sh [pnpm]
@@ -39,64 +53,86 @@ bun add lucide-static

 :::

-### CDN
+## SVG Files

-```html
-<!-- SVG file for a single icon -->
-<img src="https://unpkg.com/lucide-static@latest/icons/house.svg" />
+You can use standalone SVG files or SVG sprites in several ways.

-<!-- Icon font -->
-<style>
-  @font-face {
-    font-family: 'LucideIcons';
-    src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format('truetype');
-  }
-</style>
-```
+Check out our [codesandbox example](https://codesandbox.io/s/using-the-svg-sprite-lz1kk).

-## Usage
+### SVG file as image

-Check out the [codesandbox examples](https://codesandbox.io/s/using-the-svg-sprite-lz1kk).
+#### In HTML:

-### SVG Files
+::: code-group

-#### SVG file as image
-
-To use it in for example html:
-
-```html
+```html [Webpack]
 <!-- SVG file for a single icon -->
 <img src="~lucide-static/icons/house.svg" />
 ```

-```css
+```html [CDN]
+<!-- SVG file for a single icon -->
+<img src="https://unpkg.com/lucide-static@latest/icons/house.svg" />
+```
+
+:::
+
+#### In CSS:
+
+::: code-group
+
+```css [Webpack]
 .house-icon {
  background-image: url(~lucide-static/icons/house.svg);
 }
 ```

-Make sure you have the correct webpack loaders to make this work. [url-loader](https://v4.webpack.js.org/loaders/url-loader/)
-
-#### SVG file as string
-
-You can simply import each SVG by targeting `lucide-static/icons/{icon-name}.svg`.
-To use SVGs in your project you can for example use a [SVG loader](https://v4.webpack.js.org/loaders/svg-inline-loader/).
-
-```js
-import arrowRightIcon from 'lucide-static/icons/arrow-right';
-
-// return string of an SVG
+```css [CDN]
+.house-icon {
+  background-image: url(https://unpkg.com/lucide-static@latest/icons/house.svg);
+}
 ```

-### SVG Sprite
+:::

-You may need additional loader for this.
+Make sure you have the correct Webpack loader configured, such as [`url-loader`](https://v4.webpack.js.org/loaders/url-loader/).
+
+### SVG file as string
+
+To import an SVG as a string (e.g., for templating):
+
+::: code-group
+
+```js [Webpack]
+import arrowRightIcon from 'lucide-static/icons/arrow-right';
+```
+
+```js [Vite]
+import arrowRightIcon from 'lucide-static/icons/arrow-right.svg?raw';
+```
+
+:::
+
+You'll need an SVG loader like [`svg-inline-loader`](https://v4.webpack.js.org/loaders/svg-inline-loader/).
+
+
+### Using the SVG sprite
+
+:::danger
+[Not intended for production use.](#production-warning)
+:::
+
+You may also need an additional SVG loader to handle this.
+
+#### Basic sprite usage (not production-optimized):

 ```html
-<!-- Icon Sprite, not recommended for production! -->
 <img src="lucide-static/sprite.svg#house" />
+```

-<!-- or -->
+#### Inline usage:
+
+```html
 <svg
  width="24"
  height="24"
@@ -109,12 +145,13 @@ You may need additional loader for this.
  <use href="#alert-triangle" />
 </svg>

-<svg>
-  ...sprite svg
-</svg>
+<!-- sprite SVG -->
+<svg>...</svg>
 ```

-If you'd prefer, you can use CSS to hold your base SVG properties
+#### Inline with CSS helper class
+
+If you'd prefer, you can use CSS to hold your base SVG properties:

 ```css
 .lucide-icon {
@@ -128,47 +165,79 @@ If you'd prefer, you can use CSS to hold your base SVG properties
 }
 ```

-and update the SVG as follows
+...and update the SVG as follows:

 ```xml
 <svg
  xmlns="http://www.w3.org/2000/svg"
  class="lucide-icon"
 >
-<use
-    href="#triangle-alert"
-  />
-</svg>
-<svg>
-  ...sprite svg
+  <use href="#triangle-alert" />
 </svg>
+
+<!-- sprite SVG -->
+<svg>...</svg>
 ```

-### Icon Font
+## Icon font

-```css
+:::danger
+[Not intended for production use.](#production-warning)
+:::
+
+Lucide icons are also available as a web font. To use them, you first need to include the corresponding stylesheet:
+
+::: code-group
+
+```css [Vite]
+@import 'lucide-static/font/lucide.css';
+```
+
+```css [Webpack]
@import ('~lucide-static/font/lucide.css');
 ```

+```html [CDN]
+<link rel="stylesheet" href="https://unpkg.com/lucide-static@latest/font/lucide.css" />
+```
+
+```html [Static asset]
+<link rel="stylesheet" href="/your/path/to/lucide.css" />
+```
+
+:::
+
+Once included, use the format `icon-{kebab-case-name}`. You can copy icon names from the [Lucide Icons page](https://lucide.dev/icons).
+
 ```html
 <div class="icon-house"></div>
 ```

-### Node.js
+If you're not using a package manager, you can download the font files directly from the [latest release](https://github.com/lucide-icons/lucide/releases/latest).

-To use lucide icons in your Nodejs project you can import each icon as:
+## Node.js

-```js
-const { messageSquare } = require('lucide-static/lib');
+You can also import Lucide icons in Node.js projects:
+
+::: code-group
+
+```js [ESM]
+import {MessageSquare} from 'lucide-static';
 ```

-> Note: Each icon name is in camelCase.
+```js [CommonJs]
+const {MessageSquare} = require('lucide-static');
+```

-#### Example in node.js project
+:::
+
+> Note: Each icon name is in PascalCase.
+
+#### Express app example in Node.js

 ```js
-const express = require('express');
-const { messageSquare } = require('lucide-static/lib');
+import express from 'express';
+import {MessageSquare} from 'lucide-static';
 const app = express();
 const port = 3000;

@@ -181,7 +250,7 @@ app.get('/', (req, res) => {
      </head>
      <body>
        <h1>Lucide Icons</h1>
-        <p>This is a lucide icon ${messageSquare}</p>
+        <p>This is a Lucide icon ${MessageSquare}</p>

      </body>
    </html>
@@ -296,7 +296,7 @@ The example below imports all ES Modules, so exercise caution when using it. Imp
 ```svelte [Svelte 5]
 <script>
  import * as icons from '@lucide/svelte';
-  let { name } = $props();
+  let { name, ...props } = $props();

  const Icon = icons[name];
 </script>
@@ -54,7 +54,7 @@ import { Camera } from 'lucide-vue-next';
 | `size`                  | *number*  | 24           |
 | `color`                 | *string*  | currentColor |
 | `stroke-width`          | *number*  | 2            |
-| `absolute-stroke-width` | *boolean* | false        |
+| `absoluteStrokeWidth`   | *boolean* | false        |
 | `default-class`         | *string*  | lucide-icon  |

 ### Applying props
@@ -60,7 +60,7 @@ Additional props can be passed to adjust the icon:
 | `size`                  | *number*  | 24           |
 | `color`                 | *string*  | currentColor |
 | `stroke-width`          | *number*  | 2            |
-| `absolute-stroke-width` | *boolean* | false        |
+| `absoluteStrokeWidth`   | *boolean* | false        |
 | `default-class`         | *string*  | lucide-icon  |

 ### Applying props
@@ -88,7 +88,11 @@ createIcons({

 ### Additional Options

-In the `createIcons` function you can pass some extra parameters to adjust the `nameAttr` or add custom attributes like for example classes.
+In the `createIcons` function you can pass some extra parameters:
+
+- you can pass `nameAttr` to adjust the attribute name to replace for
+- you can pass `attrs` to pass additional custom attributes, for instance CSS classes or stroke options.
+- you can pass `root` to provide a custom DOM element the icons should be replaced in (useful when manipulating small sections of a large DOM or elements in the shadow DOM)

 Here is a full example:

@@ -101,7 +105,8 @@ createIcons({
    'stroke-width': 1,
    stroke: '#333'
  },
-  nameAttr: 'data-lucide' // attribute for the icon name.
+  nameAttr: 'data-lucide', // attribute for the icon name.
+  root: element, // DOM element to replace icons in.
 });
 ```

@@ -2,6 +2,7 @@ import copy from 'rollup-plugin-copy';
 import replace from '@rollup/plugin-replace';

 export default defineNitroConfig({
+  compatibilityDate: '2025-07-30',
  preset: 'vercel_edge',
  srcDir: '.vitepress',
  routeRules: {
@@ -28,12 +28,12 @@
    "@lucide/build-icons": "workspace:*",
    "@lucide/helpers": "workspace:*",
    "@lucide/shared": "workspace:*",
-    "@rollup/plugin-replace": "^6.0.1",
+    "@rollup/plugin-replace": "^6.0.2",
    "@types/semver": "^7.5.3",
-    "h3": "^1.8.0",
    "nitropack": "2.8.1",
-    "rollup-plugin-copy": "^3.4.0",
-    "vitepress": "^1.3.1"
+    "rollup-plugin-copy": "^3.5.0",
+    "vitepress": "^1.6.3",
+    "svg-path-commander": "^2.1.11"
  },
  "dependencies": {
    "@floating-ui/vue": "^1.0.3",
@@ -57,6 +57,6 @@
    "sitemap": "^7.1.1",
    "svg-pathdata": "^6.0.3",
    "svgson": "^5.2.1",
-    "vue": "^3.5.13"
+    "vue": "^3.5.18"
  }
 }
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 361 104.2">
+  <g style="fill:#0F5DBD"><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zM50.7 0v92.1H40.3V0h10.4zM101.4 0v92.1H91V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zM294 95.4h67v8.8h-67v-8.8z"/></g>
+  <g style="fill:#000"><path d="M198.7 72.8h-17.1v-5.5h3.8V51.5c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.5c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2 2.8 0 5.3.7 7.5 2.1 2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1 2.2-1.6 4.8-2.4 7.9-2.4 3.5 0 6.5 1.1 8.9 3.3 2.4 2.2 3.7 5.6 3.7 10.2v18.2h6.1v5.5zM241.2 72.8H228v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM227.9 56v-4.4c-.1-3-1.2-5.5-3.2-7.3-2-1.8-4.4-2.8-7.2-2.8-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zM286.4 72.8h-19.3v-5.5h6V51.5c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3-1.8 2-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42h-6.2v-5.6H255v6.2c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3 2.5 2.2 3.7 5.6 3.7 10.2v18.2h6v5.4z"/></g>
+</svg>
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 361 104.2">
+  <g style="fill:#A4CEFE"><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zM50.7 0v92.1H40.3V0h10.4zM101.4 0v92.1H91V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zM294 95.4h67v8.8h-67v-8.8z"/></g>
+  <g style="fill:#fff"><path d="M198.7 72.8h-17.1v-5.5h3.8V51.5c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.5c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2 2.8 0 5.3.7 7.5 2.1 2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1 2.2-1.6 4.8-2.4 7.9-2.4 3.5 0 6.5 1.1 8.9 3.3 2.4 2.2 3.7 5.6 3.7 10.2v18.2h6.1v5.5zM241.2 72.8H228v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM227.9 56v-4.4c-.1-3-1.2-5.5-3.2-7.3-2-1.8-4.4-2.8-7.2-2.8-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zM286.4 72.8h-19.3v-5.5h6V51.5c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3-1.8 2-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42h-6.2v-5.6H255v6.2c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3 2.5 2.2 3.7 5.6 3.7 10.2v18.2h6v5.4z"/></g>
+</svg>
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="200" fill="none" class="text-highlighted block w-auto h-6" viewBox="0 0 800 200">
+  <path fill="#000" d="M377 200c2.16 0 4-1.791 4-4v-93s5 9 14 24l39 67c1.785 3.74 5.744 6 9 6h27V50h-27c-1.798 0-4 1.494-4 4v94l-18-32-36-61c-1.752-3.109-5.521-5-9-5h-26v150h27ZM726 92h13a6 6 0 0 0 6-6V60h28v32h27v24h-27v43c0 10.5 5.057 15 14 15h13v26h-17c-23.052 0-38-14.929-38-40v-44h-19V92ZM591 92v62c0 14.004-5.258 25.809-13 34-7.742 8.191-18.434 12-33 12-14.566 0-26.258-3.809-34-12-7.611-8.191-13-19.996-13-34V92h16c3.412 0 6.769.622 9 3 2.231 2.246 3 3.565 3 7v52c0 8.059.457 13.037 4 17 3.543 3.831 7.914 5 15 5 7.217 0 10.457-1.169 14-5 3.543-3.963 4-8.941 4-17v-52c0-3.435.769-5.622 3-8 1.96-2.09 4.028-2.04 7-2 .411.005 1.586 0 2 0h16ZM676 144l34-52h-26c-3.277 0-6.188 1.176-8 4l-16 24-15-23c-1.812-2.824-5.723-5-9-5h-25l34 51-37 57h26c3.25 0 6.182-3.213 8-6l18-27 19 28c1.818 2.787 4.75 5 8 5h26l-37-56Z"/>
+  <path fill="#00DC82" d="M168 200h111c3.542 0 6.932-1.244 10-3 3.068-1.756 6.23-3.959 8-7 1.77-3.041 3.002-6.49 3-10.001-.002-3.511-1.227-6.959-3-9.998L222 41c-1.77-3.04-3.933-5.245-7-7s-7.458-3-11-3-6.933 1.245-10 3-5.23 3.96-7 7l-19 33-38-64.002c-1.772-3.04-3.932-6.243-7-7.998s-6.458-2-10-2-6.932.245-10 2c-3.068 1.755-6.228 4.958-8 7.998L2 170c-1.773 3.039-1.998 6.487-2 9.998-.002 3.511.23 6.96 2 10.001 1.77 3.04 4.932 5.244 8 7 3.068 1.756 6.458 3 10 3h70c27.737 0 47.925-12.442 62-36l34-59 18-31 55 94h-73l-18 32Zm-79-32H40l73-126 37 63-24.509 42.725C116.144 163.01 105.488 168 89 168Z"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="200" fill="none" class="text-highlighted block w-auto h-6" viewBox="0 0 800 200">
+  <path fill="#fff" d="M377 200c2.16 0 4-1.791 4-4v-93s5 9 14 24l39 67c1.785 3.74 5.744 6 9 6h27V50h-27c-1.798 0-4 1.494-4 4v94l-18-32-36-61c-1.752-3.109-5.521-5-9-5h-26v150h27ZM726 92h13a6 6 0 0 0 6-6V60h28v32h27v24h-27v43c0 10.5 5.057 15 14 15h13v26h-17c-23.052 0-38-14.929-38-40v-44h-19V92ZM591 92v62c0 14.004-5.258 25.809-13 34-7.742 8.191-18.434 12-33 12-14.566 0-26.258-3.809-34-12-7.611-8.191-13-19.996-13-34V92h16c3.412 0 6.769.622 9 3 2.231 2.246 3 3.565 3 7v52c0 8.059.457 13.037 4 17 3.543 3.831 7.914 5 15 5 7.217 0 10.457-1.169 14-5 3.543-3.963 4-8.941 4-17v-52c0-3.435.769-5.622 3-8 1.96-2.09 4.028-2.04 7-2 .411.005 1.586 0 2 0h16ZM676 144l34-52h-26c-3.277 0-6.188 1.176-8 4l-16 24-15-23c-1.812-2.824-5.723-5-9-5h-25l34 51-37 57h26c3.25 0 6.182-3.213 8-6l18-27 19 28c1.818 2.787 4.75 5 8 5h26l-37-56Z"/>
+  <path fill="#00DC82" d="M168 200h111c3.542 0 6.932-1.244 10-3 3.068-1.756 6.23-3.959 8-7 1.77-3.041 3.002-6.49 3-10.001-.002-3.511-1.227-6.959-3-9.998L222 41c-1.77-3.04-3.933-5.245-7-7s-7.458-3-11-3-6.933 1.245-10 3-5.23 3.96-7 7l-19 33-38-64.002c-1.772-3.04-3.932-6.243-7-7.998s-6.458-2-10-2-6.932.245-10 2c-3.068 1.755-6.228 4.958-8 7.998L2 170c-1.773 3.039-1.998 6.487-2 9.998-.002 3.511.23 6.96 2 10.001 1.77 3.04 4.932 5.244 8 7 3.068 1.756 6.458 3 10 3h70c27.737 0 47.925-12.442 62-36l34-59 18-31 55 94h-73l-18 32Zm-79-32H40l73-126 37 63-24.509 42.725C116.144 163.01 105.488 168 89 168Z"/>
+</svg>
@@ -21,10 +21,7 @@ const MAX_RELATED_ICONS = 4 * 17; // grid of 4x17 icons, = 68 icons
 const arrayMatches = (a, b) => a.filter((item) => b.includes(item)).length;

 const nameParts = (icon) =>
-  [
-    icon.name,
-    ...(icon.aliases?.map((alias) => (typeof alias === 'string' ? alias : alias.name)) ?? []),
-  ]
+  [icon.name, ...(icon.aliases?.map((alias) => alias.name) ?? [])]
    .join('-')
    .split('-')
    .filter((word) => word.length > 2);
@@ -159,16 +159,14 @@ try {
      const aliases = iconMetaData.aliases ?? [];

      if (aliases.length) {
-        aliases
-          .map((alias) => (typeof alias === 'string' ? alias : alias.name))
-          .forEach((alias) => {
-            if (!(alias in newReleaseMetaData)) {
-              return;
-            }
+        aliases.forEach((alias) => {
+          if (!(alias.name in newReleaseMetaData)) {
+            return;
+          }

-            contents.createdRelease =
-              newReleaseMetaData[alias].createdRelease ?? defaultReleaseMetaData.createdRelease;
-          });
+          contents.createdRelease =
+            newReleaseMetaData[alias.name].createdRelease ?? defaultReleaseMetaData.createdRelease;
+        });
      }

      const output = JSON.stringify(contents, null, 2);
@@ -11,9 +11,7 @@ const iconMetaData = await getIconMetaData(path.resolve(scriptDir, '../../icons'
 const iconAliasesRedirectRoutes = Object.entries(iconMetaData)
  .filter(([, { aliases }]) => aliases?.length)
  .map(([iconName, { aliases }]) => {
-    aliases = aliases.map((alias) => (typeof alias === 'object' ? alias.name : alias));
-
-    const aliasRouteMatches = aliases.join('|');
+    const aliasRouteMatches = aliases.map((alias) => alias.name).join('|');

    return {
      src: `/icons/${aliasRouteMatches}`,
@@ -21,32 +21,29 @@
    "aliases": {
      "type": "array",
      "items": {
-        "oneOf": [
-          {
+        "type": "object",
+        "additionalProperties": false,
+        "required": ["name"],
+        "properties": {
+          "name": {
            "type": "string"
          },
-          {
-            "type": "object",
-            "properties": {
-              "name": {
-                "type": "string"
-              },
-              "deprecated": {
-                "const": true
-              },
-              "deprecationReason": {
-                "$ref": "#/$defs/aliasDeprecationReasons"
-              },
-              "toBeRemovedInVersion": {
-                "$ref": "#/$defs/versionNumber",
-                "description": "The version this icon will be removed in."
-              }
-            },
-            "dependentRequired": {
-              "deprecated": ["deprecationReason", "toBeRemovedInVersion"]
-            }
+          "deprecated": {
+            "const": true
+          },
+          "deprecationReason": {
+            "$ref": "#/$defs/aliasDeprecationReasons"
+          },
+          "toBeRemovedInVersion": {
+            "$ref": "#/$defs/versionNumber",
+            "description": "The version this icon will be removed in."
          }
-        ]
+        },
+        "dependentRequired": {
+          "deprecated": ["deprecationReason", "toBeRemovedInVersion"],
+          "deprecationReason": ["deprecated"],
+          "toBeRemovedInVersion": ["deprecated"]
+        }
      },
      "uniqueItems": true
    },
@@ -130,7 +127,9 @@
    }
  },
  "dependentRequired": {
-    "deprecated": ["deprecationReason", "toBeRemovedInVersion"]
+    "deprecated": ["deprecationReason", "toBeRemovedInVersion"],
+    "deprecationReason": ["deprecated"],
+    "toBeRemovedInVersion": ["deprecated"]
  },
  "$defs": {
    "iconDeprecationReasons": {
@@ -9,8 +9,8 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M3.5 13h6" />
-  <path d="m2 16 4.5-9 4.5 9" />
-  <path d="M18 7v9" />
  <path d="m14 12 4 4 4-4" />
-</svg>
+  <path d="M18 16V7" />
+  <path d="m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16" />
+  <path d="M3.304 13h6.392" />
+</svg>
@@ -9,8 +9,8 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M3.5 13h6" />
-  <path d="m2 16 4.5-9 4.5 9" />
-  <path d="M18 16V7" />
  <path d="m14 11 4-4 4 4" />
-</svg>
+  <path d="M18 16V7" />
+  <path d="m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16" />
+  <path d="M3.304 13h6.392" />
+</svg>
@@ -4,7 +4,9 @@
    "it-is-not",
    "jguddas",
    "danielbayley",
-    "ericfennis"
+    "ericfennis",
+    "vichotech",
+    "karsa-mistmere"
  ],
  "tags": [
    "letter",
@@ -9,8 +9,8 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M21 14h-5" />
-  <path d="M16 16v-3.5a2.5 2.5 0 0 1 5 0V16" />
-  <path d="M4.5 13h6" />
-  <path d="m3 16 4.5-9 4.5 9" />
+  <path d="m15 16 2.536-7.328a1.02 1.02 1 0 1 1.928 0L22 16" />
+  <path d="M15.697 14h5.606" />
+  <path d="m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16" />
+  <path d="M3.304 13h6.392" />
 </svg>
@@ -19,6 +19,11 @@
    "time"
  ],
  "aliases": [
-    "alarm-check"
+    {
+      "name": "alarm-check",
+      "deprecationReason": "alias.name",
+      "deprecated": true,
+      "toBeRemovedInVersion": "v1.0"
+    }
  ]
 }
@@ -15,6 +15,11 @@
    "time"
  ],
  "aliases": [
-    "alarm-minus"
+    {
+      "name": "alarm-minus",
+      "deprecationReason": "alias.name",
+      "deprecated": true,
+      "toBeRemovedInVersion": "v1.0"
+    }
  ]
 }
@@ -15,6 +15,11 @@
    "time"
  ],
  "aliases": [
-    "alarm-plus"
+    {
+      "name": "alarm-plus",
+      "deprecationReason": "alias.name",
+      "deprecated": true,
+      "toBeRemovedInVersion": "v1.0"
+    }
  ]
 }
@@ -1,17 +0,0 @@
-{
-  "$schema": "../icon.schema.json",
-  "contributors": [
-    "colebemis",
-    "ericfennis"
-  ],
-  "tags": [
-    "text",
-    "alignment",
-    "justified",
-    "menu",
-    "list"
-  ],
-  "categories": [
-    "text"
-  ]
-}
@@ -1,16 +0,0 @@
-{
-  "$schema": "../icon.schema.json",
-  "contributors": [
-    "colebemis",
-    "ericfennis"
-  ],
-  "tags": [
-    "text",
-    "alignment",
-    "left",
-    "list"
-  ],
-  "categories": [
-    "text"
-  ]
-}
@@ -1,15 +0,0 @@
-{
-  "$schema": "../icon.schema.json",
-  "contributors": [
-    "colebemis",
-    "ericfennis"
-  ],
-  "tags": [
-    "text",
-    "alignment",
-    "right"
-  ],
-  "categories": [
-    "text"
-  ]
-}
@@ -5,7 +5,27 @@
  ],
  "tags": [
    "fruit",
-    "food"
+    "food",
+    "healthy",
+    "snack",
+    "nutrition",
+    "fresh",
+    "produce",
+    "grocery",
+    "organic",
+    "harvest",
+    "vitamin",
+    "red",
+    "green",
+    "juicy",
+    "sweet",
+    "tart",
+    "bite",
+    "orchard",
+    "plant",
+    "core",
+    "raw",
+    "diet"
  ],
  "categories": [
    "food-beverage"
@@ -9,6 +9,6 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z" />
-  <path d="M10 2c1 .5 2 2 2 5" />
+  <path d="M12 6.528V3a1 1 0 0 1 1-1h0" />
+  <path d="M18.237 21A15 15 0 0 0 22 11a6 6 0 0 0-10-4.472A6 6 0 0 0 2 11a15.1 15.1 0 0 0 3.763 10 3 3 0 0 0 3.648.648 5.5 5.5 0 0 1 5.178 0A3 3 0 0 0 18.237 21" />
 </svg>
@@ -2,7 +2,8 @@
  "$schema": "../icon.schema.json",
  "contributors": [
    "danielbayley",
-    "karsa-mistmere"
+    "karsa-mistmere",
+    "jamiemlaw"
  ],
  "tags": [
    "backwards",
@@ -9,6 +9,6 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M15 5H9" />
-  <path d="M15 9v3h4l-7 7-7-7h4V9z" />
+  <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="M9 4h6" />
 </svg>
@@ -3,7 +3,9 @@
  "contributors": [
    "Andreto",
    "mittalyashu",
-    "danielbayley"
+    "danielbayley",
+    "karsa-mistmere",
+    "jamiemlaw"
  ],
  "tags": [
    "backwards",
@@ -9,5 +9,5 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M15 6v6h4l-7 7-7-7h4V6h6z" />
+  <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" />
 </svg>
@@ -2,7 +2,8 @@
  "$schema": "../icon.schema.json",
  "contributors": [
    "danielbayley",
-    "karsa-mistmere"
+    "karsa-mistmere",
+    "jamiemlaw"
  ],
  "tags": [
    "previous",
@@ -9,6 +9,6 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M19 15V9" />
-  <path d="M15 15h-3v4l-7-7 7-7v4h3v6z" />
+  <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="M20 9v6" />
 </svg>
@@ -4,7 +4,9 @@
    "Andreto",
    "mittalyashu",
    "ericfennis",
-    "danielbayley"
+    "danielbayley",
+    "karsa-mistmere",
+    "jamiemlaw"
  ],
  "tags": [
    "previous",
@@ -9,5 +9,5 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M18 15h-6v4l-7-7 7-7v4h6v6z" />
+  <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" />
 </svg>
@@ -2,7 +2,8 @@
  "$schema": "../icon.schema.json",
  "contributors": [
    "danielbayley",
-    "karsa-mistmere"
+    "karsa-mistmere",
+    "jamiemlaw"
  ],
  "tags": [
    "next",
@@ -9,6 +9,6 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M5 9v6" />
-  <path d="M9 9h3V5l7 7-7 7v-4H9V9z" />
+  <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="M4 9v6" />
 </svg>
@@ -4,7 +4,9 @@
    "Andreto",
    "mittalyashu",
    "ericfennis",
-    "danielbayley"
+    "danielbayley",
+    "karsa-mistmere",
+    "jamiemlaw"
  ],
  "tags": [
    "next",
@@ -9,5 +9,5 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M6 9h6V5l7 7-7 7v-4H6V9z" />
+  <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" />
 </svg>
@@ -2,7 +2,8 @@
  "$schema": "../icon.schema.json",
  "contributors": [
    "danielbayley",
-    "karsa-mistmere"
+    "karsa-mistmere",
+    "jamiemlaw"
  ],
  "tags": [
    "caps lock",
@@ -9,6 +9,6 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M9 19h6" />
-  <path d="M9 15v-3H5l7-7 7 7h-4v3H9z" />
+  <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="M9 20h6" />
 </svg>
@@ -3,7 +3,9 @@
  "contributors": [
    "Andreto",
    "mittalyashu",
-    "danielbayley"
+    "danielbayley",
+    "karsa-mistmere",
+    "jamiemlaw"
  ],
  "tags": [
    "shift",
@@ -9,5 +9,5 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M9 18v-6H5l7-7 7 7h-4v6H9z" />
+  <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" />
 </svg>
@@ -21,6 +21,11 @@
    "arrows"
  ],
  "aliases": [
-    "arrow-down-01"
+    {
+      "name": "arrow-down-01",
+      "deprecationReason": "alias.name",
+      "deprecated": true,
+      "toBeRemovedInVersion": "v1.0"
+    }
  ]
 }
@@ -21,6 +21,11 @@
    "arrows"
  ],
  "aliases": [
-    "arrow-down-10"
+    {
+      "name": "arrow-down-10",
+      "deprecationReason": "alias.name",
+      "deprecated": true,
+      "toBeRemovedInVersion": "v1.0"
+    }
  ]
 }
@@ -21,6 +21,11 @@
    "arrows"
  ],
  "aliases": [
-    "arrow-down-az"
+    {
+      "name": "arrow-down-az",
+      "deprecationReason": "alias.name",
+      "deprecated": true,
+      "toBeRemovedInVersion": "v1.0"
+    }
  ]
 }
@@ -21,6 +21,11 @@
    "arrows"
  ],
  "aliases": [
-    "sort-desc"
+    {
+      "name": "sort-desc",
+      "deprecationReason": "alias.name",
+      "deprecated": true,
+      "toBeRemovedInVersion": "v1.0"
+    }
  ]
 }
@@ -22,6 +22,11 @@
    "arrows"
  ],
  "aliases": [
-    "arrow-down-za"
+    {
+      "name": "arrow-down-za",
+      "deprecationReason": "alias.name",
+      "deprecated": true,
+      "toBeRemovedInVersion": "v1.0"
+    }
  ]
 }
@@ -21,6 +21,11 @@
    "arrows"
  ],
  "aliases": [
-    "arrow-up-01"
+    {
+      "name": "arrow-up-01",
+      "deprecationReason": "alias.name",
+      "deprecated": true,
+      "toBeRemovedInVersion": "v1.0"
+    }
  ]
 }
@@ -21,6 +21,11 @@
    "arrows"
  ],
  "aliases": [
-    "arrow-up-10"
+    {
+      "name": "arrow-up-10",
+      "deprecationReason": "alias.name",
+      "deprecated": true,
+      "toBeRemovedInVersion": "v1.0"
+    }
  ]
 }
@@ -21,6 +21,11 @@
    "arrows"
  ],
  "aliases": [
-    "arrow-up-az"
+    {
+      "name": "arrow-up-az",
+      "deprecationReason": "alias.name",
+      "deprecated": true,
+      "toBeRemovedInVersion": "v1.0"
+    }
  ]
 }
@@ -22,6 +22,11 @@
    "arrows"
  ],
  "aliases": [
-    "sort-asc"
+    {
+      "name": "sort-asc",
+      "deprecationReason": "alias.name",
+      "deprecated": true,
+      "toBeRemovedInVersion": "v1.0"
+    }
  ]
 }
@@ -22,6 +22,11 @@
    "arrows"
  ],
  "aliases": [
-    "arrow-up-za"
+    {
+      "name": "arrow-up-za",
+      "deprecationReason": "alias.name",
+      "deprecated": true,
+      "toBeRemovedInVersion": "v1.0"
+    }
  ]
 }
@@ -12,6 +12,11 @@
    "design"
  ],
  "aliases": [
-    "axis-3-d"
+    {
+      "name": "axis-3-d",
+      "deprecationReason": "alias.name",
+      "deprecated": true,
+      "toBeRemovedInVersion": "v1.0"
+    }
  ]
 }
@@ -5,7 +5,12 @@
    "jguddas"
  ],
  "aliases": [
-    "verified"
+    {
+      "name": "verified",
+      "deprecationReason": "alias.name",
+      "deprecated": true,
+      "toBeRemovedInVersion": "v1.0"
+    }
  ],
  "tags": [
    "verified",
@@ -15,6 +15,11 @@
    "shapes"
  ],
  "aliases": [
-    "badge-help"
+    {
+      "name": "badge-help",
+      "deprecationReason": "alias.name",
+      "deprecated": true,
+      "toBeRemovedInVersion": "v1.0"
+    }
  ]
 }
@@ -0,0 +1,27 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley",
+    "jamiemlaw"
+  ],
+  "tags": [
+    "discount",
+    "offer",
+    "sale",
+    "voucher",
+    "tag",
+    "monetization",
+    "marketing",
+    "finance",
+    "financial",
+    "exchange",
+    "transaction",
+    "payment",
+    "try",
+    "₺"
+  ],
+  "categories": [
+    "shopping",
+    "finance"
+  ]
+}
@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M11 7v10a5 5 0 0 0 5-5" />
+  <path d="m15 8-6 3" />
+  <path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76" />
+</svg>
@@ -1,7 +1,7 @@
 {
  "$schema": "../icon.schema.json",
  "contributors": [
-    "danielbayley"
+    "colebemis"
  ],
  "tags": [
    "cancel",
@@ -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.9 4.9 14.2 14.2" />
 </svg>
@@ -9,7 +9,7 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M2 16V4a2 2 0 0 1 2-2h11" />
-  <path d="M22 18H11a2 2 0 1 0 0 4h10.5a.5.5 0 0 0 .5-.5v-15a.5.5 0 0 0-.5-.5H11a2 2 0 0 0-2 2v12" />
-  <path d="M5 14H4a2 2 0 1 0 0 4h1" />
+  <path d="M5 7a2 2 0 0 0-2 2v11" />
+  <path d="M5.803 18H5a2 2 0 0 0 0 4h9.5a.5.5 0 0 0 .5-.5V21" />
+  <path d="M9 15V4a2 2 0 0 1 2-2h9.5a.5.5 0 0 1 .5.5v14a.5.5 0 0 1-.5.5H11a2 2 0 0 1 0-4h10" />
 </svg>
@@ -25,6 +25,11 @@
    "development"
  ],
  "aliases": [
-    "book-template"
+    {
+      "name": "book-template",
+      "deprecationReason": "alias.name",
+      "deprecated": true,
+      "toBeRemovedInVersion": "v1.0.0"
+    }
  ]
 }
@@ -1,7 +1,8 @@
 {
  "$schema": "../icon.schema.json",
  "contributors": [
-    "danielbayley"
+    "danielbayley",
+    "karsa-mistmere"
  ],
  "tags": [
    "diary",
@@ -9,6 +9,6 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M16 8.2A2.22 2.22 0 0 0 13.8 6c-.8 0-1.4.3-1.8.9-.4-.6-1-.9-1.8-.9A2.22 2.22 0 0 0 8 8.2c0 .6.3 1.2.7 1.6A226.652 226.652 0 0 0 12 13a404 404 0 0 0 3.3-3.1 2.413 2.413 0 0 0 .7-1.7" />
  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" />
+  <path d="M8.62 9.8A2.25 2.25 0 1 1 12 6.836a2.25 2.25 0 1 1 3.38 2.966l-2.626 2.856a.998.998 0 0 1-1.507 0z" />
 </svg>
@@ -1,7 +1,8 @@
 {
  "$schema": "../icon.schema.json",
  "contributors": [
-    "danielbayley"
+    "danielbayley",
+    "karsa-mistmere"
  ],
  "tags": [
    "robot",
@@ -10,9 +10,9 @@
  stroke-linejoin="round"
 >
  <path d="M12 6V2H8" />
-  <path d="m8 18-4 4V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2Z" />
-  <path d="M2 12h2" />
-  <path d="M9 11v2" />
  <path d="M15 11v2" />
+  <path d="M2 12h2" />
  <path d="M20 12h2" />
+  <path d="M20 16a2 2 0 0 1-2 2H8.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 4 20.286V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2z" />
+  <path d="M9 11v2" />
 </svg>
@@ -0,0 +1,31 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "jamiemlaw"
+  ],
+  "tags": [
+    "alcohol",
+    "drink",
+    "glass",
+    "goblet",
+    "chalice",
+    "vineyard",
+    "winery",
+    "red",
+    "white",
+    "rose",
+    "dry",
+    "sparkling",
+    "bar",
+    "party",
+    "nightclub",
+    "nightlife",
+    "sommelier",
+    "restaurant",
+    "dinner",
+    "meal"
+  ],
+  "categories": [
+    "food-beverage"
+  ]
+}
@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M10 3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a6 6 0 0 0 1.2 3.6l.6.8A6 6 0 0 1 17 13v8a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-8a6 6 0 0 1 1.2-3.6l.6-.8A6 6 0 0 0 10 5z" />
+  <path d="M17 13h-4a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h4" />
+</svg>
@@ -5,7 +5,12 @@
    "karsa-mistmere"
  ],
  "aliases": [
-    "curly-braces"
+    {
+      "name": "curly-braces",
+      "deprecationReason": "alias.name",
+      "deprecated": true,
+      "toBeRemovedInVersion": "v1.0"
+    }
  ],
  "tags": [
    "json",
--- a/Show More
+++ b/Show More