feat(lab): add hand-gear icon (#2327 )

* feat(icons): add hand-gear icon * fix(icons): add danielbayley as co-contributor (hand design) * fix(icons): fix gear centering * Add empty use-cases field to hand-gear.json * Update icons/hand-gear.json Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update icons/hand-gear.json Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * feat(lab): moved `hand-gear` icon to lab Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
feat(docs): added "How to use Lucide icons" section to resources (#4829 )
2026-11-11 13:28:19 +00:00 · 2026-09-10 16:45:49 +02:00 · 2026-09-10 16:07:18 +02:00 · 2026-09-10 15:34:39 +02:00 · 2026-09-10 15:28:15 +02:00 · 2026-09-10 12:47:06 +02:00
137 changed files with 2416 additions and 924 deletions
@@ -10,3 +10,4 @@ touchpad
 ungroup
 toc
 sunlounger
+monstera
@@ -98,6 +98,7 @@ export default defineConfig({
        text: 'Resources',
        items: [
          ...resourcesSidebar[0].items,
+          { text: 'How to use icons', link: '/how-to/' },
          { text: 'Contributing icons', link: '/contribute/icons/' },
        ],
      },
@@ -5,6 +5,17 @@ import type { RenderRule } from 'markdown-it/lib/renderer.mjs';
 import container from 'markdown-it-container';

 type ContainerArgs = [typeof container, string, { render: RenderRule }];
+type GuidanceType = 'do' | 'dont' | 'caution';
+
+const isGuidanceOpenToken = (type: string) =>
+  type === 'container_do_open' ||
+  type === 'container_dont_open' ||
+  type === 'container_caution_open';
+
+const isGuidanceCloseToken = (type: string) =>
+  type === 'container_do_close' ||
+  type === 'container_dont_close' ||
+  type === 'container_caution_close';

 const parseInfo = (info: string, marker: string) => info.trim().slice(marker.length).trim();

@@ -81,12 +92,12 @@ const hasTopLevelContent = (tokens: Parameters<RenderRule>[0], index: number) =>
      return false;
    }

-    if (token.type === 'container_do_open' || token.type === 'container_dont_open') {
+    if (isGuidanceOpenToken(token.type)) {
      guidanceDepth += 1;
      continue;
    }

-    if (token.type === 'container_do_close' || token.type === 'container_dont_close') {
+    if (isGuidanceCloseToken(token.type)) {
      guidanceDepth -= 1;
      continue;
    }
@@ -107,7 +118,7 @@ const hasGuidance = (tokens: Parameters<RenderRule>[0], index: number) => {
      return false;
    }

-    if (token.type === 'container_do_open' || token.type === 'container_dont_open') {
+    if (isGuidanceOpenToken(token.type)) {
      return true;
    }
  }
@@ -123,7 +134,7 @@ const isFirstGuidance = (tokens: Parameters<RenderRule>[0], index: number) => {
      return true;
    }

-    if (token.type === 'container_do_open' || token.type === 'container_dont_open') {
+    if (isGuidanceOpenToken(token.type)) {
      return false;
    }
  }
@@ -141,6 +152,12 @@ const getExampleOpenIndex = (tokens: Parameters<RenderRule>[0], index: number) =
  return index;
 };

+const labels: Record<GuidanceType, string> = {
+  do: `<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" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg> Do`,
+  dont: `<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" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> Don't`,
+  caution: `<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" class="lucide lucide-exclamation-point"><path d="M12 20 L12 20" /><path d="M12 4 L12 15" /></svg> Caution`,
+};
+
 export default function examplePlugin(md: MarkdownIt) {
  const escapeHtml = md.utils.escapeHtml;

@@ -170,7 +187,7 @@ export default function examplePlugin(md: MarkdownIt) {
    },
  ];

-  const createGuidanceContainer = (type: 'do' | 'dont'): ContainerArgs => [
+  const createGuidanceContainer = (type: GuidanceType): ContainerArgs => [
    container,
    type,
    {
@@ -185,10 +202,7 @@ export default function examplePlugin(md: MarkdownIt) {
            hasTopLevelContent(tokens, exampleOpenIndex) && isFirstGuidance(tokens, idx)
              ? '</div>\n'
              : '';
-          const label =
-            type === 'do'
-              ? `<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" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg> Do`
-              : `<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" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> Don't`;
+          const label = labels[type];

          return `${contentClose}<figure class="example-guidance example-guidance--${type}">${media}<figcaption class="example-guidance__caption"><div class="example-guidance__label">${label}</div>\n`;
        }
@@ -201,4 +215,5 @@ export default function examplePlugin(md: MarkdownIt) {
  md.use(...createExampleContainer());
  md.use(...createGuidanceContainer('do'));
  md.use(...createGuidanceContainer('dont'));
+  md.use(...createGuidanceContainer('caution'));
 }
@@ -94,7 +94,7 @@ export const angularSidebar = [
    items: [
      {
        text: 'Accessibility in depth',
-        link: '/guide/accessibility',
+        link: '/how-to/accessibility',
        desc: 'Accessibility best practices',
      },
      {
@@ -69,7 +69,7 @@ export const astroSidebar = [
    items: [
      {
        text: 'Accessibility in depth',
-        link: '/guide/accessibility',
+        link: '/how-to/accessibility',
        desc: 'Accessibility best practices',
      },
      {
@@ -36,6 +36,7 @@ const sidebar: Sidebar = {
  '/guide/react-native/': reactNativeSidebar,
  '/guide/angular/': angularSidebar,
  '/guide/static/': lucideStaticSidebar,
+  '/how-to': resourcesSidebar,
  '/community': resourcesSidebar,
  '/contribute': resourcesSidebar,
  '/license': resourcesSidebar,
@@ -79,7 +79,7 @@ export const lucideSidebar = [
    items: [
      {
        text: 'Accessibility in depth',
-        link: '/guide/accessibility',
+        link: '/how-to/accessibility',
        desc: 'Accessibility best practices',
      },
    ],
@@ -89,7 +89,7 @@ export const preactSidebar = [
    items: [
      {
        text: 'Accessibility in depth',
-        link: '/guide/accessibility',
+        link: '/how-to/accessibility',
        desc: 'Accessibility best practices',
      },
      {
@@ -100,7 +100,7 @@ export const reactSidebar = [
    items: [
      {
        text: 'Accessibility in depth',
-        link: '/guide/accessibility',
+        link: '/how-to/accessibility',
        desc: 'Accessibility best practices',
      },
      {
@@ -29,6 +29,25 @@ export const resourcesSidebar = [
      },
    ],
  },
+  {
+    text: 'How to use Lucide icons',
+    items: [
+      {
+        text: 'Getting started',
+        link: '/how-to/',
+      },
+      {
+        text: 'Accessibility guide',
+        link: '/how-to/accessibility',
+        desc: 'Learn how to make icons readable, understandable, and usable with assistive technology.',
+      },
+      {
+        text: 'How to pick the right icon',
+        link: '/how-to/icon-guide',
+        desc: 'Learn how to decide when icons belong in an interface and how to pick symbols people are likely to recognize.',
+      },
+    ],
+  },
  {
    text: 'Contributing icons',
    items: [
@@ -90,7 +90,7 @@ export const solidSidebar = [
    items: [
      {
        text: 'Accessibility in depth',
-        link: '/guide/accessibility',
+        link: '/how-to/accessibility',
        desc: 'Accessibility best practices',
      },
      {
@@ -75,7 +75,7 @@ export const lucideStaticSidebar = [
    items: [
      {
        text: 'Accessibility in depth',
-        link: '/guide/accessibility',
+        link: '/how-to/accessibility',
        desc: 'Accessibility best practices',
      },
      {
@@ -79,7 +79,7 @@ export const svelteSidebar = [
    items: [
      {
        text: 'Accessibility in depth',
-        link: '/guide/accessibility',
+        link: '/how-to/accessibility',
        desc: 'Accessibility best practices',
      },
      {
@@ -85,7 +85,7 @@ export const vueSidebar = [
    items: [
      {
        text: 'Accessibility in depth',
-        link: '/guide/accessibility',
+        link: '/how-to/accessibility',
        desc: 'Accessibility best practices',
      },
      {
@@ -18,7 +18,7 @@ const pickIcons = [
  'clapperboard',
  'tool-case',
  'printer',
-  'album',
+  'square-bookmark',
  'pencil-ruler',
  'calendar',
  'brain',
@@ -286,6 +286,10 @@ html {
  --example-guidance-label-bg: var(--vp-c-danger-1);
 }

+.example-guidance--caution {
+  --example-guidance-label-bg: var(--vp-c-warning-1);
+}
+
@media (min-width: 640px) {
  .example-block {
    display: grid;
@@ -17,7 +17,7 @@ This guide explains how to design and prepare icons for Lucide.
 ## What this guide covers

 <OverviewLinkGrid>
-  <OverviewLink v-for="item in resourcesSidebar[2].items.slice(1, -1)" :key="item.link" :href="item.link" :title="item.text" :desc="item.desc"/>
+  <OverviewLink v-for="item in resourcesSidebar[3].items.slice(1, -1)" :key="item.link" :href="item.link" :title="item.text" :desc="item.desc"/>
 </OverviewLinkGrid>

 ## Use your preferred design tool
@@ -1,237 +0,0 @@
---
-title: Accessibility
-description: Learn how to make your icons accessible to all users, including those with disabilities.
---
-
-# Accessibility in depth
-
-Icons are pictures that show what something means without using words. They can be very helpful
-because they can quickly give information.
-
-However, not everyone can understand them easily. When using icons it is very important to consider
-the following aspects of accessibility.
-
-::: info
-By default, we hide icons from screen readers using `aria-hidden="true"`.
-You can make them accessible yourself by following the guidelines below.
-:::
-
-## Provide visible labels
-
-Icons are a helpful tool to improve perception, but they aren't a replacement for text.
-
-In most cases, it is probably a good idea to also provide a textual representation of your icon's
-function.
-
-<!--@include: ../../docs/images/a11y/visible-labels.svg -->
-
-## Contrast
-
-Ensure there's enough contrast between the icon and its background so that it's visible to people
-with low vision or color vision deficiencies.
-
-We recommend
-following [WCAG 2.1 SC 1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html).
-
-<!--@include: ../../docs/images/a11y/contrast.svg -->
-
-## Use of color
-
-Avoid relying solely on color to convey meaning in icons, as some users may have color blindness.
-Instead, use additional visual cues like shape, shading or text.
-
-<!--@include: ../../docs/images/a11y/use-of-color.svg -->
-
-## Interactivity
-
-Ensure that interactive icons are accessible via keyboard navigation and provide clear feedback when
-activated.
-
-<!--@include: ../../docs/images/a11y/interactivity.svg -->
-
-In most cases this is easily done by wrapping them in icon buttons.
-
-## Minimum target size
-
-Small targets can be difficult to click or touch, if your icon is interactive, we recommend that it
-should have a minimum target size of 44×44 pixels.
-
-<!--@include: ../../docs/images/a11y/target-size.svg -->
-
-In practice, this doesn't necessarily mean that the icon itself should be this large, only its
-interactive wrapper element.
-
-## Meaningfulness
-
-Icons should represent concepts or actions in a universally understandable way. Avoid using abstract
-or ambiguous, or culture-specific symbols that might confuse some users.
-
-<!--@include: ../../docs/images/a11y/meaningfulness.svg -->
-
-## Consistency
-
-Maintain consistency in icon design and usage across your interface to help users learn and
-understand their meanings more easily.
-
-<!--@include: ../../docs/images/a11y/consistency.svg -->
-
-## Text Alternatives
-
-You may have to provide text labels or alternative text descriptions for icons, especially for
-screen readers used by people with visual impairments.
-
-However: descriptions should only be provided to standalone icons that aren't purely decorative, as
-providing accessible names to non-functional elements only increases clutter when using screen
-readers.
-
-### On standalone icons
-
-Icons are usually very unlikely to stand on their own with no semantically meaningful wrapper
-element. In most cases they will be part of a badge, button (including icon buttons), navigation
-item or other interactive UI element.
-
-::: warning
-In case some of your icons stand alone, and they serve a non-decorative function, make sure to
-provide the appropriate accessible label for them.
-:::
-
-<!--@include: ../../docs/images/a11y/alttext-standalone.svg -->
-
-In general try to avoid using functional icons with no interactivity, we recommend that:
-
-1) you either add a visible description next to them, or
-2) place them in badges, labels or on buttons, and at least add a tooltip to them.
-
-In any such case, it is preferred that the accessible name be provided for these interactive
-elements (badges, buttons, nav items etc.) only, _not_ the icons themselves.
-
-### On buttons
-
-Do not provide an accessible label to icons when used on a button, as this label will be read out by
-screen readers, leading to nonsensical text.
-
-<!--@include: ../../docs/images/a11y/alttext-buttons.svg -->
-
-
-::: details Code examples
-
-```tsx
-// Don't do this
-<button>
-  <Plus aria-label="Plus icon"/>
-  Add document
-</button>
-
-// Do this, just leave it
-<button>
-  <Plus/>
-  Add document
-</button>
-```
-
-:::
-
-### On icon buttons
-
-Icon buttons are buttons that do not contain any visible text apart from the icon itself (think of
-the close button of a dialog for example).
-
-As previously stated, you should provide your accessible label on the icon button itself, not the
-contained icon.
-
-<!--@include: ../../docs/images/a11y/alttext-iconbuttons.svg -->
-
-::: details Code examples
-
-```tsx
-// Don't do this
-<button class="btn-icon">
-  <House/>
-</button>
-
-// Don't do this either
-<button class="btn-icon">
-  <House aria-label="Home icon"/>
-</button>
-
-// This works but might not be the best solution, see below
-<button aria-label="Go to home" class="btn-icon">
-  <House/>
-</button>
-
-// Do this instead
-<button class="btn-icon">
-  <House/>
-  <span class="visually-hidden">Go to home</span>
-</button>
-```
-
-:::
-
-## A note on `aria-label`
-
-Although you could provide accessible labels to your elements via the `aria-label` attribute, we
-generally recommend avoiding this and instead suggest that you use your chosen CSS framework's "
-visually hidden" utility whenever possible. You can
-[read more about why `aria-label` might not be the best solution](https://gomakethings.com/revisting-aria-label-versus-a-visually-hidden-class/).
-
-### Example - Radix UI
-
-Use [Radix UI's built-in accessible icon utility component](https://www.radix-ui.com/primitives/docs/utilities/accessible-icon).
-
-```tsx
-import { ArrowRightIcon } from 'lucide-react';
-import { AccessibleIcon } from '@radix-ui/react-accessible-icon';
-
-<AccessibleIcon label="Next item">
-  <ArrowRightIcon />
-</AccessibleIcon>
-```
-
-### Example - Bootstrap
-
-```html
-
-<div>
-  <i data-lucide="phone" aria-hidden="true"></i>
-  <span class="visually-hidden">Phone number</span>
-</div>
-```
-
-### Example - Tailwind CSS
-
-```html
-
-<div>
-  <i data-lucide="phone" aria-hidden="true"></i>
-  <span class="sr-only">Phone number</span>
-</div>
-```
-
-If you're not sure, you may consider learning more
-about [how to hide content.](https://www.a11yproject.com/posts/how-to-hide-content/)
-
-## Further resources
-
-We also recommend checking out the following resources about accessibility:
-
- [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG21/)
- [Web Accessibility Initiative (WAI)](https://www.w3.org/WAI/)
- [Learn accessibility on web.dev](https://web.dev/learn/accessibility)
- [Inclusive Components](https://inclusive-components.design/)
- [A11yTalks](https://www.a11ytalks.com/)
- [A11y automation tracker](https://a11y-automation.dev/)
- [The A11Y Project](https://www.a11yproject.com/)
-
-<style>
-svg.a11y-example {
-  max-width: calc(100% + 48px);
-  margin: 0 -24px;
-}
-@media (min-width: 480px) {
-  svg.a11y-example {
-    margin: 0;
-    max-width: 100%;
-  }
-}
-</style>
@@ -17,7 +17,7 @@ Most of the time, icons are used purely for decoration or visual reinforcement.

 For a broader explanation of this, and other best practices on how to use icons accessibly in your application, please refer to our detailed guide on accessibility:

-<OverviewLink href="/guide/accessibility" title="Accessible Icons" desc="Best practices for accessible icons in your application."/>
+<OverviewLink href="/how-to/accessibility" title="Accessible Icons" desc="Best practices for accessible icons in your application."/>

 Only if an icon **conveys essential meaning on its own** should it be made accessible. The sections below explain how to do that in Angular.

@@ -17,7 +17,7 @@ Most of the time, icons are used purely for decoration or visual reinforcement.

 For a broader explanation of this, and other best practices on how to use icons accessibly in your application, please refer to our detailed guide on accessibility:

-<OverviewLink href="/guide/accessibility" title="Accessible Icons" desc="Best practices for accessible icons in your application."/>
+<OverviewLink href="/how-to/accessibility" title="Accessible Icons" desc="Best practices for accessible icons in your application."/>

 Only if an icon **conveys essential meaning on its own** should it be made accessible. The sections below explain how to do that in Astro.

@@ -26,7 +26,7 @@ In addition to design, code is also important. Assets like icons can significant

 Icons are pictures that show what something means without using words. They can be very helpful because they can quickly give information.

-However, not everyone can understand them easily. Read more about [how to use Lucide in an accessible way](./accessibility.md).
+However, not everyone can understand them easily. Read more about [how to use Lucide in an accessible way](../how-to/accessibility.md).

 ## Official Packages

@@ -16,7 +16,7 @@ Most of the time, icons are used purely for decoration or visual reinforcement.

 For a broader explanation of this, and other best practices on how to use icons accessibly in your application, please refer to our detailed guide on accessibility:

-<OverviewLink href="/guide/accessibility" title="Accessible Icons" desc="Best practices for accessible icons in your application."/>
+<OverviewLink href="/how-to/accessibility" title="Accessible Icons" desc="Best practices for accessible icons in your application."/>

 Only if an icon **conveys essential meaning on its own** should it be made accessible. The sections below explain how to do that in your app.

@@ -17,7 +17,7 @@ Most of the time, icons are used purely for decoration or visual reinforcement.

 For a broader explanation of this, and other best practices on how to use icons accessibly in your application, please refer to our detailed guide on accessibility:

-<OverviewLink href="/guide/accessibility" title="Accessible Icons" desc="Best practices for accessible icons in your application."/>
+<OverviewLink href="/how-to/accessibility" title="Accessible Icons" desc="Best practices for accessible icons in your application."/>

 Only if an icon **conveys essential meaning on its own** should it be made accessible. The sections below explain how to do that in Preact.

@@ -16,7 +16,7 @@ Most of the time, icons are used purely for decoration or visual reinforcement.

 For a broader explanation of this, and other best practices on how to use icons accessibly in your application, please refer to our detailed guide on accessibility:

-<OverviewLink href="/guide/accessibility" title="Accessible Icons" desc="Best practices for accessible icons in your application."/>
+<OverviewLink href="/how-to/accessibility" title="Accessible Icons" desc="Best practices for accessible icons in your application."/>

 Only if an icon **conveys essential meaning on its own** should it be made accessible. The sections below explain how to do that in React.

@@ -16,7 +16,7 @@ Most of the time, icons are used purely for decoration or visual reinforcement.

 For a broader explanation of this, and other best practices on how to use icons accessibly in your application, please refer to our detailed guide on accessibility:

-<OverviewLink href="/guide/accessibility" title="Accessible Icons" desc="Best practices for accessible icons in your application."/>
+<OverviewLink href="/how-to/accessibility" title="Accessible Icons" desc="Best practices for accessible icons in your application."/>

 Only if an icon **conveys essential meaning on its own** should it be made accessible. The sections below explain how to do that in Solid.

@@ -17,7 +17,7 @@ Most of the time, icons are used purely for decoration or visual reinforcement.

 For a broader explanation of this, and other best practices on how to use icons accessibly in your application, please refer to our detailed guide on accessibility:

-<OverviewLink href="/guide/accessibility" title="Accessible Icons" desc="Best practices for accessible icons in your application."/>
+<OverviewLink href="/how-to/accessibility" title="Accessible Icons" desc="Best practices for accessible icons in your application."/>

 Only if an icon **conveys essential meaning on its own** should it be made accessible. The sections below explain how to do that in Svelte.

@@ -63,7 +63,7 @@ Also, a `llms.txt` is now available for LLMs to use.

 We have improved the accessibility of our icons by setting `aria-hidden` to `true` by default. This change ensures that screen readers will ignore icons that are purely decorative, improving the overall accessibility of your applications. If you need to make an icon accessible, you can provide an appropriate `aria-label` or add a `title` attribute to the icon element.

-See our [accessibility in-depth guide](/guide/accessibility) for more details and best practices on making your icons accessible.
+See our [accessibility in-depth guide](/how-to/accessibility) for more details and best practices on making your icons accessible.

 ## Removed UMD build, only ESM and CJS now

@@ -17,7 +17,7 @@ Most of the time, icons are used purely for decoration or visual reinforcement.

 For a broader explanation of this, and other best practices on how to use icons accessibly in your application, please refer to our detailed guide on accessibility:

-<OverviewLink href="/guide/accessibility" title="Accessible Icons" desc="Best practices for accessible icons in your application."/>
+<OverviewLink href="/how-to/accessibility" title="Accessible Icons" desc="Best practices for accessible icons in your application."/>

 Only if an icon **conveys essential meaning on its own** should it be made accessible. The sections below explain how to do that in Vue.

@@ -0,0 +1,271 @@
+---
+title: Accessibility
+description: Learn how to make your icons accessible to all users, including those with disabilities.
+---
+
+<script setup>
+import {
+  menu,
+  pawPrint,
+  shirt,
+  umbrella,
+  userRoundCog,
+} from '~/.vitepress/data/iconNodes';
+import LucideIcon from '~/.vitepress/theme/components/base/LucideIcon.vue';
+</script>
+
+# Accessibility in depth
+
+Icons are pictures that convey meaning without using words.
+
+They can help people scan an interface, recognize actions, and understand status quickly.
+
+Not everyone understands icons easily. Use the following accessibility rules when you add icons to an interface.
+
+::: tip
+Lucide icons are hidden from screen readers by default with `aria-hidden="true"`.
+
+Add accessible labels when icons carry meaning or act as controls.
+:::
+
+## Provide visible labels
+
+Icons can improve scanning, but they aren't a replacement for text.
+
+Text helps people understand actions and navigation more reliably than icons alone.
+
+:::: example
+::: do <span aria-hidden="true">On this page <LucideIcon name="menu" :iconNode="menu" /></span>
+Provide a written description of your interactive elements.
+:::
+::: dont <LucideIcon name="menu" :iconNode="menu" />
+Don't rely on icons alone to communicate what elements do.
+:::
+::::
+
+## Provide enough contrast
+
+Use enough contrast between an icon and its background. Low contrast makes icons harder to see for people with low vision or color vision deficiencies.
+
+Follow [WCAG 2.1 SC 1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) when contrast requirements apply.
+
+:::: example
+::: do ../images/a11y/contrast_do.svg?raw=true
+Use a contrast ratio of at least 4.5:1.
+:::
+::: dont ../images/a11y/contrast_dont.svg?raw=true
+Don't use low contrast.
+:::
+::::
+
+## Do not rely on color alone
+
+Use non-color cues like shape, shading, or text to mark state, status, and validity. Color can support meaning, but it must not be the only cue.
+
+:::: example
+::: do ../images/a11y/state_do.svg?raw=true
+Mark state with non-color visual cues too.
+:::
+::: dont ../images/a11y/state_dont.svg?raw=true
+Don't mark state only with color.
+:::
+::::
+
+## Make interactive icons focusable
+
+Wrap interactive icons in semantic elements. Icons that perform actions need keyboard access and clear feedback when activated.
+
+:::: example
+::: do ../images/a11y/interactive_icons_do.svg?raw=true
+Wrap interactive icons in semantic elements, such as buttons, so they are focusable.
+:::
+::: dont ../images/a11y/interactive_icons_dont.svg?raw=true
+Don't leave interactive icons unable to be focused.
+:::
+::::
+
+## Use a large enough target size
+
+Use a large enough target size for interactive icon controls. Small targets can be difficult to click or tap.
+
+:::: example
+::: do ../images/a11y/target_size_do.svg?raw=true
+Keep the target size at a minimum of 44 by 44 pixels.
+:::
+::: dont ../images/a11y/target_size_dont.svg?raw=true
+Don't make the target size smaller than 44 by 44 pixels.
+:::
+::::
+
+The icon itself does not need to be 44 by 44 pixels. The interactive wrapper needs to meet the target size.
+
+## Choose universal symbols when possible
+
+Choose icons that are widely recognized for your use case. Avoid icons that only make sense to a narrow audience.
+
+:::: example
+::: do <span aria-hidden="true"><LucideIcon name="shirt" :iconNode="shirt" /> Clothing</span>
+Pick icons that are universal symbols for your use case.
+:::
+::: dont <span aria-hidden="true"><LucideIcon name="umbrella" :iconNode="umbrella" /> Clothing</span>
+Don't pick icons that are not universally recognizable for your use case.
+:::
+::::
+
+## Avoid cultural or linguistic shortcuts
+
+Choose icons with a clear connection to the concept. Puns, idioms, and culture-specific references can be difficult to understand or translate.
+
+:::: example
+::: do <span aria-hidden="true"><LucideIcon name="user-round-cog" :iconNode="userRoundCog" /> Role bearers</span>
+Pick icons with a clear connection to the concept you want to represent.
+:::
+::: dont <span aria-hidden="true"><LucideIcon name="paw-print" :iconNode="pawPrint" /> Role bearers</span>
+Don't pick icons based on puns or other cultural or linguistic cues.
+:::
+::::
+
+## Use different icons for different meanings
+
+Use different icons for different meanings. Reusing one icon for unrelated concepts makes the interface harder to learn.
+
+:::: example
+::: do ../images/a11y/distinct_use_case_do.svg?raw=true
+Use different icons for distinct purposes or meanings.
+:::
+::: dont ../images/a11y/distinct_use_case_dont.svg?raw=true
+Don't use the same icon for multiple distinct purposes or meanings, especially in the same context.
+:::
+::::
+
+## Use the same icon for the same meaning
+
+Use the same icon for the same meaning. Consistent icon use helps people recognize familiar actions across an interface.
+
+:::: example
+::: do ../images/a11y/same_use_case_do.svg?raw=true
+Use the same icon for the same purpose or function.
+:::
+::: dont ../images/a11y/same_use_case_dont.svg?raw=true
+Don't use different icons for the same purpose or function.
+:::
+::::
+
+## Hide decorative icons from assistive technology
+
+Keep decorative icons hidden from screen readers. Decorative icons repeat nearby text or add visual styling without adding meaning.
+
+:::: example
+::: do ../images/a11y/decorative_icons_do.svg?raw=true
+Omit `aria-label` on decorative icons.
+:::
+::: dont ../images/a11y/decorative_icons_dont.svg?raw=true
+Don't provide accessible labels to decorative icons.
+:::
+::::
+
+## Label functional standalone icons carefully
+
+Avoid standalone functional icons when possible. If an icon carries meaning without nearby text or an interactive wrapper, give that icon an accessible label.
+
+:::: example
+::: do ../images/a11y/functional_icons_do.svg?raw=true
+Provide an accessible label for functional icons, but avoid standalone functional icons when possible.
+:::
+::: dont ../images/a11y/functional_icons_dont.svg?raw=true
+Don't provide an accessible label for purely decorative icons.
+:::
+::::
+
+In many cases, add visible text, place the icon inside a badge or button, or add a tooltip to the meaningful wrapper instead.
+
+## Label icon buttons on the button
+
+Give icon buttons an accessible name. Put the name on the button or in visually hidden text inside the button, not on the icon.
+
+:::: example
+::: do ../images/a11y/icon_button_do.svg?raw=true
+Provide the accessible label for icon buttons themselves.
+:::
+::: dont ../images/a11y/icon_button_dont.svg?raw=true
+Don't provide the accessible label for icons on icon buttons.
+:::
+::::
+
+::: details Code examples
+
+```tsx
+// Don't do this
+<button className="btn-icon">
+  <House />
+</button>
+
+// Don't do this either
+<button className="btn-icon">
+  <House aria-label="Home icon" />
+</button>
+
+// This works, but visually hidden text is usually more reliable
+<button aria-label="Go to home" className="btn-icon">
+  <House />
+</button>
+
+// Prefer this
+<button className="btn-icon">
+  <House />
+  <span className="visually-hidden">Go to home</span>
+</button>
+```
+
+:::
+
+## A note on `aria-label`
+
+You can provide accessible labels with `aria-label`, but visually hidden text is often more reliable.
+
+Read [why `aria-label` might not be the best solution](https://gomakethings.com/revisting-aria-label-versus-a-visually-hidden-class/) for more context.
+
+### Radix UI
+
+Use [Radix UI's built-in accessible icon utility component](https://www.radix-ui.com/primitives/docs/utilities/accessible-icon).
+
+```tsx
+import { ArrowRightIcon } from 'lucide-react';
+import { AccessibleIcon } from '@radix-ui/react-accessible-icon';
+
+<AccessibleIcon label="Next item">
+  <ArrowRightIcon />
+</AccessibleIcon>;
+```
+
+### Bootstrap
+
+```html
+<div>
+  <i data-lucide="phone" aria-hidden="true"></i>
+  <span class="visually-hidden">Phone number</span>
+</div>
+```
+
+### Tailwind CSS
+
+```html
+<div>
+  <i data-lucide="phone" aria-hidden="true"></i>
+  <span class="sr-only">Phone number</span>
+</div>
+```
+
+If you are not sure which hiding technique to use, read [how to hide content](https://www.a11yproject.com/posts/how-to-hide-content/).
+
+## Further resources
+
+Use these accessibility resources:
+
+- [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG21/)
+- [Web Accessibility Initiative (WAI)](https://www.w3.org/WAI/)
+- [Learn accessibility on web.dev](https://web.dev/learn/accessibility)
+- [Inclusive Components](https://inclusive-components.design/)
+- [A11yTalks](https://www.a11ytalks.com/)
+- [A11y automation tracker](https://a11y-automation.dev/)
+- [The A11Y Project](https://www.a11yproject.com/)
@@ -0,0 +1,190 @@
+---
+title: How to pick the right icon
+description: Learn when to use icons, when to avoid them, and how to choose icons that make interfaces easier to understand.
+---
+
+<script setup>
+import {
+  badgeCheck,
+  badgeX,
+  check,
+  download,
+  folderSearch,
+  globe,
+  house,
+  imageOff,
+  layoutList,
+  mail,
+  menu,
+  plus,
+  search,
+  settings,
+  smartphone,
+  sparkles,
+  trash,
+  x,
+} from '~/.vitepress/data/iconNodes';
+const customCheck = [['path', {d: 'M19.05 5.253c.26.1.42.352.63.571.159.166.547.536.672.69.088.11.158.28.257.397-.075.202-.212.133-.453.038q-.315.238-.625.485l-.208-.159c-.14-.016-.045.182-.058.253-.135.685-1.145 1.03-1.61 1.376-.101.074-.32.424-.474.382-.04-.012-.133-.101-.154-.09q-.151.298-.293.598c-.446.156-.638.591-.906.928-.728.913-1.366 1.874-2.074 2.787-.138.178-.225.463-.403.606-.074.059-.265-.029-.208.158l-.14-.092c-.005.125.06.254.004.357a2.2 2.2 0 0 1-.259.37c-.034.031-.111-.041-.135-.006-.04.062-.007.272-.064.356-.052.076-.237.135-.262.203-.091.247-.092.572-.282.774-.052.054-.217.06-.228.081-.018.043.084.127.081.162-.014.178-.278.295-.367.42-.29.41-.527.885-.818 1.293-.076.107-.166.248-.264.392l-.613 1.273-1.16-1.208c-.135-.19-.27-.393-.326-.558-.02-.061.103-.138.07-.178-.035-.044-.13-.008-.152-.024-.158-.11-.489-.358-.524-.553-.006-.037.064-.128.052-.144-.007-.007-.08.026-.107.007-.232-.164-.33-.343-.49-.56-.312-.415-.828-.734-1.167-1.143-.074-.09.013-.309 0-.318-.031-.02-.147.077-.225.058-.26-.062-.407-.385-.632-.459-.112-.037-.343.032-.452.008-.087-.02-.208-.189-.285-.139-.045.031-.141.164-.173.168-.03.002-.007-.097-.028-.117-.088-.08-.091-.16-.165-.245-.112-.133-.569-.21-.304-.827l.008-.019c.053-.117.15-.228.215-.358.066-.13.444-.992.535-1.009.132-.017.256.314.309.331.037.012.12-.042.172-.03.165.034.205.13.449.005q-.019.203-.044.403c.093-.009.1.188.142.204.034.014.105-.055.14-.038.038.02.034.143.106.173.117.05.282-.14.364-.121.085.02.103.205.237.195l.081-.042.093-.167c.059.01-.002.126.034.157.043.036.14-.042.17-.018.024.02-.004.122.03.143.051.03.131-.088.172-.088.02 0 .246.089.257.097.08.061-.04.214.009.279.134.177.404.211.592.307a.44.44 0 0 1 .187.201c-.443.26-.494.747-.035.114-.006.148.19.048.233.14.026.059-.021.165.04.224.11.104.448.016.077.427.192.062.147.31.55.03.054.014-.083.296-.079.36.007.062.15.423.182.473.034.05.095.134.16.146.081.013.498-.275.116.19.12.07.138.118.162.255.003.025-.063.082-.055.092.017.02.095.014.13.046.06.052-.057.202.158.02l.102.016c-.002-.055-.01-.114-.017-.165-.004-.02-.062-.059-.07-.087-.017-.07.128-.127-.067-.248l.239-.002q-.025-.079-.048-.158l-.181-.116c.244.073.228-.075.308-.09.017-.001.1.05.141.036.049-.017.066-.096.117-.119l-.245-.226c-.003-.103.256.03.303-.001a1 1 0 0 0 .081-.167c0-.088-.217-.207-.058-.354.029-.025.117-.005.14-.032.038-.048-.023-.306-.164-.417.226.063.258-.149.345-.163.026-.003.146.072.202.045.045-.022.013-.179.06-.214.05-.036.159.012.181-.004.02-.015-.046-.089-.027-.117.062-.086.244-.078.294-.144.07-.097-.105-.346-.152-.502.03-.01.095.003.11-.018.193-.262.448-.534.69-.766.112-.107.648-.183.066-.485-.06-.11.38-.267.428-.323.047-.057-.01-.173.024-.22.101-.142.244-.19.295-.42.013-.06-.058-.193-.037-.218.028-.029.157.02.196-.015.09-.084.2-.288.292-.364.017-.014.112.054.16.053.185-.001.26-.11-.042-.33.261.017.204-.216.288-.332.177-.246.607-.597.673-.896.04-.19-.083-.303.191-.382.061-.018.131-.027.204-.048.174-.05.491.067.31-.278.19-.053.24-.199.553-.058l-.127-.196.04-.048.167.144c.12-.089.053-.437.148-.523.16-.145.649-.427.864-.481.114-.03.018-.153.273.051l.01-.097q-.05-.096-.102-.19c.103-.09.297-.11.398-.194.18-.152.34-.528.605-.572.067-.012.215.057.26.02.065-.054-.063-.258.02-.326.142-.118.59-.1.715-.218.038-.035.005-.123.029-.151.099-.122.203-.187.24-.383m-9.145 12.15c-.111.13.148.094.324-.011zm-1.57-2.539c.012-.033-.085-.048-.137-.005-.199.168.085.152.138.005m3.356-1.475q.068.022.133.045l.018-.033q-.093-.06-.186-.124z', fill: 'currentColor', stroke: 'none'}]];
+const customMail = [['path', {fill:"currentColor", stroke: 'none', 'fill-rule': "evenodd", d: "M22 20H2V7.003l10 6.546 10-6.546z M22 5.905 12 11.45 2 5.905V4h20z"}]];
+import LucideIcon from '~/.vitepress/theme/components/base/LucideIcon.vue';
+</script>
+
+# How to pick the right icon
+
+Icons can make an interface easier to scan. They work best when people already understand the symbol or when the icon appears with a clear text label.
+
+Use text instead of an icon when the meaning is complex, abstract, or easy to misunderstand.
+
+## Match the interface style
+
+Use icons with the same visual language in the same interface. Mixed styles can make related controls look unrelated.
+
+:::: example
+::: do <span class="g-4"><LucideIcon name="house" :iconNode="house" size="48" /> <LucideIcon name="plus" :iconNode="plus" size="48" /> <LucideIcon name="check" :iconNode="check" size="48" /> <LucideIcon name="mail" :iconNode="mail" size="48" /></span>
+Use one icon style for related controls.
+:::
+::: dont <span class="g-4"><LucideIcon name="house" :iconNode="house" strokeWidth="1" size="48" /> <LucideIcon name="plus" :iconNode="plus" strokeWidth="3" size="48" /> <LucideIcon name="check" :iconNode="customCheck" size="48" /> <LucideIcon name="mail" :iconNode="customMail" size="48" /></span>
+Don't mix unrelated icon styles in the same interface.
+:::
+::::
+
+## Use familiar icons for familiar actions
+
+Icons work well for common actions and destinations that people already recognize from other interfaces.
+
+:::: example
+::: do <span class="g-4"><LucideIcon name="search" :iconNode="search" size="48" /> <LucideIcon name="house" :iconNode="house" size="48" /> <LucideIcon name="settings" :iconNode="settings" size="48" /> <LucideIcon name="x" :iconNode="x" size="48" /></span>
+Use icons for common actions with widely understood symbols.
+:::
+::: dont <span>"strategy", "optimize", "synergy", "innovation"</span>
+Don't use icons alone for abstract concepts with no common symbol.
+:::
+::::
+
+## Use icons as visual anchors
+
+Icons can help people scan lists, menus, cards, and repeated controls. The icon needs to support the text, not compete with it.
+
+:::: example
+::: do ../images/how-to/visual_anchor_do.svg?raw=true
+Use icons to make associated options easier to scan.
+:::
+::: dont ../images/how-to/visual_anchor_dont.svg?raw=true
+Don't add icons to every line when they only create visual clutter.
+:::
+::::
+
+## Use icons in compact interfaces
+
+Icons can help in tight spaces, such as mobile navigation, toolbars, tables, and compact controls. Keep labels when the icon is not obvious.
+
+:::: example
+::: do ../images/how-to/compact_interfaces_labels_do.svg?raw=true
+Keep labels in all layout variants when space allows.
+:::
+::: caution ../images/how-to/compact_interfaces_labels_dont.svg?raw=true
+Use icon-only controls only when a visible label does not fit.
+
+In these cases, make sure that the label is accessible via hover, focus, or tap.
+:::
+::::
+
+:::: example
+::: do ../images/how-to/compact_interfaces_do.svg?raw=true
+Keep text labels next to icons in compact layouts, even when space is sparse.
+:::
+::: dont ../images/how-to/compact_interfaces_dont.svg?raw=true
+Don't remove labels in compact layouts when the meaning without them is unclear.
+:::
+::::
+
+:::: example
+::: caution ../images/how-to/compact_interfaces_caution_1.svg?raw=true
+Use icon-only controls only when the icon represents a widely understood action.
+:::
+::: caution ../images/how-to/compact_interfaces_caution_2.svg?raw=true
+Use icon-only controls only when the label is available on hover, focus, or tap.
+:::
+::::
+
+## Choose the clearest symbol
+
+Use a familiar symbol when one exists. Novel symbols make people stop and interpret the interface.
+
+:::: example
+::: do <span><LucideIcon name="trash" :iconNode="trash" /> `trash`<br>for deleting an image</span>
+Use a familiar symbol for a familiar action.
+:::
+::: dont <span><LucideIcon name="image-off" :iconNode="imageOff" /> `image-off`<br>for deleting an image</span>
+Don't make people learn a new symbol for a common action.
+:::
+::::
+
+## Match the context, not every detail
+
+Choose the icon that makes the action clearest in context. A more specific icon is better only when the extra detail helps people understand the action.
+
+:::: example
+::: do ../images/how-to/appropriate_context_do.svg?raw=true
+Use clear action icons when the surrounding interface already provides the object context.
+:::
+::: dont ../images/how-to/appropriate_context_dont.svg?raw=true
+Don't add object details when the context already makes the object clear.
+:::
+::::
+
+## Keep icon meaning consistent
+
+Use the same icon for the same meaning, and use different icons for different meanings.
+
+:::: example
+::: do ../images/how-to/consistent_icon_meaning_do.svg?raw=true
+Use different icons for distinct purposes or meanings.
+:::
+::: dont ../images/how-to/consistent_icon_meaning_dont.svg?raw=true
+Don't use the same icon for multiple distinct purposes or meanings.
+:::
+::::
+
+:::: example
+::: do ../images/how-to/consistent_icon_function_do.svg?raw=true
+Use the same icon for the same purpose or function.
+:::
+::: dont ../images/how-to/consistent_icon_function_dont.svg?raw=true
+Don't use different icons for the same purpose or function.
+:::
+::::
+
+## Do not iconize repeated status decoration
+
+Avoid adding an icon to every repeated status marker when color, weight, text, or layout already communicates the state. Repeated status icons can turn useful list structure into visual noise.
+
+:::: example
+::: do ../images/how-to/repeated_status_do.svg?raw=true
+Use the lightest cue that makes the status clear.
+:::
+::: dont ../images/how-to/repeated_status_dont.svg?raw=true
+Don't add repeated status icons when they only restate what the list already shows.
+:::
+::::
+
+## Do not replace built-in control cues
+
+Do not add icons to controls that already show people how they work. Native controls are easier to recognize when they behave and look familiar.
+
+:::: example
+::: do ../images/how-to/native_ui_elements_do.svg?raw=true
+Use the built-in visual cue when the control already communicates its behavior.
+:::
+::: dont ../images/how-to/native_ui_elements_dont.svg?raw=true
+Don't replace native controls with similarly themed interactive icons.
+:::
+::::
+
+<style>
+.g-4 {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+</style>
@@ -0,0 +1,29 @@
+---
+title: How to use Lucide icons
+description: Learn how to use icons in an accessible, user-friendly way
+---
+
+<script setup>
+import OverviewLink from '../.vitepress/theme/components/base/OverviewLink.vue';
+import OverviewLinkGrid from '../.vitepress/theme/components/base/OverviewLinkGrid.vue';
+import { resourcesSidebar } from '../.vitepress/sidebar/resources.ts';
+</script>
+
+# How to use Lucide icons
+
+Icons can make an interface easier to scan, but they only help when their meaning is clear. These guides explain how to choose icons that support the interface, when to pair icons with text, and when the best icon to use is no icon at all.
+
+Use the accessibility guide to make icons readable, understandable, and usable with assistive technology. Use the icon guide to decide when icons belong in an interface and how to pick symbols people are likely to recognize.
+
+## What this guide covers
+
+<OverviewLinkGrid>
+  <OverviewLink v-for="item in resourcesSidebar[2].items.slice(1)" :key="item.link" :href="item.link" :title="item.text" :desc="item.desc"/>
+</OverviewLinkGrid>
+
+## Further resources
+
+- [The no-bullshit guide to icon design and usage](https://erik-engheim.medium.com/the-no-bullshit-guide-to-icon-design-and-usage-40948878dbbb) by Erik Engheim
+- [On icons](https://ia.net/topics/on-icons/) by iA
+- [How to use icons in UI and UX design](https://blog.thenounproject.com/how-to-use-icons-in-ui-and-ux-design-best-practices/) by The Noun Project
+- [UX Myth: Icons enhance usability](https://uxmyths.com/post/715009009/myth-icons-enhance-usability) by UX Myths
@@ -1,20 +0,0 @@
-<svg width="480" height="328" viewBox="0 0 480 328" fill="none" class="a11y-example">
-  <title>In short: use a contrast ratio of at least 4.5:1</title>
-  <rect width="480" height="152" rx="8" style="fill: var(--vp-code-block-bg)" />
-  <rect x="183.5" y="24" width="113" height="56" rx="28" fill="#712CF8"/>
-  <path d="M227.5 46L216.5 57L211.5 52" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M257.893 51.7273C257.893 53.2614 257.616 54.5871 257.062 55.7045C256.509 56.822 255.749 57.6837 254.783 58.2898C253.817 58.8958 252.714 59.1989 251.473 59.1989C250.232 59.1989 249.129 58.8958 248.163 58.2898C247.197 57.6837 246.438 56.822 245.884 55.7045C245.33 54.5871 245.053 53.2614 245.053 51.7273C245.053 50.1932 245.33 48.8674 245.884 47.75C246.438 46.6326 247.197 45.7708 248.163 45.1648C249.129 44.5587 250.232 44.2557 251.473 44.2557C252.714 44.2557 253.817 44.5587 254.783 45.1648C255.749 45.7708 256.509 46.6326 257.062 47.75C257.616 48.8674 257.893 50.1932 257.893 51.7273ZM256.189 51.7273C256.189 50.4678 255.978 49.4048 255.557 48.5384C255.14 47.6719 254.574 47.0161 253.859 46.571C253.149 46.1259 252.354 45.9034 251.473 45.9034C250.592 45.9034 249.795 46.1259 249.08 46.571C248.369 47.0161 247.804 47.6719 247.382 48.5384C246.965 49.4048 246.757 50.4678 246.757 51.7273C246.757 52.9867 246.965 54.0497 247.382 54.9162C247.804 55.7827 248.369 56.4384 249.08 56.8835C249.795 57.3286 250.592 57.5511 251.473 57.5511C252.354 57.5511 253.149 57.3286 253.859 56.8835C254.574 56.4384 255.14 55.7827 255.557 54.9162C255.978 54.0497 256.189 52.9867 256.189 51.7273ZM260.855 59V44.4545H262.616V51.6705H262.787L269.321 44.4545H271.622L265.514 51.017L271.622 59H269.491L264.435 52.2386L262.616 54.2841V59H260.855Z" fill="black"/>
-  <path d="M42 110L30 122" style="stroke: var(--vp-a11y-danger)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M30 110L42 122" style="stroke: var(--vp-a11y-danger)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-  <text x="58" y="122" style="fill: var(--vp-a11y-danger)" font-size="18" font-weight="800">
-    <tspan>Don't use low contrast.</tspan>
-  </text>
-  <rect y="176" width="480" height="152" rx="8" style="fill: var(--vp-code-block-bg)" />
-  <rect x="183.5" y="200" width="113" height="56" rx="28" fill="#712CF8"/>
-  <path d="M227.5 222L216.5 233L211.5 228" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M257.893 227.727C257.893 229.261 257.616 230.587 257.062 231.705C256.509 232.822 255.749 233.684 254.783 234.29C253.817 234.896 252.714 235.199 251.473 235.199C250.232 235.199 249.129 234.896 248.163 234.29C247.197 233.684 246.438 232.822 245.884 231.705C245.33 230.587 245.053 229.261 245.053 227.727C245.053 226.193 245.33 224.867 245.884 223.75C246.438 222.633 247.197 221.771 248.163 221.165C249.129 220.559 250.232 220.256 251.473 220.256C252.714 220.256 253.817 220.559 254.783 221.165C255.749 221.771 256.509 222.633 257.062 223.75C257.616 224.867 257.893 226.193 257.893 227.727ZM256.189 227.727C256.189 226.468 255.978 225.405 255.557 224.538C255.14 223.672 254.574 223.016 253.859 222.571C253.149 222.126 252.354 221.903 251.473 221.903C250.592 221.903 249.795 222.126 249.08 222.571C248.369 223.016 247.804 223.672 247.382 224.538C246.965 225.405 246.757 226.468 246.757 227.727C246.757 228.987 246.965 230.05 247.382 230.916C247.804 231.783 248.369 232.438 249.08 232.884C249.795 233.329 250.592 233.551 251.473 233.551C252.354 233.551 253.149 233.329 253.859 232.884C254.574 232.438 255.14 231.783 255.557 230.916C255.978 230.05 256.189 228.987 256.189 227.727ZM260.855 235V220.455H262.616V227.67H262.787L269.321 220.455H271.622L265.514 227.017L271.622 235H269.491L264.435 228.239L262.616 230.284V235H260.855Z" fill="white"/>
-  <path d="M44 286L33 297L28 292" style="stroke: var(--vp-c-success-2)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-  <text x="58" y="299" style="fill: var(--vp-a11y-success)" font-size="18" font-weight="800">
-    Do use a contrast ratio of at least 4.5:1.
-  </text>
-</svg>
@@ -0,0 +1,5 @@
+<svg width="320" height="200" viewBox="0 0 320 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="104" y="72" width="113" height="56" rx="28" fill="#712CF8"/>
+<path d="M148 94L137 105L132 100" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M178.393 99.7273C178.393 101.261 178.116 102.587 177.562 103.705C177.009 104.822 176.249 105.684 175.283 106.29C174.317 106.896 173.214 107.199 171.973 107.199C170.732 107.199 169.629 106.896 168.663 106.29C167.697 105.684 166.938 104.822 166.384 103.705C165.83 102.587 165.553 101.261 165.553 99.7273C165.553 98.1932 165.83 96.8674 166.384 95.75C166.938 94.6326 167.697 93.7708 168.663 93.1648C169.629 92.5587 170.732 92.2557 171.973 92.2557C173.214 92.2557 174.317 92.5587 175.283 93.1648C176.249 93.7708 177.009 94.6326 177.562 95.75C178.116 96.8674 178.393 98.1932 178.393 99.7273ZM176.689 99.7273C176.689 98.4678 176.478 97.4048 176.057 96.5384C175.64 95.6719 175.074 95.0161 174.359 94.571C173.649 94.1259 172.854 93.9034 171.973 93.9034C171.092 93.9034 170.295 94.1259 169.58 94.571C168.869 95.0161 168.304 95.6719 167.882 96.5384C167.465 97.4048 167.257 98.4678 167.257 99.7273C167.257 100.987 167.465 102.05 167.882 102.916C168.304 103.783 168.869 104.438 169.58 104.884C170.295 105.329 171.092 105.551 171.973 105.551C172.854 105.551 173.649 105.329 174.359 104.884C175.074 104.438 175.64 103.783 176.057 102.916C176.478 102.05 176.689 100.987 176.689 99.7273ZM181.355 107V92.4545H183.116V99.6705H183.287L189.821 92.4545H192.122L186.014 99.017L192.122 107H189.991L184.935 100.239L183.116 102.284V107H181.355Z" fill="white"/>
+</svg>
@@ -0,0 +1,5 @@
+<svg width="320" height="200" viewBox="0 0 320 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="104" y="72" width="113" height="56" rx="28" fill="#712CF8"/>
+<path d="M148 94L137 105L132 100" stroke="#0D1016" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M178.393 99.7273C178.393 101.261 178.116 102.587 177.562 103.705C177.009 104.822 176.249 105.684 175.283 106.29C174.317 106.896 173.214 107.199 171.973 107.199C170.732 107.199 169.629 106.896 168.663 106.29C167.697 105.684 166.938 104.822 166.384 103.705C165.83 102.587 165.553 101.261 165.553 99.7273C165.553 98.1932 165.83 96.8674 166.384 95.75C166.938 94.6326 167.697 93.7708 168.663 93.1648C169.629 92.5587 170.732 92.2557 171.973 92.2557C173.214 92.2557 174.317 92.5587 175.283 93.1648C176.249 93.7708 177.009 94.6326 177.562 95.75C178.116 96.8674 178.393 98.1932 178.393 99.7273ZM176.689 99.7273C176.689 98.4678 176.478 97.4048 176.057 96.5384C175.64 95.6719 175.074 95.0161 174.359 94.571C173.649 94.1259 172.854 93.9034 171.973 93.9034C171.092 93.9034 170.295 94.1259 169.58 94.571C168.869 95.0161 168.304 95.6719 167.882 96.5384C167.465 97.4048 167.257 98.4678 167.257 99.7273C167.257 100.987 167.465 102.05 167.882 102.916C168.304 103.783 168.869 104.438 169.58 104.884C170.295 105.329 171.092 105.551 171.973 105.551C172.854 105.551 173.649 105.329 174.359 104.884C175.074 104.438 175.64 103.783 176.057 102.916C176.478 102.05 176.689 100.987 176.689 99.7273ZM181.355 107V92.4545H183.116V99.6705H183.287L189.821 92.4545H192.122L186.014 99.017L192.122 107H189.991L184.935 100.239L183.116 102.284V107H181.355Z" fill="#0D1016"/>
+</svg>
@@ -0,0 +1,14 @@
+<svg width="320" height="200" viewBox="0 0 320 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle opacity="0.05" cx="160" cy="100" r="22" fill="black"/>
+<path d="M162.75 109V101C162.75 100.735 162.645 100.48 162.457 100.293C162.27 100.105 162.015 100 161.75 100H157.75C157.485 100 157.23 100.105 157.043 100.293C156.855 100.48 156.75 100.735 156.75 101V109" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M150.75 98C150.75 97.709 150.813 97.4216 150.936 97.1577C151.058 96.8938 151.237 96.6598 151.459 96.472L158.459 90.473C158.82 90.1679 159.277 90.0005 159.75 90.0005C160.223 90.0005 160.68 90.1679 161.041 90.473L168.041 96.472C168.263 96.6598 168.442 96.8938 168.564 97.1577C168.687 97.4216 168.75 97.709 168.75 98V107C168.75 107.53 168.539 108.039 168.164 108.414C167.789 108.789 167.28 109 166.75 109H152.75C152.22 109 151.711 108.789 151.336 108.414C150.961 108.039 150.75 107.53 150.75 107V98Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="133" y="72.5" width="55" height="55" stroke="#00D7E4"/>
+<foreignObject x="180.5" y="64" width="93" height="42"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(4px);clip-path:url(#bgblur_0_1992_19103_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="8">
+<rect x="189" y="72.5" width="76" height="25" fill="#0D1016" fill-opacity="0.75"/>
+<rect x="189" y="72.5" width="76" height="25" stroke="#00D7E4" stroke-dasharray="2 2"/>
+<path d="M199.374 83V81.9773C199.374 81.6667 199.429 81.3371 199.539 80.9886C199.653 80.6364 199.816 80.2973 200.028 79.9716C200.244 79.642 200.503 79.3561 200.806 79.1136L201.533 79.7045C201.295 80.0455 201.086 80.4015 200.908 80.7727C200.734 81.1402 200.647 81.5341 200.647 81.9545V83H199.374ZM202.283 83V81.9773C202.283 81.6667 202.338 81.3371 202.448 80.9886C202.562 80.6364 202.725 80.2973 202.937 79.9716C203.153 79.642 203.412 79.3561 203.715 79.1136L204.442 79.7045C204.204 80.0455 203.996 80.4015 203.817 80.7727C203.643 81.1402 203.556 81.5341 203.556 81.9545V83H202.283ZM206.104 91V79.3636H207.513V84.5455H213.718V79.3636H215.127V91H213.718V85.7955H207.513V91H206.104ZM221.312 91.1818C220.524 91.1818 219.833 90.9943 219.238 90.6193C218.647 90.2443 218.185 89.7197 217.852 89.0455C217.522 88.3712 217.357 87.5833 217.357 86.6818C217.357 85.7727 217.522 84.9792 217.852 84.3011C218.185 83.6231 218.647 83.0966 219.238 82.7216C219.833 82.3466 220.524 82.1591 221.312 82.1591C222.1 82.1591 222.789 82.3466 223.38 82.7216C223.975 83.0966 224.437 83.6231 224.766 84.3011C225.1 84.9792 225.266 85.7727 225.266 86.6818C225.266 87.5833 225.1 88.3712 224.766 89.0455C224.437 89.7197 223.975 90.2443 223.38 90.6193C222.789 90.9943 222.1 91.1818 221.312 91.1818ZM221.312 89.9773C221.91 89.9773 222.403 89.8239 222.789 89.517C223.175 89.2102 223.461 88.8068 223.647 88.3068C223.833 87.8068 223.925 87.2652 223.925 86.6818C223.925 86.0985 223.833 85.5549 223.647 85.0511C223.461 84.5473 223.175 84.1402 222.789 83.8295C222.403 83.5189 221.91 83.3636 221.312 83.3636C220.713 83.3636 220.221 83.5189 219.835 83.8295C219.448 84.1402 219.162 84.5473 218.977 85.0511C218.791 85.5549 218.698 86.0985 218.698 86.6818C218.698 87.2652 218.791 87.8068 218.977 88.3068C219.162 88.8068 219.448 89.2102 219.835 89.517C220.221 89.8239 220.713 89.9773 221.312 89.9773ZM227.313 91V82.2727H228.609V83.6364H228.722C228.904 83.1705 229.198 82.8087 229.603 82.5511C230.008 82.2898 230.495 82.1591 231.063 82.1591C231.639 82.1591 232.118 82.2898 232.501 82.5511C232.887 82.8087 233.188 83.1705 233.404 83.6364H233.495C233.719 83.1856 234.054 82.8277 234.501 82.5625C234.948 82.2936 235.484 82.1591 236.109 82.1591C236.889 82.1591 237.527 82.4034 238.023 82.892C238.52 83.3769 238.768 84.1326 238.768 85.1591V91H237.427V85.1591C237.427 84.5152 237.251 84.0549 236.898 83.7784C236.546 83.5019 236.131 83.3636 235.654 83.3636C235.04 83.3636 234.565 83.5492 234.228 83.9205C233.891 84.2879 233.722 84.7538 233.722 85.3182V91H232.359V85.0227C232.359 84.5265 232.198 84.1269 231.876 83.8239C231.554 83.517 231.139 83.3636 230.631 83.3636C230.283 83.3636 229.957 83.4564 229.654 83.642C229.355 83.8277 229.112 84.0852 228.927 84.4148C228.745 84.7405 228.654 85.1174 228.654 85.5455V91H227.313ZM244.879 91.1818C244.038 91.1818 243.312 90.9962 242.702 90.625C242.096 90.25 241.629 89.7273 241.299 89.0568C240.973 88.3826 240.81 87.5985 240.81 86.7045C240.81 85.8106 240.973 85.0227 241.299 84.3409C241.629 83.6553 242.087 83.1212 242.674 82.7386C243.265 82.3523 243.954 82.1591 244.742 82.1591C245.197 82.1591 245.646 82.2348 246.089 82.3864C246.532 82.5379 246.935 82.7841 247.299 83.125C247.663 83.4621 247.952 83.9091 248.168 84.4659C248.384 85.0227 248.492 85.7083 248.492 86.5227V87.0909H241.765V85.9318H247.129C247.129 85.4394 247.03 85 246.833 84.6136C246.64 84.2273 246.363 83.9223 246.004 83.6989C245.647 83.4754 245.227 83.3636 244.742 83.3636C244.208 83.3636 243.746 83.4962 243.356 83.7614C242.969 84.0227 242.672 84.3636 242.464 84.7841C242.255 85.2045 242.151 85.6553 242.151 86.1364V86.9091C242.151 87.5682 242.265 88.1269 242.492 88.5852C242.723 89.0398 243.043 89.3864 243.452 89.625C243.862 89.8598 244.337 89.9773 244.879 89.9773C245.231 89.9773 245.549 89.928 245.833 89.8295C246.121 89.7273 246.369 89.5758 246.577 89.375C246.786 89.1705 246.947 88.9167 247.06 88.6136L248.356 88.9773C248.219 89.4167 247.99 89.803 247.668 90.1364C247.346 90.4659 246.949 90.7235 246.475 90.9091C246.002 91.0909 245.469 91.1818 244.879 91.1818ZM251.714 79.3636V80.3864C251.714 80.697 251.657 81.0284 251.543 81.3807C251.433 81.7292 251.271 82.0682 251.055 82.3977C250.843 82.7235 250.585 83.0076 250.282 83.25L249.555 82.6591C249.793 82.3182 250 81.964 250.174 81.5966C250.352 81.2254 250.441 80.8295 250.441 80.4091V79.3636H251.714ZM254.623 79.3636V80.3864C254.623 80.697 254.566 81.0284 254.452 81.3807C254.343 81.7292 254.18 82.0682 253.964 82.3977C253.752 82.7235 253.494 83.0076 253.191 83.25L252.464 82.6591C252.702 82.3182 252.909 81.964 253.083 81.5966C253.261 81.2254 253.35 80.8295 253.35 80.4091V79.3636H254.623Z" fill="#00D7E4"/>
+</g>
+<defs>
+<clipPath id="bgblur_0_1992_19103_clip_path" transform="translate(-180.5 -64)"><rect x="189" y="72.5" width="76" height="25"/>
+</clipPath></defs>
+</svg>
@@ -0,0 +1,8 @@
+<svg width="240" height="160" viewBox="0 0 240 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="98" y="58" width="44" height="44" rx="22" fill="white" fill-opacity="0.05"/>
+<rect x="96.5" y="56.5" width="47" height="47" rx="23.5" stroke="#0073FA" stroke-opacity="0.55" stroke-width="3"/>
+<circle opacity="0.05" cx="120" cy="80" r="22" fill="black"/>
+<path d="M120 81C120.552 81 121 80.5523 121 80C121 79.4477 120.552 79 120 79C119.448 79 119 79.4477 119 80C119 80.5523 119.448 81 120 81Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M120 74C120.552 74 121 73.5523 121 73C121 72.4477 120.552 72 120 72C119.448 72 119 72.4477 119 73C119 73.5523 119.448 74 120 74Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M120 88C120.552 88 121 87.5523 121 87C121 86.4477 120.552 86 120 86C119.448 86 119 86.4477 119 87C119 87.5523 119.448 88 120 88Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,5 @@
+<svg width="240" height="160" viewBox="0 0 240 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M120 81C120.552 81 121 80.5523 121 80C121 79.4477 120.552 79 120 79C119.448 79 119 79.4477 119 80C119 80.5523 119.448 81 120 81Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M120 74C120.552 74 121 73.5523 121 73C121 72.4477 120.552 72 120 72C119.448 72 119 72.4477 119 73C119 73.5523 119.448 74 120 74Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M120 88C120.552 88 121 87.5523 121 87C121 86.4477 120.552 86 120 86C119.448 86 119 86.4477 119 87C119 87.5523 119.448 88 120 88Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,22 @@
+<svg width="240" height="160" viewBox="0 0 240 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle opacity="0.05" cx="120" cy="80" r="22" fill="black"/>
+<path d="M120 81C120.552 81 121 80.5523 121 80C121 79.4477 120.552 79 120 79C119.448 79 119 79.4477 119 80C119 80.5523 119.448 81 120 81Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M120 74C120.552 74 121 73.5523 121 73C121 72.4477 120.552 72 120 72C119.448 72 119 72.4477 119 73C119 73.5523 119.448 74 120 74Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M120 88C120.552 88 121 87.5523 121 87C121 86.4477 120.552 86 120 86C119.448 86 119 86.4477 119 87C119 87.5523 119.448 88 120 88Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<g filter="url(#filter0_d_1992_19145)">
+<path d="M157.262 83.3576C159.655 85.7726 161 89.048 161 92.4633C161 95.8786 159.655 99.1541 157.262 101.569L155.006 103.846C151.848 107.033 148.96 107.989 145.61 108L137.489 108C136.671 107.958 135.9 107.6 135.336 107C134.773 106.401 134.459 105.606 134.461 104.779C134.462 103.953 134.778 103.158 135.344 102.561C135.91 101.963 136.682 101.608 137.5 101.569L139.214 101.569L127.934 90.1869C127.336 89.5831 127 88.7643 127 87.9105C127 87.0566 127.336 86.2378 127.934 85.634C128.533 85.0303 129.344 84.6911 130.19 84.6911C131.037 84.6911 131.848 85.0303 132.446 85.634L138.085 91.3237C137.488 90.7201 137.152 89.9018 137.152 89.0487C137.152 88.1948 137.488 87.376 138.086 86.7722C138.685 86.1685 139.496 85.8293 140.342 85.8293C141.188 85.8293 142 86.1685 142.598 86.7722L143.726 87.9105C143.128 87.3067 142.792 86.4878 142.792 85.634C142.792 84.7802 143.128 83.9613 143.726 83.3576C144.325 82.7538 145.136 82.4147 145.982 82.4147C146.828 82.4147 147.64 82.7538 148.238 83.3576L149.366 84.4958C148.768 83.8921 148.432 83.0732 148.432 82.2194C148.432 81.3655 148.768 80.5467 149.366 79.9429C149.965 79.3392 150.776 79 151.622 79C152.468 79 153.28 79.3392 153.878 79.9429L157.262 83.3576Z" fill="white"/>
+<path d="M139.214 92.4633L138.086 91.3251L138.085 91.3237M138.65 91.8942L138.085 91.3237M141.47 101.569L137.5 101.569C136.682 101.608 135.91 101.963 135.344 102.561C134.778 103.158 134.462 103.953 134.461 104.779C134.459 105.606 134.773 106.401 135.336 107C135.9 107.6 136.671 107.958 137.489 108L145.61 108C148.96 107.989 151.848 107.033 155.006 103.846L157.262 101.569C159.655 99.1541 161 95.8786 161 92.4633C161 89.048 159.655 85.7726 157.262 83.3576L153.878 79.9429C153.28 79.3392 152.468 79 151.622 79C150.776 79 149.965 79.3392 149.366 79.9429C148.768 80.5467 148.432 81.3655 148.432 82.2194C148.432 83.0732 148.768 83.8921 149.366 84.4958L148.238 83.3576C147.64 82.7538 146.828 82.4147 145.982 82.4147C145.136 82.4147 144.325 82.7538 143.726 83.3576C143.128 83.9613 142.792 84.7802 142.792 85.634C142.792 86.4878 143.128 87.3067 143.726 87.9105L142.598 86.7722C142 86.1685 141.188 85.8293 140.342 85.8293C139.496 85.8293 138.685 86.1685 138.086 86.7722C137.488 87.376 137.152 88.1948 137.152 89.0487C137.152 89.9018 137.488 90.7201 138.085 91.3237M137.5 101.569L139.214 101.569L127.934 90.1869C127.336 89.5831 127 88.7643 127 87.9105C127 87.0566 127.336 86.2378 127.934 85.634C128.533 85.0303 129.344 84.6911 130.19 84.6911C131.037 84.6911 131.848 85.0303 132.446 85.634L138.085 91.3237" stroke="#3C3C43" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_d_1992_19145" x="121.5" y="73.5" width="45" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1992_19145"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1992_19145" result="shape"/>
+</filter>
+</defs>
+</svg>
@@ -0,0 +1,22 @@
+<svg width="240" height="160" viewBox="0 0 240 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle opacity="0.05" cx="120" cy="80" r="14" fill="black"/>
+<path d="M120 81C120.552 81 121 80.5523 121 80C121 79.4477 120.552 79 120 79C119.448 79 119 79.4477 119 80C119 80.5523 119.448 81 120 81Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M120 74C120.552 74 121 73.5523 121 73C121 72.4477 120.552 72 120 72C119.448 72 119 72.4477 119 73C119 73.5523 119.448 74 120 74Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M120 88C120.552 88 121 87.5523 121 87C121 86.4477 120.552 86 120 86C119.448 86 119 86.4477 119 87C119 87.5523 119.448 88 120 88Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<g filter="url(#filter0_d_1992_19146)">
+<path d="M157.262 83.3576C159.655 85.7726 161 89.048 161 92.4633C161 95.8786 159.655 99.1541 157.262 101.569L155.006 103.846C151.848 107.033 148.96 107.989 145.61 108L137.489 108C136.671 107.958 135.9 107.6 135.336 107C134.773 106.401 134.459 105.606 134.461 104.779C134.462 103.953 134.778 103.158 135.344 102.561C135.91 101.963 136.682 101.608 137.5 101.569L139.214 101.569L127.934 90.1869C127.336 89.5831 127 88.7643 127 87.9105C127 87.0566 127.336 86.2378 127.934 85.634C128.533 85.0303 129.344 84.6911 130.19 84.6911C131.037 84.6911 131.848 85.0303 132.446 85.634L138.085 91.3237C137.488 90.7201 137.152 89.9018 137.152 89.0487C137.152 88.1948 137.488 87.376 138.086 86.7722C138.685 86.1685 139.496 85.8293 140.342 85.8293C141.188 85.8293 142 86.1685 142.598 86.7722L143.726 87.9105C143.128 87.3067 142.792 86.4878 142.792 85.634C142.792 84.7802 143.128 83.9613 143.726 83.3576C144.325 82.7538 145.136 82.4147 145.982 82.4147C146.828 82.4147 147.64 82.7538 148.238 83.3576L149.366 84.4958C148.768 83.8921 148.432 83.0732 148.432 82.2194C148.432 81.3655 148.768 80.5467 149.366 79.9429C149.965 79.3392 150.776 79 151.622 79C152.468 79 153.28 79.3392 153.878 79.9429L157.262 83.3576Z" fill="white"/>
+<path d="M139.214 92.4633L138.086 91.3251L138.085 91.3237M138.65 91.8942L138.085 91.3237M141.47 101.569L137.5 101.569C136.682 101.608 135.91 101.963 135.344 102.561C134.778 103.158 134.462 103.953 134.461 104.779C134.459 105.606 134.773 106.401 135.336 107C135.9 107.6 136.671 107.958 137.489 108L145.61 108C148.96 107.989 151.848 107.033 155.006 103.846L157.262 101.569C159.655 99.1541 161 95.8786 161 92.4633C161 89.048 159.655 85.7726 157.262 83.3576L153.878 79.9429C153.28 79.3392 152.468 79 151.622 79C150.776 79 149.965 79.3392 149.366 79.9429C148.768 80.5467 148.432 81.3655 148.432 82.2194C148.432 83.0732 148.768 83.8921 149.366 84.4958L148.238 83.3576C147.64 82.7538 146.828 82.4147 145.982 82.4147C145.136 82.4147 144.325 82.7538 143.726 83.3576C143.128 83.9613 142.792 84.7802 142.792 85.634C142.792 86.4878 143.128 87.3067 143.726 87.9105L142.598 86.7722C142 86.1685 141.188 85.8293 140.342 85.8293C139.496 85.8293 138.685 86.1685 138.086 86.7722C137.488 87.376 137.152 88.1948 137.152 89.0487C137.152 89.9018 137.488 90.7201 138.085 91.3237M137.5 101.569L139.214 101.569L127.934 90.1869C127.336 89.5831 127 88.7643 127 87.9105C127 87.0566 127.336 86.2378 127.934 85.634C128.533 85.0303 129.344 84.6911 130.19 84.6911C131.037 84.6911 131.848 85.0303 132.446 85.634L138.085 91.3237" stroke="#3C3C43" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_d_1992_19146" x="121.5" y="73.5" width="45" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1992_19146"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1992_19146" result="shape"/>
+</filter>
+</defs>
+</svg>
@@ -0,0 +1,41 @@
+<svg width="320" height="149" viewBox="0 0 320 149" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2004_21485)">
+<g filter="url(#filter0_d_2004_21485)">
+<rect width="320" height="64" transform="translate(0 85)" fill="white" fill-opacity="0.01"/>
+<rect opacity="0.1" x="19" y="102" width="44" height="30" rx="15" fill="#00AAFF"/>
+<path d="M43.75 126V118C43.75 117.735 43.6446 117.48 43.4571 117.293C43.2696 117.105 43.0152 117 42.75 117H38.75C38.4848 117 38.2304 117.105 38.0429 117.293C37.8554 117.48 37.75 117.735 37.75 118V126" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M31.75 115C31.7499 114.71 31.8133 114.422 31.9358 114.158C32.0582 113.894 32.2368 113.66 32.459 113.472L39.459 107.472C39.82 107.167 40.2774 107 40.75 107C41.2226 107 41.68 107.167 42.041 107.472L49.041 113.472C49.2632 113.66 49.4418 113.894 49.5642 114.158C49.6867 114.422 49.7501 114.71 49.75 115V124C49.75 124.531 49.5393 125.04 49.1642 125.415C48.7891 125.79 48.2804 126 47.75 126H33.75C33.2196 126 32.7109 125.79 32.3358 125.415C31.9607 125.04 31.75 124.531 31.75 124V115Z" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M118.518 126C118.693 126.304 118.946 126.556 119.25 126.732C119.554 126.908 119.899 127 120.25 127C120.601 127 120.946 126.908 121.25 126.732C121.554 126.556 121.806 126.304 121.982 126" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M111.512 120.326C111.382 120.469 111.295 120.647 111.264 120.839C111.233 121.03 111.258 121.226 111.336 121.403C111.414 121.581 111.542 121.732 111.705 121.837C111.867 121.943 112.056 122 112.25 122H128.25C128.444 122 128.634 121.944 128.796 121.838C128.959 121.732 129.087 121.582 129.165 121.405C129.244 121.227 129.269 121.031 129.238 120.84C129.207 120.648 129.121 120.47 128.99 120.327C127.66 118.956 126.25 117.499 126.25 113C126.25 111.409 125.618 109.883 124.493 108.757C123.368 107.632 121.842 107 120.25 107C118.659 107 117.133 107.632 116.008 108.757C114.882 109.883 114.25 111.409 114.25 113C114.25 117.499 112.839 118.956 111.512 120.326Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M195.75 107V110" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M203.75 107V110" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M206.75 108H192.75C191.645 108 190.75 108.895 190.75 110V124C190.75 125.105 191.645 126 192.75 126H206.75C207.855 126 208.75 125.105 208.75 124V110C208.75 108.895 207.855 108 206.75 108Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M190.75 114H208.75" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M195.75 118H195.76" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M199.75 118H199.76" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M203.75 118H203.76" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M195.75 122H195.76" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M199.75 122H199.76" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M203.75 122H203.76" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M285.175 125.056C284.951 123.646 284.231 122.362 283.145 121.435C282.058 120.508 280.677 119.999 279.249 119.999C277.821 119.999 276.44 120.509 275.354 121.436C274.268 122.363 273.548 123.647 273.324 125.057" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M279.25 120C281.459 120 283.25 118.209 283.25 116C283.25 113.791 281.459 112 279.25 112C277.041 112 275.25 113.791 275.25 116C275.25 118.209 277.041 120 279.25 120Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M279.25 127C284.773 127 289.25 122.523 289.25 117C289.25 111.477 284.773 107 279.25 107C273.727 107 269.25 111.477 269.25 117C269.25 122.523 273.727 127 279.25 127Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<rect width="320" height="85" fill="#010101" fill-opacity="0.3"/>
+</g>
+<defs>
+<filter id="filter0_d_2004_21485" x="-24" y="61" width="368" height="112" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="12"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2004_21485"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2004_21485" result="shape"/>
+</filter>
+<clipPath id="clip0_2004_21485">
+<rect width="320" height="149" fill="white"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,39 @@
+<svg width="320" height="149" viewBox="0 0 320 149" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2002_21265)">
+<g filter="url(#filter0_d_2002_21265)">
+<rect width="320" height="64" transform="translate(0 85)" fill="white" fill-opacity="0.01"/>
+<rect opacity="0.1" x="11" y="102" width="44" height="30" rx="15" fill="#00AAFF"/>
+<path d="M32.7998 126C33.9044 126 34.7998 125.105 34.7998 124C34.7998 122.895 33.9044 122 32.7998 122C31.6952 122 30.7998 122.895 30.7998 124C30.7998 125.105 31.6952 126 32.7998 126Z" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M32.7998 112C33.9044 112 34.7998 111.105 34.7998 110C34.7998 108.895 33.9044 108 32.7998 108C31.6952 108 30.7998 108.895 30.7998 110C30.7998 111.105 31.6952 112 32.7998 112Z" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M36.7998 119C37.9044 119 38.7998 118.105 38.7998 117C38.7998 115.895 37.9044 115 36.7998 115C35.6952 115 34.7998 115.895 34.7998 117C34.7998 118.105 35.6952 119 36.7998 119Z" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M40.7998 126C41.9044 126 42.7998 125.105 42.7998 124C42.7998 122.895 41.9044 122 40.7998 122C39.6952 122 38.7998 122.895 38.7998 124C38.7998 125.105 39.6952 126 40.7998 126Z" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M24.7998 126C25.9044 126 26.7998 125.105 26.7998 124C26.7998 122.895 25.9044 122 24.7998 122C23.6952 122 22.7998 122.895 22.7998 124C22.7998 125.105 23.6952 126 24.7998 126Z" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M28.7998 119C29.9044 119 30.7998 118.105 30.7998 117C30.7998 115.895 29.9044 115 28.7998 115C27.6952 115 26.7998 115.895 26.7998 117C26.7998 118.105 27.6952 119 28.7998 119Z" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M100.313 109C100.426 108.68 100.427 108.33 100.316 108.009C100.204 107.688 99.9866 107.414 99.699 107.232C99.4115 107.051 99.0708 106.973 98.7329 107.01C98.3949 107.048 98.0798 107.199 97.8391 107.439L88.8391 116.439C88.6292 116.649 88.4863 116.916 88.4283 117.207C88.3704 117.498 88.4 117.8 88.5134 118.074C88.6269 118.348 88.8191 118.582 89.0658 118.747C89.3124 118.912 89.6024 119 89.8991 119H93.9011C93.981 119 94.0597 119.019 94.1306 119.056C94.2015 119.093 94.2626 119.146 94.3087 119.211C94.3548 119.277 94.3846 119.352 94.3957 119.431C94.4067 119.51 94.3986 119.591 94.3721 119.666L92.4851 125C92.3719 125.321 92.3711 125.671 92.4828 125.992C92.5945 126.313 92.812 126.587 93.0998 126.768C93.3875 126.95 93.7284 127.028 94.0664 126.99C94.4044 126.952 94.7195 126.801 94.9601 126.56L103.96 117.56C104.17 117.35 104.312 117.083 104.37 116.792C104.428 116.501 104.398 116.2 104.284 115.926C104.171 115.652 103.979 115.418 103.732 115.253C103.486 115.088 103.196 115 102.899 115H98.9021C98.822 115 98.7431 114.981 98.6719 114.944C98.6008 114.908 98.5395 114.854 98.4932 114.789C98.447 114.724 98.4171 114.648 98.4061 114.569C98.3951 114.489 98.4033 114.409 98.4301 114.333L100.313 109Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M160 127C165.523 127 170 122.523 170 117C170 111.477 165.523 107 160 107C154.477 107 150 111.477 150 117C150 122.523 154.477 127 160 127Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M160 111V117L164 119" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M223.6 110V126" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M231.601 124C232.131 124 232.639 123.789 233.014 123.414C233.389 123.039 233.6 122.53 233.6 122V110C233.6 109.47 233.389 108.961 233.014 108.586C232.639 108.211 232.131 108 231.601 108L227.6 108.002C226.824 108.002 226.058 108.182 225.364 108.529C224.67 108.876 224.066 109.379 223.6 110C223.134 109.379 222.53 108.875 221.836 108.528C221.141 108.181 220.376 108 219.6 108H215.6C215.069 108 214.56 108.211 214.185 108.586C213.81 108.961 213.6 109.47 213.6 110V122C213.6 122.53 213.81 123.039 214.185 123.414C214.56 123.789 215.068 124 215.599 124H219.6C220.376 124 221.141 124.181 221.836 124.528C222.53 124.875 223.134 125.379 223.6 126C224.065 125.379 224.669 124.875 225.364 124.528C226.058 124.181 226.823 124 227.6 124H231.601Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M285.2 115V110C285.2 109.735 285.306 109.48 285.493 109.293C285.681 109.105 285.935 109 286.2 109H288.2C288.465 109 288.72 109.105 288.907 109.293C289.095 109.48 289.2 109.735 289.2 110V115" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M289.2 111C290.791 111 292.318 111.632 293.443 112.757C294.568 113.883 295.2 115.409 295.2 117V120" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M279.2 120V117C279.2 115.409 279.832 113.883 280.958 112.757C282.083 111.632 283.609 111 285.2 111" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M296.2 120H278.2C277.648 120 277.2 120.448 277.2 121V123C277.2 123.552 277.648 124 278.2 124H296.2C296.752 124 297.2 123.552 297.2 123V121C297.2 120.448 296.752 120 296.2 120Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<rect width="320" height="85" fill="#010101" fill-opacity="0.3"/>
+</g>
+<defs>
+<filter id="filter0_d_2002_21265" x="-24" y="61" width="368" height="112" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="12"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2002_21265"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2002_21265" result="shape"/>
+</filter>
+<clipPath id="clip0_2002_21265">
+<rect width="320" height="149" fill="white"/>
+</clipPath>
+</defs>
+</svg>
@@ -42,9 +42,14 @@
      "destination": "/guide/react/basics",
      "permanent": true
    },
+    {
+      "source": "/guide/accessibility",
+      "destination": "/how-to/accessibility",
+      "permanent": true
+    },
    {
      "source": "/guide/advanced/accessibility",
-      "destination": "/guide/accessibility",
+      "destination": "/how-to/accessibility",
      "permanent": true
    },
    {
@@ -22,7 +22,7 @@
    "hospital",
    "defibrillator",
    "earthquake",
-    "siesmic",
+    "seismic",
    "magnitude",
    "richter scale",
    "aftershock",
@@ -1,7 +1,8 @@
 {
  "$schema": "../icon.schema.json",
  "contributors": [
-    "danielbayley"
+    "danielbayley",
+    "karsa-mistmere"
  ],
  "use-cases": [],
  "tags": [
@@ -49,5 +50,12 @@
    "text",
    "development",
    "gaming"
+  ],
+  "aliases": [
+    {
+      "name": "book-marked",
+      "deprecated": true,
+      "deprecationReason": "alias.name"
+    }
  ]
 }
@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M10 2v7.751a.25.25 0 00.407.195l2.28-1.834a.5.5 0 01.627 0l2.28 1.834A.25.25 0 0016 9.751V2" />
+  <path d="M4 19.5v-15A2.5 2.5 0 016.5 2H19a1 1 0 011 1v18a1 1 0 01-1 1H6.5a1 1 0 010-5H20" />
+</svg>
@@ -24,7 +24,7 @@
    "teens",
    "teenager",
    "therapy",
-    "theraputic",
+    "therapeutic",
    "therapist",
    "planner",
    "organizer",
@@ -0,0 +1,40 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "maxim-s-barabash",
+    "ericfennis",
+    "karsa-mistmere",
+    "jguddas",
+    "tylerkade"
+  ],
+  "use-cases": [
+    "Adding a company or business profile",
+    "Registering a company during onboarding",
+    "Creating office, branch, or headquarters entries",
+    "Marking new business or property locations on maps"
+  ],
+  "tags": [
+    "business",
+    "company",
+    "enterprise",
+    "skyscraper",
+    "organisation",
+    "organization",
+    "city",
+    "new",
+    "add",
+    "create",
+    "increase",
+    "office",
+    "headquarters",
+    "startup",
+    "registration",
+    "onboarding",
+    "realestate",
+    "property"
+  ],
+  "categories": [
+    "account",
+    "buildings"
+  ]
+}
@@ -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 12h4" />
+  <path d="M10 21v-3a2 2 0 013.05-1.702" />
+  <path d="M10 8h4" />
+  <path d="M16 19h6" />
+  <path d="M18 7h2a2 2 0 012 2v4.355" />
+  <path d="M19 16v6" />
+  <path d="M6 10H4a2 2 0 00-2 2v7a2 2 0 002 2h8.535" />
+  <path d="M6 21V5a2 2 0 012-2h8a2 2 0 012 2v7.126" />
+</svg>
@@ -19,5 +19,12 @@
  "categories": [
    "account",
    "buildings"
+  ],
+  "aliases": [
+    {
+      "name": "building-2",
+      "deprecated": true,
+      "deprecationReason": "alias.name"
+    }
  ]
 }
@@ -0,0 +1,37 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "karsa-mistmere",
+    "ericfennis",
+    "jguddas",
+    "colebemis",
+    "AlexandrePhilibert"
+  ],
+  "use-cases": [
+    "Indicating upcoming events in calendars",
+    "Fast-forwarding through calendar views"
+  ],
+  "tags": [
+    "navigation",
+    "arrow",
+    "right",
+    "chevron",
+    "direction",
+    "symbol",
+    "pointer",
+    "indicator",
+    "next",
+    "menu",
+    "date",
+    "day",
+    "month",
+    "year",
+    "events",
+    "chevrons"
+  ],
+  "categories": [
+    "time",
+    "arrows",
+    "navigation"
+  ]
+}
@@ -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="m13 21 3-3-3-3" />
+  <path d="M16 2v3" />
+  <path d="m19 21 3-3-3-3" />
+  <path d="M21 11.5V5.05a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2L9 21" />
+  <path d="M3 9h18" />
+  <path d="M8 2v3" />
+</svg>
@@ -2,14 +2,28 @@
  "$schema": "../icon.schema.json",
  "contributors": [
    "it-is-not",
-    "ericfennis"
+    "ericfennis",
+    "karsa-mistmere"
+  ],
+  "use-cases": [
+    "Managing cookie consent or privacy preferences",
+    "Representing website cookies and browser storage",
+    "Indicating cookie settings in privacy or security interfaces",
+    "Representing cookies as food in recipes, menus or food-related interfaces"
  ],
-  "use-cases": [],
  "tags": [
    "biscuit",
+    "snack",
+    "dessert",
+    "food",
+    "sweet",
+    "bakery",
+    "consent",
    "privacy",
    "legal",
-    "food"
+    "tracking",
+    "browser",
+    "website"
  ],
  "categories": [
    "account",
@@ -9,10 +9,13 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5" />
-  <path d="M8.5 8.5v.01" />
-  <path d="M16 15.5v.01" />
-  <path d="M12 12v.01" />
-  <path d="M11 17v.01" />
-  <path d="M7 14v.01" />
+  <path d="M11 17h.01" />
+  <path d="M11.496 2c.324-.016.558.292.529.615a4 4 0 004.235 4.368.713.713 0 01.758.757 4 4 0 004.366 4.237c.323-.03.63.204.614.527a10 10 0 01-2.915 6.566A1 1 0 114.93 4.918 10 10 0 0111.496 2" />
+  <path d="M12 12h.01" />
+  <path d="M16 16h.01" />
+  <path d="M16 3h.01" />
+  <path d="M21 4h.01" />
+  <path d="M21 8h.01" />
+  <path d="M7 14h.01" />
+  <path d="M9 8h.01" />
 </svg>
@@ -19,7 +19,7 @@
    "transition",
    "access",
    "structure",
-    "espiral",
+    "spiral",
    "building",
    "vertical",
    "movement",
@@ -9,6 +9,6 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M12 6v8l3-3 3 3V6" />
-  <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2z" />
+  <path d="M12 6v7.751a.25.25 0 00.407.195l2.28-1.834a.5.5 0 01.627 0l2.28 1.834a.25.25 0 00.406-.195V6" />
+  <path d="M20 20a2 2 0 002-2V8a2 2 0 00-2-2h-7.9a2 2 0 01-1.69-.9L9.6 3.9A2 2 0 007.93 3H4a2 2 0 00-2 2v13a2 2 0 002 2z" />
 </svg>
@@ -18,7 +18,7 @@
    "academic",
    "hat",
    "diploma",
-    "bachlor's",
+    "bachelor's",
    "master's",
    "doctorate"
  ],
@@ -8,8 +8,7 @@
  "tags": [
    "helmet",
    "construction",
-    "safety",
-    "savety"
+    "safety"
  ],
  "categories": [
    "tools"
@@ -0,0 +1,29 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "rrod497"
+  ],
+  "use-cases": [
+    "editing a timer or countdown",
+    "configuring session timeout",
+    "setting expiration for scheduled tasks"
+  ],
+  "tags": [
+    "timer",
+    "time",
+    "sandglass",
+    "duration",
+    "settings",
+    "gear",
+    "cog",
+    "edit",
+    "configuration",
+    "countdown",
+    "timeout",
+    "expiration"
+  ],
+  "categories": [
+    "time",
+    "tools"
+  ]
+}
@@ -0,0 +1,25 @@
+<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="m14.305 19.53.923-.382" />
+  <path d="m15.228 16.852-.923-.383" />
+  <path d="m16.852 15.228-.383-.923" />
+  <path d="m16.852 20.772-.383.924" />
+  <path d="M17 2v4.172a2 2 0 0 1-.586 1.414l-8.828 8.828A2 2 0 0 0 7 17.828V22" />
+  <path d="m19.148 15.228.383-.923" />
+  <path d="m19.53 21.696-.382-.924" />
+  <path d="m20.772 16.852.924-.383" />
+  <path d="m20.772 19.148.924.383" />
+  <path d="M5 22h6.159" />
+  <path d="M5 2h14" />
+  <path d="M7 2v4.172a2 2 0 0 0 .586 1.414l5.188 5.188" />
+  <circle cx="18" cy="18" r="3" />
+</svg>
@@ -0,0 +1,32 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley",
+    "jguddas"
+  ],
+  "use-cases": [
+    "Representing residential neighborhoods on maps",
+    "Indicating multiple homes or properties in real estate apps",
+    "Marking housing developments in planning tools"
+  ],
+  "tags": [
+    "homes",
+    "housing",
+    "estate",
+    "living",
+    "buildings",
+    "development",
+    "residences",
+    "residential",
+    "village",
+    "neighbourhood",
+    "accommodation",
+    "community",
+    "dwellings",
+    "architecture"
+  ],
+  "categories": [
+    "buildings",
+    "home"
+  ]
+}
@@ -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.681 4.24.834-.715a1.45 1.45 0 011.88 0l5.09 4.364A1.45 1.45 0 0121 9v6.546a1.45 1.45 0 01-1 1.381" />
+  <path d="M15.485 11.889A1.45 1.45 0 0116 13v6.546A1.454 1.454 0 0114.546 21H4.364a1.454 1.454 0 01-1.454-1.454V13a1.45 1.45 0 01.515-1.111l5.09-4.364a1.45 1.45 0 011.88 0z" />
+  <path d="M7.41 20.546v-4a1 1 0 011-1h2a1 1 0 011 1v4" />
+</svg>
@@ -0,0 +1,35 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "karsa-mistmere"
+  ],
+  "use-cases": [
+    "Representing intravenous therapy in healthcare interfaces",
+    "Showing infusion treatments or hydration services",
+    "Marking medication routes of administration",
+    "Identifying infusion clinics or patient education materials"
+  ],
+  "tags": [
+    "intravenous",
+    "therapy",
+    "infusion",
+    "medicine",
+    "medication",
+    "treatment",
+    "healthcare",
+    "hydration",
+    "vitamin",
+    "supplement",
+    "blood",
+    "donation",
+    "chemotherapy",
+    "clinic",
+    "feeding tube",
+    "administration",
+    "health",
+    "regeneration"
+  ],
+  "categories": [
+    "medical"
+  ]
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Karsagithub-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>Claude Opus 5 Eric Fennis	bdf795a8e3	feat(lab): add `hand-gear` icon (#2327 ) * feat(icons): add hand-gear icon * fix(icons): add danielbayley as co-contributor (hand design) * fix(icons): fix gear centering * Add empty use-cases field to hand-gear.json * Update icons/hand-gear.json Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update icons/hand-gear.json Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * feat(lab): moved `hand-gear` icon to lab Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Claude Opus 5 <noreply@anthropic.com>	2026-09-10 16:45:49 +02:00
KarsaandEric Fennis	e4be16acd5	feat(docs): added "How to use Lucide icons" section to resources (#4829 ) * fix(docs): replace missing LucideIcon icon names in guides * feat(docs): add How to use Lucide icons section to resources * feat(docs): update accessibility guide links * fix(docs): fix dead link in guide.md * fix(docs): fix color in example image * fix(docs): fix overlay color in example images * fix(how-to): added caution guidance type & rework some guidance rules relating to compact interfaces * fix(how-to): replaced caution items, what the heck, when did I reorder these 😅 * fix(how-to): fix colors --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com>	2026-09-10 16:07:18 +02:00
Karsa	ea1242d384	fix(icons): also fix album icon in HomeHeroIconsCard.data.ts (#4839 )	2026-09-10 15:34:39 +02:00
Karsa	7cf805a408	fix(icons): remove duplicate use-cases prop from cookie.json (#4838 )	2026-09-10 15:28:15 +02:00
Karsa	c2c28580b3	fix(icons): changed `cookie` icon (#4815 ) * Updated icons/cookie.svg * Updated icons/cookie.json * Updated icons/cookie.svg * Updated icons/cookie.json * Updated icons/cookie.json	2026-09-10 12:47:06 +02:00
vuong quang huygithub-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>Copilot Autofix powered by AI Jakob Guddas Eric Fennis	858b662775	feat(icons): added `plant-pot` icon (#3122 ) * Added icons/plant-pot.svg * Added icons/plant-pot.json * Updated icons/plant-pot.svg * Updated icons/plant-pot.svg * Apply batched suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Add use-cases field to plant-pot.json Added an empty array for use-cases in the plant-pot icon JSON. * Update plant-pot.svg with new design paths from @karsamistmere * Add contributor 'karsa-mistmere' to plant-pot.json * Add use cases for plant pot icon Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: Jakob Guddas <github@jguddas.de> Co-authored-by: Eric Fennis <eric.fennis@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>	2026-09-10 12:22:43 +02:00
MirazStudio Copilot Autofix powered by AI Mirazstudio-offical Eric Fennis	c17f928577	feat(icons): add `messages-circle` icon (#4754 ) * feat: add messages-circle icon * chore: apply bot metadata suggestions * fix: update messages-circle to compliant design and add contributors * Revise use cases for messaging icon Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: Mirazstudio-offical <miraza@example.com> Co-authored-by: Eric Fennis <eric.fennis@gmail.com> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>	2026-09-10 12:21:47 +02:00
Elena Kovelskikhgithub-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>Copilot Autofix powered by AI Eric Fennis	d32ef89ef9	feat(icons): added `notebook-dot` icon (#3228 ) * Added icons/notebook-dot.svg * Added icons/notebook-dot.json * Update notebook-dot.svg * Apply suggestion from @github-actions[bot] Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Add use-cases field to notebook-dot.json * Apply batched suggestions from code review Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>	2026-09-10 12:17:44 +02:00
Daniel Bayley Copilot Autofix powered by AI Eric Fennis	5fb5967884	feat(icons): added `houses` icon (#3241 ) * feat(icons): added `houses` icon * Update icons/houses.svg * Add contributor 'jguddas' to houses.json * Add use cases for houses icon Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * Remove houses from lab --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>	2026-09-10 12:17:21 +02:00
Mo	1cb69f6f9c	fix(icons): correct misspelled tags (#4836 )	2026-09-10 11:10:12 +02:00
Ajok Thon Claude Opus 5 Brizen Eric Fennis	6d4501f4d3	feat(icons): added peace-sign icon (#3001 ) * play with image * changes to width * changes to contributing image to show on github * peace-sign * feat(lab): moved `peace-sign` icon to lab Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> --------- Co-authored-by: Brizen <bcb5360@nyu.edu> Co-authored-by: Eric Fennis <eric.fennis@gmail.com> Co-authored-by: Claude Opus 5 <noreply@anthropic.com>	2026-09-10 11:05:51 +02:00
Karsa Karsa Jakob Guddas Eric Fennis	ba642ebf42	fix(icons): changed `album`, `book-marked`, `folder-bookmark` icons (#3043 ) * [github] Added issue template forms * [github] yaml => yml * Syntax fixes * Further syntax fixes * Sort issue templates * Update 02_bug_report.yml * Updated icons/album.svg * Updated icons/album.json * fix(icons): change album, folder-bookmark & book-marked * fix(icons): change album, folder-bookmark & book-marked --------- Co-authored-by: Karsa <karsa@karsa.org> Co-authored-by: Jakob Guddas <github@jguddas.de> Co-authored-by: Eric Fennis <eric.fennis@gmail.com>	2026-09-10 10:49:40 +02:00
Skajosborngithub-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>Copilot Autofix powered by AI Jakob Guddas Eric Fennis	2f7d975022	feat(icons): added `park` icon (#3177 ) * Added icons/park.svg * Added icons/park.json * Updated icons/park.svg * Updated icons/park.svg * Updated icons/park.svg * Updated icons/park.svg * Updated icons/park.svg * Updated icons/park.json * Update park.json * Update icons/park.json Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Apply design from @jguddas * Add contributor 'jguddas' to park.json * Fix typo in 'use-cased' to 'use-cases' * Apply batched suggestions from code review Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * format code --------- Co-authored-by: Jakob Guddas <github@jguddas.de> Co-authored-by: Eric Fennis <eric.fennis@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>	2026-09-10 10:47:52 +02:00
Alex Martingithub-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>Claude Opus 5 Eric Fennis	b115c04286	feat(lab): added `monstera-leaf` icon (#4115 ) * Added icons/monstera-leaf.svg * Added icons/monstera-leaf.json * Updated icons/monstera-leaf.json * Update icons/monstera-leaf.json Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * feat(lab): moved `monstera-leaf` icon to lab Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * Add custom word --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Eric Fennis <eric.fennis@gmail.com> Co-authored-by: Claude Opus 5 <noreply@anthropic.com>	2026-09-10 10:47:42 +02:00
Samuel Alakegithub-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>Eric Fennis	5d0f64034b	feat(icons): add `layout-arrow-right` and `layout-arrow-down` (#4541 ) * feat(icons): add layout-horizontal and layout-vertical Adds two icons for layout direction: two blocks above a left-to-right rail, and two blocks beside a top-to-bottom rail. These match the frame layout direction modes found in design tools and CSS flex-direction (row / column). This fills a gap identified when the flexbox icon request (#399) was closed: "Only missing icons are: flex-direction and flex-wrap icons, plus baseline." The align-* and stretch-* family covers alignment, justification and distribution, but nothing currently depicts direction itself. Design notes: - Reuses the 7x7 rx=1 block already shared by layout-grid, layout-list and layout-panel-, rather than introducing a new base shape. - The two icons are exact mirrors, with rails on the integer grid (y=18 / x=18) so the 2px stroke stays sharp at low DPI. - The 3x3 chevron is the one used by decimals-arrow-right, which shares the same composition: elements above, directional rail below. Rename icons * Apply batched suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update usecases --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2026-09-10 10:28:57 +02:00
Usama Khan Eric Fennis Karsa	8a225b9fa7	fix(icons): changed `lectern` icon (#2925 ) * Updated icons/lectern.svg * Updated icons/lectern.json * Apply design from karsa * Update lectern.json * Update lectern.svg --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com> Co-authored-by: Karsa <contact@karsa.org>	2026-09-10 10:18:10 +02:00
Karsa	95989f4535	feat(icons): added iv-bag icon (#4821 )	2026-09-10 10:07:04 +02:00
Karsa	073ffe0448	feat(icons): added `mouth` & `mouth-off` (#4787 ) * feat(icons): added mouth & mouth-off * feat(icons): added juliansolimando as a co-contributor	2026-09-10 09:59:25 +02:00
Lazizbek Ergashev Copilot Autofix powered by AI Eric Fennis	30f2eda422	feat(icons): add hourglass-cog icon (#4635 ) * feat(icons): add hourglass-cog icon * fix(icons): credit rrod497 as hourglass-cog designer * Remove 'hourglass' icon from JSON file Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>	2026-09-10 09:49:54 +02:00
Tylergithub-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>Karsa Eric Fennis	a68cc8d52f	feat(icons): added `building-complex-plus` icon (#4758 ) * feat(icons): added `building-2-plus` icon * Update icons/building-2-plus.json Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update icons/building-2-plus.json Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Add building-complex-plus.json icon file * Add building-complex-plus.svg icon * Update icons/building-complex-plus.json Co-authored-by: Karsa <contact@karsa.org> * Update icons/building-complex-plus.svg Co-authored-by: Karsa <contact@karsa.org> * rename building-2 icon to building-complex --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Karsa <contact@karsa.org> Co-authored-by: Eric Fennis <eric.fennis@gmail.com>	2026-09-10 09:40:23 +02:00
Alexandre Philibertgithub-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>Copilot Autofix powered by AI Eric Fennis	249fe3a120	feat(icons): added `calendar-chevrons-right` icon (#3565 ) * feat(icons): added calendar-chevrons-right icon * Update icons/calendar-chevrons-right.json Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Add use-cases field to calendar-chevrons-right.json * Apply batched suggestions from code review Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * Applied suggestion from @karsa-mistmere --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Eric Fennis <eric.fennis@gmail.com> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>	2026-09-10 09:32:28 +02:00
Karsaandgithub-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	07ed920096	feat(icons): added `toothbrush` icon (#4755 ) * Added icons/toothbrush.svg * Added icons/toothbrush.json * Update toothbrush.json * Update icons/toothbrush.json Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Create toothbrush-sparkles.svg * Create toothbrush-sparkles.json --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2026-09-10 09:29:21 +02:00
MoandJakob Guddas	cef2020c7a	fix(icons): correct compromised tags in shield icons (#4835 ) Replace the misspelled comprimised tag across the five affected shield variants so displayed metadata and exact tag matching use the correct spelling. Co-authored-by: Jakob Guddas <github@jguddas.de>	2026-09-10 09:17:39 +02:00