feat(lab): add check-x icon (#4737)

* feat(icons): add check-x icon (#4130)

* Move check x to lab

* fix(lab): add missing use-cases array to lab/check-x.json

* Add use cases for notifications in check-x.json

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: ishanbagra18 <your-email@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>

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

@@ -122,7 +122,7 @@ const categoriesList = computed(() => {
 });
 const searchPlaceholder = useSearchPlaceholder(searchQuery, searchResults);
 const isSearchMetadataLoading = computed(
-  () => searchQuery.value.length > 0 && (tags.value == null || categoriesMap.value == null),
+  () => searchQuery.value.length > 0 && !isFetchingTags && !isFetchingCategories,
 );
 
 const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(categoriesList, {

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

@@ -88,9 +88,13 @@ const mappedIcons = computed(() => {
     return sortedIcons.value;
   }
 
+  if (categories.value == null) {
+    return sortedIcons.value;
+  }
+
   return sortedIcons.value.map((icon) => {
     const iconTags = tags.value[icon.name];
-    const iconCategories = categories.value?.[icon.name] ?? [];
+    const iconCategories = categories.value[icon.name] ?? [];
 
     return {
       ...icon,
@@ -115,7 +119,7 @@ const searchResults = useSearch(searchQueryDebounced, mappedIcons, [
 
 const searchPlaceholder = useSearchPlaceholder(searchQuery, searchResults);
 const isSearchMetadataLoading = computed(
-  () => searchQuery.value.length > 0 && (tags.value == null || categories.value == null),
+  () => searchQuery.value.length > 0 && !isFetchingTags && !isFetchingCategories,
 );
 
 const chunkedIcons = computed(() => {

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

@@ -9,6 +9,7 @@ const useSearch = <T>(
   const index = shallowRef(
     new Fuse(collection.value, {
       threshold: 0.2,
+      useExtendedSearch: true,
       keys,
     }),
   );
@@ -17,7 +18,9 @@ const useSearch = <T>(
     index.value.setCollection(collection.value);
 
     if (query.value) {
-      return index.value.search(query.value).map((result) => result.item);
+      return index.value
+        .search({ $and: query.value.split(' ').filter((t) => !!t) })
+        .map((result) => result.item);
     }
 
     return collection.value;

docs/.vitepress/theme/utils/useSearchPlaceholder.ts

@@ -29,7 +29,7 @@ export default function useSearchPlaceholder(
         }
       }
       state.value = {
-        isNoResults: query in BRAND_STOPWORDS && searchResults.length === 0 && query !== '',
+        isNoResults: query !== '' && searchResults.length === 0,
         isBrand: query in BRAND_STOPWORDS,
         query: BRAND_STOPWORDS[query] ?? query,
       };

docs/contribute/icons/metadata-conventions/tag-guide.md

@@ -18,10 +18,10 @@ Tags help people find icons by concept, synonym, context, or common wording.
 Tags should always be lowercase.
 
 :::: example
-::: do <LucideIcon :iconNode="mail" /> email
+::: do <LucideIcon name="mail" :iconNode="mail" /> email
 Lowercase tags **match the style** used across the icon library.
 :::
-::: dont <LucideIcon :iconNode="mail" /> Email
+::: dont <LucideIcon name="mail" :iconNode="mail" /> Email
 Capitalized tags create **inconsistent metadata** without improving search.
 :::
 ::::
@@ -31,10 +31,10 @@ Capitalized tags create **inconsistent metadata** without improving search.
 Use one clear word when it is enough. Use multi-word tags when the phrase is clearer.
 
 :::: example
-::: do <LucideIcon :iconNode="search" /> search
+::: do <LucideIcon name="search" :iconNode="search" /> search
 This is **short, common, and easy to find**.
 :::
-::: dont <LucideIcon :iconNode="search" /> searching through files & folders
+::: dont <LucideIcon name="search" :iconNode="search" /> searching through files & folders
 This reads like a **use case**, not a tag.
 :::
 ::::
@@ -44,10 +44,10 @@ This reads like a **use case**, not a tag.
 Some ideas are only clear as a phrase. But keep those phrases short.
 
 :::: example
-::: do <LucideIcon :iconNode="droplet" /> blood type
+::: do <LucideIcon name="droplet" :iconNode="droplet" /> blood type
 The phrase is **clearer** than either word on its own.
 :::
-::: dont <LucideIcon :iconNode="droplet" /> blood type medical label
+::: dont <LucideIcon name="droplet" :iconNode="droplet" /> blood type medical label
 This combines **several search concepts** into one long tag.
 :::
 ::::
@@ -57,10 +57,10 @@ This combines **several search concepts** into one long tag.
 Tags can include words people are likely to search for, even if they are not in the icon name.
 
 :::: example
-::: do <LucideIcon :iconNode="mail" /> email
+::: do <LucideIcon name="mail" :iconNode="mail" /> email
 This helps users find `mail` icons using a **common synonym**.
 :::
-::: dont <LucideIcon :iconNode="mail" /> electronic postal message delivery
+::: dont <LucideIcon name="mail" :iconNode="mail" /> electronic postal message delivery
 This is unlikely search wording and **adds noise**.
 :::
 ::::
@@ -70,10 +70,10 @@ This is unlikely search wording and **adds noise**.
 The icon name is already searchable. Tags should add other ways to find it.
 
 :::: example
-::: do <LucideIcon :iconNode="mailSearch" /> message filter
+::: do <LucideIcon name="mail-search" :iconNode="mailSearch" /> message filter
 This adds a **related concept** for `mail-search` without duplicating the name.
 :::
-::: dont <LucideIcon :iconNode="mailSearch" /> mail search
+::: dont <LucideIcon name="mail-search" :iconNode="mailSearch" /> mail search
 This **repeats the icon name** and does not improve discovery.
 :::
 ::::
@@ -83,10 +83,10 @@ This **repeats the icon name** and does not improve discovery.
 Tags should describe the icon, not say that it is an icon.
 
 :::: example
-::: do <LucideIcon :iconNode="calendar" /> event
+::: do <LucideIcon name="calendar" :iconNode="calendar" /> event
 This points to a **specific idea** users might search for.
 :::
-::: dont <LucideIcon :iconNode="calendar" /> icon
+::: dont <LucideIcon name="calendar" :iconNode="calendar" /> icon
 **Every entry is an icon**, so this tag does not help anyone find the right one.
 :::
 ::::
@@ -96,10 +96,10 @@ This points to a **specific idea** users might search for.
 Do not add loose terms just to make an icon appear in more searches.
 
 :::: example
-::: do <LucideIcon :iconNode="hospital" /> emergency room
+::: do <LucideIcon name="hospital" :iconNode="hospital" /> emergency room
 This is **relevant** for an icon that marks emergency room locations.
 :::
-::: dont <LucideIcon :iconNode="hospital" /> doctor nurse pharmacy
+::: dont <LucideIcon name="hospital" :iconNode="hospital" /> doctor nurse pharmacy
 These terms may be **nearby concepts**, but they do not all describe the same icon.
 :::
 ::::
@@ -109,10 +109,10 @@ These terms may be **nearby concepts**, but they do not all describe the same ic
 Related icons can share family terms, but variant tags should describe what is different.
 
 :::: example
-::: do <LucideIcon :iconNode="batteryLow" /> depleted
+::: do <LucideIcon name="battery-low" :iconNode="batteryLow" /> depleted
 This distinguishes `battery-low` from **other battery icons**.
 :::
-::: dont <LucideIcon :iconNode="batteryLow" /> charged
+::: dont <LucideIcon name="battery-low" :iconNode="batteryLow" /> charged
 This describes `battery-full` better than `battery-low`.
 :::
 ::::
@@ -122,10 +122,10 @@ This describes `battery-full` better than `battery-low`.
 Check similar icons before adding new tags. Reusing existing terms keeps search predictable.
 
 :::: example
-::: do <LucideIcon :iconNode="type" /> typography
+::: do <LucideIcon name="type" :iconNode="type" /> typography
 This matches existing text-formatting icons and keeps **related icons** together in search.
 :::
-::: dont <LucideIcon :iconNode="type" /> fontography
+::: dont <LucideIcon name="type" :iconNode="type" /> fontography
 Inventing a new term makes the icon harder to find and less consistent with related metadata.
 :::
 ::::

docs/contribute/icons/metadata-conventions/use-case-guide.md

@@ -16,10 +16,10 @@ This guide shows how to write clear use cases for Lucide icons.
 Describe what the interface tells the user. Do not write from the contributor's point of view.
 
 :::: example
-::: do <LucideIcon :iconNode="wifiOff" /> Indicating a device is offline or unreachable
+::: do <LucideIcon name="wifi-off" :iconNode="wifiOff" /> Indicating a device is offline or unreachable
 This describes the **role the icon plays in an interface**.
 :::
-::: dont <LucideIcon :iconNode="wifiOff" /> I need an icon for my offline device screen
+::: dont <LucideIcon name="wifi-off" :iconNode="wifiOff" /> I need an icon for my offline device screen
 This explains the **contributor's situation**, not the icon's purpose.
 :::
 ::::
@@ -29,10 +29,10 @@ This explains the **contributor's situation**, not the icon's purpose.
 A use case should explain what the icon means in context. Do not repeat the icon name or only describe the drawing.
 
 :::: example
-::: do <LucideIcon :iconNode="microchip" /> Representing processors, chips, or embedded hardware
+::: do <LucideIcon name="microchip" :iconNode="microchip" /> Representing processors, chips, or embedded hardware
 This explains `microchip` **without repeating the name**.
 :::
-::: dont <LucideIcon :iconNode="microchip" /> it's a microchip icon
+::: dont <LucideIcon name="microchip" :iconNode="microchip" /> it's a microchip icon
 This **duplicates the icon name** and does not explain where the icon would be used.
 :::
 ::::
@@ -42,10 +42,10 @@ This **duplicates the icon name** and does not explain where the icon would be u
 Some icons have broad meanings. Add context when it makes the use case clearer.
 
 :::: example
-::: do <LucideIcon :iconNode="heading2" /> Applying a level-2 heading in text editors
+::: do <LucideIcon name="heading-2" :iconNode="heading2" /> Applying a level-2 heading in text editors
 The phrase explains both the **action and the product area**.
 :::
-::: dont <LucideIcon :iconNode="heading2" /> Applying a heading
+::: dont <LucideIcon name="heading-2" :iconNode="heading2" /> Applying a heading
 This is less useful because it **omits the level and context**.
 :::
 ::::
@@ -55,10 +55,10 @@ This is less useful because it **omits the level and context**.
 Each entry should cover one clear idea. Split different meanings into separate entries.
 
 :::: example
-::: do <LucideIcon :iconNode="squareParking" /> Marking parking locations on maps
+::: do <LucideIcon name="square-parking" :iconNode="squareParking" /> Marking parking locations on maps
 This is **short, clear, and focused** on one interface function.
 :::
-::: dont <LucideIcon :iconNode="squareParking" /> Marking parking, transport, maps, cars, garages, and places
+::: dont <LucideIcon name="square-parking" :iconNode="squareParking" /> Marking parking, transport, maps, cars, garages, and places
 This reads like a **tag list** and **mixes several ideas**.
 :::
 ::::
@@ -68,10 +68,10 @@ This reads like a **tag list** and **mixes several ideas**.
 For related icons, describe what makes each variant different.
 
 :::: example
-::: do <LucideIcon :iconNode="batteryLow" /> Indicating a low battery charge level
+::: do <LucideIcon name="battery-low" :iconNode="batteryLow" /> Indicating a low battery charge level
 This is specific to `battery-low` and **sets it apart** from other battery icons.
 :::
-::: dont <LucideIcon :iconNode="batteryLow" /> Representing battery status
+::: dont <LucideIcon name="battery-low" :iconNode="batteryLow" /> Representing battery status
 This is **too generic** and could apply to **every battery variant**.
 :::
 ::::
@@ -81,10 +81,10 @@ This is **too generic** and could apply to **every battery variant**.
 Use cases should make sense after the pull request is merged.
 
 :::: example
-::: do <LucideIcon :iconNode="handshake" /> Signifying a deal, agreement, or partnership
+::: do <LucideIcon name="handshake" :iconNode="handshake" /> Signifying a deal, agreement, or partnership
 This keeps the **useful meaning** without depending on **outside context**.
 :::
-::: dont <LucideIcon :iconNode="handshake" /> Same as above in #1234
+::: dont <LucideIcon name="handshake" :iconNode="handshake" /> Same as above in #1234
 This **depends on a discussion** readers **may never see**.
 :::
 ::::
@@ -94,10 +94,10 @@ This **depends on a discussion** readers **may never see**.
 Use cases should usually be 4 to 12 words. Prefer a short phrase over a long explanation.
 
 :::: example
-::: do <LucideIcon :iconNode="search" /> Searching files by name or content
+::: do <LucideIcon name="search" :iconNode="search" /> Searching files by name or content
 This is **short enough** to scan and **specific enough** to understand.
 :::
-::: dont <LucideIcon :iconNode="search" /> This icon can be used when users want to search through all of their files and folders to find something
+::: dont <LucideIcon name="search" :iconNode="search" /> This icon can be used when users want to search through all of their files and folders to find something
 This is **too long** and reads like **product copy instead of metadata**.
 :::
 ::::
@@ -107,10 +107,10 @@ This is **too long** and reads like **product copy instead of metadata**.
 Use cases are metadata phrases, not full sentences.
 
 :::: example
-::: do <LucideIcon :iconNode="creditCard" /> Confirming a successful payment
+::: do <LucideIcon name="credit-card" :iconNode="creditCard" /> Confirming a successful payment
 This matches the **phrase style** used across icon metadata.
 :::
-::: dont <LucideIcon :iconNode="creditCard" /> Confirming a successful payment.
+::: dont <LucideIcon name="credit-card" :iconNode="creditCard" /> Confirming a successful payment.
 The period adds **unnecessary punctuation** and makes entries inconsistent.
 :::
 ::::
@@ -120,10 +120,10 @@ The period adds **unnecessary punctuation** and makes entries inconsistent.
 Use plain text only. Formatting belongs in documentation, not metadata values.
 
 :::: example
-::: do <LucideIcon :iconNode="triangleAlert" /> Warning users about a destructive action
+::: do <LucideIcon name="triangle-alert" :iconNode="triangleAlert" /> Warning users about a destructive action
 This works in search, generated pages, and other places that use metadata.
 :::
-::: dont <LucideIcon :iconNode="triangleAlert" /> <span>**Warning** users about a destructive action ⚠️</span>
+::: dont <LucideIcon name="triangle-alert" :iconNode="triangleAlert" /> <span>**Warning** users about a destructive action ⚠️</span>
 Markdown and emoji can **show up in generated UI** and make metadata **harder to reuse**.
 :::
 ::::
@@ -133,10 +133,10 @@ Markdown and emoji can **show up in generated UI** and make metadata **harder to
 Use cases should describe meaning, not how the SVG was made.
 
 :::: example
-::: do <LucideIcon :iconNode="crop" /> Representing cropped or trimmed content
+::: do <LucideIcon name="crop" :iconNode="crop" /> Representing cropped or trimmed content
 This explains the icon's **interface meaning**.
 :::
-::: dont <LucideIcon :iconNode="crop" /> Showing a rectangle with two path cuts and adjusted Bezier handles
+::: dont <LucideIcon name="crop" :iconNode="crop" /> Showing a rectangle with two path cuts and adjusted Bezier handles
 This describes **construction details** that do not help people find or understand the icon.
 :::
 ::::

docs/contribute/icons/naming-conventions.md

@@ -82,19 +82,19 @@ Icon names **must** use American English, not local variants.
 Icon names **must** describe what the icon shows, not how someone might use it.
 
 :::: example
-::: do <LucideIcon :iconNode="save" /> `floppy-disk`
+::: do <LucideIcon name="save" :iconNode="save" /> `floppy-disk`
 The icon **shows** a floppy disk.
 :::
-::: dont <LucideIcon :iconNode="save" /> `save`
+::: dont <LucideIcon name="save" :iconNode="save" /> `save`
 Save is a use case.
 :::
 ::::
 
 :::: example
-::: do <LucideIcon :iconNode="ban" /> `circle-slash`
+::: do <LucideIcon name="ban" :iconNode="ban" /> `circle-slash`
 The icon **shows** a circle with a slash across it.
 :::
-::: dont <LucideIcon :iconNode="ban" /> `ban`
+::: dont <LucideIcon name="ban" :iconNode="ban" /> `ban`
 Ban is an action.
 :::
 ::::
@@ -110,10 +110,10 @@ Icons that belong to the same group **must** use the `<group>-<variant>` naming
 The group name comes first. The variant comes after it.
 
 :::: example
-::: do <span><LucideIcon :iconNode="badgePlus" /> + <LucideIcon :iconNode="badgeCheck" /></span> <span>`badge-plus` & `badge-check`</span>
+::: do <span><LucideIcon name="badge-plus" :iconNode="badgePlus" /> + <LucideIcon name="badge-check" :iconNode="badgeCheck" /></span> <span>`badge-plus` & `badge-check`</span>
 `badge` is the group.
 :::
-::: dont <span><LucideIcon :iconNode="badgePlus" /> + <LucideIcon :iconNode="badgeCheck" /></span> <span>`plus-badge` & `check-badge`</span>
+::: dont <span><LucideIcon name="badge-plus" :iconNode="badgePlus" /> + <LucideIcon name="badge-check" :iconNode="badgeCheck" /></span> <span>`plus-badge` & `check-badge`</span>
 `plus` and `check` are not the group.
 :::
 ::::
@@ -123,10 +123,10 @@ The group name comes first. The variant comes after it.
 Alternate versions of an icon **must** be named for what makes them visually different. Do **not** use numbers just to separate one version from another.
 
 :::: example
-::: do <LucideIcon :iconNode="sendHorizontal" /> `send-horizontal`
+::: do <LucideIcon name="send-horizontal" :iconNode="sendHorizontal" /> `send-horizontal`
 The icon depicts a horizontal "send" symbol.
 :::
-::: dont <LucideIcon :iconNode="sendHorizontal" /> <span>`send-2` or `send-alt`</span>
+::: dont <LucideIcon name="send-horizontal" :iconNode="sendHorizontal" /> <span>`send-2` or `send-alt`</span>
 "send number 2" and "alternative send" are not clear names.
 :::
 ::::
@@ -136,19 +136,19 @@ The icon depicts a horizontal "send" symbol.
 Icon names **must not** include numbers unless the icon shows the number.
 
 :::: example
-::: do <LucideIcon :iconNode="arrowDown01" /> `arrow-down-0-1`
+::: do <LucideIcon name="arrow-down-0-1" :iconNode="arrowDown01" /> `arrow-down-0-1`
 The arrow points from 0 to 1.
 :::
-::: dont <LucideIcon :iconNode="sendHorizontal" /> `send-2`
+::: dont <LucideIcon name="send-horizontal" :iconNode="sendHorizontal" /> `send-2`
 The icon does not show the number 2.
 :::
 ::::
 
 :::: example
-::: do <LucideIcon :iconNode="clock3" /> `clock-3`
+::: do <LucideIcon name="clock-3" :iconNode="clock3" /> `clock-3`
 The hands point to 3 o'clock.
 :::
-::: dont <LucideIcon :iconNode="userRound" /> `user-3`
+::: dont <LucideIcon name="user-round" :iconNode="userRound" /> `user-3`
 The icon does not show the number 3.
 :::
 ::::
@@ -162,10 +162,10 @@ When an icon shows multiple elements of different sizes, order their names from
 For an icon containing a circle and a person:
 
 :::: example
-::: do <LucideIcon :iconNode="moonStar" /> `moon-star`
+::: do <LucideIcon name="moon-star" :iconNode="moonStar" /> `moon-star`
 The `moon` is larger than the `star`.
 :::
-::: dont <LucideIcon :iconNode="circleUser" /> `person-circle`
+::: dont <LucideIcon name="circle-user" :iconNode="circleUser" /> `person-circle`
 The `person` is **not** larger than the `circle`.
 :::
 ::::
@@ -179,19 +179,19 @@ If elements overlap, name them from front to back.
 If they do not overlap, name them in English reading order: top to bottom, then left to right.
 
 :::: example
-::: do <LucideIcon :iconNode="pencilRuler" /> `pencil-ruler`
+::: do <LucideIcon name="pencil-ruler" :iconNode="pencilRuler" /> `pencil-ruler`
 The `pencil` is **in front** of the `ruler`, so it comes first.
 :::
-::: do <LucideIcon :iconNode="rulerDimensionLine" /> `ruler-dimension-line`
+::: do <LucideIcon name="ruler-dimension-line" :iconNode="rulerDimensionLine" /> `ruler-dimension-line`
 The ruler is below the dimension line, but it is **larger**, so it comes first.
 :::
 ::::
 
 :::: example
-::: do <LucideIcon :iconNode="sunSnow" /> `sun-snow`
+::: do <LucideIcon name="sun-snow" :iconNode="sunSnow" /> `sun-snow`
 The `sun` is **left of** the `snowflake`, so it comes first.
 :::
-::: dont <LucideIcon :iconNode="pencilRulerHorizontal" /> `ruler-pencil`
+::: dont <LucideIcon name="pencil-ruler-horizontal" :iconNode="pencilRulerHorizontal" /> `ruler-pencil`
 The `ruler` is **below** the `pencil`, so `pencil-ruler` is the correct name.
 :::
 ::::
@@ -201,10 +201,10 @@ The `ruler` is **below** the `pencil`, so `pencil-ruler` is the correct name.
 Modifiers **must** come after the element they describe: `<element>-<modifier>`.
 
 :::: example
-::: do <LucideIcon :iconNode="heartCrack" /> `heart-broken`
+::: do <LucideIcon name="heart-crack" :iconNode="heartCrack" /> `heart-broken`
 The icon shows a heart that is **cracked**.
 :::
-::: dont <LucideIcon :iconNode="boneFracture" /> `broken-bone`
+::: dont <LucideIcon name="bone-fracture" :iconNode="boneFracture" /> `broken-bone`
 The icon shows a bone that is **broken**, so name it `bone-broken`.
 :::
 ::::
@@ -212,12 +212,12 @@ The icon shows a bone that is **broken**, so name it `bone-broken`.
 When an icon has multiple modified elements, each modifier **must** follow the element it describes.
 
 :::: example
-::: do <LucideIcon :iconNode="circleFadingArrowUp" /> `circle-fading-arrow-up`
+::: do <LucideIcon name="circle-fading-arrow-up" :iconNode="circleFadingArrowUp" /> `circle-fading-arrow-up`
 The icon shows a **fading** circle with an arrow pointing **up** inside it.
 
 `circle` comes first because it is larger than `arrow`. `fading` follows `circle` because it modifies the circle. `up` follows `arrow` because it modifies the arrow.
 :::
-::: dont <LucideIcon :iconNode="notepadTextDashed" /> `notepad-text-dashed`
+::: dont <LucideIcon name="notepad-text-dashed" :iconNode="notepadTextDashed" /> `notepad-text-dashed`
 This icon shows a dashed notepad with text inside, so name it `notepad-dashed-text`.
 
 `notepad` comes first because it is larger than `text`. `dashed` follows `notepad` because it modifies the notepad. `text` follows both because `dashed` does not modify `text`.

icons/carton-off.json

@@ -0,0 +1,39 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley",
+    "karsa-mistmere"
+  ],
+  "use-cases": [
+    "Marking lactose-free or non-dairy beverages",
+    "Indicating unavailable packaged drinks in menus",
+    "Showing restricted dairy products in diet filters",
+    "Representing excluded milk products for allergies"
+  ],
+  "tags": [
+    "milk",
+    "dairy",
+    "beverage",
+    "drink",
+    "diet",
+    "lactose free",
+    "non dairy",
+    "liquid",
+    "liter",
+    "litre",
+    "pint",
+    "pints",
+    "pasteurized",
+    "skim",
+    "skimmed",
+    "container",
+    "packaging",
+    "allergy",
+    "intolerance",
+    "vegan",
+    "unavailable"
+  ],
+  "categories": [
+    "food-beverage"
+  ]
+}

icons/carton-off.svg

@@ -0,0 +1,18 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M10 10H5v10a2 2 0 002 2h10a2 2 0 002-2v-1" />
+  <path d="M13 22v-9" />
+  <path d="M13.902 8.245 16 6h-4.343" />
+  <path d="M19 13.343V10a2 2 0 00-.539-1.367L16 6V3a1 1 0 00-1-1H9a1 1 0 00-.857.486" />
+  <path d="m2 2 20 20" />
+  <path d="M7.034 7.034 5.539 8.633A2 2 0 005 10" />
+</svg>

icons/carton.json

@@ -0,0 +1,38 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley",
+    "karsa-mistmere"
+  ],
+  "use-cases": [
+    "Representing milk or dairy products",
+    "Showing packaged beverages in grocery apps",
+    "Marking liquid containers in inventory systems",
+    "Indicating packaged drink sizes in food catalogs"
+  ],
+  "tags": [
+    "milk",
+    "dairy",
+    "beverage",
+    "drink",
+    "diet",
+    "lactose",
+    "liquid",
+    "liter",
+    "litre",
+    "pint",
+    "pints",
+    "pasteurized",
+    "skim",
+    "skimmed",
+    "container",
+    "packaging",
+    "grocery",
+    "juice",
+    "cream",
+    "cow"
+  ],
+  "categories": [
+    "food-beverage"
+  ]
+}

icons/carton.svg

@@ -9,7 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M16 6V3c0-.6-.4-1-1-1H9c-.6 0-1 .4-1 1v3l-3 4v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V10Z" />
-  <path d="M13 22V10l3-4H8" />
+  <path d="M13 22V10a2 2 0 01.539-1.367L16 6H8L5.539 8.633A2 2 0 005 10v10a2 2 0 002 2h10a2 2 0 002-2V10a2 2 0 00-.539-1.367L16 6V3a1 1 0 00-1-1H9a1 1 0 00-1 1v3" />
   <path d="M5 10h8" />
 </svg>

icons/credit-card-check.svg

@@ -10,6 +10,7 @@
   stroke-linejoin="round"
 >
   <path d="M12.5 19H4a2 2 0 01-2-2V7a2 2 0 012-2h16a2 2 0 012 2v4" />
-  <path d="m16 17 2 2 4-4" />
   <path d="M2 10h20" />
+  <path d="M6 14h2" />
+  <path d="m16 17 2 2 4-4" />
 </svg>

icons/credit-card-minus.svg

@@ -9,7 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M16 17h6" />
-  <path d="M22 10H2" />
   <path d="M22 13V7a2 2 0 00-2-2H4a2 2 0 00-2 2v10a2 2 0 002 2h8.536" />
+  <path d="M22 10H2" />
+  <path d="M6 14h2" />
+  <path d="M16 17h6" />
 </svg>

icons/credit-card-plus.svg

@@ -9,8 +9,9 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
+  <path d="M22 11.354V7a2 2 0 00-2-2H4a2 2 0 00-2 2v10a2 2 0 002 2h8.536" />
+  <path d="M22 10H2" />
+  <path d="M6 14h2" />
   <path d="M16 17h6" />
   <path d="M19 14v6" />
-  <path d="M22 10H2" />
-  <path d="M22 11.354V7a2 2 0 00-2-2H4a2 2 0 00-2 2v10a2 2 0 002 2h8.536" />
 </svg>

icons/credit-card-x.svg

@@ -10,7 +10,8 @@
   stroke-linejoin="round"
 >
   <path d="M12.5 19H4a2 2 0 01-2-2V7a2 2 0 012-2h16a2 2 0 012 2v3.5" />
-  <path d="m16.5 14.5 5 5" />
   <path d="M2 10h20" />
+  <path d="M6 14h2" />
+  <path d="m16.5 14.5 5 5" />
   <path d="m21.5 14.5-5 5" />
 </svg>

icons/credit-card.svg

@@ -11,4 +11,5 @@
 >
   <rect width="20" height="14" x="2" y="5" rx="2" />
   <line x1="2" x2="22" y1="10" y2="10" />
+  <path d="M6 14h2" />
 </svg>

icons/door-open.svg

@@ -10,8 +10,8 @@
   stroke-linejoin="round"
 >
   <path d="M10 21H2" />
-  <path d="M10 4a2 2 0 012.36-1.968l5.41.992A1.5 1.5 0 0119 4.5V21l-7.876.992A1 1 0 0110 21z" />
-  <path d="M10.268 3H7a2 2 0 00-2 2v16" />
+  <path d="M10 3H7a2 2 0 00-2 2v16" />
   <path d="M14 12h.01" />
+  <path d="M19 21V5a2 2 0 00-1.675-1.974l-6.163-1.013A1 1 0 0010 3v18a1 1 0 001.124.992z" />
   <path d="M22 21h-3" />
 </svg>

icons/id-card-lanyard.svg

@@ -10,8 +10,8 @@
   stroke-linejoin="round"
 >
   <path d="M13.5 8h-3" />
-  <path d="m15 2-1 2h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h3" />
-  <path d="M16.899 22A5 5 0 0 0 7.1 22" />
+  <path d="m15 2-1 2h3a2 2 0 012 2v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6a2 2 0 012-2h3" />
+  <path d="M16 22a4 4 0 00-8 0" />
   <path d="m9 2 3 6" />
   <circle cx="12" cy="15" r="3" />
 </svg>

icons/id-card.svg

@@ -9,9 +9,9 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
+  <path d="M13 19a4 4 0 00-8 0" />
   <path d="M16 10h2" />
   <path d="M16 14h2" />
-  <path d="M6.17 15a3 3 0 0 1 5.66 0" />
-  <circle cx="9" cy="11" r="2" />
+  <circle cx="9" cy="12" r="3" />
   <rect x="2" y="5" width="20" height="14" rx="2" />
 </svg>

icons/satellite-dish.json

@@ -4,12 +4,20 @@
     "karsa-mistmere",
     "ericfennis"
   ],
-  "use-cases": [],
+  "use-cases": [
+    "Configuring satellite communication or broadcast equipment",
+    "Indicating satellite television or radio reception",
+    "Representing ground stations and satellite tracking systems",
+    "Managing antennas, receivers or other wireless communication hardware"
+  ],
   "tags": [
     "antenna",
     "receiver",
     "dish aerial",
-    "saucer"
+    "saucer",
+    "communication",
+    "broadcast",
+    "signal"
   ],
   "categories": [
     "connectivity",

icons/satellite-dish.svg

@@ -9,8 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M4 10a7.31 7.31 0 0 0 10 10Z" />
-  <path d="m9 15 3-3" />
-  <path d="M17 13a6 6 0 0 0-6-6" />
-  <path d="M21 13A10 10 0 0 0 11 3" />
+  <path d="M18 12a6 6 0 00-6-6" />
+  <path d="M2.824 10.459a8 8 0 0010.717 10.717c.558-.276.623-1.012.183-1.452l-9.448-9.448c-.44-.44-1.176-.375-1.452.183" />
+  <path d="M22 12A10 10 0 0012 2" />
+  <path d="m9 15 4-4" />
 </svg>

icons/tic-tac-toe.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "karsa-mistmere"
+  ],
+  "use-cases": [
+    "Representing turn-based board games",
+    "Showing game boards in gaming interfaces",
+    "Indicating a casual multiplayer match",
+    "Representing pencil-and-paper games in kids apps",
+    "Showing a simple puzzle or challenge in onboarding flows",
+    "Denoting a tie or draw outcome in game results"
+  ],
+  "tags": [
+    "game",
+    "board",
+    "grid",
+    "strategy",
+    "noughts and crosses"
+  ],
+  "categories": [
+    "gaming"
+  ]
+}

icons/tic-tac-toe.svg

@@ -0,0 +1,20 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 2v20" />
+  <path d="m21 16-5 5" />
+  <path d="m21 21-5-5" />
+  <path d="M22 12H2" />
+  <path d="M8 3 3 8" />
+  <path d="M8 8 3 3" />
+  <circle cx="18.5" cy="5.5" r="2.5" />
+  <circle cx="5.5" cy="18.5" r="2.5" />
+</svg>

icons/triangles-centerline-dashed-horizontal.json

@@ -14,5 +14,12 @@
   "categories": [
     "design",
     "photography"
+  ],
+  "aliases": [
+    {
+      "name": "flip-horizontal-2",
+      "deprecated": true,
+      "deprecationReason": "alias.name"
+    }
   ]
 }

icons/triangles-centerline-dashed-horizontal.svg

@@ -9,10 +9,10 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="m17 3-5 5-5-5h10" />
-  <path d="m17 21-5-5-5 5h10" />
-  <path d="M4 12H2" />
   <path d="M10 12H8" />
   <path d="M16 12h-2" />
   <path d="M22 12h-2" />
+  <path d="M4 12H2" />
+  <path d="M7.298 20.288A1 1 0 008 22h8a1 1 0 00.703-1.712l-3.991-3.99a1 1 0 00-1.424-.001z" />
+  <path d="M7.298 3.712A1 1 0 018 2h8a1 1 0 01.703 1.712l-3.991 3.99a1 1 0 01-1.424.001z" />
 </svg>

icons/triangles-centerline-dashed-vertical.json

@@ -15,5 +15,12 @@
   "categories": [
     "design",
     "photography"
+  ],
+  "aliases": [
+    {
+      "name": "flip-vertical-2",
+      "deprecated": true,
+      "deprecationReason": "alias.name"
+    }
   ]
 }

icons/triangles-centerline-dashed-vertical.svg

@@ -9,10 +9,10 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="m3 7 5 5-5 5V7" />
-  <path d="m21 7-5 5 5 5V7" />
-  <path d="M12 20v2" />
   <path d="M12 14v2" />
-  <path d="M12 8v2" />
+  <path d="M12 20v2" />
   <path d="M12 2v2" />
+  <path d="M12 8v2" />
+  <path d="M20.288 16.703A1 1 0 0022 16V8a1 1 0 00-1.712-.703l-3.99 3.991a1 1 0 00-.001 1.424z" />
+  <path d="M3.712 16.703A1 1 0 012 16V8a1 1 0 011.712-.703l3.99 3.991a1 1 0 01.001 1.424z" />
 </svg>

lab/carton-off.json

@@ -1,23 +0,0 @@
-{
-  "$schema": "../icon.schema.json",
-  "contributors": [
-    "danielbayley"
-  ],
-  "tags": [
-    "milk",
-    "dairy",
-    "drink",
-    "diet",
-    "lactose free",
-    "liquid",
-    "litres",
-    "pints",
-    "pasturised",
-    "skimmed",
-    "container",
-    "vegan"
-  ],
-  "categories": [
-    "food-beverage"
-  ]
-}

lab/carton.json

@@ -1,23 +0,0 @@
-{
-  "$schema": "../icon.schema.json",
-  "contributors": [
-    "danielbayley"
-  ],
-  "tags": [
-    "milk",
-    "dairy",
-    "drink",
-    "diet",
-    "lactose",
-    "liquid",
-    "litres",
-    "pints",
-    "pasturised",
-    "skimmed",
-    "container",
-    "cow"
-  ],
-  "categories": [
-    "food-beverage"
-  ]
-}

lab/check-x.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "ishanbagra18"
+  ],
+  "tags": [
+    "uncheck",
+    "cancel",
+    "remove",
+    "unread",
+    "cross",
+    "mark",
+    "deselect",
+    "task"
+  ],
+  "categories": [
+    "notifications"
+  ],
+  "use-cases": [
+    "Unmarking / toggling read status (mark unread / uncheck)",
+    "Task & checklist management (cancel/reject a checked item)"
+  ]
+}

lab/check-x.svg

@@ -9,9 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M14.1 8.5 16 6V3c0-.6-.4-1-1-1H9" />
-  <path d="M11.7 6H16l3 4v3.3" />
-  <path d="m2 2 20 20" />
-  <path d="M19 19v1a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V10l2.1-2.9" />
-  <path d="M13 13v9" />
+  <path d="M16 6 7 15l-3-3" />
+  <path d="m14 14 6 6" />
+  <path d="m20 14-6 6" />
 </svg>

packages/icons/package.json

@@ -39,7 +39,6 @@
     "./dynamic": {
       "types": "./dist/esm/dynamic.d.ts",
       "import": "./dist/esm/dynamic.mjs",
-      "require": "./dist/cjs/dynamic.cjs",
       "default": "./dist/esm/dynamic.mjs"
     },
     "./build": {

packages/icons/rollup.config.mjs

@@ -18,10 +18,22 @@ const bundles = [
   },
   {
     format: 'esm',
-    inputs: [...inputs, './src/dynamic.ts', './src/build.ts'],
+    inputs: [...inputs, './src/dynamic.ts'],
     preserveModules: true,
     extension: 'mjs',
   },
+  {
+    format: 'cjs',
+    inputs: ['./src/build.ts'],
+    outputFile: 'dist/cjs/build.cjs',
+    extension: 'cjs',
+  },
+  {
+    format: 'esm',
+    inputs: ['./src/build.ts'],
+    outputFile: 'dist/esm/build.mjs',
+    extension: 'mjs',
+  },
 ];
 
 const configs = bundles