feat(icons): added list-filter-plus icon (#2645 )

* Added icons/list-filter-plus.svg * Added icons/list-filter-plus.json * Move plus to the top line * Optimize top line and plus gap * Grid alignment and gap fixes * Fix gap violation on middle line * Optimize gap between plus and middle line * Fix pixel perfect * Add category `layout` to metadata
fix(icons/bell): Lucide-ify bell icons (#2656 )
2026-11-11 13:28:19 +00:00 · 2024-12-05 09:51:03 +01:00 · 2024-12-05 09:23:27 +01:00 · 2024-12-04 10:06:49 +01:00 · 2024-12-04 09:56:25 +01:00 · 2024-12-04 09:48:15 +01:00
416 changed files with 1278 additions and 1042 deletions
@@ -127,7 +127,7 @@ When adding new features to for example the icon component for a framework. It i

 ### Local Testing

-To test changes in a local project, you can use `yarn link`, `npm link` or `pnpm link` to link the package. Before you do this make sure you builded the package first.
+To test changes in a local project, you can use `yarn link`, `npm link`, `bun link` or `pnpm link` to link the package. Before you do this make sure you builded the package first.

 ```sh
 # in packages/lucide-react
@@ -1,5 +0,0 @@
-{
-  "$schema": "../category.schema.json",
-  "title": "Currency",
-  "icon": "dollar-sign"
-}
@@ -1,5 +1,5 @@
 {
  "$schema": "../category.schema.json",
-  "title": "Money",
+  "title": "Finance",
  "icon": "piggy-bank"
 }
@@ -1,5 +0,0 @@
-{
-  "$schema": "../category.schema.json",
-  "title": "Furniture",
-  "icon": "rocking-chair"
-}
@@ -1,5 +0,0 @@
-{
-  "$schema": "../category.schema.json",
-  "title": "Maps",
-  "icon": "map"
-}
@@ -1,5 +1,5 @@
 {
  "$schema": "../category.schema.json",
-  "title": "Maths",
+  "title": "Mathematics",
  "icon": "divide"
 }
@@ -1,5 +1,5 @@
 {
  "$schema": "../category.schema.json",
-  "title": "Notifications",
+  "title": "Notification",
  "icon": "triangle-alert"
 }
@@ -35,10 +35,6 @@
    "name": "connectivity",
    "title": "Connectivity"
  },
-  {
-    "name": "currency",
-    "title": "Currency"
-  },
  {
    "name": "cursors",
    "title": "Cursors"
@@ -64,12 +60,12 @@
    "title": "File icons"
  },
  {
-    "name": "food-beverage",
-    "title": "Food & beverage"
+    "name": "finance",
+    "title": "Money"
  },
  {
-    "name": "furniture",
-    "title": "Furniture"
+    "name": "food-beverage",
+    "title": "Food & beverage"
  },
  {
    "name": "gaming",
@@ -88,21 +84,13 @@
    "title": "Mail"
  },
  {
-    "name": "maps",
-    "title": "Maps"
-  },
-  {
-    "name": "maths",
-    "title": "Maths"
+    "name": "math",
+    "title": "Math"
  },
  {
    "name": "medical",
    "title": "Medical"
  },
-  {
-    "name": "money",
-    "title": "Money"
-  },
  {
    "name": "multimedia",
    "title": "Multimedia"
@@ -117,7 +105,7 @@
  },
  {
    "name": "notifications",
-    "title": "Notifications"
+    "title": "Notification"
  },
  {
    "name": "people",
@@ -14,5 +14,13 @@
      "light": "/library-logos/tamagui.svg",
      "dark": "/library-logos/tamagui.svg"
    }
+  },
+  {
+    "name": "Reflex",
+    "url": "https://reflex.dev",
+    "image": {
+      "light": "/library-logos/reflex-light.svg",
+      "dark": "/library-logos/reflex-dark.svg"
+    }
  }
 ]
@@ -9,7 +9,7 @@ export default {
        }
        return null;
      })
-      .then((res) => res.tag_name);
+      .then((res) => res?.tag_name);

    return {
      version,
@@ -0,0 +1,438 @@
+<script setup lang="ts">
+import type { IconEntity } from '../../types';
+import { computed } from 'vue';
+import createLucideIcon from 'lucide-vue-next/src/createLucideIcon.ts';
+import Calendar from '../../../data/iconDetails/calendar.ts';
+import Clock from '../../../data/iconDetails/clock.ts';
+import Bug from '../../../data/iconDetails/bug.ts';
+import Rocket from '../../../data/iconDetails/rocket.ts';
+import TriangleAlert from '../../../data/iconDetails/triangle-alert.ts';
+import PartyPopper from '../../../data/iconDetails/party-popper.ts';
+import Scissors from '../../../data/iconDetails/scissors.ts';
+import Copy from '../../../data/iconDetails/copy.ts';
+import Save from '../../../data/iconDetails/save.ts';
+import Clipboard from '../../../data/iconDetails/clipboard.ts';
+import MessageCircle from '../../../data/iconDetails/message-circle.ts';
+import ThumbsDown from '../../../data/iconDetails/thumbs-down.ts';
+import ThumbsUp from '../../../data/iconDetails/thumbs-up.ts';
+import Heart from '../../../data/iconDetails/heart.ts';
+import Folder from '../../../data/iconDetails/folder.ts';
+import Files from '../../../data/iconDetails/files.ts';
+import Plus from '../../../data/iconDetails/plus.ts';
+import File from '../../../data/iconDetails/file.ts';
+import FileText from '../../../data/iconDetails/file-text.ts';
+
+const props = defineProps<{
+  name: IconEntity['name'];
+  iconNode: IconEntity['iconNode'];
+}>();
+
+const iconComponent = computed(() => {
+  if (!props.name || !props.iconNode) return null;
+  return createLucideIcon(props.name, props.iconNode);
+});
+
+const CalendarIcon = createLucideIcon('calendar', Calendar.iconNode);
+const ClockIcon = createLucideIcon('clock', Clock.iconNode);
+const BugIcon = createLucideIcon('bug', Bug.iconNode);
+const RocketIcon = createLucideIcon('rocket', Rocket.iconNode);
+const AlertTriangleIcon = createLucideIcon('alert-triangle', TriangleAlert.iconNode);
+const ScissorsIcon = createLucideIcon('scissors', Scissors.iconNode);
+const CopyIcon = createLucideIcon('copy', Copy.iconNode);
+const SaveIcon = createLucideIcon('save', Save.iconNode);
+const ClipboardIcon = createLucideIcon('clipboard', Clipboard.iconNode);
+const PartyPopperIcon = createLucideIcon('party-popper', PartyPopper.iconNode);
+const HeartIcon = createLucideIcon('heart', Heart.iconNode);
+const ThumbsUpIcon = createLucideIcon('thumbs-up', ThumbsUp.iconNode);
+const ThumbsDownIcon = createLucideIcon('thumbs-down', ThumbsDown.iconNode);
+const MessageCircleIcon = createLucideIcon('message-circle', MessageCircle.iconNode);
+const FolderIcon = createLucideIcon('folder.ts', Folder.iconNode);
+const FilesIcon = createLucideIcon('files.ts', Files.iconNode);
+const PlusIcon = createLucideIcon('plus.ts', Plus.iconNode);
+const FileIcon = createLucideIcon('file.ts', File.iconNode);
+const FileTextIcon = createLucideIcon('file-text.ts', FileText.iconNode);
+
+const prettyName = props.name
+  .split('-')
+  .at(0)
+  .split('')
+  .map((character, index) => (index === 0 ? character.toUpperCase() : character))
+  .join('');
+</script>
+
+<template>
+  <section class="showcase">
+    <h2 class="title">See this icon in action</h2>
+    <div class="showcase-grid">
+      <div class="showcase-item column">
+        <div class="placeholder"></div>
+        <div class="placeholder"></div>
+        <div class="placeholder"></div>
+        <div class="placeholder narrow"></div>
+        <div class="spacer"></div>
+        <div class="actions">
+          <button class="button button-brand">
+            <iconComponent />
+            {{ prettyName }}
+          </button>
+          <button class="button button-alt">Cancel</button>
+        </div>
+      </div>
+      <div class="showcase-item column">
+        <div class="placeholder narrow"></div>
+        <div class="input-wrapper">
+          <CalendarIcon v-if="name !== 'calendar'" />
+          <ClockIcon v-if="name == 'calendar'" />
+          <input
+            type="text"
+            v-if="name !== 'calendar'"
+            placeholder="Enter a date..."
+          />
+          <input
+            type="text"
+            v-if="name == 'calendar'"
+            placeholder="Enter a time..."
+          />
+        </div>
+        <div class="spacer"></div>
+        <div class="placeholder narrow"></div>
+        <div class="input-wrapper">
+          <iconComponent />
+          <input
+            type="text"
+            placeholder="Enter a value..."
+          />
+        </div>
+      </div>
+      <div class="showcase-item column">
+        <div
+          class="row"
+          v-if="name !== 'bug'"
+        >
+          <div class="placeholder"></div>
+          <div class="badge badge-red">
+            <BugIcon :size="20" />
+            Bug
+          </div>
+        </div>
+        <div
+          class="row"
+          v-else
+        >
+          <div class="placeholder"></div>
+          <div class="badge badge-red">
+            <AlertTriangleIcon :size="20" />
+            Alert
+          </div>
+        </div>
+        <div class="row">
+          <div class="placeholder"></div>
+          <div class="badge badge-indigo">
+            <RocketIcon
+              :size="20"
+              v-if="name !== 'rocket'"
+            />
+            <PartyPopperIcon
+              :size="20"
+              v-else
+            />
+            Feature
+          </div>
+        </div>
+        <div class="row">
+          <div class="placeholder"></div>
+          <div class="badge badge-green">
+            <iconComponent :size="20" />
+            {{ prettyName }}
+          </div>
+        </div>
+      </div>
+      <div class="showcase-item column">
+        <button class="button button-alt button-square">
+          <FolderIcon v-if="name !== 'folder'" />
+          <FilesIcon v-else />
+          Documents
+          <PlusIcon class="ms-auto" />
+        </button>
+        <button class="button button-alt button-square">
+          <FileIcon v-if="name !== 'file'" />
+          <FileTextIcon v-else />
+          Readme
+        </button>
+        <button class="button button-alt button-square">
+          <iconComponent />
+          {{ prettyName }}
+          <span class="badge-notification ms-auto">12</span>
+        </button>
+      </div>
+      <div class="showcase-item column">
+        <div class="placeholder"></div>
+        <div class="placeholder"></div>
+        <div class="placeholder"></div>
+        <div class="placeholder narrow"></div>
+        <div class="spacer"></div>
+        <div class="actions">
+          <div class="icon-counter">
+            <HeartIcon v-if="name !== 'heart'" />
+            <ThumbsUpIcon v-else />
+            112
+          </div>
+          <div class="spacer"></div>
+          <div class="icon-counter">
+            <MessageCircleIcon v-if="name !== 'message-circle'" />
+            <ThumbsDownIcon v-else />
+            8
+          </div>
+          <div class="spacer"></div>
+          <div class="icon-counter">
+            <iconComponent />
+            11
+          </div>
+        </div>
+      </div>
+      <div class="showcase-item">
+        <div class="column align-items-center">
+          <div class="actions justify-content-center">
+            <button class="button button-icon">
+              <CopyIcon v-if="name !== 'copy'" />
+              <SaveIcon v-else />
+            </button>
+            <button class="button button-icon">
+              <ScissorsIcon v-if="name !== 'scissors'" />
+              <SaveIcon v-else />
+            </button>
+            <button class="button button-icon">
+              <ClipboardIcon v-if="name !== 'clipboard'" />
+              <SaveIcon v-else />
+            </button>
+            <button class="button button-icon">
+              <iconComponent></iconComponent>
+              <span class="badge-notification">2</span>
+            </button>
+          </div>
+          <div class="spacer"></div>
+          <div class="placeholder"></div>
+          <div class="placeholder"></div>
+          <div class="placeholder"></div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.showcase {
+  margin-bottom: 32px;
+}
+
+.showcase-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 48px;
+  margin-inline-start: 24px;
+  margin-block-start: 48px;
+}
+
+.showcase-item {
+  padding: 24px;
+  border-radius: 8px;
+  background-color: var(--vp-c-bg);
+  box-shadow:
+    var(--vp-shadow-4),
+    -24px -24px 0 var(--vp-c-bg-soft);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 240px;
+}
+
+.spacer {
+  flex-basis: 0;
+}
+
+.button {
+  position: relative;
+  border-radius: 32px;
+  padding: 8px 16px;
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  font-weight: 500;
+  transition:
+    color 0.25s,
+    border-color 0.25s,
+    background-color 0.25s;
+
+  border-color: var(--vp-button-alt-border);
+  color: var(--vp-button-alt-text);
+  background-color: var(--vp-button-alt-bg);
+  &:hover {
+    border-color: var(--vp-button-alt-hover-border);
+    color: var(--vp-button-alt-hover-text);
+    background-color: var(--vp-button-alt-hover-bg);
+  }
+  &.button-brand {
+    border-color: var(--vp-button-brand-border);
+    color: var(--vp-button-brand-text);
+    background-color: var(--vp-button-brand-bg);
+    &:hover {
+      border-color: var(--vp-button-brand-hover-border);
+      color: var(--vp-button-brand-hover-text);
+      background-color: var(--vp-button-brand-hover-bg);
+    }
+  }
+  &.button-icon {
+    padding: 12px;
+  }
+  &.button-square {
+    border-radius: 8px;
+    width: 100%;
+  }
+}
+
+.actions {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.lucide {
+  flex-shrink: 0;
+  flex-grow: 0;
+}
+
+.placeholder {
+  display: block;
+  background-color: var(--vp-c-bg-soft);
+  border-radius: 32px;
+  height: 16px;
+  width: 100%;
+
+  &.narrow {
+    width: 33%;
+  }
+}
+
+.input-wrapper {
+  position: relative;
+  width: 100%;
+  .lucide {
+    position: absolute;
+    inset-inline-start: 12px;
+    inset-block: 50%;
+    translate: 0 -50%;
+    color: var(--vp-c-text-1);
+    opacity: 0.7;
+  }
+  input {
+    padding: 12px 20px;
+    padding-inline-start: 48px;
+    border-radius: 8px;
+    background-color: var(--vp-c-bg-soft);
+    color: var(--vp-c-text-1);
+    display: block;
+    width: 100%;
+    border: 2px solid transparent;
+    transition:
+      color 0.25s,
+      border-color 0.25s,
+      background-color 0.25s;
+    &:hover {
+      border-color: var(--vp-c-border);
+    }
+    &:focus {
+      border-color: var(--vp-c-brand);
+    }
+  }
+  &:focus-within {
+    .lucide {
+      opacity: 1;
+    }
+  }
+}
+
+.badge {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  border-radius: 8px;
+  background-color: transparent;
+  overflow: hidden;
+  position: relative;
+  color: var(--badge-color);
+  &:before {
+    content: ' ';
+    inset: 0;
+    position: absolute;
+    background-color: var(--badge-color);
+    opacity: 0.1;
+  }
+  &.badge-indigo {
+    --badge-color: var(--vp-c-indigo-2);
+  }
+  &.badge-green {
+    --badge-color: var(--vp-c-green-2);
+  }
+  &.badge-red {
+    --badge-color: var(--vp-c-brand);
+  }
+}
+
+.badge-notification {
+  background-color: var(--vp-c-brand);
+  color: var(--vp-button-brand-text);
+  border-radius: 32px;
+  padding: 0 8px;
+  min-width: 24px;
+  min-height: 24px;
+}
+
+.button-icon {
+  .badge-notification {
+    position: absolute;
+    top: 0;
+    right: 0;
+    translate: 33% -33%;
+  }
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  align-items: center;
+  width: 100%;
+}
+
+.icon-counter {
+  display: flex;
+  flex-direction: row;
+  gap: 6px;
+  color: var(--vp-c-text-2);
+  align-items: center;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: start;
+  width: 100%;
+}
+
+.align-items-center {
+  align-items: center;
+}
+
+.justify-content-center {
+  justify-content: center;
+}
+
+.ms-auto {
+  margin-inline-start: auto;
+}
+</style>
@@ -14,6 +14,7 @@ import CarbonAdOverlay from './CarbonAdOverlay.vue';

 const ICON_SIZE = 56;
 const ICON_GRID_GAP = 8;
+const DEFAULT_GRID_ITEMS = 10 * 160;

 const props = defineProps<{
  icons: IconEntity[];
@@ -114,11 +115,23 @@ function handleCloseDrawer() {
      />
    </StickyBar>
    <NoResults
-      v-if="list.length === 0"
+      v-if="list.length === 0 && searchQuery !== ''"
      :searchQuery="searchQuery"
      @clear="searchQuery = ''"
    />
-    <div v-bind="wrapperProps" class="icon">
+    <IconGrid
+      v-else-if="list.length === 0"
+      :key="index"
+      overlayMode
+      :icons="[...searchResults].splice(0, DEFAULT_GRID_ITEMS)"
+      :activeIcon="activeIconName"
+      @setActiveIcon="setActiveIconName"
+    />
+    <div
+      v-bind="wrapperProps"
+      class="icon"
+      v-else
+    >
      <IconGrid
        v-for="{ index, data: icons } in list"
        :key="index"
@@ -1,29 +1,20 @@
 <script setup lang="ts">
-import type { IconEntity } from '../../types'
-import IconGrid from './IconGrid.vue'
+import type { IconEntity } from '../../types';
+import IconGrid from './IconGrid.vue';
+
 defineProps<{
-  icons: IconEntity[]
-}>()
+  icons: IconEntity[];
+}>();
 </script>

 <template>
  <section class="related-icons">
-    <h2 class="title">
-      Related Icons
-    </h2>
-    <IconGrid
-      :icons="icons"
-    />
+    <h2 class="title">More icons like this</h2>
+    <IconGrid :icons="icons" />
  </section>
 </template>

 <style scoped>
-.title {
-  margin-bottom: 24px;
-  font-size: 19px;
-  font-weight: 500;
-}
-
 .related-icons {
  margin-bottom: 32px;
 }
@@ -22,6 +22,10 @@ yarn add lucide
 npm install lucide
 ```

+```sh [bun]
+bun add lucide
+```
+
 :::

 For more details, see the [documentation](packages/lucide.md).
@@ -44,6 +48,10 @@ yarn add lucide-react
 npm install lucide-react
 ```

+```sh [bun]
+bun add lucide-react
+```
+
 :::

 For more details, see the [documentation](packages/lucide-react.md).
@@ -67,6 +75,10 @@ yarn add lucide-vue-next
 npm install lucide-vue-next
 ```

+```sh [bun]
+bun add lucide-vue-next
+```
+
 :::

 For more details, see the [documentation](packages/lucide-vue-next.md).
@@ -90,6 +102,10 @@ yarn add lucide-svelte
 npm install lucide-svelte
 ```

+```sh [bun]
+bun add lucide-svelte
+```
+
 :::

 For more details, see the [documentation](packages/lucide-svelte.md).
@@ -112,6 +128,10 @@ yarn add lucide-solid
 npm install lucide-solid
 ```

+```sh [bun]
+bun add lucide-solid
+```
+
 :::

 For more details, see the [documentation](packages/lucide-solid.md).
@@ -134,6 +154,10 @@ yarn add lucide-angular
 npm install lucide-angular
 ```

+```sh [bun]
+bun add lucide-angular
+```
+
 :::

 For more details, see the [documentation](packages/lucide-angular.md).
@@ -156,6 +180,10 @@ yarn add lucide-preact
 npm install lucide-preact
 ```

+```sh [bun]
+bun add lucide-preact
+```
+
 :::

 ## Static usage
@@ -176,6 +204,10 @@ yarn add lucide-static
 npm install lucide-static
 ```

+```sh [bun]
+bun add lucide-static
+```
+
 :::

 For more details, see the [documentation](packages/lucide-static.md).
@@ -18,6 +18,10 @@ yarn add lucide-angular
 npm install lucide-angular
 ```

+```sh [bun]
+bun add lucide-angular
+```
+
 :::

 ## How to use
@@ -22,6 +22,10 @@ yarn add lucide-preact
 npm install lucide-preact
 ```

+```sh [bun]
+bun add lucide-preact
+```
+
 :::

 ## How to use
@@ -20,6 +20,10 @@ yarn add lucide-react-native
 npm install lucide-react-native
 ```

+```sh [bun]
+bun add lucide-react-native
+```
+
 :::

 ## How to use
@@ -18,6 +18,10 @@ yarn add lucide-react
 npm install lucide-react
 ```

+```sh [bun]
+bun add lucide-react
+```
+
 :::

 ## How to use
@@ -18,6 +18,10 @@ yarn add lucide-solid
 npm install lucide-solid
 ```

+```sh [bun]
+bun add lucide-solid
+```
+
 :::

 ## How to use
@@ -33,13 +33,17 @@ yarn add lucide-static
 npm install lucide-static
 ```

+```sh [bun]
+bun add lucide-static
+```
+
 :::

 ### CDN

 ```html
 <!-- SVG file for a single icon -->
-<img src="https://unpkg.com/lucide-static@latest/icons/home.svg" />
+<img src="https://unpkg.com/lucide-static@latest/icons/house.svg" />

 <!-- Icon font -->
 <style>
@@ -62,12 +66,12 @@ To use it in for example html:

 ```html
 <!-- SVG file for a single icon -->
-<img src="~lucide-static/icons/home.svg" />
+<img src="~lucide-static/icons/house.svg" />
 ```

 ```css
-.home-icon {
-  background-image: url(~lucide-static/icons/home.svg);
+.house-icon {
+  background-image: url(~lucide-static/icons/house.svg);
 }
 ```

@@ -90,7 +94,7 @@ You may need additional loader for this.

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

 <!-- or -->
 <svg
@@ -147,7 +151,7 @@ and update the SVG as follows
 ```

 ```html
-<div class="icon-home"></div>
+<div class="icon-house"></div>
 ```

 ### Node.js
@@ -18,6 +18,10 @@ yarn add lucide-svelte
 npm install lucide-svelte
 ```

+```sh [bun]
+bun add lucide-svelte
+```
+
 :::

 ## How to use
@@ -18,6 +18,10 @@ yarn add lucide-vue-next
 npm install lucide-vue-next
 ```

+```sh [bun]
+bun add lucide-vue-next
+```
+
 :::

 ## How to use
@@ -22,6 +22,10 @@ yarn add lucide-vue
 npm install lucide-vue
 ```

+```sh [bun]
+bun add lucide-vue
+```
+
 :::

 ## How to use
@@ -20,6 +20,10 @@ yarn add lucide
 npm install lucide
 ```

+```sh [bun]
+bun add lucide
+```
+
 :::

 ### CDN
@@ -14,6 +14,7 @@ import IconPreview from '~/.vitepress/theme/components/icons/IconPreview.vue'
 import IconPreviewSmall from '~/.vitepress/theme/components/icons/IconPreviewSmall.vue'
 import IconInfo from '~/.vitepress/theme/components/icons/IconInfo.vue'
 import IconContributors from '~/.vitepress/theme/components/icons/IconContributors.vue'
+import IconShowcase from '~/.vitepress/theme/components/icons/IconShowcase.vue'
 import RelatedIcons from '~/.vitepress/theme/components/icons/RelatedIcons.vue'
 import CodeGroup from '~/.vitepress/theme/components/base/CodeGroup.vue'
 import Badge from '~/.vitepress/theme/components/base/Badge.vue'
@@ -104,6 +105,11 @@ function releaseTagLink(version) {
  </div>
 </div>

+<IconShowcase
+  :name="params.name"
+  :iconNode="params.iconNode"
+/>
+
 <RelatedIcons
  v-if="params.relatedIcons"
  :icons="params.relatedIcons"
@@ -233,3 +239,12 @@ function releaseTagLink(version) {
    }
  }
 </style>
+
+<style>
+section h2.title {
+  text-align: center;
+  font-weight: 500;
+  margin-block-end: 64px;
+  padding-top: 32px;
+}
+</style>
@@ -39,8 +39,8 @@
    "@floating-ui/vue": "^1.0.3",
    "@headlessui/vue": "^1.7.17",
    "@resvg/resvg-wasm": "^2.6.2",
-    "@vueuse/components": "^10.7.2",
-    "@vueuse/core": "^10.7.2",
+    "@vueuse/components": "^12.0.0",
+    "@vueuse/core": "^12.0.0",
    "element-to-path": "^1.2.1",
    "fuse.js": "^6.5.3",
    "jszip": "^3.7.0",
@@ -57,6 +57,6 @@
    "sitemap": "^7.1.1",
    "svg-pathdata": "^6.0.3",
    "svgson": "^5.2.1",
-    "vue": "^3.4.13"
+    "vue": "^3.5.13"
  }
 }
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="81" height="16" viewBox="0 0 81 16" fill="none">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29 16H32V10H39V7H32V4H39V1H29V16ZM42 16H52V13H45V1H42V16ZM55 16H65V13H58.0439L58 10H65V7H58V4H65V1H55V16ZM68 7H71V10H68V16H71V10H78V16H81V10H78V7H81V1H78V7H71V1H68V7Z" fill="#1C2024"/>
+<path d="M16 16V1H26V4H19V7H26V10H19L19.0439 13H26V16H16Z" fill="#1C2024"/>
+<path d="M10 10V16H13V10H10Z" fill="#1C2024"/>
+<path d="M0 1V16H3V10H10V7H3V4H10V7H13V1H0Z" fill="#1C2024"/>
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="81" height="16" viewBox="0 0 81 16" fill="none">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29 16H32V10H39V7H32V4H39V1H29V16ZM42 16H52V13H45V1H42V16ZM55 16H65V13H58.0439L58 10H65V7H58V4H65V1H55V16ZM68 7H71V10H68V16H71V10H78V16H81V10H78V7H81V1H78V7H71V1H68V7Z" fill="#FCFCFD"/>
+<path d="M16 16V1H26V4H19V7H26V10H19L19.0439 13H26V16H16Z" fill="#FCFCFD"/>
+<path d="M10 10V16H13V10H10Z" fill="#FCFCFD"/>
+<path d="M0 1V16H3V10H10V7H3V4H10V7H13V1H0Z" fill="#FCFCFD"/>
+</svg>
@@ -64,23 +64,20 @@
          "charts",
          "communication",
          "connectivity",
-          "currency",
          "cursors",
          "design",
          "development",
          "devices",
          "emoji",
          "files",
+          "finance",
          "food-beverage",
-          "furniture",
          "gaming",
          "home",
          "layout",
          "mail",
-          "maps",
-          "maths",
+          "math",
          "medical",
-          "money",
          "multimedia",
          "nature",
          "navigation",
@@ -142,7 +139,7 @@
    },
    "aliasDeprecationReasons": {
      "type": "string",
-      "enum": ["alias.typo", "alias.name"]
+      "enum": ["alias.typo", "alias.name", "alias.duplicate"]
    },
    "versionNumber": {
      "type": "string",
@@ -10,7 +10,6 @@
  ],
  "categories": [
    "transportation",
-    "text",
-    "maps"
+    "text"
  ]
 }
@@ -13,6 +13,6 @@
    "couch"
  ],
  "categories": [
-    "furniture"
+    "home"
  ]
 }
@@ -13,7 +13,6 @@
  ],
  "categories": [
    "arrows",
-    "navigation",
-    "maps"
+    "navigation"
  ]
 }
@@ -11,7 +11,6 @@
  ],
  "categories": [
    "arrows",
-    "navigation",
-    "maps"
+    "navigation"
  ]
 }
@@ -17,7 +17,7 @@
  ],
  "categories": [
    "text",
-    "maths",
+    "math",
    "development"
  ]
 }
@@ -14,7 +14,6 @@
  ],
  "categories": [
    "account",
-    "social",
-    "shapes"
+    "social"
  ]
 }
@@ -24,9 +24,6 @@
  ],
  "categories": [
    "shopping",
-    "money",
-    "currency",
-    "account",
-    "shapes"
+    "finance"
  ]
 }
@@ -12,8 +12,6 @@
    "check"
  ],
  "categories": [
-    "account",
-    "social",
-    "shapes"
+    "social"
  ]
 }
@@ -22,9 +22,6 @@
  ],
  "categories": [
    "shopping",
-    "money",
-    "currency",
-    "account",
-    "shapes"
+    "finance"
  ]
 }
@@ -20,9 +20,6 @@
  ],
  "categories": [
    "shopping",
-    "money",
-    "currency",
-    "account",
-    "shapes"
+    "finance"
  ]
 }
@@ -10,9 +10,7 @@
    "help"
  ],
  "categories": [
-    "account",
    "accessibility",
-    "social",
-    "shapes"
+    "social"
  ]
 }
@@ -21,9 +21,6 @@
  ],
  "categories": [
    "shopping",
-    "money",
-    "currency",
-    "account",
-    "shapes"
+    "finance"
  ]
 }
@@ -12,7 +12,6 @@
  "categories": [
    "account",
    "accessibility",
-    "social",
-    "shapes"
+    "social"
  ]
 }
@@ -21,9 +21,6 @@
  ],
  "categories": [
    "shopping",
-    "money",
-    "currency",
-    "account",
-    "shapes"
+    "finance"
  ]
 }
@@ -12,8 +12,6 @@
    "erase"
  ],
  "categories": [
-    "account",
-    "social",
-    "shapes"
+    "social"
  ]
 }
@@ -15,11 +15,9 @@
    "price tag"
  ],
  "categories": [
-    "account",
    "social",
-    "money",
+    "finance",
    "shopping",
-    "maths",
-    "shapes"
+    "math"
  ]
 }
@@ -12,8 +12,6 @@
    "new"
  ],
  "categories": [
-    "account",
-    "social",
-    "shapes"
+    "social"
  ]
 }
@@ -22,9 +22,6 @@
  ],
  "categories": [
    "shopping",
-    "money",
-    "currency",
-    "account",
-    "shapes"
+    "finance"
  ]
 }
@@ -21,9 +21,6 @@
  ],
  "categories": [
    "shopping",
-    "money",
-    "currency",
-    "account",
-    "shapes"
+    "finance"
  ]
 }
@@ -21,9 +21,6 @@
  ],
  "categories": [
    "shopping",
-    "money",
-    "currency",
-    "account",
-    "shapes"
+    "finance"
  ]
 }
@@ -12,8 +12,6 @@
    "remove"
  ],
  "categories": [
-    "account",
-    "social",
-    "shapes"
+    "social"
  ]
 }
@@ -10,7 +10,6 @@
    "payment"
  ],
  "categories": [
-    "currency",
-    "money"
+    "finance"
  ]
 }
@@ -10,6 +10,6 @@
    "furniture"
  ],
  "categories": [
-    "furniture"
+    "home"
  ]
 }
@@ -10,6 +10,6 @@
    "furniture"
  ],
  "categories": [
-    "furniture"
+    "home"
  ]
 }
@@ -10,6 +10,6 @@
    "furniture"
  ],
  "categories": [
-    "furniture"
+    "home"
  ]
 }
@@ -9,7 +9,7 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M19.4 14.9C20.2 16.4 21 17 21 17H3s3-2 3-9c0-3.3 2.7-6 6-6 .7 0 1.3.1 1.9.3" />
-  <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+  <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" />
 </svg>
@@ -9,7 +9,7 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M18.4 12c.8 3.8 2.6 5 2.6 5H3s3-2 3-9c0-3.3 2.7-6 6-6 1.8 0 3.4.8 4.5 2" />
-  <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+  <path d="M10.268 21a2 2 0 0 0 3.464 0" />
  <path d="M15 8h6" />
+  <path d="M16.243 3.757A6 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.673A9.4 9.4 0 0 1 18.667 12" />
 </svg>
@@ -9,8 +9,8 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M8.7 3A6 6 0 0 1 18 8a21.3 21.3 0 0 0 .6 5" />
-  <path d="M17 17H3s3-2 3-9a4.67 4.67 0 0 1 .3-1.7" />
-  <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+  <path d="M10.268 21a2 2 0 0 0 3.464 0" />
+  <path d="M17 17H4a1 1 0 0 1-.74-1.673C4.59 13.956 6 12.499 6 8a6 6 0 0 1 .258-1.742" />
  <path d="m2 2 20 20" />
+  <path d="M8.668 3.01A6 6 0 0 1 18 8c0 2.687.77 4.653 1.707 6.05" />
 </svg>
@@ -9,8 +9,8 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M19.3 14.8C20.1 16.4 21 17 21 17H3s3-2 3-9c0-3.3 2.7-6 6-6 1 0 1.9.2 2.8.7" />
-  <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+  <path d="M10.268 21a2 2 0 0 0 3.464 0" />
  <path d="M15 8h6" />
  <path d="M18 5v6" />
+  <path d="M20.002 14.464a9 9 0 0 0 .738.863A1 1 0 0 1 20 17H4a1 1 0 0 1-.74-1.673C4.59 13.956 6 12.499 6 8a6 6 0 0 1 8.75-5.332" />
 </svg>
@@ -9,8 +9,8 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
-  <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
-  <path d="M4 2C2.8 3.7 2 5.7 2 8" />
+  <path d="M10.268 21a2 2 0 0 0 3.464 0" />
  <path d="M22 8c0-2.3-.8-4.3-2-6" />
+  <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" />
+  <path d="M4 2C2.8 3.7 2 5.7 2 8" />
 </svg>
@@ -9,6 +9,6 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
-  <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+  <path d="M10.268 21a2 2 0 0 0 3.464 0" />
+  <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" />
 </svg>
@@ -29,8 +29,7 @@
  "categories": [
    "layout",
    "design",
-    "tools",
-    "account"
+    "tools"
  ],
  "aliases": [
    {
@@ -29,8 +29,7 @@
  "categories": [
    "layout",
    "design",
-    "tools",
-    "account"
+    "tools"
  ],
  "aliases": [
    {
@@ -24,7 +24,7 @@
    "research"
  ],
  "categories": [
-    "maps",
+    "navigation",
    "nature",
    "photography",
    "science",
@@ -11,8 +11,7 @@
  ],
  "categories": [
    "brands",
-    "currency",
    "development",
-    "money"
+    "finance"
  ]
 }
@@ -18,7 +18,6 @@
    "parts"
  ],
  "categories": [
-    "account",
    "tools",
    "home"
  ]
@@ -45,7 +45,6 @@
  ],
  "categories": [
    "text",
-    "maps",
    "gaming"
  ]
 }
@@ -41,7 +41,6 @@
  "categories": [
    "social",
    "text",
-    "communication",
    "gaming"
  ]
 }
@@ -35,7 +35,6 @@
  ],
  "categories": [
    "text",
-    "development",
    "gaming"
  ]
 }
@@ -31,7 +31,6 @@
    "unlearn"
  ],
  "categories": [
-    "development",
    "text",
    "gaming"
  ]
@@ -19,6 +19,6 @@
    "shapes",
    "gaming",
    "development",
-    "maths"
+    "math"
  ]
 }
@@ -9,7 +9,7 @@
    "calculating machine"
  ],
  "categories": [
-    "maths",
+    "math",
    "devices"
  ]
 }
@@ -12,7 +12,6 @@
  ],
  "categories": [
    "buildings",
-    "gaming",
-    "maps"
+    "gaming"
  ]
 }
@@ -16,6 +16,7 @@
    "commodities",
    "currencies",
    "currency",
+    "stocks",
    "exchange",
    "hedge fund",
    "statistics",
@@ -25,7 +26,7 @@
  ],
  "categories": [
    "charts",
-    "money"
+    "finance"
  ],
  "aliases": [
    {
@@ -20,7 +20,7 @@
  "categories": [
    "arrows",
    "navigation",
-    "maths",
+    "math",
    "development"
  ]
 }
@@ -20,7 +20,7 @@
  "categories": [
    "arrows",
    "navigation",
-    "maths",
+    "math",
    "gaming"
  ]
 }
@@ -10,6 +10,6 @@
  ],
  "categories": [
    "buildings",
-    "maps"
+    "navigation"
  ]
 }
@@ -11,8 +11,7 @@
    "exclamation mark"
  ],
  "categories": [
-    "notifications",
-    "shapes"
+    "notifications"
  ],
  "aliases": [
    "alert-circle"
@@ -15,7 +15,6 @@
  "categories": [
    "arrows",
    "navigation",
-    "shapes",
    "gaming"
  ],
  "aliases": [
@@ -17,7 +17,6 @@
  "categories": [
    "arrows",
    "navigation",
-    "shapes",
    "gaming"
  ],
  "aliases": [
@@ -11,8 +11,7 @@
  ],
  "categories": [
    "arrows",
-    "navigation",
-    "maps"
+    "navigation"
  ],
  "aliases": [
    "arrow-down-left-from-circle"
@@ -11,8 +11,7 @@
  ],
  "categories": [
    "arrows",
-    "navigation",
-    "maps"
+    "navigation"
  ],
  "aliases": [
    "arrow-down-right-from-circle"
@@ -15,7 +15,6 @@
  "categories": [
    "arrows",
    "navigation",
-    "maps",
    "development"
  ],
  "aliases": [
@@ -11,8 +11,7 @@
  ],
  "categories": [
    "arrows",
-    "navigation",
-    "maps"
+    "navigation"
  ],
  "aliases": [
    "arrow-up-right-from-circle"
@@ -17,7 +17,6 @@
  "categories": [
    "arrows",
    "navigation",
-    "shapes",
    "gaming"
  ],
  "aliases": [
@@ -14,7 +14,6 @@
  "categories": [
    "arrows",
    "navigation",
-    "shapes",
    "gaming"
  ],
  "aliases": [
@@ -14,8 +14,7 @@
    "task"
  ],
  "categories": [
-    "notifications",
-    "shapes"
+    "notifications"
  ],
  "aliases": [
    "check-circle"
@@ -12,8 +12,7 @@
    "task"
  ],
  "categories": [
-    "notifications",
-    "shapes"
+    "notifications"
  ],
  "aliases": [
    "check-circle-2"
@@ -10,8 +10,7 @@
  ],
  "categories": [
    "arrows",
-    "navigation",
-    "shapes"
+    "navigation"
  ],
  "aliases": [
    "chevron-down-circle"
@@ -13,8 +13,7 @@
  ],
  "categories": [
    "arrows",
-    "navigation",
-    "shapes"
+    "navigation"
  ],
  "aliases": [
    "chevron-left-circle"
@@ -12,8 +12,7 @@
  ],
  "categories": [
    "arrows",
-    "navigation",
-    "shapes"
+    "navigation"
  ],
  "aliases": [
    "chevron-right-circle"
@@ -11,8 +11,7 @@
  ],
  "categories": [
    "arrows",
-    "navigation",
-    "shapes"
+    "navigation"
  ],
  "aliases": [
    "chevron-up-circle"
@@ -6,13 +6,12 @@
  ],
  "tags": [
    "calculate",
-    "maths",
+    "math",
    "÷",
    "/"
  ],
  "categories": [
-    "maths",
-    "shapes"
+    "math"
  ],
  "aliases": [
    "divide-circle"
@@ -12,8 +12,6 @@
    "payment"
  ],
  "categories": [
-    "shapes",
-    "money",
-    "currency"
+    "finance"
  ]
 }
@@ -29,7 +29,6 @@
  ],
  "categories": [
    "layout",
-    "development",
-    "shapes"
+    "development"
  ]
 }
@@ -9,7 +9,6 @@
    "="
  ],
  "categories": [
-    "maths",
-    "shapes"
+    "math"
  ]
 }
@@ -16,7 +16,6 @@
  ],
  "categories": [
    "communication",
-    "social",
-    "shapes"
+    "social"
  ]
 }
@@ -13,7 +13,6 @@
    "level"
  ],
  "categories": [
-    "account",
    "transportation",
    "sports",
    "science"
@@ -13,7 +13,6 @@
  "categories": [
    "accessibility",
    "text",
-    "shapes",
    "notifications"
  ],
  "aliases": [
@@ -19,8 +19,7 @@
    "-"
  ],
  "categories": [
-    "maths",
-    "shapes"
+    "math"
  ],
  "aliases": [
    "minus-circle"
@@ -12,7 +12,7 @@
  ],
  "categories": [
    "transportation",
-    "maps"
+    "navigation"
  ],
  "aliases": [
    "parking-circle-off"
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Deniz Abdurrahmani	ea89735f67	feat(icons): added `list-filter-plus` icon (#2645 ) * Added icons/list-filter-plus.svg * Added icons/list-filter-plus.json * Move plus to the top line * Optimize top line and plus gap * Grid alignment and gap fixes * Fix gap violation on middle line * Optimize gap between plus and middle line * Fix pixel perfect * Add category `layout` to metadata	2024-12-05 09:51:03 +01:00
Karsa	53c61c0f48	fix(icons/bell): Lucide-ify bell icons (#2656 )	2024-12-05 09:23:27 +01:00
Jakob Guddas	4213367a37	feat(icons): added `droplet-off` icon (#2641 ) * Added icons/droplet-off.svg * Added icons/droplet-off.json * Update icons/droplet-off.json	2024-12-04 10:06:49 +01:00
Tom Gotsman Tom Gotsman Eric Fennis	bc22d17fa9	docs(showcase): Add reflex to showcase (#2619 ) * Add reflex to showcase * flip colors as were wrong way around * moved to used in section --------- Co-authored-by: Tom Gotsman <tomgotsman@Toms-MacBook-Pro.local> Co-authored-by: Eric Fennis <eric.fennis@gmail.com>	2024-12-04 09:56:25 +01:00
nuclearcodecat	7773135308	Update lucide-static.md (#2651 )	2024-12-04 09:48:15 +01:00
Jamie Law	4f740348cd	fix(icons): Update flask icons (#2659 ) * Update flask icons * Reduce liquid level	2024-12-04 09:47:00 +01:00
Eric FennisandKarsa	ca50dd8bc8	chore(metadata): Cleanup categories and some renaming (#2592 ) * Delete and rename categories * Adjust icon categories * Update categories * Update metadata * Update categories/math.json Co-authored-by: Karsa <contact@karsa.org> --------- Co-authored-by: Karsa <contact@karsa.org>	2024-12-04 09:39:26 +01:00
Jakob GuddasandEric Fennis	6b19d52ab0	fix(icons): changed `picture-in-picture` icon (#2481 ) * Updated icons/picture-in-picture.svg * Updated icons/picture-in-picture.json * Updated icons/picture-in-picture.svg * Updated icons/picture-in-picture.svg * Updated icons/picture-in-picture.json --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com>	2024-12-03 12:45:15 +01:00
Jakob GuddasandEric Fennis	7fc3467761	fix(icons): changed `paperclip` icon (#2482 ) * Updated icons/paperclip.svg * Updated icons/paperclip.json * Updated icons/paperclip.svg --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com>	2024-12-03 12:44:52 +01:00
Jakob GuddasandEric Fennis	ee575f6ae9	fix(icons): combined `layers` and `layers-3` icon (#2596 ) * Updated icons/layers.svg * Updated icons/layers.json * chore: removed layers-3 icon * Update tools/build-icons/utils/deprecationReasonTemplate.mjs --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com>	2024-12-03 11:36:22 +01:00
Eric Fennis	212b488dae	Fix empy icon page (#2650 )	2024-11-29 19:02:31 +01:00
Sunshio	4f038d5fe8	feat(docs): add Bun.sh support to documentation (#2642 )	2024-11-29 09:11:30 +01:00
Jakob GuddasandEric Fennis	5ca6bc3385	feat(icons): added `image-upscale` icon (#2462 ) * Added icons/image-upscale.svg * Added icons/image-upscale.json * Updated icons/image-upscale.svg * Updated icons/image-upscale.svg * Updated icons/image-upscale.svg * Update icons/image-upscale.json --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com>	2024-11-27 10:48:27 +01:00
Jakob Guddas	15e4b6b69d	fix(icons): changed `ship` icon (#2548 ) * Updated icons/ship.svg * Updated icons/ship.json	2024-11-26 14:35:47 +01:00
Jakob GuddasandEric Fennis	407b55f57c	fix(icons): made the `venetian-mask` icon a bit bigger and change the eye whole shape to a single line to not violate the 2px gap rule (#1950 ) * Updated icons/venetian-mask.svg * Updated icons/venetian-mask.json --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com>	2024-11-26 09:53:50 +01:00
KarsaandEric Fennis	6fc7297199	feat(docs): add icon showcase to icon page (#2229 ) * feat(docs): add icon showcase to icon page * feat(docs): add pretty name to button * fix(docs): adjust color for icon counter * Revert icons changes * Revert meta data changes * Revert grid changes * Fix build --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com>	2024-11-26 09:52:39 +01:00
Jakob Guddas	c21df35283	fix(metadata): added window related tags to `grid-2x2` icon metadata file (#2628 ) * Updated icons/grid-2x2.svg * Updated icons/grid-2x2.json	2024-11-26 08:25:42 +01:00
Jakob Guddas	775359260c	fix(icons): changed `shuffle` icon (#2478 ) * Updated icons/shuffle.svg * Updated icons/shuffle.json	2024-11-25 20:23:29 +01:00