Merge branch 'main' of https://github.com/lucide-icons/lucide into add-angolia-search

docs/.vitepress/config.ts

@@ -9,7 +9,8 @@ import sidebar from './sidebar';
 const links = []
 
 
-const title = "Lucide Icons";
+const title = "Lucide";
+const socialTitle = "Lucide Icons";
 const description = "Beautiful & consistent icon toolkit made by the community."
 
 // https://vitepress.dev/reference/site-config
@@ -56,7 +57,7 @@ export default defineConfig({
     }],
     [ 'meta', {
       property:"og:title",
-      content: title,
+      content: socialTitle,
     }],
     [ 'meta', {
       property:"og:description",
@@ -88,7 +89,7 @@ export default defineConfig({
     }],
     [ 'meta', {
       property:"twitter:title",
-      content: title,
+      content: socialTitle,
     }],
     [ 'meta', {
       property:"twitter:description",
@@ -143,7 +144,6 @@ export default defineConfig({
 
     if (pageData.relativePath.startsWith('icons/')) {
       links.push({
-        // you might need to change this if not using clean urls mode
         url: pageData.relativePath.replace(/((^|\/)index)?\.md$/, '$2'),
         lastmod: pageData?.params?.changedRelease?.date
       })
@@ -151,7 +151,6 @@ export default defineConfig({
     }
 
     links.push({
-      // you might need to change this if not using clean urls mode
       url: pageData.relativePath.replace(/((^|\/)index)?\.md$/, '$2'),
       lastmod: pageData.lastUpdated
     })

docs/.vitepress/lib/icons.ts

@@ -8,14 +8,6 @@ const DATE_OF_FORK = '2020-06-08T16:39:52+0100';
 
 const directory = path.join(process.cwd(), "../icons");
 
-export function getAllNames() {
-  const fileNames = fs.readdirSync(directory).filter((file) => path.extname(file) === '.json');
-
-  return fileNames
-    .filter((fileName) => fs.existsSync(directory + '/' + path.basename(fileName, '.json') + '.svg'))
-    .map((fileName) => path.basename(fileName, '.json'));
-}
-
 export interface GetDataOptions {
   withChildKeys?: boolean
 }
@@ -49,7 +41,7 @@ export async function getData(name: string) {
 }
 
 export async function getAllData(): Promise<{ name: string, iconNode: IconNodeWithKeys}[]> {
-  const names = getAllNames();
+  const names = Object.keys(iconNodes);
 
   return Promise.all(names.map((name) => getData(name)));
 }

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

@@ -64,7 +64,7 @@ watch(absoluteStrokeWidth, (enabled) => {
           <ResetButton @click="resetStyle"></ResetButton>
         </h2>
         <p class="copy">
-          Lucide has a lot of customization options to match the icons with you UI.
+          Lucide has a lot of customization options to match the icons with your UI.
         </p>
 
         <div class="customizer">

docs/guide/installation.md

@@ -28,7 +28,7 @@ For more details, see the [documentation](packages/lucide.md).
 
 ## React
 
-Implementation of the lucide icon library for react applications.
+Implementation of the lucide icon library for React applications.
 
 ::: code-group
 
@@ -47,84 +47,138 @@ npm install lucide-react
 :::
 
 For more details, see the [documentation](packages/lucide-react.md).
+For React Native use the `lucide-react-native` package.
 
-## Vue 2
+## Vue
 
-Implementation of the lucide icon library for vue applications.
+Implementation of the lucide icon library for Vue applications.
 
-```bash
-yarn add lucide-vue
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide-vue-next
 ```
 
-or
-
-```sh
-npm install lucide-vue
-```
-
-For more details, see the [documentation](packages/lucide-vue.md).
-
-## Vue 3
-
-Implementation of the lucide icon library for vue applications.
-
-```bash
+```sh [yarn]
 yarn add lucide-vue-next
 ```
 
-or
-
-```sh
+```sh [npm]
 npm install lucide-vue-next
 ```
 
+:::
+
 For more details, see the [documentation](packages/lucide-vue-next.md).
+For Vue 2 use the `lucide-vue` package.
 
 ## Svelte
 
-Implementation of the lucide icon library for vue applications.
+Implementation of the lucide icon library for Svelte applications.
 
-```bash
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide-svelte
+```
+
+```sh [yarn]
 yarn add lucide-svelte
 ```
 
-or
-
-```sh
+```sh [npm]
 npm install lucide-svelte
 ```
 
+:::
+
 For more details, see the [documentation](packages/lucide-svelte.md).
 
+## Solid
+
+Implementation of the lucide icon library for Solid applications.
+
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide-solid
+```
+
+```sh [yarn]
+yarn add lucide-solid
+```
+
+```sh [npm]
+npm install lucide-solid
+```
+
+:::
+
+For more details, see the [documentation](packages/lucide-solid.md).
+
 ## Angular
 
-```bash
+Implementation of the lucide icon library for Angular applications.
+
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide-angular
+```
+
+```sh [yarn]
 yarn add lucide-angular
 ```
 
-or
-
-```sh
+```sh [npm]
 npm install lucide-angular
 ```
 
+:::
+
 For more details, see the [documentation](packages/lucide-angular.md).
 
 ## Preact
 
 Implementation of the lucide icon library for preact applications.
 
-```bash
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide-preact
+```
+
+```sh [yarn]
 yarn add lucide-preact
 ```
 
-or
-
-```sh
+```sh [npm]
 npm install lucide-preact
 ```
 
-For more details, see the [documentation](packages/lucide-preact.md).
+:::
+
+## Static usage
+
+Implementation of the lucide icon library for multiple usages that like to use: SVG files icons, SVG Sprite, Icon Fonts and static SVG strings export in Common JS modules (for NodeJS).
+
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide-static
+```
+
+```sh [yarn]
+yarn add lucide-static
+```
+
+```sh [npm]
+npm install lucide-static
+```
+
+:::
+
+For more details, see the [documentation](packages/lucide-static.md).
 
 ## Figma
 
@@ -134,16 +188,6 @@ Visit [Figma community page](https://www.figma.com/community/plugin/939567362549
 
 ![Setting Page Size](https://www.figma.com/community/plugin/939567362549682242/thumbnail 'Figma Lucide Cover')
 
-## Laravel
-
-Implementation of Lucide icon's using `blade-icons` for Laravel based projects.
-
-```bash
-composer require mallardduck/blade-lucide-icons
-```
-
-For more details, see the [documentation](https://github.com/mallardduck/blade-lucide-icons/blob/main/README.md).
-
 ## Flutter
 
 Implementation of Lucide icon library for Flutter applications.

docs/guide/packages/lucide-angular.md

@@ -4,16 +4,22 @@ Implementation of the lucide icon library for Angular applications.
 
 ## Installation
 
-```bash
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide-angular
+```
+
+```sh [yarn]
 yarn add lucide-angular
 ```
 
-or
-
-```bash
+```sh [npm]
 npm install lucide-angular
 ```
 
+:::
+
 ## How to use
 
 ### Step 1: Import `LucideAngularModule`
@@ -98,7 +104,9 @@ To add custom icons, you will first need to convert them to an [svgson format](h
 
 ## Loading all icons
 
-> :warning: You may also opt to import all icons if necessary using the following format but be aware that this will significantly increase your application build size.
+::: danger
+You may also opt to import all icons if necessary using the following format but be aware that this will significantly increase your application build size.
+:::
 
 ```js
 import { icons } from 'lucide-angular';

docs/guide/packages/lucide-preact.md

@@ -8,28 +8,34 @@ Implementation of the lucide icon library for preact applications.
 
 ## Installation
 
-```sh
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide-preact
+```
+
+```sh [yarn]
 yarn add lucide-preact
 ```
 
-or
-
-```sh
+```sh [npm]
 npm install lucide-preact
 ```
 
+:::
+
 ## How to use
 
-It's build with ESmodules so it's completely tree-shakable.
-Each icon can be imported as a preact component.
+It's build with ES Modules so it's completely tree-shakable.
+
+Each icon can be imported as a Preact component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
 
 ### Example
 
-You can pass additional props to adjust the icon.
+Additional props can be passed to adjust the icon:
 
-```js
+```jsx
 import { Camera } from 'lucide-preact';
-// Returns PreactComponent
 
 // Usage
 const App = () => {
@@ -39,7 +45,7 @@ const App = () => {
 export default App;
 ```
 
-### Props
+## Props
 
 | name                  | type      | default      |
 | --------------------- | --------- | ------------ |
@@ -48,29 +54,31 @@ export default App;
 | `strokeWidth`         | *number*  | 2            |
 | `absoluteStrokeWidth` | *boolean* | false        |
 
-### Custom props / svg attributes
+### Applying props
 
-You can also pass custom props that will be added in the as attributes. With that you can modify the icons look by passing svg attributes.
+To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
 
-```js
+```jsx
 // Usage
 const App = () => {
   return <Camera fill="red" stroke-linejoin="bevel" />;
 };
 ```
 
-> svg attributes in preact aren't transformed, so if want to change e.g. the `stroke-linejoin` you need to pass it in kebabcase, the way svg spec is written so. See this topic in the [preact documentation](https://preactjs.com/guide/v10/differences-to-react/#svg-inside-jsx).
+> SVG attributes in Preact aren't transformed, so if you want to change for example the `stroke-linejoin` you need to pass it in kebabcase. Basically how the SVG spec want you to write it. See this topic in the [Preact documentation](https://preactjs.com/guide/v10/differences-to-react/#svg-inside-jsx).
 
-### One generic icon component
+## One generic icon component
 
-It is possible to create one generic icon component to load icons.
+It is possible to create one generic icon component to load icons. It's not recommended.
 
-> ⚠️ Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
+::: danger
+Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
+:::
 
-#### Icon Component Example
+### Icon Component Example
 
-```js
-import * as icons from 'lucide-preact';
+```jsx
+import { icons } from 'lucide-preact';
 
 const Icon = ({ name, color, size }) => {
   const LucideIcon = icons[name];
@@ -80,3 +88,15 @@ const Icon = ({ name, color, size }) => {
 
 export default Icon;
 ```
+
+#### Using the Icon Component
+
+```jsx
+import Icon from './Icon';
+
+const App = () => {
+  return <Icon name="home" />;
+};
+
+export default App;
+```

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

@@ -6,28 +6,32 @@ Implementation of the lucide icon library for React Native applications
 
 First, ensure that you have `react-native-svg@^12.0.0` installed. Then, install the package:
 
-```bash
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide-react-native
+```
+
+```sh [yarn]
 yarn add lucide-react-native
 ```
 
-or
-
-```sh
+```sh [npm]
 npm install lucide-react-native
 ```
 
+:::
+
 ## How to use
 
-It's build with ESmodules so it's completely tree-shakable.
-Each icon can be imported as a react component.
+Each icon can be imported as a React component.
 
 ### Example
 
-You can pass additional props to adjust the icon.
+Additional props can be passed to adjust the icon:
 
-```js
+```jsx
 import { Camera } from 'lucide-react-native';
-// Returns ReactComponent
 
 // Usage
 const App = () => {
@@ -37,7 +41,7 @@ const App = () => {
 export default App;
 ```
 
-### Props
+## Props
 
 | name                  | type      | default      |
 | --------------------- | --------- | ------------ |
@@ -46,27 +50,29 @@ export default App;
 | `strokeWidth`         | *number*  | 2            |
 | `absoluteStrokeWidth` | *boolean* | false        |
 
-### Custom props
+### Applying props
 
-You can also pass custom props that will be added in the svg as attributes.
+To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component.
 
-```js
+```jsx
 // Usage
 const App = () => {
   return <Camera fill="red" />;
 };
 ```
 
-### One generic icon component
+## One generic icon component
 
 It is possible to create one generic icon component to load icons.
 
-> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
+::: warning
+Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
+:::
 
-#### Icon Component Example
+### Icon Component Example
 
-```js
-import * as icons from 'lucide-react';
+```jsx
+import { icons } from 'lucide-react';
 
 const Icon = ({ name, color, size }) => {
   const LucideIcon = icons[name];
@@ -76,3 +82,15 @@ const Icon = ({ name, color, size }) => {
 
 export default Icon;
 ```
+
+#### Using the Icon Component
+
+```jsx
+import Icon from './Icon';
+
+const App = () => {
+  return <Icon name="home" />;
+};
+
+export default App;
+```

docs/guide/packages/lucide-react.md

@@ -4,28 +4,34 @@ Implementation of the lucide icon library for react applications
 
 ## Installation
 
-```bash
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide-react
+```
+
+```sh [yarn]
 yarn add lucide-react
 ```
 
-or
-
-```sh
+```sh [npm]
 npm install lucide-react
 ```
 
+:::
+
 ## How to use
 
-It's build with ESmodules so it's completely tree-shakable.
-Each icon can be imported as a react component.
+It's build with ES Modules so it's completely tree-shakable.
+
+Each icon can be imported as a React component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
 
 ### Example
 
-You can pass additional props to adjust the icon.
+Additional props can be passed to adjust the icon:
 
-```js
+```jsx
 import { Camera } from 'lucide-react';
-// Returns ReactComponent
 
 // Usage
 const App = () => {
@@ -35,7 +41,7 @@ const App = () => {
 export default App;
 ```
 
-### Props
+## Props
 
 | name                  | type      | default      |
 | --------------------- | --------- | ------------ |
@@ -44,27 +50,29 @@ export default App;
 | `strokeWidth`         | *number*  | 2            |
 | `absoluteStrokeWidth` | *boolean* | false        |
 
-### Custom props
+### Applying props
 
-You can also pass custom props that will be added in the svg as attributes.
+To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
 
-```js
+```jsx
 // Usage
 const App = () => {
-  return <Camera fill="red" />;
+  return <Camera size={48} fill="red" />;
 };
 ```
 
-### One generic icon component
+## One generic icon component
 
-It is possible to create one generic icon component to load icons.
+It is possible to create one generic icon component to load icons. It's not recommended.
 
-> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
+::: danger
+Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
+:::
 
-#### Icon Component Example
+### Icon Component Example
 
-```js
-import * as icons from 'lucide-react';
+```jsx
+import { icons } from 'lucide-react';
 
 const Icon = ({ name, color, size }) => {
   const LucideIcon = icons[name];
@@ -74,3 +82,15 @@ const Icon = ({ name, color, size }) => {
 
 export default Icon;
 ```
+
+#### Using the Icon Component
+
+```jsx
+import Icon from './Icon';
+
+const App = () => {
+  return <Icon name="home" />;
+};
+
+export default App;
+```

docs/guide/packages/lucide-solid.md

@@ -4,28 +4,34 @@ Implementation of the lucide icon library for solid applications.
 
 ## Installation
 
-```sh
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide-solid
+```
+
+```sh [yarn]
 yarn add lucide-solid
 ```
 
-or
-
-```sh
+```sh [npm]
 npm install lucide-solid
 ```
 
+:::
+
 ## How to use
 
-It's build with ESmodules so it's completely tree-shakable.
-Each icon can be imported as a solid component.
+It's build with ES Modules so it's completely tree-shakable.
+
+Each icon can be imported as a Solid component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
 
 ### Example
 
-You can pass additional props to adjust the icon.
+Additional props can be passed to adjust the icon:
 
-```js
+```jsx
 import { Camera } from 'lucide-solid';
-// Returns SolidComponent
 
 // Usage
 const App = () => {
@@ -35,7 +41,7 @@ const App = () => {
 export default App;
 ```
 
-### Props
+## Props
 
 | name                  | type      | default      |
 | --------------------- | --------- | ------------ |
@@ -44,32 +50,37 @@ export default App;
 | `strokeWidth`         | *number*  | 2            |
 | `absoluteStrokeWidth` | *boolean* | false        |
 
-### Custom props / svg attributes
+### Applying props
 
-You can also pass custom props that will be added in the as attributes. With that you can modify the icons look by passing svg attributes.
+To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
 
-```js
+```jsx
 // Usage
 const App = () => {
   return <Camera fill="red" stroke-linejoin="bevel" />;
 };
 ```
 
-### One generic icon component
+## One generic icon component
 
-It is possible to create one generic icon component to load icons.
+It is possible to create one generic icon component to load icons. It's not recommended.
 
-> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
+::: danger
+Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
+:::
 
-#### Icon Component Example
+### Icon Component Example
 
 ```tsx
-import * as icons from 'lucide-solid';
-import type { LucideProps } from 'lucide-solid';
+import { icons, type LucideProps } from 'lucide-solid';
 import { splitProps } from 'solid-js';
 import { Dynamic } from 'solid-js/web';
 
-const Icon = (props: { name: keyof typeof icons } & LucideProps) => {
+interface IconProps extends LucideProps {
+  name: keyof typeof icons;
+}
+
+const Icon = (props: IconProps) => {
   const [local, others] = splitProps(props, ["name"]);
 
   return <Dynamic component={icons[local.name]} {...others} />
@@ -77,3 +88,15 @@ const Icon = (props: { name: keyof typeof icons } & LucideProps) => {
 
 export default Icon;
 ```
+
+#### Using the Icon Component
+
+```tsx
+import Icon from './Icon';
+
+const App = () => {
+  return <Icon name="home" />;
+};
+
+export default App;
+```

docs/guide/packages/lucide-static.md

@@ -11,22 +11,30 @@ This package include the following lucide implementations:
 
 This package is suitable for specific use cases, for example if you want to use icon fonts, SVG sprites, normal SVGs or Common.js SVG strings in your javascript project.
 
-> ⚠️ While they can be useful for prototyping, it is not recommended to use the SVG sprites or icon fonts provided by this package in production web apps as all the available icons are included in the app, hence increasing loading time and data usage. We recommend to use a bundler and treeshaking to make sure only the icons you use are bundled with your app. Threeshaking is only available in these packages: [lucide](lucide), [lucide-react](lucide-react), [lucide-vue](lucide-vue), [lucide-vue-next](lucide-vue-next), [lucide-angular](lucide-angular), [lucide-preact](lucide-preact)
+::: warning
+While they can be useful for prototyping, it is not recommended to use the SVG sprites or icon fonts provided by this package in production web apps as all the available icons are included in the app, hence increasing loading time and data usage. We recommend to use a bundler and tree-shaking to make sure only the icons you use are bundled with your app. Tree-shaking is only available in these packages: [lucide](lucide), [lucide-react](lucide-react), [lucide-vue](lucide-vue), [lucide-vue-next](lucide-vue-next), [lucide-angular](lucide-angular), [lucide-preact](lucide-preact)
+:::
 
 ## Installation
 
 ## Package Managers
 
-```sh
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide-static
+```
+
+```sh [yarn]
 yarn add lucide-static
 ```
 
-or
-
-```sh
+```sh [npm]
 npm install lucide-static
 ```
 
+:::
+
 ### CDN
 
 ```html

docs/guide/packages/lucide-svelte.md

@@ -4,25 +4,33 @@ Implementation of the lucide icon library for svelte applications.
 
 ## Installation
 
-```bash
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide-svelte
+```
+
+```sh [yarn]
 yarn add lucide-svelte
 ```
 
-or
-
-```sh
+```sh [npm]
 npm install lucide-svelte
 ```
 
+:::
+
 ## How to use
 
-All the icons are Svelte components, that ouputs Svg elements. So each icon can be imported and used as a component. This also helps with the use of threeshaking so you only import the icons you use.
+It's build with ES Modules so it's completely tree-shakable.
+
+Each icon can be imported as a Svelte component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
 
 ### Example
 
 Default usage:
 
-```html
+```svelte
 <script>
   import { Skull } from 'lucide-svelte';
 </script>
@@ -30,9 +38,9 @@ Default usage:
 <Skull />
 ```
 
-You can pass additional props to adjust the icon.
+Additional props can be passed to adjust the icon:
 
-```html
+```svelte
 <script>
   import { Camera } from 'lucide-svelte';
 </script>
@@ -40,7 +48,7 @@ You can pass additional props to adjust the icon.
 <Camera color="#ff3e98" />
 ```
 
-### Available props
+## Props
 
 | name                  | type      | default      |
 | --------------------- | --------- | ------------ |
@@ -48,14 +56,12 @@ You can pass additional props to adjust the icon.
 | `color`               | *string*  | currentColor |
 | `strokeWidth`         | *number*  | 2            |
 | `absoluteStrokeWidth` | *boolean* | false        |
-| `*<SVGProps>`         | *string*  | -            |
 
+### Applying props
 
-\* All SVGProps are available to style the svgs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation)
+To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
 
-### Example of custom props
-
-```html
+```svelte
 <script>
   import { Phone } from 'lucide-svelte';
 </script>
@@ -65,15 +71,17 @@ You can pass additional props to adjust the icon.
 
 This results a filled phone icon.
 
-### One generic icon component
+## One generic icon component
 
-It is possible to create one generic icon component to load icons.
+It is possible to create one generic icon component to load icons. It's not recommended.
 
-> ⚠️ Example below importing all EsModules, caution using this example, not recommended when you bundle your application,the build size will grow strongly. Because it will import all the icons.
+::: danger
+Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
+:::
 
-#### Icon Component Example
+### Icon Component Example
 
-```html
+```svelte
 <script>
   import * as icons from 'lucide-svelte';
   export let name;
@@ -82,12 +90,13 @@ It is possible to create one generic icon component to load icons.
 <svelte:component this="{icons[name]}" {...$$props} />
 ```
 
-##### Then you can use it like this
+#### Using the Icon Component
 
-```html
+```svelte
 <script>
   import LucideIcon from './LucideIcon';
 </script>
 
 <LucideIcon name="Menu" />
 ```
+

docs/guide/packages/lucide-vue-next.md

@@ -2,32 +2,41 @@
 
 Implementation of the lucide icon library for Vue 3 applications.
 
-> ⚠️ This version of lucide is for Vue 3, For Vue 2 got to [lucide-vue](lucide-vue)
+## Vue 3 or Vue 2
+
+::: tip
+This version of lucide is for Vue 3, For Vue 2 got to [lucide-vue ->](lucide-vue)
+:::
 
 ## Installation
 
-**With yarn**
+::: code-group
 
-```bash
+```sh [pnpm]
+pnpm install lucide-vue-next
+```
+
+```sh [yarn]
 yarn add lucide-vue-next
 ```
 
-**With npm**
-
-```bash
+```sh [npm]
 npm install lucide-vue-next
 ```
 
+:::
+
 ## How to use
 
-It's build with ESmodules so it's completely tree-shakable.
-Each icon can be imported as a vue component.
+It's build with ES Modules so it's completely tree-shakable.
+
+Each icon can be imported as a Vue component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
 
 ### Example
 
 You can pass additional props to adjust the icon.
 
-``` html
+```vue
 <template>
   <Camera
     color="red"
@@ -40,7 +49,7 @@ import { Camera } from 'lucide-vue-next';
 </script>
 ```
 
-### Props
+## Props
 
 |  name                   |   type    |  default     |
 | ----------------------- | --------- | ------------ |
@@ -50,34 +59,27 @@ import { Camera } from 'lucide-vue-next';
 | `absolute-stroke-width` | *boolean* | false        |
 | `default-class`         | *string*  | lucide-icon  |
 
-### Custom props
+### Applying props
 
-You can also pass custom props that will be added in the svg as attributes.
+To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
 
-``` html
+```vue
 <template>
   <Camera fill="red" />
 </template>
 ```
 
-### One generic icon component
+## One generic icon component
 
-It is possible to create one generic icon component to load icons.
+It is possible to create one generic icon component to load icons. It's not recommended.
 
-> ⚠️ Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
+::: danger
+Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
+:::
 
-#### Icon Component Example
-
-``` html
-<template>
-  <component
-    :is="icon"
-    :size="size"
-    :color="color"
-    :stroke-width="strokeWidth" :default-class="defaultClass"
-  />
-</template>
+### Icon Component Example
 
+```vue
 <script setup>
 import { computed } from 'vue';
 import * as icons from "lucide-vue-next";
@@ -95,15 +97,25 @@ const props = defineProps({
 
 const icon = computed(() => icons[props.name]);
 </script>
+
+<template>
+  <component
+    :is="icon"
+    :size="size"
+    :color="color"
+    :stroke-width="strokeWidth" :default-class="defaultClass"
+  />
+</template>
 ```
 
-##### Then you can use it like this
+### Using the Icon Component
 
-``` html
+All other props listed above also work on the `Icon` Component.
+
+```vue
 <template>
   <div id="app">
     <Icon name="Airplay" />
   </div>
 </template>
 ```
-All other props listed above also work on the `Icon` Component.

docs/guide/packages/lucide-vue.md

@@ -2,36 +2,46 @@
 
 Implementation of the lucide icon library for Vue applications.
 
-> ⚠️ This version of lucide is for Vue 2, For Vue 3 got to [lucide-vue-next](lucide-vue-next)
+## Vue 2 or Vue 3
+
+::: tip
+This version of lucide is for Vue 2, For Vue 3 go to [lucide-vue-next ->](lucide-vue-next)
+:::
 
 ## Installation
 
-```sh
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide-vue
+```
+
+```sh [yarn]
 yarn add lucide-vue
 ```
 
-or
-
-```sh
+```sh [npm]
 npm install lucide-vue
 ```
 
+:::
+
 ## How to use
 
-It's build with ESmodules so it's completely tree-shakable.
-Each icon can be imported as a vue component.
+It's build with ES Modules so it's completely tree-shakable.
+
+Each icon can be imported as a Vue component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
 
 ### Example
 
-You can pass additional props to adjust the icon.
+Additional props can be passed to adjust the icon:
 
-```html
+```vue
 <template>
   <Camera color="red" :size="32" />
 </template>
 
 <script>
-  // Returns Vue component
   import { Camera } from 'lucide-vue';
 
   export default {
@@ -41,7 +51,7 @@ You can pass additional props to adjust the icon.
 </script>
 ```
 
-### Props
+## Props
 
 |  name                   |   type    |  default     |
 | ----------------------- | --------- | ------------ |
@@ -51,25 +61,27 @@ You can pass additional props to adjust the icon.
 | `absolute-stroke-width` | *boolean* | false        |
 | `default-class`         | *string*  | lucide-icon  |
 
-### Custom props
+### Applying props
 
-You can also pass custom props that will be added in the svg as attributes.
+To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
 
-```html
+```vue
 <template>
   <Camera fill="red" />
 </template>
 ```
 
-### One generic icon component
+## One generic icon component
 
-It is possible to create one generic icon component to load icons.
+It is possible to create one generic icon component to load icons. It's not recommended.
 
-> ⚠️ Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
+::: danger
+Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
+:::
 
-#### Icon Component Example
+### Icon Component Example
 
-```html
+```vue
 <template>
   <component :is="icon" />
 </template>
@@ -93,9 +105,9 @@ It is possible to create one generic icon component to load icons.
 </script>
 ```
 
-##### Then you can use it like this
+#### Using the Icon Component
 
-```html
+```vue
 <template>
   <div id="app">
     <Icon name="Airplay" />

docs/guide/packages/lucide.md

@@ -6,15 +6,21 @@ Implementation of the lucide icon library for web applications.
 
 ### Package Managers
 
-```sh
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide
+```
+
+```sh [yarn]
+yarn add lucide
+```
+
+```sh [npm]
 npm install lucide
 ```
 
-or
-
-```sh
-yarn add lucide
-```
+:::
 
 ### CDN
 
@@ -35,9 +41,9 @@ Here is a complete example with unpkg
 ```html
 <!DOCTYPE html>
 <body>
-  <i icon-name="volume-2" class="my-class"></i>
-  <i icon-name="x"></i>
-  <i icon-name="menu"></i>
+  <i data-lucide="volume-2" class="my-class"></i>
+  <i data-lucide="x"></i>
+  <i data-lucide="menu"></i>
 
   <script src="https://unpkg.com/lucide@latest"></script>
   <script>
@@ -49,11 +55,11 @@ Here is a complete example with unpkg
 ### With ESModules
 
 To reduce bundle size, lucide is built to be fully tree-shakable.
-The `createIcons` function will search for HTMLElements with the attribute `icon-name` and replace it with the svg from the given icon name.
+The `createIcons` function will search for HTMLElements with the attribute `data-lucide` and replace it with the svg from the given icon name.
 
 ```html
 <!-- Your HTML file -->
-<i icon-name="menu"></i>
+<i data-lucide="menu"></i>
 ```
 
 ```js
@@ -74,7 +80,9 @@ createIcons({
 });
 ```
 
-#### Additional Options
+## Advanced Usage
+
+### Additional Options
 
 In the `createIcons` function you can pass some extra parameters to adjust the `nameAttr` or add custom attributes like for example classes.
 
@@ -89,11 +97,11 @@ createIcons({
     'stroke-width': 1,
     stroke: '#333'
   },
-  nameAttr: 'icon-name' // attribute for the icon name.
+  nameAttr: 'data-lucide' // attribute for the icon name.
 });
 ```
 
-#### Treeshake the library, only use the icons you use
+### Treeshake the library, only use the icons you use
 
 ```js
 import { createIcons, Menu, ArrowRight, Globe } from 'lucide';
@@ -107,7 +115,7 @@ createIcons({
 });
 ```
 
-#### Custom Element binding
+### Custom Element binding
 
 ```js
 import { createElement, Menu } from 'lucide';

docs/icons/index.md

@@ -3,6 +3,10 @@ layout: page
 outline: 2
 outlineTitle: Categories
 sidebar: true
+head:
+  - - link
+    - rel: canonical
+      content: https://lucide.dev/icons/
 ---
 
 <script setup>

docs/index.md

@@ -2,6 +2,11 @@
 # https://vitepress.dev/reference/default-theme-home-page
 layout: home
 
+head:
+  - - link
+    - rel: canonical
+      content: https://lucide.dev/
+
 hero:
   name: |
     Beautiful &
@@ -13,10 +18,10 @@ hero:
   actions:
     - theme: brand
       text: View all icons
-      link: icons/index
+      link: icons/
     - theme: alt
       text: Get Started
-      link: guide/index
+      link: guide/
     - theme: alt
       text: GitHub
       link: https://github.com/lucide-icons/lucide

docs/vercel.json

@@ -23,6 +23,17 @@
       "source": "/docs/:path*",
       "destination": "/guide/:path*",
       "permanent": true
+    },
+    {
+      "source": "/",
+      "has": [
+        {
+          "type": "query",
+          "key": "search"
+        }
+      ],
+      "destination": "/icons",
+      "permanent": false
     }
   ]
 }

icons/activity-square.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "pulse",
+    "action",
+    "motion",
+    "movement",
+    "exercise",
+    "fitness",
+    "healthcare",
+    "heart rate monitor",
+    "vital signs",
+    "vitals",
+    "emergency room",
+    "er",
+    "intensive care",
+    "hospital",
+    "defibrillator",
+    "earthquake",
+    "siesmic",
+    "magnitude",
+    "richter scale",
+    "aftershock",
+    "tremor",
+    "shockwave",
+    "audio",
+    "waveform",
+    "synthesizer",
+    "synthesiser",
+    "music"
+  ],
+  "categories": [
+    "medical",
+    "account",
+    "social",
+    "science",
+    "multimedia",
+    "shapes"
+  ]
+}

icons/activity-square.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"
+>
+  <rect width="18" height="18" x="3" y="3" rx="2" />
+  <path d="M17 12h-2l-2 5-2-10-2 5H7" />
+</svg>

icons/activity.json

@@ -5,13 +5,38 @@
   ],
   "tags": [
     "pulse",
-    "health",
     "action",
-    "motion"
+    "motion",
+    "movement",
+    "exercise",
+    "fitness",
+    "healthcare",
+    "heart rate monitor",
+    "vital signs",
+    "vitals",
+    "emergency room",
+    "er",
+    "intensive care",
+    "hospital",
+    "defibrillator",
+    "earthquake",
+    "siesmic",
+    "magnitude",
+    "richter scale",
+    "aftershock",
+    "tremor",
+    "shockwave",
+    "audio",
+    "waveform",
+    "synthesizer",
+    "synthesiser",
+    "music"
   ],
   "categories": [
     "medical",
     "account",
-    "social"
+    "social",
+    "science",
+    "multimedia"
   ]
 }

icons/activity.svg

@@ -9,5 +9,5 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
+  <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
 </svg>

icons/alert-triangle.json

@@ -10,10 +10,12 @@
     "warning",
     "alert",
     "danger",
-    "exclamation mark"
+    "exclamation mark",
+    "linter"
   ],
   "categories": [
     "notifications",
-    "shapes"
+    "shapes",
+    "development"
   ]
 }

icons/alert-triangle.svg

@@ -10,6 +10,6 @@
   stroke-linejoin="round"
 >
   <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" />
-  <line x1="12" x2="12" y1="9" y2="13" />
-  <line x1="12" x2="12.01" y1="17" y2="17" />
+  <path d="M12 9v4" />
+  <path d="M12 17h.01" />
 </svg>

icons/ban.json

@@ -11,8 +11,14 @@
     "forbidden",
     "prohibited",
     "error",
+    "incorrect",
+    "mistake",
+    "wrong",
+    "failure",
     "circle",
-    "slash"
+    "slash",
+    "null",
+    "void"
   ],
   "categories": [
     "account"

icons/ban.svg

@@ -10,5 +10,5 @@
   stroke-linejoin="round"
 >
   <circle cx="12" cy="12" r="10" />
-  <line x1="4.93" x2="19.07" y1="4.93" y2="19.07" />
+  <path d="m4.9 4.9 14.2 14.2" />
 </svg>

icons/bar-chart-big.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "statistics",
+    "diagram",
+    "graph"
+  ],
+  "categories": [
+    "charts"
+  ]
+}

icons/bar-chart-big.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M3 3v18h18" />
+  <rect width="4" height="7" x="7" y="10" rx="1" />
+  <rect width="4" height="12" x="15" y="5" rx="1" />
+</svg>

icons/bar-chart-horizontal-big.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "statistics",
+    "diagram",
+    "graph"
+  ],
+  "categories": [
+    "charts"
+  ]
+}

icons/bar-chart-horizontal-big.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M3 3v18h18" />
+  <rect width="12" height="4" x="7" y="5" rx="1" />
+  <rect width="7" height="4" x="7" y="13" rx="1" />
+</svg>

icons/binary.json

@@ -10,7 +10,8 @@
     "digits",
     "computer",
     "zero",
-    "one"
+    "one",
+    "boolean"
   ],
   "categories": [
     "text",

icons/binary.svg

@@ -9,10 +9,10 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
+  <rect width="4" height="6" x="14" y="14" rx="2" />
+  <rect width="4" height="6" x="6" y="4" rx="2" />
   <path d="M6 20h4" />
   <path d="M14 10h4" />
   <path d="M6 14h2v6" />
   <path d="M14 4h2v6" />
-  <rect width="4" height="6" x="6" y="4" />
-  <rect width="4" height="6" x="14" y="14" />
 </svg>

icons/book-copy.svg

@@ -9,8 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M2,16V4c0-1.1,0.9-2,2-2h11" />
-  <path d="M5,14H4c-1.1,0-2,0.9-2,2s0.9,2,2,2h1" />
-  <path d="M22,18H11c-1.1,0-2,0.9-2,2l0,0" />
-  <path d="M11,6h11v16H11c-1.1,0-2-0.9-2-2V8C9,6.9,9.9,6,11,6z" />
+  <path d="M2 16V4a2 2 0 0 1 2-2h11" />
+  <path d="M5 14H4a2 2 0 1 0 0 4h1" />
+  <path d="M22 18H11a2 2 0 1 0 0 4h11V6H11a2 2 0 0 0-2 2v12" />
 </svg>

icons/book-down.svg

@@ -9,8 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
-  <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z" />
+  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
   <path d="M12 13V7" />
   <path d="m9 10 3 3 3-3" />
 </svg>

icons/book-key.svg

@@ -9,9 +9,9 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M20,2l-4.5,4.5"/>
-  <path d="M19,3l1,1"/>
-  <circle cx="14" cy="8" r="2"/>
-  <path d="M4,19.5C4,18.1,5.1,17,6.5,17H20" />
-  <path d="M20,8v14H6.5C5.1,22,4,20.9,4,19.5v-15C4,3.1,5.1,2,6.5,2H14" />
+  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H14" />
+  <path d="M20 8v14H6.5a2.5 2.5 0 0 1 0-5H20" />
+  <circle cx="14" cy="8" r="2" />
+  <path d="m20 2-4.5 4.5" />
+  <path d="m19 3 1 1" />
 </svg>

icons/book-lock.svg

@@ -9,8 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M4,19.5C4,18.1,5.1,17,6.5,17H20" />
-  <path d="M18,6V4c0-1.1-0.9-2-2-2s-2,0.9-2,2v2" />
-  <path d="M20,15v7H6.5C5.1,22,4,20.9,4,19.5v-15C4,3.1,5.1,2,6.5,2H10" />
-  <path d="M13,6h6c0.6,0,1,0.4,1,1v3c0,0.6-0.4,1-1,1h-6c-0.6,0-1-0.4-1-1V7C12,6.4,12.4,6,13,6z" />
+  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H10" />
+  <path d="M20 15v7H6.5a2.5 2.5 0 0 1 0-5H20" />
+  <rect width="8" height="5" x="12" y="6" rx="1" />
+  <path d="M18 6V4a2 2 0 1 0-4 0v2" />
 </svg>

icons/book-marked.svg

@@ -9,7 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <polyline points="10,2 10,10 13,7 16,10 16,2" />
-  <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
-  <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
+  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
+  <polyline points="10 2 10 10 13 7 16 10 16 2" />
 </svg>

icons/book-minus.svg

@@ -9,7 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <line x1="9" y1="10" x2="15" y2="10"/>
-  <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
-  <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
+  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
+  <path d="M9 10h6" />
 </svg>

icons/book-plus.svg

@@ -9,8 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <line x1="12" y1="7" x2="12" y2="13"/>
-  <line x1="9" y1="10" x2="15" y2="10"/>
-  <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
-  <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
+  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
+  <path d="M9 10h6" />
+  <path d="M12 7v6" />
 </svg>

icons/book-up-2.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "code",
+    "version control",
+    "git",
+    "repository",
+    "push",
+    "force"
+  ],
+  "categories": [
+    "development"
+  ]
+}

icons/book-up-2.svg

@@ -0,0 +1,17 @@
+<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="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2" />
+  <path d="M18 2h2v20H6.5a2.5 2.5 0 0 1 0-5H20" />
+  <path d="M12 13V7" />
+  <path d="m9 10 3-3 3 3" />
+  <path d="m9 5 3-3 3 3" />
+</svg>

icons/book-up.svg

@@ -9,8 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
-  <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z" />
-  <path d="M12,13V7" />
-  <path d="M9,10l3-3l3,3" />
+  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
+  <path d="M12 13V7" />
+  <path d="m9 10 3-3 3 3" />
 </svg>

icons/book-x.svg

@@ -9,8 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M9.5,7l5,5" />
-  <path d="M14.5,7l-5,5" />
-  <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
-  <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
+  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
+  <path d="m14.5 7-5 5" />
+  <path d="m9.5 7 5 5" />
 </svg>

icons/book.svg

@@ -9,6 +9,5 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
-  <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
+  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
 </svg>

icons/candlestick-chart.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "trading",
+    "trader",
+    "financial",
+    "markets",
+    "portfolio",
+    "assets",
+    "prices",
+    "value",
+    "valuation",
+    "commodities",
+    "currencies",
+    "currency",
+    "exchange",
+    "hedge fund",
+    "statistics",
+    "diagram",
+    "graph"
+  ],
+  "categories": [
+    "charts",
+    "money"
+  ]
+}

icons/candlestick-chart.svg

@@ -0,0 +1,19 @@
+<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="M9 5v4" />
+  <rect width="4" height="6" x="7" y="9" rx="1" />
+  <path d="M9 15v2" />
+  <path d="M17 3v2" />
+  <rect width="4" height="8" x="15" y="5" rx="1" />
+  <path d="M17 13v3" />
+  <path d="M3 3v18h18" />
+</svg>

icons/circle-dashed.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "pending",
+    "dot",
+    "progress",
+    "issue",
+    "draft",
+    "code",
+    "coding",
+    "version control"
+  ],
+  "categories": [
+    "development",
+    "shapes"
+  ]
+}

icons/circle-dashed.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="M10.1 2.18a9.93 9.93 0 0 1 3.8 0" />
+  <path d="M17.6 3.71a9.95 9.95 0 0 1 2.69 2.7" />
+  <path d="M21.82 10.1a9.93 9.93 0 0 1 0 3.8" />
+  <path d="M20.29 17.6a9.95 9.95 0 0 1-2.7 2.69" />
+  <path d="M13.9 21.82a9.94 9.94 0 0 1-3.8 0" />
+  <path d="M6.4 20.29a9.95 9.95 0 0 1-2.69-2.7" />
+  <path d="M2.18 13.9a9.93 9.93 0 0 1 0-3.8" />
+  <path d="M3.71 6.4a9.95 9.95 0 0 1 2.7-2.69" />
+</svg>

icons/circle-dot-dashed.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "pending",
+    "dot",
+    "progress",
+    "issue",
+    "draft",
+    "code",
+    "coding",
+    "version control"
+  ],
+  "categories": [
+    "development",
+    "shapes"
+  ]
+}

icons/circle-dot-dashed.svg

@@ -0,0 +1,21 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M10.1 2.18a9.93 9.93 0 0 1 3.8 0" />
+  <path d="M17.6 3.71a9.95 9.95 0 0 1 2.69 2.7" />
+  <path d="M21.82 10.1a9.93 9.93 0 0 1 0 3.8" />
+  <path d="M20.29 17.6a9.95 9.95 0 0 1-2.7 2.69" />
+  <path d="M13.9 21.82a9.94 9.94 0 0 1-3.8 0" />
+  <path d="M6.4 20.29a9.95 9.95 0 0 1-2.69-2.7" />
+  <path d="M2.18 13.9a9.93 9.93 0 0 1 0-3.8" />
+  <path d="M3.71 6.4a9.95 9.95 0 0 1 2.7-2.69" />
+  <circle cx="12" cy="12" r="1" />
+</svg>

icons/circle-dot.json

@@ -8,12 +8,15 @@
     "dot",
     "progress",
     "issue",
-    "radio button",
+    "code",
+    "coding",
+    "version control",
     "choices",
     "multiple choice",
     "choose"
   ],
   "categories": [
+    "development",
     "shapes"
   ]
 }

icons/circle-off.json

@@ -7,15 +7,20 @@
     "diameter",
     "zero",
     "Ø",
-    "null",
     "nothing",
+    "null",
+    "void",
     "cancel",
     "ban",
     "no",
     "stop",
     "forbidden",
     "prohibited",
-    "error"
+    "error",
+    "incorrect",
+    "mistake",
+    "wrong",
+    "failure"
   ],
   "categories": [
     "shapes"

icons/circle-slash-2.json

@@ -3,17 +3,22 @@
   "contributors": [
     "danielbayley"
   ],
-  "aliases": ["circle-slashed"],
   "tags": [
     "diameter",
     "zero",
     "Ø",
-    "null",
     "nothing",
-    "maths",
+    "null",
+    "void",
+    "ban",
     "/"
   ],
   "categories": [
-    "shapes"
+    "shapes",
+    "maths",
+    "development"
+  ],
+  "aliases": [
+    "circle-slashed"
   ]
 }

icons/circle-slash.json

@@ -7,8 +7,9 @@
     "diameter",
     "zero",
     "Ø",
-    "null",
     "nothing",
+    "null",
+    "void",
     "cancel",
     "ban",
     "no",
@@ -16,6 +17,10 @@
     "forbidden",
     "prohibited",
     "error",
+    "incorrect",
+    "mistake",
+    "wrong",
+    "failure",
     "/"
   ],
   "categories": [

icons/file-digit.svg

@@ -9,9 +9,9 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
+  <rect width="4" height="6" x="2" y="12" rx="2" />
+  <path d="M14 2v6h6" />
   <path d="M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v4" />
-  <polyline points="14 2 14 8 20 8" />
   <path d="M10 12h2v6" />
-  <rect width="4" height="6" x="2" y="12" />
   <path d="M10 18h4" />
 </svg>

icons/goal.json

@@ -0,0 +1,10 @@
+{
+    "$schema": "../icon.schema.json",
+    "tags": [
+      "flag",
+      "bullseye"
+    ],
+    "categories": [
+      "gaming"
+    ]
+  }

icons/goal.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 13V2l8 4-8 4" />
+  <path d="M20.55 10.23A9 9 0 1 1 8 4.94" />
+  <path d="M8 10a5 5 0 1 0 8.9 2.02" />
+</svg>

icons/key-round.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "password",
+    "login",
+    "authentication",
+    "secure",
+    "unlock"
+  ],
+  "categories": [
+    "security",
+    "account"
+  ]
+}

icons/key-round.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="M2 18v3c0 .6.4 1 1 1h4v-3h3v-3h2l1.4-1.4a6.5 6.5 0 1 0-4-4Z" />
+  <circle cx="16.5" cy="7.5" r=".5" />
+</svg>

icons/key-square.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "password",
+    "login",
+    "authentication",
+    "secure",
+    "unlock",
+    "car key"
+  ],
+  "categories": [
+    "security",
+    "account"
+  ]
+}

icons/key-square.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12.4 2.7c.9-.9 2.5-.9 3.4 0l5.5 5.5c.9.9.9 2.5 0 3.4l-3.7 3.7c-.9.9-2.5.9-3.4 0L8.7 9.8c-.9-.9-.9-2.5 0-3.4Z" />
+  <path d="m14 7 3 3" />
+  <path d="M9.4 10.6 2 18v3c0 .6.4 1 1 1h4v-3h3v-3h2l1.4-1.4" />
+</svg>

icons/key.json

@@ -11,7 +11,11 @@
     "password",
     "login",
     "authentication",
-    "secure"
+    "secure",
+    "unlock",
+    "keychain",
+    "key ring",
+    "fob"
   ],
   "categories": [
     "security",

icons/network.svg

@@ -9,9 +9,9 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <rect width="6" height="6" x="9" y="2" />
-  <rect width="6" height="6" x="16" y="16" />
-  <rect width="6" height="6" x="2" y="16" />
-  <path d="M5 16v-4h14v4" />
+  <rect width="6" height="6" x="16" y="16" rx="1" />
+  <rect width="6" height="6" x="2" y="16" rx="1" />
+  <rect width="6" height="6" x="9" y="2" rx="1" />
+  <path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3" />
   <path d="M12 12V8" />
 </svg>

icons/orbit.json

@@ -8,9 +8,11 @@
   "tags": [
     "planet",
     "space",
-    "physics"
+    "physics",
+    "satellites",
+    "moons"
   ],
   "categories": [
     "science"
   ]
-}
+}

icons/presentation.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "screen",
+    "whiteboard",
+    "marker pens",
+    "markers",
+    "blackboard",
+    "chalk",
+    "easel",
+    "school",
+    "learning",
+    "lesson",
+    "office",
+    "meeting",
+    "project",
+    "planning"
+  ],
+  "categories": [
+    "multimedia",
+    "photography",
+    "devices",
+    "communication",
+    "design"
+  ]
+}

icons/presentation.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M2 3h20" />
+  <path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3" />
+  <path d="m7 21 5-5 5 5" />
+</svg>

icons/projector.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "cinema",
+    "film",
+    "movie",
+    "home video",
+    "presentation",
+    "slideshow",
+    "office",
+    "meeting",
+    "project",
+    "planning"
+  ],
+  "categories": [
+    "multimedia",
+    "photography",
+    "devices",
+    "communication"
+  ]
+}

icons/projector.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="M5 7 3 5" />
+  <path d="M9 6V3" />
+  <path d="m13 7 2-2" />
+  <circle cx="9" cy="13" r="3" />
+  <path d="M11.83 12H20a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h2.17" />
+  <path d="M16 16h2" />
+</svg>

icons/refresh-ccw-dot.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "arrows",
+    "rotate",
+    "reload",
+    "synchronise",
+    "synchronize",
+    "circular",
+    "cycle",
+    "issue",
+    "code",
+    "coding",
+    "version control",
+    "dashed"
+  ],
+  "categories": [
+    "arrows",
+    "development",
+    "shapes"
+  ]
+}

icons/refresh-ccw-dot.svg

@@ -0,0 +1,17 @@
+<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="M3 2v6h6" />
+  <path d="M21 12A9 9 0 0 0 6 5.3L3 8" />
+  <path d="M21 22v-6h-6" />
+  <path d="M3 12a9 9 0 0 0 15 6.7l3-2.7" />
+  <circle cx="12" cy="12" r="1" />
+</svg>

icons/search-check.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "find",
+    "scan",
+    "magnifier",
+    "magnifying glass",
+    "found",
+    "correct",
+    "complete",
+    "tick"
+  ],
+  "categories": [
+    "text",
+    "account",
+    "social"
+  ]
+}

icons/search-check.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m8 11 2 2 4-4" />
+  <circle cx="11" cy="11" r="8" />
+  <path d="m21 21-4.3-4.3" />
+</svg>

icons/search-code.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "find",
+    "scan",
+    "magnifier",
+    "magnifying glass",
+    "grep",
+    "chevrons",
+    "<>"
+  ],
+  "categories": [
+    "text",
+    "account",
+    "social",
+    "development"
+  ]
+}

icons/search-code.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="m9 9-2 2 2 2" />
+  <path d="m13 13 2-2-2-2" />
+  <circle cx="11" cy="11" r="8" />
+  <path d="m21 21-4.3-4.3" />
+</svg>

icons/search-slash.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "find",
+    "scan",
+    "magnifier",
+    "magnifying glass",
+    "stop",
+    "clear",
+    "cancel",
+    "abort",
+    "/"
+  ],
+  "categories": [
+    "text",
+    "account",
+    "social"
+  ]
+}

icons/search-slash.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m13.5 8.5-5 5" />
+  <circle cx="11" cy="11" r="8" />
+  <path d="m21 21-4.3-4.3" />
+</svg>

icons/search-x.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "find",
+    "scan",
+    "magnifier",
+    "magnifying glass",
+    "stop",
+    "clear",
+    "cancel",
+    "abort"
+  ],
+  "categories": [
+    "text",
+    "account",
+    "social"
+  ]
+}

icons/search-x.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="m13.5 8.5-5 5" />
+  <path d="m8.5 8.5 5 5" />
+  <circle cx="11" cy="11" r="8" />
+  <path d="m21 21-4.3-4.3" />
+</svg>

icons/search.json

@@ -6,6 +6,7 @@
   ],
   "tags": [
     "find",
+    "scan",
     "magnifier",
     "magnifying glass"
   ],

icons/search.svg

@@ -10,5 +10,5 @@
   stroke-linejoin="round"
 >
   <circle cx="11" cy="11" r="8" />
-  <line x1="21" x2="16.65" y1="21" y2="16.65" />
+  <path d="m21 21-4.3-4.3" />
 </svg>

icons/shapes.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "triangle",
+    "equilateral",
+    "square",
+    "circle",
+    "classification",
+    "different",
+    "collection",
+    "toy",
+    "blocks",
+    "learning"
+  ],
+  "categories": [
+    "shapes",
+    "gaming"
+  ]
+}

icons/shapes.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z" />
+  <rect width="7" height="7" x="3" y="14" rx="1" />
+  <circle cx="17.5" cy="17.5" r="3.5" />
+</svg>

icons/toggle-left.json

@@ -8,10 +8,12 @@
   "tags": [
     "on",
     "off",
-    "switch"
+    "switch",
+    "boolean"
   ],
   "categories": [
     "layout",
-    "account"
+    "account",
+    "development"
   ]
 }

icons/toggle-right.json

@@ -8,10 +8,12 @@
   "tags": [
     "on",
     "off",
-    "switch"
+    "switch",
+    "boolean"
   ],
   "categories": [
     "layout",
-    "account"
+    "account",
+    "development"
   ]
 }

icons/x-circle.json

@@ -11,12 +11,18 @@
     "remove",
     "times",
     "clear",
-    "maths",
+    "error",
+    "incorrect",
+    "wrong",
+    "mistake",
+    "failure",
+    "linter",
     "multiply",
     "multiplication"
   ],
   "categories": [
     "maths",
-    "shapes"
+    "shapes",
+    "development"
   ]
 }

icons/x-circle.svg

@@ -10,6 +10,6 @@
   stroke-linejoin="round"
 >
   <circle cx="12" cy="12" r="10" />
-  <line x1="15" x2="9" y1="9" y2="15" />
-  <line x1="9" x2="15" y1="9" y2="15" />
+  <path d="m15 9-6 6" />
+  <path d="m9 9 6 6" />
 </svg>

icons/x-octagon.svg

@@ -10,6 +10,6 @@
   stroke-linejoin="round"
 >
   <polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2" />
-  <line x1="15" x2="9" y1="9" y2="15" />
-  <line x1="9" x2="15" y1="9" y2="15" />
+  <path d="m15 9-6 6" />
+  <path d="m9 9 6 6" />
 </svg>

icons/x-square.svg

@@ -10,6 +10,6 @@
   stroke-linejoin="round"
 >
   <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
-  <line x1="9" x2="15" y1="9" y2="15" />
-  <line x1="15" x2="9" y1="9" y2="15" />
+  <path d="m15 9-6 6" />
+  <path d="m9 9 6 6" />
 </svg>

icons/x.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <line x1="18" x2="6" y1="6" y2="18" />
-  <line x1="6" x2="18" y1="6" y2="18" />
+  <path d="M18 6 6 18" />
+  <path d="m6 6 12 12" />
 </svg>