@umbra.ui/icons 0.1.0

package/src/icons/KeyboardIcon.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+        <title />
+    <g :fill="color">
+      <path d="M15.25 4.75H2.75C1.64543 4.75 0.75 5.64543 0.75 6.75V11.25C0.75 12.3546 1.64543 13.25 2.75 13.25H15.25C16.3546 13.25 17.25 12.3546 17.25 11.25V6.75C17.25 5.64543 16.3546 4.75 15.25 4.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M15.25 4.75H2.75C1.64543 4.75 0.75 5.64543 0.75 6.75V11.25C0.75 12.3546 1.64543 13.25 2.75 13.25H15.25C16.3546 13.25 17.25 12.3546 17.25 11.25V6.75C17.25 5.64543 16.3546 4.75 15.25 4.75Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M11.75 10.25H6.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M4 7H3.5C3.22386 7 3 7.22386 3 7.5V8C3 8.27614 3.22386 8.5 3.5 8.5H4C4.27614 8.5 4.5 8.27614 4.5 8V7.5C4.5 7.22386 4.27614 7 4 7Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M4 9.5H3.5C3.22386 9.5 3 9.72386 3 10V10.5C3 10.7761 3.22386 11 3.5 11H4C4.27614 11 4.5 10.7761 4.5 10.5V10C4.5 9.72386 4.27614 9.5 4 9.5Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M6.5 7H6C5.72386 7 5.5 7.22386 5.5 7.5V8C5.5 8.27614 5.72386 8.5 6 8.5H6.5C6.77614 8.5 7 8.27614 7 8V7.5C7 7.22386 6.77614 7 6.5 7Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M9.25 7H8.75C8.47386 7 8.25 7.22386 8.25 7.5V8C8.25 8.27614 8.47386 8.5 8.75 8.5H9.25C9.52614 8.5 9.75 8.27614 9.75 8V7.5C9.75 7.22386 9.52614 7 9.25 7Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M14.5 7H14C13.7239 7 13.5 7.22386 13.5 7.5V8C13.5 8.27614 13.7239 8.5 14 8.5H14.5C14.7761 8.5 15 8.27614 15 8V7.5C15 7.22386 14.7761 7 14.5 7Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M14.5 9.5H14C13.7239 9.5 13.5 9.72386 13.5 10V10.5C13.5 10.7761 13.7239 11 14 11H14.5C14.7761 11 15 10.7761 15 10.5V10C15 9.72386 14.7761 9.5 14.5 9.5Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M12 7H11.5C11.2239 7 11 7.22386 11 7.5V8C11 8.27614 11.2239 8.5 11.5 8.5H12C12.2761 8.5 12.5 8.27614 12.5 8V7.5C12.5 7.22386 12.2761 7 12 7Z" :fill="color" data-stroke="none" stroke="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/LanguageIcon.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+        <title />
+    <g :fill="color">
+      <path d="M2.25 4.25H10.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M6.25 2.25V4.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M4.25 4.25C4.341 6.926 6.166 9.231 8.75 9.934" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M8.25 4.25C7.85 9.875 2.25 10.25 2.25 10.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M9.25 15.75L12.25 7.75H12.75L15.75 15.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M10.188 13.25H14.813" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/LaptopIcon.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+        <title />
+    <g :fill="color">
+      <path d="M4.25 14.75C3.145 14.75 2.25 13.855 2.25 12.75V4.75C2.25 3.645 3.145 2.75 4.25 2.75H13.75C14.855 2.75 15.75 3.645 15.75 4.75V12.75C15.75 13.855 14.855 14.75 13.75 14.75" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M4.25 14.75C3.145 14.75 2.25 13.855 2.25 12.75V4.75C2.25 3.645 3.145 2.75 4.25 2.75H13.75C14.855 2.75 15.75 3.645 15.75 4.75V12.75C15.75 13.855 14.855 14.75 13.75 14.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M0.75 14.75H17.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/LaptopMobileIcon.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+        <title />
+    <g :fill="color">
+      <path d="M16.25 14.75V9.25C16.25 8.42157 15.5784 7.75 14.75 7.75H12.25C11.4216 7.75 10.75 8.42157 10.75 9.25V14.75C10.75 15.5784 11.4216 16.25 12.25 16.25H14.75C15.5784 16.25 16.25 15.5784 16.25 14.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M16.25 14.75V9.25C16.25 8.42157 15.5784 7.75 14.75 7.75H12.25C11.4216 7.75 10.75 8.42157 10.75 9.25V14.75C10.75 15.5784 11.4216 16.25 12.25 16.25H14.75C15.5784 16.25 16.25 15.5784 16.25 14.75Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M1.75 13H8" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M15.25 5V4.75C15.25 3.645 14.355 2.75 13.25 2.75H4.75C3.645 2.75 2.75 3.645 2.75 4.75V11.125C2.75 12.161 3.589 13 4.625 13" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/Layers3Icon.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+        <title />
+    <g :fill="color">
+      <path d="M2.665 5.086L8.534 1.995C8.826 1.841 9.174 1.841 9.466 1.995L15.336 5.086C15.87 5.367 15.87 6.132 15.336 6.413L9.466 9.504C9.174 9.658 8.826 9.658 8.534 9.504L2.665 6.414C2.131 6.133 2.131 5.367 2.665 5.086Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M2.665 5.086L8.534 1.995C8.826 1.841 9.174 1.841 9.466 1.995L15.336 5.086C15.87 5.367 15.87 6.132 15.336 6.413L9.466 9.504C9.174 9.658 8.826 9.658 8.534 9.504L2.665 6.414C2.131 6.133 2.131 5.367 2.665 5.086Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M15.736 9C15.736 9.261 15.602 9.523 15.335 9.664L9.46499 12.755C9.17299 12.909 8.82499 12.909 8.53299 12.755L2.66299 9.664C2.39599 9.523 2.26199 9.262 2.26199 9" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M15.736 12.25C15.736 12.511 15.602 12.773 15.335 12.914L9.46499 16.005C9.17299 16.159 8.82499 16.159 8.53299 16.005L2.66299 12.914C2.39599 12.773 2.26199 12.512 2.26199 12.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/LeafIcon.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+        <title />
+    <g :fill="color">
+      <path d="M4.38332 9.45082C3.7218 12.0693 5.32799 13.8368 6.17989 14.3851C7.14606 14.9941 9.3918 16.1067 12.1263 14.1827C14.4642 12.5377 16.2217 7.44088 13.2397 1.78375C11.5536 5.6491 5.4867 5.08328 4.38332 9.45082Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M9.097 15.247C14.724 15.061 16.223 7.137 13.265 1.75C11.556 5.321 7.613 4.784 5.407 7.504C4.753 8.31 4.249 9.405 4.249 10.586C4.249 12.163 5.028 13.558 6.221 14.402" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M2.75 16.25C2.75 16.25 7.348 14.985 10.25 9.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/LifeRingIcon.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+        <title />
+    <g :fill="color">
+      <path d="M10.311 5.487L11.71 1.738C10.866 1.423 9.95302 1.251 8.99902 1.251C8.04502 1.251 7.13202 1.423 6.28802 1.738L7.68702 5.487C8.09602 5.334 8.53602 5.251 8.99802 5.251C9.46002 5.251 9.90102 5.335 10.309 5.488L10.311 5.487Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M12.513 10.311L16.262 11.71C16.577 10.866 16.749 9.953 16.749 9C16.749 8.046 16.577 7.133 16.262 6.289L12.513 7.688C12.666 8.097 12.749 8.537 12.749 8.999C12.749 9.461 12.665 9.902 12.512 10.31L12.513 10.311Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M7.68898 12.513L6.28998 16.262C7.13398 16.577 8.04698 16.749 9.00098 16.749C9.95498 16.749 10.868 16.577 11.712 16.262L10.313 12.513C9.90398 12.666 9.46398 12.749 9.00198 12.749C8.53998 12.749 8.09898 12.665 7.69098 12.512L7.68898 12.513Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M5.48698 7.689L1.73798 6.29C1.42298 7.134 1.25098 8.047 1.25098 9C1.25098 9.954 1.42298 10.867 1.73798 11.711L5.48698 10.312C5.33398 9.903 5.25098 9.463 5.25098 9.001C5.25098 8.539 5.33498 8.098 5.48798 7.69L5.48698 7.689Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M5.48602 7.688C5.86502 6.672 6.67302 5.865 7.68902 5.485" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M10.312 5.486C11.328 5.865 12.135 6.673 12.515 7.689" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M12.514 10.312C12.135 11.328 11.327 12.135 10.311 12.515" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M7.68799 12.514C6.67199 12.135 5.86499 11.327 5.48499 10.311" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M6.46402 15.794C4.50002 15.061 2.93902 13.5 2.20502 11.535" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M15.794 11.536C15.061 13.5 13.499 15.061 11.535 15.795" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M11.536 2.206C13.5 2.939 15.061 4.501 15.795 6.465" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M2.20599 6.464C2.93899 4.5 4.49999 2.939 6.46499 2.205" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M10.311 5.487L11.71 1.738C10.866 1.423 9.95302 1.251 8.99902 1.251C8.04502 1.251 7.13202 1.423 6.28802 1.738L7.68702 5.487C8.09602 5.334 8.53602 5.251 8.99802 5.251C9.46002 5.251 9.90102 5.335 10.309 5.488L10.311 5.487Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M12.513 10.311L16.262 11.71C16.577 10.866 16.749 9.953 16.749 9C16.749 8.046 16.577 7.133 16.262 6.289L12.513 7.688C12.666 8.097 12.749 8.537 12.749 8.999C12.749 9.461 12.665 9.902 12.512 10.31L12.513 10.311Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M7.68898 12.513L6.28998 16.262C7.13398 16.577 8.04698 16.749 9.00098 16.749C9.95498 16.749 10.868 16.577 11.712 16.262L10.313 12.513C9.90398 12.666 9.46398 12.749 9.00198 12.749C8.53998 12.749 8.09898 12.665 7.69098 12.512L7.68898 12.513Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M5.48698 7.689L1.73798 6.29C1.42298 7.134 1.25098 8.047 1.25098 9C1.25098 9.954 1.42298 10.867 1.73798 11.711L5.48698 10.312C5.33398 9.903 5.25098 9.463 5.25098 9.001C5.25098 8.539 5.33498 8.098 5.48798 7.69L5.48698 7.689Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/Lightbulb3Icon.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+        <title />
+    <g :fill="color">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M7.973 4.358C11.045 3.714 13.75 6.041 13.75 9C13.75 10.8669 12.6695 12.4752 11.1028 13.25H6.89721C5.11106 12.3665 3.95706 10.3995 4.315 8.202C4.623 6.315 6.101 4.75 7.973 4.358Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M9 0.75V1.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M14.834 3.16599L14.127 3.87299" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M17.25 9H16.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M3.166 3.16599L3.873 3.87299" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M0.75 9H1.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M13.75 9C13.75 6.041 11.045 3.714 7.973 4.358C6.101 4.75 4.623 6.315 4.315 8.202C3.934 10.541 5.266 12.619 7.25 13.407V15.75C7.25 16.302 7.698 16.75 8.25 16.75H9.75C10.302 16.75 10.75 16.302 10.75 15.75V13.407C12.505 12.71 13.75 11.004 13.75 9Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M6.897 13.25H11.103" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/LinkIcon.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+        <title />
+    <g :fill="color">
+      <rect x="10.029" y="5.00841" width="10.1272" height="7.07332" rx="3.53666" transform="rotate(45 10.029 5.00841)" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M8.5 6.827C8.148 6.995 7.818 7.225 7.527 7.517L7.517 7.527C6.136 8.908 6.136 11.146 7.517 12.527L9.692 14.702C11.073 16.083 13.311 16.083 14.692 14.702L14.702 14.692C16.083 13.311 16.083 11.073 14.702 9.692L13.771 8.761" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M9.5 11.173C9.852 11.005 10.182 10.775 10.473 10.483L10.483 10.473C11.864 9.092 11.864 6.854 10.483 5.473L8.308 3.298C6.927 1.917 4.689 1.917 3.308 3.298L3.298 3.308C1.917 4.689 1.917 6.927 3.298 8.308L4.229 9.239" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/LoaderIcon.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+        <title />
+    <g :fill="color">
+      <path d="M9 1.75V4.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path opacity="0.88" d="M14.127 3.873L12.359 5.641" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path opacity="0.75" d="M16.25 9H13.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path opacity="0.63" d="M14.127 14.127L12.359 12.359" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path opacity="0.5" d="M9 16.25V13.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path opacity="0.38" d="M3.87299 14.127L5.64099 12.359" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path opacity="0.25" d="M1.75 9H4.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path opacity="0.13" d="M3.87299 3.873L5.64099 5.641" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/Location2Icon.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+        <title />
+    <g :fill="color">
+      <path d="M9 8.25C10.7949 8.25 12.25 6.79493 12.25 5C12.25 3.20507 10.7949 1.75 9 1.75C7.20507 1.75 5.75 3.20507 5.75 5C5.75 6.79493 7.20507 8.25 9 8.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M9 8.25C10.7949 8.25 12.25 6.79493 12.25 5C12.25 3.20507 10.7949 1.75 9 1.75C7.20507 1.75 5.75 3.20507 5.75 5C5.75 6.79493 7.20507 8.25 9 8.25Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M9 13.25V8.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M12 12.429C14.507 12.744 16.25 13.441 16.25 14.25C16.25 15.355 13.004 16.25 9 16.25C4.996 16.25 1.75 15.355 1.75 14.25C1.75 13.441 3.493 12.743 6 12.429" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/LockIcon.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+        <title />
+    <g :fill="color">
+      <path d="M12.75 8.25H5.25C4.14543 8.25 3.25 9.14543 3.25 10.25V14.25C3.25 15.3546 4.14543 16.25 5.25 16.25H12.75C13.8546 16.25 14.75 15.3546 14.75 14.25V10.25C14.75 9.14543 13.8546 8.25 12.75 8.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M5.75 8.25V5C5.75 3.205 7.205 1.75 9 1.75C10.795 1.75 12.25 3.205 12.25 5V8.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M9 11.75V12.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M12.75 8.25H5.25C4.14543 8.25 3.25 9.14543 3.25 10.25V14.25C3.25 15.3546 4.14543 16.25 5.25 16.25H12.75C13.8546 16.25 14.75 15.3546 14.75 14.25V10.25C14.75 9.14543 13.8546 8.25 12.75 8.25Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/LockOpen2Icon.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+        <title />
+    <g :fill="color">
+      <path d="M13.25 8.25H5.75C4.64543 8.25 3.75 9.14543 3.75 10.25V14.25C3.75 15.3546 4.64543 16.25 5.75 16.25H13.25C14.3546 16.25 15.25 15.3546 15.25 14.25V10.25C15.25 9.14543 14.3546 8.25 13.25 8.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M7.25 8.25V5C7.25 3.205 5.795 1.75 4 1.75C2.205 1.75 0.75 3.205 0.75 5V6.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M9.5 11.75V12.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M13.25 8.25H5.75C4.64543 8.25 3.75 9.14543 3.75 10.25V14.25C3.75 15.3546 4.64543 16.25 5.75 16.25H13.25C14.3546 16.25 15.25 15.3546 15.25 14.25V10.25C15.25 9.14543 14.3546 8.25 13.25 8.25Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/LockOpenIcon.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title />
+    <g stroke-linecap="round" stroke-width="1.5" fill="none" :stroke="color" stroke-linejoin="round">
+      <path d="M12.75 8.25H5.25C4.14543 8.25 3.25 9.14543 3.25 10.25V14.25C3.25 15.3546 4.14543 16.25 5.25 16.25H12.75C13.8546 16.25 14.75 15.3546 14.75 14.25V10.25C14.75 9.14543 13.8546 8.25 12.75 8.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M5.75 8.25V5C5.75 3.205 7.205 1.75 9 1.75C10.795 1.75 12.25 3.205 12.25 5" />
+      <path d="M9 11.75V12.75" />
+      <path d="M12.75 8.25H5.25C4.14543 8.25 3.25 9.14543 3.25 10.25V14.25C3.25 15.3546 4.14543 16.25 5.25 16.25H12.75C13.8546 16.25 14.75 15.3546 14.75 14.25V10.25C14.75 9.14543 13.8546 8.25 12.75 8.25Z" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/MagicWandIcon.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+        <title />
+    <g :fill="color">
+      <path d="M9.998 2.052L12.337 3.579L14.921 2.519L14.191 5.215L15.998 7.344L13.209 7.483L11.742 9.86L10.748 7.25L8.034 6.59L10.209 4.837L9.998 2.052Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M2.75 15.25L10.749 7.25101" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M9.998 2.052L12.337 3.579L14.921 2.519L14.191 5.215L15.998 7.344L13.209 7.483L11.742 9.86L10.748 7.25L8.034 6.59L10.209 4.837L9.998 2.052Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/MagnifierFaceWorriedIcon.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+        <title />
+    <g :fill="color">
+      <path d="M7.75 12.75C10.5114 12.75 12.75 10.5114 12.75 7.75C12.75 4.98858 10.5114 2.75 7.75 2.75C4.98858 2.75 2.75 4.98858 2.75 7.75C2.75 10.5114 4.98858 12.75 7.75 12.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M7.75 12.75C10.5114 12.75 12.75 10.5114 12.75 7.75C12.75 4.98858 10.5114 2.75 7.75 2.75C4.98858 2.75 2.75 4.98858 2.75 7.75C2.75 10.5114 4.98858 12.75 7.75 12.75Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M15.25 15.25L11.285 11.285" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M5.5 8C5.91421 8 6.25 7.66421 6.25 7.25C6.25 6.83579 5.91421 6.5 5.5 6.5C5.08579 6.5 4.75 6.83579 4.75 7.25C4.75 7.66421 5.08579 8 5.5 8Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M10 8C10.4142 8 10.75 7.66421 10.75 7.25C10.75 6.83579 10.4142 6.5 10 6.5C9.58579 6.5 9.25 6.83579 9.25 7.25C9.25 7.66421 9.58579 8 10 8Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M7.75 8C8.578 8 9.25 8.672 9.25 9.5C9.25 9.776 9.026 10 8.75 10H6.75C6.474 10 6.25 9.776 6.25 9.5C6.25 8.672 6.922 8 7.75 8Z" :fill="color" data-stroke="none" stroke="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>