Compare commits

...
Author SHA1 Message Date
Skajosborngithub-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>Copilot Autofix powered by AIJakob GuddasEric 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 5Eric 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
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
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>KarsaEric 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 AIEric 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
8970c2c4f9 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>
2026-09-10 09:01:13 +02:00
Karsa 26993aba5a fix(icons): improve legibility of credit card icons (#4831) 2026-09-10 08:45:29 +02:00
Karsa a53bd66a03 fix(icons): arcified flip icons & renamed them (#4833) 2026-09-09 23:05:32 +02:00
Karsa 3bcf71f7cf fix(icons): changed satellite-dish icon (#4813)
* Updated icons/satellite-dish.svg

* Updated icons/satellite-dish.json
2026-09-09 14:20:16 +02:00
Karsa 9e5f0607cd feat(docs): fixed fuse js search (move single phrase search to matching all words) (#4825) 2026-09-09 14:19:48 +02:00
Karsa 75955ec47b fix(docs): replace missing LucideIcon icon names in guides (#4827) 2026-09-09 08:20:42 +02:00
Karsa 58fd3ccd59 fix(icons): changed door-open (#4826)
Made the top right corner have 2px corner radius
2026-09-08 23:06:29 +02:00
Karsa 22e6094bb5 feat(packages/icons): fixed @lucide/icons rollup config (#4824) 2026-09-08 19:49:41 +02:00
56 changed files with 812 additions and 96 deletions
+1
View File
@@ -10,3 +10,4 @@ touchpad
ungroup
toc
sunlounger
monstera
@@ -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, {
@@ -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(() => {
@@ -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;
@@ -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,
};
@@ -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.
:::
::::
@@ -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.
:::
::::
+22 -22
View File
@@ -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`.
+40
View File
@@ -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"
]
}
+20
View File
@@ -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>

After

Width:  |  Height:  |  Size: 499 B

@@ -19,5 +19,12 @@
"categories": [
"account",
"buildings"
],
"aliases": [
{
"name": "building-2",
"deprecated": true,
"deprecationReason": "alias.name"
}
]
}

Before

Width:  |  Height:  |  Size: 441 B

After

Width:  |  Height:  |  Size: 441 B

+37
View File
@@ -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"
]
}
+18
View File
@@ -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>

After

Width:  |  Height:  |  Size: 413 B

+2 -1
View File
@@ -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>

Before

Width:  |  Height:  |  Size: 332 B

After

Width:  |  Height:  |  Size: 355 B

+3 -2
View File
@@ -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>

Before

Width:  |  Height:  |  Size: 329 B

After

Width:  |  Height:  |  Size: 352 B

+3 -2
View File
@@ -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>

Before

Width:  |  Height:  |  Size: 357 B

After

Width:  |  Height:  |  Size: 380 B

+2 -1
View File
@@ -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>

Before

Width:  |  Height:  |  Size: 364 B

After

Width:  |  Height:  |  Size: 387 B

+1
View File
@@ -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>

Before

Width:  |  Height:  |  Size: 303 B

After

Width:  |  Height:  |  Size: 326 B

+2 -2
View File
@@ -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>

Before

Width:  |  Height:  |  Size: 423 B

After

Width:  |  Height:  |  Size: 415 B

+29
View File
@@ -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"
]
}
+25
View File
@@ -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>

After

Width:  |  Height:  |  Size: 747 B

+35
View File
@@ -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"
]
}
+15
View File
@@ -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 18v2a2 2 0 002 2h6" />
<path d="M6 11c.72.5 1.44 1 3 1 3 0 3-2 6-2 1.56 0 2.28.5 3 1" />
<path d="M9.293 3c.453 0 .887-.18 1.207-.5s.754-.5 1.207-.5h.586c.453 0 .887.18 1.207.5s.754.5 1.207.5H16a2 2 0 012 2v11a2 2 0 01-2 2H8a2 2 0 01-2-2V5a2 2 0 012-2z" />
</svg>

After

Width:  |  Height:  |  Size: 484 B

+34
View File
@@ -0,0 +1,34 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"samuelalake"
],
"use-cases": [
"Setting auto layout direction to vertical in design tools",
"Selecting flex-direction: column in devtools panels",
"Stacking content blocks top to bottom",
"Toggle between horizontal and vertical layouts in design tools",
"Switch to column view in file managers or galleries",
"Set flex-direction to column in css or style panels",
"Indicate vertical stacking mode in ui editors or prototyping tools",
"Choose vertical orientation for responsive layout controls"
],
"tags": [
"layout",
"direction",
"flex",
"flexbox",
"flex-direction",
"column",
"auto layout",
"vertical",
"arrange",
"order",
"flow",
"stack"
],
"categories": [
"design",
"layout"
]
}
+16
View File
@@ -0,0 +1,16 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="7" height="7" x="3" y="3" rx="1" />
<rect width="7" height="7" x="3" y="14" rx="1" />
<path d="M18 3v18" />
<path d="m21 18-3 3-3-3" />
</svg>

After

Width:  |  Height:  |  Size: 365 B

+34
View File
@@ -0,0 +1,34 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"samuelalake"
],
"use-cases": [
"Setting auto layout direction to horizontal in design tools",
"Selecting flex-direction: row in devtools panels",
"Switching sections from stacked to side-by-side",
"Switching the canvas to a horizontal layout",
"Choosing side-by-side or two-column display",
"Representing css flex-direction: row in developer tools",
"Toggling panel orientation in a ui",
"Selecting left-to-right flow in design editors"
],
"tags": [
"layout",
"direction",
"flex",
"flexbox",
"flex-direction",
"row",
"auto layout",
"horizontal",
"arrange",
"order",
"flow",
"stack"
],
"categories": [
"design",
"layout"
]
}
+16
View File
@@ -0,0 +1,16 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="7" height="7" x="3" y="3" rx="1" />
<rect width="7" height="7" x="14" y="3" rx="1" />
<path d="M3 18h18" />
<path d="m18 21 3-3-3-3" />
</svg>

After

Width:  |  Height:  |  Size: 365 B

+4 -3
View File
@@ -9,7 +9,8 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M16 12h3a2 2 0 0 0 1.902-1.38l1.056-3.333A1 1 0 0 0 21 6H3a1 1 0 0 0-.958 1.287l1.056 3.334A2 2 0 0 0 5 12h3" />
<path d="M18 6V3a1 1 0 0 0-1-1h-3" />
<rect width="8" height="12" x="8" y="10" rx="1" />
<path d="M15 13h4a2 2 0 001.901-1.38l1.057-4.333A1 1 0 0021 6H3a1 1 0 00-.958 1.287L3.1 11.621A2 2 0 005.001 13h4" />
<path d="M15 22V11a1 1 0 00-1-1h-4a1 1 0 00-1 1v11" />
<path d="M18 22H6" />
<path d="M18 6V3a1 1 0 00-1-1h-3" />
</svg>

Before

Width:  |  Height:  |  Size: 425 B

After

Width:  |  Height:  |  Size: 448 B

+35
View File
@@ -0,0 +1,35 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"juliansolimando",
"karsa-mistmere"
],
"use-cases": [
"Indicating muted speech or disabled voice input",
"Showing silence in communication interfaces",
"Marking speech restrictions or unavailable talking features",
"Representing loss of taste or oral sensitivity"
],
"tags": [
"speech",
"voice",
"talk",
"mute",
"silence",
"speechless",
"taste loss",
"flavor loss",
"ageusia",
"tasteless",
"gustatory",
"oral",
"dental",
"communication",
"accessibility"
],
"categories": [
"medical",
"accessibility",
"communication"
]
}
+17
View File
@@ -0,0 +1,17 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M13.074 7.417a2.6 2.6 0 012.989.099c1.829 1.36 3.053 2.076 5.479 3.644a1 1 0 01.308 1.368 11.6 11.6 0 01-1.617 2.05" />
<path d="M2 12a50.5 50.5 0 0010.99.99" />
<path d="m2 2 20 20" />
<path d="M21 11a1 1 0 011 1 51 51 0 01-3.734.61" />
<path d="M7.695 7.695c-1.7 1.247-2.92 1.967-5.238 3.464a1 1 0 00-.307 1.369 11.6 11.6 0 0014.766 4.388" />
</svg>

After

Width:  |  Height:  |  Size: 572 B

+35
View File
@@ -0,0 +1,35 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"juliansolimando",
"karsa-mistmere"
],
"use-cases": [
"Representing speech or verbal expression",
"Indicating taste or oral sensory input",
"Marking dental or oral health information",
"Showing voice input or speaking controls"
],
"tags": [
"speech",
"voice",
"talk",
"speaking",
"taste",
"tasting",
"flavor",
"palate",
"tongue",
"gustatory",
"oral",
"dental",
"expression",
"communication",
"accessibility"
],
"categories": [
"medical",
"accessibility",
"communication"
]
}
+14
View File
@@ -0,0 +1,14 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M2 12a50.5 50.5 0 0020 0 1 1 0 00-1-1" />
<path d="M2.457 11.159a1 1 0 00-.307 1.369 11.59 11.59 0 0019.7 0 1 1 0 00-.308-1.368c-2.426-1.568-3.65-2.284-5.479-3.644a2.6 2.6 0 00-3.373.208 1 1 0 01-1.38 0 2.62 2.62 0 00-3.373-.208c-1.83 1.36-3.053 2.076-5.48 3.643" />
</svg>

After

Width:  |  Height:  |  Size: 488 B

+31
View File
@@ -0,0 +1,31 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"skajosborn",
"jguddas"
],
"use-cases": [
"Indicating public parks on maps and navigation apps",
"Marking outdoor recreation areas and picnic zones",
"Highlighting municipal park facilities and services"
],
"tags": [
"nature",
"green",
"trees",
"landscape",
"rest",
"walk",
"leisure",
"environment",
"tree",
"bench",
"outdoors",
"recreation"
],
"categories": [
"nature",
"navigation",
"travel"
]
}
+20
View File
@@ -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 18h10" />
<path d="M13.248 9.998A4.5 4.5 0 0 0 11.75 8.6V8a1 1 0 0 0-7.5 0 4.9 4.9 0 0 0 2.25 9H8" />
<path d="m15 14-2 6" />
<path d="m19 14 2 6" />
<path d="M21 14h-8" />
<path d="M8 20v-5.922a2 2 0 0 0-.586-1.414L6.5 11.75" />
<path d="M9.205 12.795 8 14" />
<circle cx="19" cy="6" r="2" />
</svg>

After

Width:  |  Height:  |  Size: 531 B

+10 -2
View File
@@ -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",
+4 -4
View File
@@ -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>

Before

Width:  |  Height:  |  Size: 352 B

After

Width:  |  Height:  |  Size: 429 B

+1 -1
View File
@@ -45,7 +45,7 @@
"weakness",
"infection",
"infected",
"comprimised",
"compromised",
"data leak",
"audited",
"admin",
+1 -1
View File
@@ -44,7 +44,7 @@
"weakness",
"infection",
"infected",
"comprimised",
"compromised",
"data leak",
"audited",
"admin",
+1 -1
View File
@@ -37,7 +37,7 @@
"weakness",
"infected",
"infection",
"comprimised",
"compromised",
"data leak",
"unaudited",
"admin",
+1 -1
View File
@@ -38,7 +38,7 @@
"vulnerable",
"weakness",
"infection",
"comprimised",
"compromised",
"data leak",
"audit",
"admin",
+1 -1
View File
@@ -45,7 +45,7 @@
"weakness",
"infection",
"infected",
"comprimised",
"compromised",
"data leak",
"audited",
"admin",
+38
View File
@@ -0,0 +1,38 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"jamiemlaw",
"karsa-mistmere",
"jguddas"
],
"use-cases": [
"Representing improved oral hygiene or dental care",
"Indicating freshly cleaned teeth in health apps",
"Showing premium personal care amenities in travel apps"
],
"tags": [
"dental care",
"oral hygiene",
"brushing",
"teeth",
"dentist",
"bathroom",
"toiletries",
"personal care",
"cleaning",
"bristles",
"handle",
"plaque",
"toothpaste",
"selfcare",
"grooming",
"fresh",
"clean"
],
"categories": [
"home",
"tools",
"medical",
"travel"
]
}
+21
View File
@@ -0,0 +1,21 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10 3H8" />
<path d="M14.586 11.414 22 4" />
<path d="M15 11a8 8 0 01-.429.4" />
<path d="m2 22 7-7c1.857-1.857 3.714-1.99 5.571-3.6l-1.985-1.986A2 2 0 0114 6a2 2 0 012-2 2 2 0 013.262-1.552l2.152 2.138" />
<path d="M20 15v4" />
<path d="M22 17h-4" />
<path d="M4 5v4" />
<path d="M6 7H2" />
<path d="M9 2v2" />
</svg>

After

Width:  |  Height:  |  Size: 547 B

+36
View File
@@ -0,0 +1,36 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"jamiemlaw",
"karsa-mistmere"
],
"use-cases": [
"Representing oral hygiene and dental care",
"Reminding users to brush their teeth in routine apps",
"Indicating dental health services in healthcare apps",
"Listing personal care amenities in travel apps"
],
"tags": [
"dental care",
"oral hygiene",
"brushing",
"teeth",
"dentist",
"bathroom",
"toiletries",
"personal care",
"cleaning",
"bristles",
"handle",
"plaque",
"toothpaste",
"selfcare",
"grooming"
],
"categories": [
"home",
"travel",
"tools",
"medical"
]
}
+14
View File
@@ -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="M15 11c-2 2-4 2-6 4l-7 7" />
<path d="m22 4-7.414 7.414-2-2A2 2 0 0114 6c0-.512.196-1.024.586-1.414A2 2 0 0116 4a2 2 0 013.262-1.552l2.152 2.138" />
</svg>

After

Width:  |  Height:  |  Size: 370 B

@@ -14,5 +14,12 @@
"categories": [
"design",
"photography"
],
"aliases": [
{
"name": "flip-horizontal-2",
"deprecated": true,
"deprecationReason": "alias.name"
}
]
}
@@ -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>

Before

Width:  |  Height:  |  Size: 370 B

After

Width:  |  Height:  |  Size: 494 B

@@ -15,5 +15,12 @@
"categories": [
"design",
"photography"
],
"aliases": [
{
"name": "flip-vertical-2",
"deprecated": true,
"deprecationReason": "alias.name"
}
]
}
@@ -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>

Before

Width:  |  Height:  |  Size: 363 B

After

Width:  |  Height:  |  Size: 495 B

+23
View File
@@ -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)"
]
}
+15
View File
@@ -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="M16 6 7 15l-3-3" />
<path d="m14 14 6 6" />
<path d="m20 14-6 6" />
</svg>

After

Width:  |  Height:  |  Size: 291 B

+25
View File
@@ -0,0 +1,25 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"alx-xo"
],
"tags": [
"botanical",
"green",
"foliage",
"vegetation",
"exotic",
"decor",
"nature",
"plant",
"leaf",
"monstera",
"tropical",
"growth"
],
"categories": [
"nature",
"sustainability",
"travel"
]
}
+19
View File
@@ -0,0 +1,19 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M 20.5 15 L 16 17.5" />
<path d="M13 2.5C13.5 14 11 20 6.5 22" />
<path d="m17 8 1.5-.866" />
<path d="M19.5 10.5 17 12" />
<path d="M6.26 18.4c2.383.5 3.336-.5 6.195 2.496s7.17-.704 8.101-3.994c.507-1.79.92-4.295-.775-7.922-1.694-3.628-3.984-5.106-6.684-6.98C9.735 3.503 7.223 5.286 5.5 7.5c-3.525 4.528-4.76 9.743.76 10.9" />
<path d="m6.5 7.134 2.5 2.5" />
<path d="M7.5 14.5 4 11" />
</svg>

After

Width:  |  Height:  |  Size: 619 B

-1
View File
@@ -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": {
+13 -1
View File
@@ -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