feat(icons): add keyboard-off (#1963)

* feat(icons): added keyboard-off

* fix: change name contribuitor

* fix: fix adjust 2px gap of empty space to the right of the line

* fix: fix adjust 2px gap of empty space to the right of the line

* feat: add contribuitor

* fix: update metadata

---------

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
Co-authored-by: Jakob Guddas <github@jguddas.de>

.cspell/custom-words.txt

@@ -0,0 +1,16 @@
+# Custom words
+fullscreen
+gamepad
+gantt
+kanban
+pilcrow
+squircle
+strikethrough
+touchpad
+ungroup
+pilcrow
+
+# Brands
+codepen
+codesandbox
+dribbble

.github/ISSUE_TEMPLATE/02_bug_report.yml

@@ -35,6 +35,16 @@ body:
       placeholder: e.g. 0.289.1
     validations:
       required: true
+  - type: checkboxes
+    id: can-reproduce-in-latest-version
+    attributes:
+      label: Can you reproduce this in the latest version?
+      description: i.e. after running `npm install lucide-react@latest`
+      options:
+        - label: 'Yes'
+        - label: 'No'
+    validations:
+      required: false
   - type: checkboxes
     id: browsers
     attributes:

.github/pull_request_template.md

@@ -47,7 +47,7 @@
 - [ ] I've made sure that the icons look sharp on low DPI displays.
 - [ ] I've made sure that the icons look consistent with the icon set in size, optical volume and density.
 - [ ] I've made sure that the icons are visually centered.
-- [ ] I've correctly optimized all icons to two points of precision.
+- [ ] I've correctly optimized all icons to three points of precision.
 
 ## Before Submitting <!-- For every PR! -->
 <!-- All of these requirements must be fulfilled. -->

.github/workflows/close-stale-prs.yml

@@ -6,6 +6,8 @@ on:
 jobs:
   stale:
     runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
     steps:
       - uses: actions/stale@v9
         with:
@@ -14,4 +16,5 @@ jobs:
           close-pr-message: This PR was closed because it has been stalled for 5 days with no activity.
           close-pr-label: 🧶 stale
           days-before-stale: 30
+          days-before-issue-stale: -1
           days-before-close: -1

.github/workflows/pull-request.yml

@@ -94,6 +94,10 @@ jobs:
           comment-author: 'github-actions[bot]'
           body-includes: Added or changed icons
 
+      - uses: actions/setup-node@v4
+      - name: Install svgson for code preview (safer and faster than installing all deps)
+        run: npm install svgson
+
       - name: Generate comment markup
         run: node ./scripts/generateChangedIconsCommentMarkup.mjs >> comment-markup.md
         id: comment-markup

categories/development.json

@@ -1,5 +1,5 @@
 {
   "$schema": "../category.schema.json",
   "title": "Coding & development",
-  "icon": "code-2"
+  "icon": "code-xml"
 }

categories/multimedia.json

@@ -1,5 +1,5 @@
 {
   "$schema": "../category.schema.json",
   "title": "Multimedia",
-  "icon": "play-circle"
+  "icon": "circle-play"
 }

categories/notifications.json

@@ -1,5 +1,5 @@
 {
   "$schema": "../category.schema.json",
   "title": "Notifications",
-  "icon": "alert-triangle"
+  "icon": "triangle-alert"
 }

cspell.json

@@ -0,0 +1,10 @@
+{
+  "dictionaries": ["en-us", "custom-words"],
+  "dictionaryDefinitions": [
+    {
+      "name": "custom-words",
+      "path": "./.cspell/custom-words.txt",
+      "addWords": true
+    }
+  ]
+}

docs/.vitepress/data/teamData.json

@@ -0,0 +1,48 @@
+[
+  {
+    "name": "Eric Fennis",
+    "title": "Creator of Lucide & Software engineer @nedap",
+    "image": "https://github.com/ericfennis.png?size=192",
+    "sponsor": "https://github.com/sponsors/ericfennis",
+    "socialLinks": [
+      {
+        "icon": "github",
+        "link": "https://github.com/ericfennis"
+      },
+      {
+        "icon": "x",
+        "link": "https://github.com/ericfennis"
+      }
+    ]
+  },
+  {
+    "name": "Karsa Rigó",
+    "title": "Maintainer of Lucide & Software engineer @sztaki",
+    "image": "https://github.com/karsa-mistmere.png?size=192",
+    "socialLinks": [
+      {
+        "icon": "github",
+        "link": "https://github.com/karsa-mistmere"
+      },
+      {
+        "icon": "linkedin",
+        "link": "https://www.linkedin.com/in/karsamistmere"
+      }
+    ]
+  },
+  {
+    "name": "jguddas",
+    "title": "Maintainer of Lucide & Software engineer @lego",
+    "image": "https://github.com/jguddas.png?size=192",
+    "socialLinks": [
+      {
+        "icon": "github",
+        "link": "https://github.com/jguddas"
+      },
+      {
+        "icon": "linkedin",
+        "link": "https://www.linkedin.com/in/jguddas"
+      }
+    ]
+  }
+]

docs/.vitepress/lib/SvgPreview/index.tsx

@@ -25,11 +25,29 @@ const Grid = ({
       fill={fill}
     />
     <path
+      strokeDasharray={'0 0.1 ' + '0.1 0.15 '.repeat(11) + '0 0.15'}
+      strokeWidth={0.1}
       d={
         props.d ||
         new Array(Math.floor(24 - 1))
           .fill(null)
-          .flatMap((_, i) => [
+          .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}`,
           ])

docs/.vitepress/theme/components/base/Badge.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-
 import { useRouter } from 'vitepress';
 
 const { go } = useRouter()

docs/.vitepress/theme/components/base/CardGrid.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="grid">
+  <div class="card-grid-flex">
     <slot />
   </div>
 </template>
 
-<style scoped>
-.grid {
+<style>
+.card-grid-flex {
   display: flex;
   flex-wrap: wrap;
   align-items: stretch;
@@ -15,20 +15,20 @@
   margin: -8px;
 }
 
-.grid > * {
+.card-grid-flex > * {
   flex-basis: 100%;
   box-sizing: border-box;
   padding: 8px;
 }
 
 @media (min-width: 960px) {
-  .grid > * {
+  .card-grid-flex > * {
     flex-basis: 50%;
   }
 }
 
 @media (min-width: 1280px) {
-  .grid > * {
+  .card-grid-flex > * {
     flex-basis: 33.33%;
   }
 }

docs/.vitepress/theme/components/base/GridSection.vue

@@ -24,40 +24,10 @@ const headingElement = computed(() => `h${props.headingLevel}`)
   font-size: 32px;
   font-weight: bold;
   text-align: center;
-  margin-bottom: 32px;
+  margin-bottom: 36px;
 }
 
 section {
   margin-bottom: 96px;
 }
-
-.grid {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: stretch;
-  justify-content: center;
-  align-content: space-evenly;
-  box-sizing: border-box;
-  margin: -8px;
-}
-
-.grid > * {
-  flex-basis: 100%;
-  box-sizing: border-box;
-  padding: 8px;
-}
-
-@media (min-width: 960px) {
-  .grid > * {
-    flex-basis: 50%;
-  }
-}
-
-@media (min-width: 1280px) {
-  .grid > * {
-    flex-basis: 33.33%;
-  }
-}
-
-
 </style>

docs/.vitepress/theme/components/home/HomeHeroIconsCard.vue

@@ -28,8 +28,6 @@ function insert() {
   const replaceIndex = random(0, 48)
   const newIcon = getRandomNewIcon()
 
-  // items.value.splice(replaceIndex, 0, newIcon);
-
   items.value[replaceIndex] = newIcon
 }
 
@@ -76,7 +74,6 @@ onBeforeUnmount(() => {
 
 <style scoped>
 .card-wrapper {
-  /* padding: 0 24px; */
   margin-left: auto;
   margin-bottom: auto;
   margin-top: 48px;
@@ -87,13 +84,10 @@ onBeforeUnmount(() => {
   border-radius: 8px;
   width: 100%;
   height:100%;
-  /* box-shadow: var(--vp-shadow-2); */
   max-height: 220px;
   max-width: 560px;
   margin: 0 auto;
   position: relative;
-  /* max-height: 240px; */
-  /* margin-top: 96px; */
 }
 
 .card-grid {
@@ -107,7 +101,6 @@ onBeforeUnmount(() => {
   max-width: 512px;
   overflow: hidden;
   position: relative;
-  /* white-space: nowrap; */
 }
 
 .list-enter-active {

docs/.vitepress/theme/components/home/HomePackagesSection.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import HomeContainer from './HomeContainer.vue'
+import HomeSectionTitle from './HomeSectionTitle.vue'
 import { useRouter } from 'vitepress';
 import { data } from './HomePackagesSection.data'
 import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue';
@@ -9,7 +10,7 @@ const { go } = useRouter()
 
 <template>
   <HomeContainer>
-    <h2 class="section-title">Available For:</h2>
+    <HomeSectionTitle>Available For:</HomeSectionTitle>
     <div class="packages-list">
       <a
         v-for="{ name, logo } in data.packages"
@@ -34,14 +35,6 @@ const { go } = useRouter()
 </template>
 
 <style scoped>
-.section-title {
-  color: var(--vp-c-text-2);
-  font-weight: 500;
-  line-height: 32px;
-  font-size: 16px;
-  text-align: center;
-  margin-bottom: 16px;
-}
 .packages-list {
   display: flex;
   flex-wrap: wrap;

docs/.vitepress/theme/components/home/HomeSectionTitle.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  headingLevel: 1 | 2 | 3 | 4 | 5 | 6,
+}>()
+
+const headingElement = computed(() => `h${props.headingLevel ?? 2}`)
+</script>
+
+<template>
+  <component :is="headingElement" class="section-title">
+    <slot />
+  </component>
+</template>
+
+<style scoped>
+.section-title {
+  color: var(--vp-c-text-2);
+  font-weight: 500;
+  line-height: 32px;
+  font-size: 16px;
+  text-align: center;
+  margin-bottom: 16px;
+}
+</style>

docs/.vitepress/theme/components/home/HomeSponsorCard.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import Card from '../base/Card.vue'
+import HomeSectionTitle from './HomeSectionTitle.vue'
+import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue'
+</script>
+
+<template>
+  <HomeSectionTitle :headingLevel="3">
+    Sponsor the Lucide maintainers
+  </HomeSectionTitle>
+  <Card class="sponsor-card">
+    <img
+      src="/open-collective.png"
+      alt="Open Collective logo"
+      width="242"
+      height="42"
+    />
+    <VPButton
+      href="https://opencollective.com/lucide-icons"
+      class="sponsor-button"
+      text="Become a sponsor"
+    />
+  </Card>
+</template>
+
+<style scoped>
+.sponsor-card {
+  margin: 0 auto;
+  max-width: 500px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+}
+
+.sponsor-button {
+  margin: auto 0;
+}
+
+@media (min-width: 640px) {
+  .sponsor-card {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+</style>

docs/.vitepress/theme/components/home/HomeTeamSection.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { useData } from 'vitepress';
+import HomeContainer from './HomeContainer.vue'
+import GridSection from '../base/GridSection.vue'
+import TeamMemberCard, { TeamMember } from './TeamMemberCard.vue'
+import teamData from '../../../data/teamData.json'
+import HomeSponsorCard from './HomeSponsorCard.vue';
+import VPDocAsideCarbonAds from 'vitepress/dist/client/theme-default/components/VPDocAsideCarbonAds.vue'
+
+
+const { theme } = useData()
+</script>
+
+<template>
+   <HomeContainer>
+    <GridSection
+      title="Meet the team"
+      :headingLevel="2"
+      class="team-members"
+    >
+      <TeamMemberCard
+        v-for="teamMember in (teamData as TeamMember[])"
+        v-bind="teamMember"
+      />
+    </GridSection>
+    <HomeSponsorCard />
+    <VPDocAsideCarbonAds
+      :carbon-ads="theme.carbonAds"
+      class="ad-card"
+    />
+  </HomeContainer>
+</template>
+
+
+<style scoped>
+.team-members {
+  gap: 24px;
+  margin-top: 48px;
+  margin-bottom: 48px;
+}
+
+@media (min-width: 640px) {
+  .team-members :deep(.card-grid > *) {
+    flex-basis: 50%;
+  }
+}
+
+@media (min-width: 768px) {
+  .team-members :deep(.card-grid > *) {
+    flex-basis: 33.33%;
+  }
+}
+
+.ad-card {
+  margin: 32px auto 0;
+  width: 100%;;
+  max-width: 500px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  display: none;
+}
+
+@media (min-width: 960px) {
+  .ad-card {
+    display: block;
+  }
+}
+
+.ad-card :deep(.VPCarbonAds) {
+  width: 100%;
+  text-align: left;
+  min-height: auto;
+}
+
+.ad-card :deep(.VPCarbonAds .carbon-wrap) {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 24px;
+}
+
+.ad-card :deep(.VPCarbonAds .carbon-text) {
+  padding-top: 0;
+}
+
+.ad-card :deep(.VPCarbonAds .carbon-poweredby) {
+  text-align: right;
+  margin-top: -24px;
+}
+</style>

docs/.vitepress/theme/components/home/TeamMemberCard.vue

@@ -0,0 +1,91 @@
+<script lang="ts">
+export interface TeamMember {
+  name: string
+  title: string
+  image: string
+  sponsor: string
+  socialLinks: DefaultTheme.SocialLink[]
+}
+</script>
+
+<script setup lang="ts">
+import { DefaultTheme } from 'vitepress';
+import Card from '../base/Card.vue'
+import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue'
+import VPSocialLinks from 'vitepress/dist/client/theme-default/components/VPSocialLinks.vue'
+
+defineProps<TeamMember>()
+</script>
+
+<template>
+  <div>
+    <Card class="member-card">
+      <img :src="image" :alt="name" class="member-image"/>
+      <h3 class="member-name">
+        {{name}}
+      </h3>
+      <p class="member-title">
+        {{title}}
+      </p>
+      <div class="member-links">
+        <VPButton
+          v-if="sponsor"
+          :href="sponsor"
+          text="Sponsor"
+          theme="sponsor"
+          class="sponsor-button"
+          size="medium"
+        />
+        <VPSocialLinks
+          :links="socialLinks"
+        />
+      </div>
+
+    </Card>
+  </div>
+</template>
+
+<style scoped>
+.member-card {
+  flex-basis: 100%;
+  height:100%;
+}
+
+.member-image {
+  width: 64px;
+  height: 64px;
+  border-radius: 32px;
+  margin: 0 auto;
+  background-color: var(--vp-c-bg);
+}
+
+.member-name {
+  text-align: center;
+  margin-top: 16px;
+  font-size: 21px;
+  font-weight: 500;
+  color: var(--textColor);
+}
+
+.member-title {
+  flex-grow: 1;
+  padding-top: 8px;
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  text-align: center;
+  margin-bottom: 16px;;
+}
+
+.sponsor-button {
+  width: auto;
+}
+
+.member-links {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+}
+</style>

docs/.vitepress/theme/components/icons/CarbonAdOverlay.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { useData } from 'vitepress';
+import { useSessionStorage } from '@vueuse/core';
+import IconButton from '../base/IconButton.vue';
+import VPDocAsideCarbonAds from 'vitepress/dist/client/theme-default/components/VPDocAsideCarbonAds.vue'
+import { x } from '../../../data/iconNodes'
+import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
+
+const { theme } = useData()
+const showAd = useSessionStorage('show-carbon-ads',true)
+
+defineProps<{
+  drawerOpen: boolean
+}>()
+
+const CloseIcon = createLucideIcon('Close', x)
+</script>
+
+<template>
+  <div
+    :class="{
+      'drawer-open': drawerOpen,
+      'hide-ad': !showAd
+    }"
+    class="floating-ad"
+    v-if="theme.carbonAds"
+  >
+    <IconButton @click="showAd = false" class="hide-button">
+      <component :is="CloseIcon" :size="20" absoluteStrokeWidth />
+    </IconButton>
+    <VPDocAsideCarbonAds
+      :carbon-ads="theme.carbonAds"
+    />
+  </div>
+</template>
+
+<style scoped>
+.floating-ad {
+  display: none;
+  position: fixed;
+  bottom: 32px;
+  width: 224px;
+  right: 32px;
+  transition: opacity 0.5s, transform 0.25s ease;
+}
+
+.floating-ad.drawer-open {
+  transform: translateY(-288px);
+}
+
+.floating-ad.hide-ad {
+  transform: translateX(224px);
+  opacity: 0;
+}
+
+.floating-ad.drawer-open.hide-ad {
+  transform: translateY(-288px) translateX(224px);
+}
+
+.floating-ad.drawer-open, .floating-ad.hide-ad {
+  transition: opacity 0.25s, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+@media (min-width: 1280px) {
+  .floating-ad {
+    display: block;
+  }
+}
+
+@media (min-width: 1440px) {
+  .floating-ad {
+    right: calc(((100% - (var(--vp-layout-max-width) - var(--vp-sidebar-width))) - 272px) / 2);
+  }
+}
+
+.hide-button {
+  padding: 4px;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background-color: transparent;
+}
+</style>

docs/.vitepress/theme/components/icons/CategoryList.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { useData } from 'vitepress'
 import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue'
 import { isActive } from 'vitepress/dist/client/shared'
 import { useActiveAnchor } from '../../composables/useActiveAnchor'
 import { data } from './CategoryList.data'
 import CategoryListItem from './CategoryListItem.vue'
+import { useCategoryView } from '../../composables/useCategoryView'
 
 const { page } = useData()
+const { categoryCounts } = useCategoryView();
 
 const categoriesIsActive = computed(() => {
   return isActive(page.value.relativePath, '/icons/categories');
@@ -25,14 +27,21 @@ const headers = computed(() => {
     level: 2,
     link: `${linkPrefix}#${name}`,
     title,
-    iconCount
+    iconCount: categoryCounts.value[name] ?? iconCount,
+    name
   }))
 })
 
 const container = ref()
 const marker = ref()
 
-useActiveAnchor(container, marker)
+const { setActiveLinkDebounced } = useActiveAnchor(container, marker)
+
+watch(headers, () => {
+  setTimeout(() => {
+    setActiveLinkDebounced()
+  }, 200)
+})
 </script>
 
 <template>

docs/.vitepress/theme/components/icons/CategoryListItem.vue

@@ -7,6 +7,7 @@ interface Header {
   slug: string;
   iconCount: number;
   link: string;
+  name: string;
   children: Header[];
 }
 
@@ -14,36 +15,35 @@ type MenuItem = Omit<Header, 'slug' | 'children'> & {
   children?: MenuItem[];
 };
 
-const props = defineProps<{
+defineProps<{
   headers: MenuItem[];
   root?: boolean;
 }>();
 
 const { selectedCategory } = useCategoryView();
 
-function onClick(event: Event) {
-  const target =
-    (event.target as HTMLElement).nodeName === 'span'
-      ? (event.target as HTMLElement).parentNode
-      : (event.target as HTMLElement);
-  const href = (target as HTMLAnchorElement)?.href;
+function onClick(categoryName: string) {
+  selectedCategory.value = categoryName;
 
-  if (href) {
-    const id = '#' + href.split('#')[1];
-    const decodedId = decodeURIComponent(id);
+  const heading = document.querySelector<HTMLAnchorElement>(categoryName);
+  heading?.focus();
 
-    selectedCategory.value = decodedId.replace('#', '');
-
-    const heading = document.querySelector<HTMLAnchorElement>(decodedId);
-    heading?.focus();
-  }
+  window.history.pushState({}, '', `/icons/categories#${categoryName}`)
 }
 </script>
 
 <template>
   <ul :class="root ? 'root' : 'nested'">
-    <li v-for="{ children, link, title, iconCount } in headers">
-      <a class="outline-link" :href="link" @click="onClick" :title="title">
+    <li v-for="{ children, link, title, iconCount, name } in headers">
+      <a
+        class="outline-link"
+        :href="link"
+        @click="onClick(name)"
+        :title="title"
+        :class="{
+          inactive: iconCount === 0,
+        }"
+      >
         <span>
           {{ title }}
         </span>
@@ -83,6 +83,10 @@ function onClick(event: Event) {
   transition: color 0.25s;
 }
 
+.outline-link.inactive {
+  color: var(--vp-c-text-4);
+}
+
 .outline-link.nested {
   padding-left: 13px;
 }
@@ -93,4 +97,8 @@ function onClick(event: Event) {
   font-size: 11px;
   font-weight: 400;
 }
+
+.outline-link.inactive .icon-count {
+  opacity: 0;
+}
 </style>

docs/.vitepress/theme/components/icons/IconDetailOverlay.vue

@@ -13,12 +13,18 @@ import { computedAsync } from '@vueuse/core';
 import { satisfies } from 'semver';
 
 const props = defineProps<{
-  iconName: string
+  iconName: string | null
 }>()
 
+const { go } = useRouter()
+
 const icon = computedAsync<IconEntity | null>(async () => {
   if (props.iconName) {
-    return (await import(`../../../data/iconDetails/${props.iconName}.ts`)).default as IconEntity
+    try {
+      return (await import(`../../../data/iconDetails/${props.iconName}.ts`)).default as IconEntity
+    } catch (err) {
+      go(`/icons/${props.iconName}`)
+    }
   }
   return null
 }, null)
@@ -36,8 +42,6 @@ function onClose() {
   emit('close')
 }
 
-const { go } = useRouter()
-
 const CloseIcon = createLucideIcon('Close', x)
 const Expand = createLucideIcon('Expand', expand)
 </script>
@@ -144,11 +148,11 @@ const Expand = createLucideIcon('Expand', expand)
 }
 
 .drawer-enter-active {
-  transition: all 0.2s cubic-bezier(.21,.8,.46,.9);
+  transition: opacity 0.5s, transform 0.25s ease;
 }
 
 .drawer-leave-active {
-  transition: all 0.4s cubic-bezier(1, 0.5, 0.8, 1);
+  transition: opacity 0.25s ease, transform 1.6s ease-out;
 }
 
 .drawer-enter-from,

docs/.vitepress/theme/components/icons/IconGrid.vue

@@ -4,7 +4,7 @@ import IconItem from './IconItem.vue'
 
 const emit = defineEmits(['setActiveIcon'])
 
-const props = defineProps<{
+defineProps<{
   icons: IconEntity[]
   activeIcon?: string
   overlayMode?: boolean
@@ -40,7 +40,6 @@ function setActiveIcon(name: string) {
 .icons {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
-  /* padding: 32px 32px 96px; */
   gap: 8px;
   width: 100%;
 }

docs/.vitepress/theme/components/icons/IconItem.vue

@@ -52,8 +52,7 @@ async function navigateToIcon(event) {
     event.preventDefault()
     window.history.pushState({}, '', `/icons/${props.name}`)
     emit('setActiveIcon', props.name)
-  }
-  else {
+  } else {
     event.preventDefault()
     go(`/icons/${props.name}`)
   }

docs/.vitepress/theme/components/icons/IconsCategory.vue

@@ -1,56 +1,53 @@
+<script lang="ts">
+import { IconEntity } from '../../types';
+
+type CategoryNameRow = {
+  type: 'category';
+  title: string;
+  name: string;
+};
+
+type CategoryIconsRow = {
+  type: 'icons';
+  icons: IconEntity[];
+};
+
+export type CategoryRow = CategoryNameRow | CategoryIconsRow;
+</script>
+
 <script setup lang="ts">
-import { ref } from 'vue';
-import { Category } from '../../types';
 import IconGrid from './IconGrid.vue'
-import { vIntersectionObserver } from '@vueuse/components'
 
 defineProps<{
   activeIconName: string
-  category: Category
+  categoryRow: CategoryRow
 }>()
 
-
 const emit = defineEmits(['setActiveIcon'])
-
-const showIcons = ref(false)
-
-// Added intersection observer to improve performance
-const onIntersectionObserver: IntersectionObserverCallback = ([{ isIntersecting }]) => {
-  showIcons.value = isIntersecting
-}
 </script>
 
 <template>
-  <section
-    class="category"
-    :key="category.name"
-    :id="category.name"
-    v-intersection-observer="onIntersectionObserver"
+  <h2
+    v-if="categoryRow.type === 'category'"
+    class="title"
   >
-    <h2 class="title" >
-      <a class="header-anchor" :href="`#${category.name}`" :aria-label="`Permalink to &quot;${category.title}&quot;`">&ZeroWidthSpace;</a>
-      {{ category.title }}
-    </h2>
-    <IconGrid
-      :activeIcon="activeIconName"
-      :icons="category.icons"
-      @setActiveIcon="$event => $emit('setActiveIcon', $event)"
-      overlayMode
-      :hideIcons="!showIcons"
-    />
-  </section>
+    <a class="header-anchor" :href="`#${categoryRow.name}`" :aria-label="`Permalink to &quot;${categoryRow.title}&quot;`">&ZeroWidthSpace;</a>
+    {{ categoryRow.title }}
+  </h2>
+  <IconGrid
+    v-else-if="categoryRow.type === 'icons'"
+    :activeIcon="activeIconName"
+    :icons="categoryRow.icons"
+    @setActiveIcon="$event => $emit('setActiveIcon', $event)"
+    overlayMode
+  />
 </template>
 
 <style scoped>
 .title {
-  margin-bottom: 24px;
+  margin-bottom: 8px;
   font-size: 19px;
   font-weight: 500;
-  padding-top: 86px;
-  /* scroll-padding-top: 240px; */
-}
-
-.category {
-  margin-bottom: calc(-86px + 32px);
+  padding: 24px 0 8px;
 }
 </style>

docs/.vitepress/theme/components/icons/IconsCategoryOverview.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, defineAsyncComponent } from 'vue';
+import { ref, computed, defineAsyncComponent, onMounted } from 'vue';
 import type { IconEntity, Category } from '../../types';
 import useSearch from '../../composables/useSearch';
 import InputSearch from '../base/InputSearch.vue';
@@ -8,6 +8,14 @@ import StickyBar from './StickyBar.vue';
 import IconsCategory from './IconsCategory.vue';
 import useFetchTags from '../../composables/useFetchTags';
 import useFetchCategories from '../../composables/useFetchCategories';
+import { useElementSize, useEventListener, useVirtualList } from '@vueuse/core';
+import chunkArray from '../../utils/chunkArray';
+import { CategoryRow } from './IconsCategory.vue';
+import useScrollToCategory from '../../composables/useScrollToCategory';
+import CarbonAdOverlay from './CarbonAdOverlay.vue';
+
+const ICON_SIZE = 56;
+const ICON_GRID_GAP = 8;
 
 const props = defineProps<{
   icons: IconEntity[];
@@ -17,7 +25,6 @@ const props = defineProps<{
 
 const activeIconName = ref(null);
 const { searchInput, searchQuery, searchQueryDebounced } = useSearchInput();
-
 const isSearching = computed(() => !!searchQuery.value);
 
 function setActiveIconName(name: string) {
@@ -27,6 +34,13 @@ function setActiveIconName(name: string) {
 const { execute: fetchTags, data: tags } = useFetchTags();
 const { execute: fetchCategories, data: categoriesMap } = useFetchCategories();
 
+const overviewEl = ref<HTMLElement | null>(null);
+const { width: containerWidth } = useElementSize(overviewEl)
+
+const columnSize = computed(() => {
+  return Math.floor((containerWidth.value) / ((ICON_SIZE + ICON_GRID_GAP)));
+});
+
 const mappedIcons = computed(() => {
   if (tags.value == null) {
     return props.icons;
@@ -43,9 +57,10 @@ const mappedIcons = computed(() => {
   });
 });
 
-const searchResults = useSearch(searchQuery, mappedIcons, [
-  { name: 'name', weight: 2 },
-  { name: 'tags', weight: 1 },
+const searchResults = useSearch(searchQueryDebounced, mappedIcons, [
+  { name: 'name', weight: 3 },
+  { name: 'aliases', weight: 3 },
+  { name: 'tags', weight: 2 },
 ]);
 
 const categories = computed(() => {
@@ -71,9 +86,43 @@ const categories = computed(() => {
         icons: searchedCategoryIcons,
       };
     })
-    .filter(({ icons }) => icons.length);
 });
 
+const categoriesList = computed(() => {
+  return categories.value
+    .filter(({ icons }) => icons.length)
+    .reduce<CategoryRow[]>((acc, category) => {
+      acc.push({ type: 'category', title: category.title, name: category.name });
+
+      const categoryIcons = chunkArray(category.icons, columnSize.value);
+      categoryIcons.forEach((icons) => {
+        acc.push({ type: 'icons', icons });
+      });
+
+      return acc;
+    }, []);
+});
+
+const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(
+  categoriesList,
+  {
+    itemHeight: ICON_SIZE + ICON_GRID_GAP,
+    overscan: 10
+  },
+)
+
+useScrollToCategory({
+  categories,
+  categoriesList,
+  scrollTo,
+  searchQueryDebounced,
+})
+
+onMounted(() => {
+  containerProps.ref.value = document.documentElement;
+  useEventListener(window, 'scroll', containerProps.onScroll)
+})
+
 function onFocusSearchInput() {
   if (tags.value == null) {
     fetchTags();
@@ -84,33 +133,48 @@ function onFocusSearchInput() {
 }
 
 const NoResults = defineAsyncComponent(() => import('./NoResults.vue'));
-
 const IconDetailOverlay = defineAsyncComponent(() => import('./IconDetailOverlay.vue'));
+
+function handleCloseDrawer() {
+  setActiveIconName('');
+
+  window.history.pushState({}, '', '/icons/categories');
+}
 </script>
 
 <template>
-  <StickyBar class="search-bar category-search">
-    <InputSearch
-      :placeholder="`Search ${icons.length} icons ...`"
-      v-model="searchQuery"
-      class="input-wrapper"
-      ref="searchInput"
-      @focus="onFocusSearchInput"
+  <div ref="overviewEl" class="overview-container">
+    <StickyBar class="category-search">
+      <InputSearch
+        :placeholder="`Search ${icons.length} icons ...`"
+        v-model="searchQuery"
+        class="input-wrapper"
+        ref="searchInput"
+        @focus="onFocusSearchInput"
+      />
+    </StickyBar>
+    <NoResults
+      v-if="categories.length === 0"
+      :searchQuery="searchQuery"
+      @clear="searchQuery = ''"
     />
-  </StickyBar>
-  <NoResults v-if="categories.length === 0" :searchQuery="searchQuery" @clear="searchQuery = ''" />
-  <IconsCategory
-    v-for="category in categories"
-    :key="category.name"
-    :category="category"
-    :activeIconName="activeIconName"
-    @setActiveIcon="setActiveIconName"
-  />
+    <div v-bind="wrapperProps">
+      <IconsCategory
+        v-for="{ index, data } in list"
+        :categoryRow="data"
+        :activeIconName="activeIconName"
+        @setActiveIcon="setActiveIconName"
+        :key="index"
+      />
+    </div>
+  </div>
   <IconDetailOverlay
     v-if="activeIconName != null"
     :iconName="activeIconName"
-    @close="setActiveIconName('')"
+    @close="handleCloseDrawer"
   />
+
+  <CarbonAdOverlay :drawerOpen="!!activeIconName" />
 </template>
 
 <style scoped>
@@ -119,6 +183,21 @@ const IconDetailOverlay = defineAsyncComponent(() => import('./IconDetailOverlay
 }
 
 .search-bar.category-search {
-  margin-bottom: -54px;
+  margin-bottom: 10px;
+}
+
+.title {
+  margin-bottom: 8px;
+  font-size: 19px;
+  font-weight: 500;
+  padding: 24px 0 8px;
+}
+
+.icons {
+  margin-bottom: 8px;
+}
+
+.overview-container {
+  padding-bottom: 288px;
 }
 </style>

docs/.vitepress/theme/components/icons/IconsOverview.vue

@@ -1,15 +1,19 @@
 <script setup lang="ts">
-import { ref, computed, watch, defineAsyncComponent } from 'vue';
+import { ref, computed, defineAsyncComponent, onMounted, watch } from 'vue';
 import type { IconEntity } from '../../types';
-import { useMediaQuery, useOffsetPagination } from '@vueuse/core';
+import { useElementSize, useEventListener, useVirtualList } from '@vueuse/core';
 import IconGrid from './IconGrid.vue';
 import InputSearch from '../base/InputSearch.vue';
 import useSearch from '../../composables/useSearch';
-import EndOfPage from '../base/EndOfPage.vue';
 import useSearchInput from '../../composables/useSearchInput';
 import StickyBar from './StickyBar.vue';
 import useFetchTags from '../../composables/useFetchTags';
 import useFetchCategories from '../../composables/useFetchCategories';
+import chunkArray from '../../utils/chunkArray';
+import CarbonAdOverlay from './CarbonAdOverlay.vue';
+
+const ICON_SIZE = 56;
+const ICON_GRID_GAP = 8;
 
 const props = defineProps<{
   icons: IconEntity[];
@@ -17,32 +21,16 @@ const props = defineProps<{
 
 const activeIconName = ref(null);
 
-const isExtraLargeScreen = useMediaQuery('(min-width: 1440px)');
-const isLargeScreen = useMediaQuery('(min-width: 1280px)');
-const isMediumScreen = useMediaQuery('(min-width: 960px)');
-const isSmallScreen = useMediaQuery('(min-width: 640px)');
-
-const pageSize = computed(() => {
-  if (isExtraLargeScreen.value) {
-    return 16 * 20;
-  }
-  if (isLargeScreen.value) {
-    return 16 * 12;
-  }
-  if (isMediumScreen.value) {
-    return 13 * 12;
-  }
-
-  if (isSmallScreen.value) {
-    return 10 * 10;
-  }
-
-  return 10 * 5;
-});
-
 const { execute: fetchTags, data: tags } = useFetchTags();
 const { execute: fetchCategories, data: categories } = useFetchCategories();
 
+const overviewEl = ref<HTMLElement | null>(null);
+const { width: containerWidth } = useElementSize(overviewEl)
+
+const columnSize = computed(() => {
+  return Math.floor((containerWidth.value) / ((ICON_SIZE + ICON_GRID_GAP)));
+});
+
 const mappedIcons = computed(() => {
   if (tags.value == null) {
     return props.icons;
@@ -63,26 +51,33 @@ const mappedIcons = computed(() => {
 const { searchInput, searchQuery, searchQueryDebounced } = useSearchInput();
 const searchResults = useSearch(searchQueryDebounced, mappedIcons, [
   { name: 'name', weight: 3 },
+  { name: 'aliases', weight: 3 },
   { name: 'tags', weight: 2 },
   { name: 'categories', weight: 1 },
 ]);
 
-const { next, currentPage } = useOffsetPagination({ pageSize });
-
-const paginatedIcons = computed(() => {
-  const end = pageSize.value * currentPage.value;
-
-  return searchResults.value.slice(0, end);
+const chunkedIcons = computed(() => {
+  return chunkArray(searchResults.value, columnSize.value);
 });
 
+const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(
+  chunkedIcons,
+  {
+    itemHeight: ICON_SIZE + ICON_GRID_GAP,
+    overscan: 10
+  },
+)
+
+onMounted(() => {
+  containerProps.ref.value = document.documentElement;
+  useEventListener(window, 'scroll', containerProps.onScroll)
+})
+
+
 function setActiveIconName(name: string) {
   activeIconName.value = name;
 }
 
-watch(searchQueryDebounced, (searchString) => {
-  currentPage.value = 1;
-});
-
 function onFocusSearchInput() {
   if (tags.value == null) {
     fetchTags();
@@ -95,43 +90,57 @@ function onFocusSearchInput() {
 const NoResults = defineAsyncComponent(() => import('./NoResults.vue'));
 
 const IconDetailOverlay = defineAsyncComponent(() => import('./IconDetailOverlay.vue'));
+
+watch(searchQueryDebounced, () => {
+  scrollTo(0)
+})
+
+function handleCloseDrawer() {
+  setActiveIconName('');
+
+  window.history.pushState({}, '', '/icons/');
+}
 </script>
 
 <template>
-  <StickyBar>
-    <InputSearch
-      :placeholder="`Search ${icons.length} icons ...`"
-      v-model="searchQuery"
-      ref="searchInput"
-      class="input-wrapper"
-      @focus="onFocusSearchInput"
+  <div ref="overviewEl" class="overview-container">
+    <StickyBar>
+      <InputSearch
+        :placeholder="`Search ${icons.length} icons ...`"
+        v-model="searchQuery"
+        ref="searchInput"
+        class="input-wrapper"
+        @focus="onFocusSearchInput"
+      />
+    </StickyBar>
+    <NoResults
+      v-if="list.length === 0"
+      :searchQuery="searchQuery"
+      @clear="searchQuery = ''"
     />
-  </StickyBar>
-  <NoResults
-    v-if="paginatedIcons.length === 0"
-    :searchQuery="searchQuery"
-    @clear="searchQuery = ''"
-  />
-  <IconGrid
-    overlayMode
-    :activeIcon="activeIconName"
-    :icons="paginatedIcons"
-    @setActiveIcon="setActiveIconName"
-  />
-  <EndOfPage @end-of-page="next" class="bottom-page" />
+    <div v-bind="wrapperProps" class="icon">
+      <IconGrid
+        v-for="{ index, data: icons } in list"
+        :key="index"
+        overlayMode
+        :icons="icons"
+        :activeIcon="activeIconName"
+        @setActiveIcon="setActiveIconName"
+      />
+    </div>
+  </div>
+
   <IconDetailOverlay
-    v-if="activeIconName != null"
     :iconName="activeIconName"
-    @close="setActiveIconName('')"
+    @close="handleCloseDrawer"
   />
+
+  <CarbonAdOverlay :drawerOpen="!!activeIconName" />
 </template>
 
 <style>
 .icons {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
-  gap: 8px;
-  width: 100%;
+  margin-bottom: 8px;
 }
 
 .icon {
@@ -142,7 +151,7 @@ const IconDetailOverlay = defineAsyncComponent(() => import('./IconDetailOverlay
   width: 100%;
 }
 
-.bottom-page {
-  height: 288px;
+.overview-container {
+  padding-bottom: 288px;
 }
 </style>

docs/.vitepress/theme/components/icons/NoResults.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import {ref} from 'vue'
-import {bird} from '../../../data/iconNodes'
+import { ref, onMounted, computed } from 'vue'
+import { bird, squirrel, rabbit } from '../../../data/iconNodes'
 import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
 import {useEventListener} from '@vueuse/core'
 import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue'
+import { IconNode } from '../../types'
 
 defineProps<{
   searchQuery: string
@@ -11,32 +12,48 @@ defineProps<{
 
 defineEmits(['clear'])
 
-const birdIcon = ref<HTMLElement>()
-const Bird = createLucideIcon('bird', bird)
+const animalIcon = ref<HTMLElement>()
+const randomAnimal = computed<IconNode>(() => {
+  return Math.random() > 0.5 ? squirrel : Math.random() > 0.5 ? rabbit : bird
+})
+const animalComponent = computed(() => createLucideIcon('animal', randomAnimal.value))
 const flip = ref(false)
 
-useEventListener(document, 'mousemove', (mouseEvent) => {
-  const {width, height, x, y} = birdIcon.value.getBoundingClientRect()
+onMounted(() => {
+  useEventListener(document, 'mousemove', (mouseEvent) => {
+    const {width, height, x, y} = animalIcon.value.getBoundingClientRect()
 
-  const centerX = (width / 2) + x
+    const centerX = (width / 2) + x
 
-  flip.value = mouseEvent.x < centerX
+    flip.value = mouseEvent.x < centerX
+  })
 })
 
 </script>
 
 <template>
   <div class="no-results">
-    <Bird class="bird-icon" ref="birdIcon" :class="{ flip }" :strokeWidth="1"/>
+    <component
+      :is="animalComponent"
+      class="animal-icon"
+      ref="animalIcon"
+      :class="{ flip }"
+      :strokeWidth="1"
+    />
     <h2 class="no-results-text">
       No icons found for '{{ searchQuery }}'
     </h2>
-    <VPButton text="Clear your search and try again" theme="alt" @click="$emit('clear')"/>
+    <VPButton
+      text="Clear your search and try again"
+      theme="alt"
+      @click="$emit('clear')"
+    />
     <span class="text-divider">or</span>
-    <VPButton text="Search on Github issues"
-              theme="alt"
-              :href="`https://github.com/lucide-icons/lucide/issues?q=is%3Aopen+${searchQuery}`"
-              target="_blank"
+    <VPButton
+      text="Search on Github issues"
+      theme="alt"
+      :href="`https://github.com/lucide-icons/lucide/issues?q=is%3Aopen+${searchQuery}`"
+      target="_blank"
     />
   </div>
 </template>
@@ -48,7 +65,7 @@ useEventListener(document, 'mousemove', (mouseEvent) => {
   align-items: center;
 }
 
-.bird-icon {
+.animal-icon {
   width: 160px;
   height: 160px;
   color: var(--vp-c-neutral);
@@ -56,12 +73,12 @@ useEventListener(document, 'mousemove', (mouseEvent) => {
   margin-top: 72px;
 }
 
-.bird-icon.flip {
+.animal-icon.flip {
   transform: rotateY(180deg);
 }
 
 @media (min-width: 960px) {
-  .bird-icon {
+  .animal-icon {
     width: 240px;
     height: 240px;
   }

docs/.vitepress/theme/components/packages/PackageList.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {data} from './PackageList.data'
+import { data } from './PackageList.data'
 import GridSection from '../base/GridSection.vue'
 import PackageListItem from "./PackageListItem.vue";</script>
 
@@ -38,33 +38,4 @@ import PackageListItem from "./PackageListItem.vue";</script>
 .package-group {
   margin-bottom: 96px;
 }
-
-.grid {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: stretch;
-  justify-content: center;
-  align-content: space-evenly;
-  box-sizing: border-box;
-  margin: -8px;
-}
-
-.grid > * {
-  flex-basis: 100%;
-  box-sizing: border-box;
-  padding: 8px;
-}
-
-@media (min-width: 960px) {
-  .grid > * {
-    flex-basis: 50%;
-  }
-}
-
-@media (min-width: 1280px) {
-  .grid > * {
-    flex-basis: 33.33%;
-  }
-}
-
 </style>

docs/.vitepress/theme/components/showcase/ShowcaseList.vue

@@ -40,33 +40,4 @@ import ShowcaseListItem from "./ShowcaseListItem.vue";
 .package-group {
   margin-bottom: 96px;
 }
-
-.grid {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: stretch;
-  justify-content: center;
-  align-content: space-evenly;
-  box-sizing: border-box;
-  margin: -8px;
-}
-
-.grid > * {
-  flex-basis: 100%;
-  box-sizing: border-box;
-  padding: 8px;
-}
-
-@media (min-width: 960px) {
-  .grid > * {
-    flex-basis: 50%;
-  }
-}
-
-@media (min-width: 1280px) {
-  .grid > * {
-    flex-basis: 33.33%;
-  }
-}
-
 </style>

docs/.vitepress/theme/composables/useActiveAnchor.ts

@@ -6,18 +6,18 @@ import { throttleAndDebounce } from 'vitepress/dist/client/theme-default/support
  */
 
 export function useActiveAnchor(container, marker) {
-  const onScroll = throttleAndDebounce(setActiveLink, 100);
+  const setActiveLinkDebounced = throttleAndDebounce(setActiveLink, 100);
   let prevActiveLink = null;
   onMounted(() => {
     requestAnimationFrame(setActiveLink);
-    window.addEventListener('scroll', onScroll);
+    window.addEventListener('scroll', setActiveLinkDebounced);
   });
   onUpdated(() => {
     // sidebar update means a route change
     activateLink(location.hash);
   });
   onUnmounted(() => {
-    window.removeEventListener('scroll', onScroll);
+    window.removeEventListener('scroll', setActiveLinkDebounced);
   });
   function setActiveLink() {
     const links = [].slice.call(container.value.querySelectorAll('.outline-link'));
@@ -64,9 +64,13 @@ export function useActiveAnchor(container, marker) {
       marker.value.style.opacity = '0';
     }
   }
+
+  return {
+    setActiveLinkDebounced,
+  };
 }
 
-const PAGE_OFFSET = 64;
+const PAGE_OFFSET = 128;
 
 function getAnchorTop(anchor) {
   return anchor.parentElement.offsetTop - PAGE_OFFSET;
@@ -74,7 +78,7 @@ function getAnchorTop(anchor) {
 function isAnchorActive(index, anchor, nextAnchor) {
   const scrollTop = window.scrollY;
   if (index === 0 && scrollTop === 0) {
-    return [true, null];
+    return [true, anchor.hash];
   }
   if (scrollTop < getAnchorTop(anchor)) {
     return [false, null];

docs/.vitepress/theme/composables/useCategoryView.ts

@@ -1,4 +1,5 @@
-import { ref, inject, Ref } from 'vue';
+import { useRoute } from 'vitepress';
+import { ref, inject, Ref, onMounted, watch } from 'vue';
 
 export const CATEGORY_VIEW_CONTEXT = Symbol('categoryView');
 
@@ -8,16 +9,30 @@ interface CategoryViewContext {
 }
 
 export const categoryViewContext = {
-  selectedCategory: ref(''),
+  selectedCategory: ref(),
   categoryCounts: ref({}),
 };
 
 export function useCategoryView(): CategoryViewContext {
   const context = inject<CategoryViewContext>(CATEGORY_VIEW_CONTEXT);
+  const route = useRoute();
 
   if (!context) {
     throw new Error('useCategoryView must be used with categoryView context');
   }
 
+  onMounted(() => {
+    if (window.location.hash) {
+      context.selectedCategory.value = decodeURIComponent(window.location.hash.slice(1));
+    }
+  });
+
+  watch(route, (currentRoute) => {
+    if (currentRoute.path !== '/icons/categories') {
+      context.selectedCategory.value = '';
+      context.categoryCounts.value = {};
+    }
+  });
+
   return context;
 }

docs/.vitepress/theme/composables/useScrollToCategory.ts

@@ -0,0 +1,52 @@
+import { Ref, onMounted, watch } from 'vue';
+import { CategoryRow } from '../components/icons/IconsCategory.vue';
+import { Category } from '../types';
+import { useCategoryView } from './useCategoryView';
+
+interface UseScrollToCategory {
+  categories: Ref<Pick<Category, 'name' | 'icons'>[]>;
+  categoriesList: Ref<CategoryRow[]>;
+  scrollTo: (index: number) => void;
+  searchQueryDebounced: Ref<string>;
+}
+
+export default function useScrollToCategory({
+  categories,
+  categoriesList,
+  scrollTo,
+  searchQueryDebounced,
+}: UseScrollToCategory) {
+  const { selectedCategory, categoryCounts } = useCategoryView();
+
+  function scrollToSelectedCategory(selectedCategory: string) {
+    const category = categories.value.find((category) => category.name === selectedCategory);
+
+    if (category != null) {
+      const categoryRowIndex = categoriesList.value.findIndex(
+        (row) => row.type === 'category' && row.name === selectedCategory,
+      );
+
+      if (categoryRowIndex !== -1) {
+        setTimeout(() => {
+          scrollTo(categoryRowIndex);
+        }, 0);
+      }
+    }
+  }
+
+  watch(selectedCategory, scrollToSelectedCategory);
+
+  onMounted(() => {
+    setTimeout(() => {
+      scrollToSelectedCategory(selectedCategory.value);
+    }, 0);
+  });
+
+  watch(searchQueryDebounced, () => {
+    scrollTo(0);
+  });
+
+  watch(categories, (items) => {
+    categoryCounts.value = Object.fromEntries(items.map(({ name, icons }) => [name, icons.length]));
+  });
+}

docs/.vitepress/theme/composables/useSearch.ts

@@ -4,7 +4,7 @@ import { shallowRef, computed, Ref } from 'vue';
 const useSearch = <T>(
   query: Ref<string>,
   collection: Ref<T[]>,
-  keys: Fuse.FuseOptionKey<T>[] = [],
+  keys: Fuse.FuseOptionKeyObject<T>[] = [],
 ) => {
   const index = shallowRef(
     new Fuse(collection.value, {
@@ -20,6 +20,16 @@ const useSearch = <T>(
       return index.value.search(query.value).map((result) => result.item);
     }
 
+    if (keys.length !== 0) {
+      const mainKey = keys[0].name;
+
+      return collection.value.sort((a, b) => {
+        const aString = a[mainKey as keyof T] as string;
+        const bString = b[mainKey as keyof T] as string;
+        return aString.localeCompare(bString);
+      });
+    }
+
     return collection.value;
   });
 

docs/.vitepress/theme/style.css

@@ -23,6 +23,8 @@
   --vp-code-editor-property: #005cc5;
   --vp-code-editor-static: #f78c6c;
   --vp-code-editor-string: #032f62;
+
+  --vp-c-text-4: rgba(60, 60, 67, 0.32);
 }
 
 .dark {
@@ -38,6 +40,8 @@
   --vp-code-editor-property: #79b8ff;
   --vp-code-editor-static: #f78c6c;
   --vp-code-editor-string: #9ecbff;
+
+  --vp-c-text-4: rgba(235, 235, 245, 0.16);
 }
 
 .VPNavBarTitle .logo {

docs/.vitepress/theme/utils/chunkArray.ts

@@ -0,0 +1,9 @@
+const chunkArray = <ArrayType>(stream: ArrayType, size: number) => {
+  return stream.reduce<ArrayType[][]>(
+    (chunks, item, idx, arr) =>
+      idx % size == 0 ? [...chunks, arr.slice(idx, idx + size)] : chunks,
+    [],
+  );
+};
+
+export default chunkArray;

docs/.vitepress/vue-shim.d.ts

@@ -1,5 +1,7 @@
+import { IconNode } from 'lucide-vue-next/src/createLucideIcon';
+import Vue from 'vue';
+
 declare module '*.vue' {
-  import Vue from 'vue';
   export default Vue;
 }
 
@@ -16,3 +18,7 @@ declare const resvg_wasm: RequestInfo | URL | Response | BufferSource | WebAssem
 declare module 'node:module' {
   function createRequire(filename: string): NodeRequire;
 }
+
+declare module '*.node.json' {
+  export default IconNode;
+}

docs/guide/design/icon-design-guide.md

@@ -106,6 +106,15 @@ Here are rules that should be followed to keep quality and consistency when maki
 6. Names containing numerals are not allowed, unless the number itself is represented in the icon.\
    For example: `arrow-down-0-to-1` contains both numerals.
 
+7. Icons depicting multiple elements (e.g. a person and a circle) of different sizes must list these elements in decreasing order of size.\
+   For example: if the circle is bigger, it should be `circle-person`, if the person is bigger, it should be `person-circle`.
+
+8. Icons depicting multiple elements of roughly equal sizes (e.g. a `ruler` and a `pencil`) must list these elements in English reading order.\
+   For example: if the `pencil` is either above or left of `ruler`, it should be `pencil-ruler`, otherwise, it should be `ruler-pencil`.
+
+9. Icons depicting some sort of variation of an element must use the `[element]-[modifier]` naming scheme, with modifiers being applied to each element respectively.\
+   For example: a dashed circle must be named `circle-dashed`, not `dashed-circle`, and in coordination with the previous guidelines, a dashed circle containing a broken heart would be named `circle-dashed-heart-broken`, due to the heart being smaller than the circle.
+
 ## Code Conventions
 
 Before an icon is added to the library, we like to have readable and optimized SVG code.

docs/guide/packages/lucide-react-native.md

@@ -4,7 +4,7 @@ Implementation of the lucide icon library for React Native applications
 
 ## Installation
 
-First, ensure that you have `react-native-svg` (version between 12 and 14) installed. Then, install the package:
+First, ensure that you have `react-native-svg` (version between 12 and 15) installed. Then, install the package:
 
 ::: code-group
 

docs/icons/categories.md

@@ -10,7 +10,6 @@ import { data } from './icons.data.ts'
 import { data as categoriesData } from './categories.data.ts'
 import PageContainer from '../.vitepress/theme/components/PageContainer.vue'
 import IconsCategoryOverview from '../.vitepress/theme/components/icons/IconsCategoryOverview.vue'
-
 </script>
 
 <div class="VPDoc content">

docs/index.md

@@ -56,7 +56,9 @@ features:
 <script setup>
 import HomePackagesSection from './.vitepress/theme/components/home/HomePackagesSection.vue'
 import HomeIconCustomizer from './.vitepress/theme/components/home/HomeIconCustomizer.vue'
+import HomeTeamSection from './.vitepress/theme/components/home/HomeTeamSection.vue'
 </script>
 
 <HomePackagesSection />
 <HomeIconCustomizer />
+<HomeTeamSection />

docs/package.json

@@ -48,7 +48,7 @@
     "lucide-vue-next": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sandpack-vue3": "3.1.8",
+    "sandpack-vue3": "3.1.11",
     "semver": "^7.5.2",
     "shikiji": "^0.7.4",
     "simple-git": "^3.18.0",

icons/airplay.json

@@ -10,7 +10,9 @@
     "cast",
     "mirroring",
     "screen",
-    "monitor"
+    "monitor",
+    "macos",
+    "osx"
   ],
   "categories": [
     "multimedia",

icons/airplay.svg

@@ -10,5 +10,5 @@
   stroke-linejoin="round"
 >
   <path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1" />
-  <polygon points="12 15 17 21 7 21 12 15" />
+  <path d="m12 15 5 6H7Z" />
 </svg>

icons/alarm-smoke.json

@@ -1,7 +1,8 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "danielbayley"
+    "danielbayley",
+    "karsa-mistmere"
   ],
   "tags": [
     "fire",

icons/align-vertical-distribute-center.json

@@ -1,7 +1,8 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "ericfennis"
+    "ericfennis",
+    "jguddas"
   ],
   "tags": [
     "items",

icons/align-vertical-distribute-center.svg

@@ -9,10 +9,10 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <rect width="14" height="6" x="5" y="14" rx="2" />
-  <rect width="10" height="6" x="7" y="4" rx="2" />
-  <path d="M22 7h-5" />
-  <path d="M7 7H1" />
   <path d="M22 17h-3" />
+  <path d="M22 7h-5" />
   <path d="M5 17H2" />
+  <path d="M7 7H2" />
+  <rect x="5" y="14" width="14" height="6" rx="2" />
+  <rect x="7" y="4" width="10" height="6" rx="2" />
 </svg>

icons/anchor.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <circle cx="12" cy="5" r="3" />
-  <line x1="12" x2="12" y1="22" y2="8" />
+  <path d="M12 22V8" />
   <path d="M5 12H2a10 10 0 0 0 20 0h-3" />
+  <circle cx="12" cy="5" r="3" />
 </svg>

icons/anvil.json

@@ -1,6 +1,7 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
+    "karsa-mistmere",
     "danielbayley"
   ],
   "tags": [

icons/anvil.svg

@@ -9,9 +9,9 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M7 10c-2.8 0-5-2.2-5-5h5" />
-  <path d="M7 4v8h7a8 8 0 0 0 8-8Z" />
+  <path d="M7 10H6a4 4 0 0 1-4-4 1 1 0 0 1 1-1h4" />
+  <path d="M7 5a1 1 0 0 1 1-1h13a1 1 0 0 1 1 1 7 7 0 0 1-7 7H8a1 1 0 0 1-1-1z" />
   <path d="M9 12v5" />
   <path d="M15 12v5" />
-  <path d="M5 20a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v1H5Z" />
+  <path d="M5 20a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3 1 1 0 0 1-1 1H6a1 1 0 0 1-1-1" />
 </svg>

icons/app-window-mac.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "application",
+    "menu bar",
+    "pane",
+    "preferences",
+    "macos",
+    "osx",
+    "executable"
+  ],
+  "categories": [
+    "layout",
+    "design",
+    "development",
+    "files"
+  ]
+}

icons/app-window-mac.svg

@@ -0,0 +1,16 @@
+<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"
+>
+  <rect width="20" height="16" x="2" y="4" rx="2" />
+  <path d="M6 8h.01" />
+  <path d="M10 8h.01" />
+  <path d="M14 8h.01" />
+</svg>

icons/app-window.json

@@ -6,11 +6,14 @@
   ],
   "tags": [
     "application",
+    "menu bar",
+    "pane",
     "executable"
   ],
   "categories": [
+    "layout",
     "design",
-    "files",
-    "layout"
+    "development",
+    "files"
   ]
 }

icons/area-chart.json

@@ -5,6 +5,7 @@
   ],
   "tags": [
     "statistics",
+    "analytics",
     "diagram",
     "graph",
     "area"

icons/arrow-big-down-dash.svg

@@ -10,5 +10,5 @@
   stroke-linejoin="round"
 >
   <path d="M15 5H9" />
-  <path d="M15 9v3h4l-7 7-7-7h4V9h6z" />
+  <path d="M15 9v3h4l-7 7-7-7h4V9z" />
 </svg>

icons/arrow-down-0-1.json

@@ -1,7 +1,8 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "karsa-mistmere"
+    "karsa-mistmere",
+    "danielbayley"
   ],
   "tags": [
     "filter",

icons/arrow-down-1-0.json

@@ -1,7 +1,8 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "karsa-mistmere"
+    "karsa-mistmere",
+    "danielbayley"
   ],
   "tags": [
     "filter",

icons/arrow-down-a-z.json

@@ -1,7 +1,8 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "karsa-mistmere"
+    "karsa-mistmere",
+    "danielbayley"
   ],
   "tags": [
     "filter",

icons/arrow-down-to-dot.json

@@ -1,8 +1,7 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "danielbayley",
-    "karsa-mistmere"
+    "danielbayley"
   ],
   "tags": [
     "direction",

icons/arrow-down-z-a.json

@@ -1,7 +1,8 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "karsa-mistmere"
+    "karsa-mistmere",
+    "danielbayley"
   ],
   "tags": [
     "filter",

icons/arrow-left-right.json

@@ -2,8 +2,7 @@
   "$schema": "../icon.schema.json",
   "contributors": [
     "wojtekmaj",
-    "ericfennis",
-    "karsa-mistmere"
+    "ericfennis"
   ],
   "tags": [
     "bidirectional",

icons/arrow-up-0-1.json

@@ -1,7 +1,8 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "karsa-mistmere"
+    "karsa-mistmere",
+    "danielbayley"
   ],
   "tags": [
     "filter",

icons/arrow-up-1-0.json

@@ -1,7 +1,8 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "karsa-mistmere"
+    "karsa-mistmere",
+    "danielbayley"
   ],
   "tags": [
     "filter",

icons/arrow-up-a-z.json

@@ -1,7 +1,8 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "karsa-mistmere"
+    "karsa-mistmere",
+    "danielbayley"
   ],
   "tags": [
     "filter",

icons/arrow-up-from-dot.json

@@ -1,8 +1,7 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "danielbayley",
-    "karsa-mistmere"
+    "danielbayley"
   ],
   "tags": [
     "direction",

icons/arrow-up-z-a.json

@@ -1,7 +1,8 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "karsa-mistmere"
+    "karsa-mistmere",
+    "danielbayley"
   ],
   "tags": [
     "filter",

icons/axis-3d.json

@@ -1,9 +1,7 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "lscheibel",
-    "danielbayley",
-    "karsa-mistmere"
+    "lscheibel"
   ],
   "tags": [
     "gizmo",

icons/bar-chart-2.json

@@ -6,6 +6,7 @@
   ],
   "tags": [
     "statistics",
+    "analytics",
     "diagram",
     "graph"
   ],

icons/bar-chart-3.json

@@ -6,6 +6,7 @@
   ],
   "tags": [
     "statistics",
+    "analytics",
     "diagram",
     "graph"
   ],

icons/bar-chart-4.json

@@ -6,6 +6,7 @@
   ],
   "tags": [
     "statistics",
+    "analytics",
     "diagram",
     "graph"
   ],

icons/bar-chart-big.json

@@ -5,6 +5,7 @@
   ],
   "tags": [
     "statistics",
+    "analytics",
     "diagram",
     "graph"
   ],

icons/bar-chart-horizontal-big.json

@@ -5,6 +5,7 @@
   ],
   "tags": [
     "statistics",
+    "analytics",
     "diagram",
     "graph"
   ],

icons/bar-chart-horizontal.json

@@ -6,6 +6,7 @@
   ],
   "tags": [
     "statistics",
+    "analytics",
     "diagram",
     "graph"
   ],

icons/bar-chart.json

@@ -6,6 +6,7 @@
   ],
   "tags": [
     "statistics",
+    "analytics",
     "diagram",
     "graph"
   ],

icons/beef.json

@@ -2,7 +2,8 @@
   "$schema": "../icon.schema.json",
   "contributors": [
     "kemie",
-    "ericfennis"
+    "ericfennis",
+    "karsa-mistmere"
   ],
   "tags": [
     "food",

icons/beer-off.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "karsa-mistmere",
+    "ericfennis",
+    "jguddas"
+  ],
+  "tags": [
+    "alcohol",
+    "bar",
+    "beverage",
+    "brewery",
+    "drink"
+  ],
+  "categories": [
+    "food-beverage"
+  ]
+}

icons/beer-off.svg

@@ -0,0 +1,20 @@
+<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="M13 13v5" />
+  <path d="M17 11.47V8" />
+  <path d="M17 11h1a3 3 0 0 1 2.745 4.211" />
+  <path d="m2 2 20 20" />
+  <path d="M5 8v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-3" />
+  <path d="M7.536 7.535C6.766 7.649 6.154 8 5.5 8a2.5 2.5 0 0 1-1.768-4.268" />
+  <path d="M8.727 3.204C9.306 2.767 9.885 2 11 2c1.56 0 2 1.5 3 1.5s1.72-.5 2.5-.5a1 1 0 1 1 0 5c-.78 0-1.5-.5-2.5-.5a3.149 3.149 0 0 0-.842.12" />
+  <path d="M9 14.6V18" />
+</svg>

icons/biohazard.json

@@ -1,6 +1,7 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
+    "karsa-mistmere",
     "danielbayley",
     "ericfennis"
   ],

icons/bot-message-square.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "robot",
+    "ai",
+    "chat",
+    "assistant"
+  ],
+  "categories": [
+    "development",
+    "social"
+  ]
+}

icons/bot-message-square.svg

@@ -0,0 +1,18 @@
+<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="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="M20 12h2" />
+</svg>

icons/brain-circuit.svg

@@ -9,13 +9,17 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M12 4.5a2.5 2.5 0 0 0-4.96-.46 2.5 2.5 0 0 0-1.98 3 2.5 2.5 0 0 0-1.32 4.24 3 3 0 0 0 .34 5.58 2.5 2.5 0 0 0 2.96 3.08 2.5 2.5 0 0 0 4.91.05L12 20V4.5Z" />
-  <path d="M16 8V5c0-1.1.9-2 2-2" />
+  <path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" />
+  <path d="M9 13a4.5 4.5 0 0 0 3-4" />
+  <path d="M6.003 5.125A3 3 0 0 0 6.401 6.5" />
+  <path d="M3.477 10.896a4 4 0 0 1 .585-.396" />
+  <path d="M6 18a4 4 0 0 1-1.967-.516" />
   <path d="M12 13h4" />
   <path d="M12 18h6a2 2 0 0 1 2 2v1" />
   <path d="M12 8h8" />
-  <path d="M20.5 8a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z" />
-  <path d="M16.5 13a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z" />
-  <path d="M20.5 21a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z" />
-  <path d="M18.5 3a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z" />
+  <path d="M16 8V5a2 2 0 0 1 2-2" />
+  <circle cx="16" cy="13" r=".5" />
+  <circle cx="18" cy="3" r=".5" />
+  <circle cx="20" cy="21" r=".5" />
+  <circle cx="20" cy="8" r=".5" />
 </svg>

icons/brain-cog.svg

@@ -9,8 +9,14 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
+  <path d="M12 5a3 3 0 1 0-5.997.142 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588 4 4 0 0 0 7.636 2.106 3.2 3.2 0 0 0 .164-.546c.028-.13.306-.13.335 0a3.2 3.2 0 0 0 .163.546 4 4 0 0 0 7.636-2.106 4 4 0 0 0 .556-6.588 4 4 0 0 0-2.526-5.77A3 3 0 1 0 12 5" />
+  <path d="M17.599 6.5a3 3 0 0 0 .399-1.375" />
+  <path d="M6.003 5.125A3 3 0 0 0 6.401 6.5" />
+  <path d="M3.477 10.896a4 4 0 0 1 .585-.396" />
+  <path d="M19.938 10.5a4 4 0 0 1 .585.396" />
+  <path d="M6 18a4 4 0 0 1-1.967-.516" />
+  <path d="M19.967 17.484A4 4 0 0 1 18 18" />
   <circle cx="12" cy="12" r="3" />
-  <path d="M12 4.5a2.5 2.5 0 0 0-4.96-.46 2.5 2.5 0 0 0-1.98 3 2.5 2.5 0 0 0-1.32 4.24 3 3 0 0 0 .34 5.58 2.5 2.5 0 0 0 2.96 3.08A2.5 2.5 0 0 0 12 19.5a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 12 4.5" />
   <path d="m15.7 10.4-.9.4" />
   <path d="m9.2 13.2-.9.4" />
   <path d="m13.6 15.7-.4-.9" />

icons/brain.svg

@@ -9,6 +9,13 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z" />
-  <path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z" />
+  <path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" />
+  <path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z" />
+  <path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4" />
+  <path d="M17.599 6.5a3 3 0 0 0 .399-1.375" />
+  <path d="M6.003 5.125A3 3 0 0 0 6.401 6.5" />
+  <path d="M3.477 10.896a4 4 0 0 1 .585-.396" />
+  <path d="M19.938 10.5a4 4 0 0 1 .585.396" />
+  <path d="M6 18a4 4 0 0 1-1.967-.516" />
+  <path d="M19.967 17.484A4 4 0 0 1 18 18" />
 </svg>

icons/brick-wall.json

@@ -1,6 +1,7 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
+    "karsa-mistmere",
     "danielbayley"
   ],
   "tags": [

icons/briefcase-business.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "colebemis",
+    "csandman",
+    "ericfennis",
+    "karsa-mistmere"
+  ],
+  "tags": [
+    "work",
+    "bag",
+    "baggage",
+    "folder",
+    "portfolio"
+  ],
+  "categories": [
+    "transportation"
+  ]
+}

icons/briefcase-business.svg

@@ -0,0 +1,16 @@
+<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="M12 12h.01" />
+  <path d="M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2" />
+  <path d="M22 13a18.15 18.15 0 0 1-20 0" />
+  <rect width="20" height="14" x="2" y="6" rx="2" />
+</svg>

icons/briefcase-medical.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "colebemis",
+    "csandman",
+    "ericfennis",
+    "karsa-mistmere"
+  ],
+  "tags": [
+    "doctor",
+    "medicine",
+    "first aid"
+  ],
+  "categories": [
+    "medical",
+    "transportation"
+  ]
+}

icons/briefcase-medical.svg

@@ -0,0 +1,18 @@
+<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="M12 11v4" />
+  <path d="M14 13h-4" />
+  <path d="M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2" />
+  <path d="M18 6v14" />
+  <path d="M6 6v14" />
+  <rect width="20" height="14" x="2" y="6" rx="2" />
+</svg>

icons/briefcase.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <rect width="20" height="14" x="2" y="7" rx="2" ry="2" />
-  <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
+  <path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
+  <rect width="20" height="14" x="2" y="6" rx="2" />
 </svg>

icons/bug-play.json

@@ -1,7 +1,8 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "danielbayley"
+    "danielbayley",
+    "jguddas"
   ],
   "tags": [
     "debug",

icons/bug-play.svg

@@ -9,13 +9,13 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="m8 2 1.88 1.88" />
+  <path d="M12.765 21.522a.5.5 0 0 1-.765-.424v-8.196a.5.5 0 0 1 .765-.424l5.878 3.674a1 1 0 0 1 0 1.696z" />
   <path d="M14.12 3.88 16 2" />
-  <path d="M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" />
   <path d="M18 11a4 4 0 0 0-4-4h-4a4 4 0 0 0-4 4v3a6.1 6.1 0 0 0 2 4.5" />
-  <path d="M6.53 9C4.6 8.8 3 7.1 3 5" />
-  <path d="M6 13H2" />
-  <path d="M3 21c0-2.1 1.7-3.9 3.8-4" />
   <path d="M20.97 5c0 2.1-1.6 3.8-3.5 4" />
-  <path d="m12 12 8 5-8 5Z" />
+  <path d="M3 21c0-2.1 1.7-3.9 3.8-4" />
+  <path d="M6 13H2" />
+  <path d="M6.53 9C4.6 8.8 3 7.1 3 5" />
+  <path d="m8 2 1.88 1.88" />
+  <path d="M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" />
 </svg>

icons/bus-front.json

@@ -1,7 +1,8 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "danielbayley"
+    "danielbayley",
+    "karsa-mistmere"
   ],
   "tags": [
     "coach",

icons/candlestick-chart.json

@@ -19,6 +19,7 @@
     "exchange",
     "hedge fund",
     "statistics",
+    "analytics",
     "diagram",
     "graph"
   ],

icons/candy-cane.json

@@ -1,7 +1,8 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "danielbayley"
+    "danielbayley",
+    "karsa-mistmere"
   ],
   "tags": [
     "sugar",

icons/cannabis.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "jguddas",
+    "karsa-mistmere"
+  ],
+  "tags": [
+    "cannabis",
+    "weed",
+    "leaf"
+  ],
+  "categories": [
+    "nature"
+  ]
+}

icons/cannabis.svg

@@ -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="M12 22v-4" />
+  <path d="M7 12c-1.5 0-4.5 1.5-5 3 3.5 1.5 6 1 6 1-1.5 1.5-2 3.5-2 5 2.5 0 4.5-1.5 6-3 1.5 1.5 3.5 3 6 3 0-1.5-.5-3.5-2-5 0 0 2.5.5 6-1-.5-1.5-3.5-3-5-3 1.5-1 4-4 4-6-2.5 0-5.5 1.5-7 3 0-2.5-.5-5-2-7-1.5 2-2 4.5-2 7-1.5-1.5-4.5-3-7-3 0 2 2.5 5 4 6" />
+</svg>

icons/captions-off.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "DefaultLP"
+  ],
+  "tags": [
+    "closed captions",
+    "subtitles",
+    "subhead",
+    "transcription",
+    "transcribe",
+    "dialogue",
+    "accessibility"
+  ],
+  "categories": [
+    "multimedia"
+  ]
+}