@umbra.ui/icons 0.1.0

package/src/icons/CookieIcon.vue

@@ -0,0 +1,39 @@
+<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="M14.75 8.00001C12.84 8.00001 11.281 6.56701 11.047 4.72001C10.948 4.73001 10.852 4.75001 10.75 4.75001C9.132 4.75001 7.822 3.46701 7.761 1.86301C4.348 2.45201 1.75 5.41901 1.75 9.00001C1.75 13.004 4.996 16.25 9 16.25C13.004 16.25 16.25 13.004 16.25 9.00001C16.25 8.56601 16.205 8.14301 16.132 7.72901C15.704 7.89901 15.239 8.00001 14.75 8.00001Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M14.75 8.00001C12.84 8.00001 11.281 6.56701 11.047 4.72001C10.948 4.73001 10.852 4.75001 10.75 4.75001C9.132 4.75001 7.822 3.46701 7.761 1.86301C4.348 2.45201 1.75 5.41901 1.75 9.00001C1.75 13.004 4.996 16.25 9 16.25C13.004 16.25 16.25 13.004 16.25 9.00001C16.25 8.56601 16.205 8.14301 16.132 7.72901C15.704 7.89901 15.239 8.00001 14.75 8.00001Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M12.25 2.5C12.6642 2.5 13 2.16421 13 1.75C13 1.33579 12.6642 1 12.25 1C11.8358 1 11.5 1.33579 11.5 1.75C11.5 2.16421 11.8358 2.5 12.25 2.5Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M14.75 5C15.1642 5 15.5 4.66421 15.5 4.25C15.5 3.83579 15.1642 3.5 14.75 3.5C14.3358 3.5 14 3.83579 14 4.25C14 4.66421 14.3358 5 14.75 5Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M11.25 12.5C11.6642 12.5 12 12.1642 12 11.75C12 11.3358 11.6642 11 11.25 11C10.8358 11 10.5 11.3358 10.5 11.75C10.5 12.1642 10.8358 12.5 11.25 12.5Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M7 8C7.55228 8 8 7.55228 8 7C8 6.44772 7.55228 6 7 6C6.44772 6 6 6.44772 6 7C6 7.55228 6.44772 8 7 8Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M7.25 12.5C7.94036 12.5 8.5 11.9404 8.5 11.25C8.5 10.5596 7.94036 10 7.25 10C6.55964 10 6 10.5596 6 11.25C6 11.9404 6.55964 12.5 7.25 12.5Z" :fill="color" data-stroke="none" stroke="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/CreditCardIcon.vue

@@ -0,0 +1,37 @@
+<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="M14.25 14.25H3.75C2.64543 14.25 1.75 13.3546 1.75 12.25V7.25H16.25V12.25C16.25 13.3546 15.3546 14.25 14.25 14.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M1.75 7.25H16.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M3.75 14.25L14.25 14.25C15.3546 14.25 16.25 13.3546 16.25 12.25V5.75C16.25 4.64543 15.3546 3.75 14.25 3.75L3.75 3.75C2.64543 3.75 1.75 4.64543 1.75 5.75L1.75 12.25C1.75 13.3546 2.64543 14.25 3.75 14.25Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M4.25 11.25H7.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M12.75 11.25H13.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/CrosshairsIcon.vue

@@ -0,0 +1,39 @@
+<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="M15.5 9C15.5 12.5899 12.5899 15.5 9 15.5C5.41015 15.5 2.5 12.5899 2.5 9C2.5 5.41015 5.41015 2.5 9 2.5C12.5899 2.5 15.5 5.41015 15.5 9ZM11.25 9C11.25 10.2426 10.2426 11.25 9 11.25C7.75736 11.25 6.75 10.2426 6.75 9C6.75 7.75736 7.75736 6.75 9 6.75C10.2426 6.75 11.25 7.75736 11.25 9Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M9 15.5C12.5899 15.5 15.5 12.5899 15.5 9C15.5 5.41015 12.5899 2.5 9 2.5C5.41015 2.5 2.5 5.41015 2.5 9C2.5 12.5899 5.41015 15.5 9 15.5Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M9 11.25C10.2426 11.25 11.25 10.2426 11.25 9C11.25 7.75736 10.2426 6.75 9 6.75C7.75736 6.75 6.75 7.75736 6.75 9C6.75 10.2426 7.75736 11.25 9 11.25Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M9 1V2.5" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M17 9H15.5" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M9 17V15.5" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M1 9H2.5" :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/CrosshairsSlashIcon.vue

@@ -0,0 +1,41 @@
+<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="M13.5962 4.40379C12.4199 3.22753 10.7949 2.5 9 2.5C5.41015 2.5 2.5 5.41015 2.5 9C2.5 10.7949 3.22753 12.4199 4.40379 13.5962L7.409 10.591C7.00183 10.1838 6.75 9.62131 6.75 9C6.75 7.75736 7.75736 6.75 9 6.75C9.62131 6.75 10.1838 7.00183 10.591 7.409L13.5962 4.40379ZM10.5844 10.5976C10.5888 10.5932 10.5932 10.5888 10.5976 10.5844L14.9042 6.27774C15.2866 7.10581 15.5 8.02799 15.5 9C15.5 12.5899 12.5899 15.5 9 15.5C8.02799 15.5 7.10581 15.2866 6.27774 14.9042L10.5844 10.5976Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M15.012 6.524C15.327 7.287 15.5 8.124 15.5 9C15.5 12.59 12.59 15.5 8.99999 15.5C8.12299 15.5 7.28699 15.326 6.52399 15.012" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M4.404 13.596C3.228 12.42 2.5 10.795 2.5 9C2.5 5.41 5.41 2.5 9 2.5C10.795 2.5 12.42 3.228 13.596 4.404" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M7.409 10.591C7.002 10.184 6.75 9.621 6.75 9C6.75 7.757 7.757 6.75 9 6.75C9.621 6.75 10.184 7.002 10.591 7.409" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M9 1V2.5" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M17 9H15.5" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M9 17V15.5" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M1 9H2.5" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M2 16L16 2" :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/CryptographyIcon.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="M7.25 7.75C8.07843 7.75 8.75 7.07843 8.75 6.25C8.75 5.42157 8.07843 4.75 7.25 4.75C6.42157 4.75 5.75 5.42157 5.75 6.25C5.75 7.07843 6.42157 7.75 7.25 7.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M10.75 13.25C11.5784 13.25 12.25 12.5784 12.25 11.75C12.25 10.9216 11.5784 10.25 10.75 10.25C9.92157 10.25 9.25 10.9216 9.25 11.75C9.25 12.5784 9.92157 13.25 10.75 13.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M7.25 7.75C8.07843 7.75 8.75 7.07843 8.75 6.25C8.75 5.42157 8.07843 4.75 7.25 4.75C6.42157 4.75 5.75 5.42157 5.75 6.25C5.75 7.07843 6.42157 7.75 7.25 7.75Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M16.25 6.5V11.881C16.25 12.146 16.145 12.401 15.957 12.588L12.588 15.957C12.4 16.145 12.146 16.25 11.881 16.25H5.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M6.75 10.25V12.586C6.75 12.851 6.855 13.106 7.043 13.293L7.75 14" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M3.25 14.25L4.042 13.225C4.177 13.05 4.25 12.835 4.25 12.614V9.437C4.25 9.158 4.366 8.892 4.571 8.703L6.137 7.253" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M10.75 13.25C11.5784 13.25 12.25 12.5784 12.25 11.75C12.25 10.9216 11.5784 10.25 10.75 10.25C9.92157 10.25 9.25 10.9216 9.25 11.75C9.25 12.5784 9.92157 13.25 10.75 13.25Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M11.25 7.75V5.414C11.25 5.149 11.145 4.894 10.957 4.707L10.25 4" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M14.75 3.75L13.958 4.775C13.823 4.95 13.75 5.165 13.75 5.386V8.563C13.75 8.842 13.634 9.108 13.429 9.297L11.863 10.747" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M12.25 1.75H6.119C5.854 1.75 5.599 1.855 5.412 2.043L2.043 5.412C1.855 5.6 1.75 5.854 1.75 6.119V11.5" :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/DarkLightIcon.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 16.25C13.0041 16.25 16.25 13.0041 16.25 9C16.25 4.99594 13.0041 1.75 9 1.75C4.99594 1.75 1.75 4.99594 1.75 9C1.75 13.0041 4.99594 16.25 9 16.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M9 6V12C10.657 12 12 10.657 12 9C12 7.343 10.657 6 9 6Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M9 12C7.343 12 6 10.657 6 9C6 7.343 7.343 6 9 6V1.75C4.996 1.75 1.75 4.996 1.75 9C1.75 13.004 4.996 16.25 9 16.25V12Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M9 16.25C13.0041 16.25 16.25 13.0041 16.25 9C16.25 4.99594 13.0041 1.75 9 1.75C4.99594 1.75 1.75 4.99594 1.75 9C1.75 13.0041 4.99594 16.25 9 16.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/DescendingSortingIcon.vue

@@ -0,0 +1,37 @@
+<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.25 12.75L12.75 15.25L15.25 12.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M12.75 15.25V6.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M2.75 9.75H9.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M2.75 6.25H9.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M2.75 2.75H12.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/DesktopArrowDownIcon.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="M12 3H14.25C15.355 3 16.25 3.895 16.25 5V11.25C16.25 12.355 15.355 13.25 14.25 13.25H3.75C2.645 13.25 1.75 12.355 1.75 11.25V5C1.75 3.895 2.645 3 3.75 3H6" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M11.75 7.5L9 10.25L6.25 7.5" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M9 10.25V2.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M12 2.75H14.25C15.355 2.75 16.25 3.645 16.25 4.75V11.25C16.25 12.355 15.355 13.25 14.25 13.25H3.75C2.645 13.25 1.75 12.355 1.75 11.25V4.75C1.75 3.645 2.645 2.75 3.75 2.75H6" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M5.75 16.25C6.508 16.011 7.628 15.75 9 15.75C9.795 15.75 10.941 15.838 12.25 16.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M9 13.25V15.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/DotsIcon.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 stroke-linecap="round" stroke-width="1.5" fill="none" :stroke="color" stroke-linejoin="round">
+      <path d="M9 9.5C9.27614 9.5 9.5 9.27614 9.5 9C9.5 8.72386 9.27614 8.5 9 8.5C8.72386 8.5 8.5 8.72386 8.5 9C8.5 9.27614 8.72386 9.5 9 9.5Z" :fill="color" />
+      <path d="M3.25 9.5C3.52614 9.5 3.75 9.27614 3.75 9C3.75 8.72386 3.52614 8.5 3.25 8.5C2.97386 8.5 2.75 8.72386 2.75 9C2.75 9.27614 2.97386 9.5 3.25 9.5Z" :fill="color" />
+      <path d="M14.75 9.5C15.0261 9.5 15.25 9.27614 15.25 9C15.25 8.72386 15.0261 8.5 14.75 8.5C14.4739 8.5 14.25 8.72386 14.25 9C14.25 9.27614 14.4739 9.5 14.75 9.5Z" :fill="color" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/DotsVerticalIcon.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 stroke-linecap="round" stroke-width="1.5" fill="none" :stroke="color" stroke-linejoin="round">
+      <path d="M9 9.5C9.27614 9.5 9.5 9.27614 9.5 9C9.5 8.72386 9.27614 8.5 9 8.5C8.72386 8.5 8.5 8.72386 8.5 9C8.5 9.27614 8.72386 9.5 9 9.5Z" :fill="color" />
+      <path d="M9 3.75C9.27614 3.75 9.5 3.52614 9.5 3.25C9.5 2.97386 9.27614 2.75 9 2.75C8.72386 2.75 8.5 2.97386 8.5 3.25C8.5 3.52614 8.72386 3.75 9 3.75Z" :fill="color" />
+      <path d="M9 15.25C9.27614 15.25 9.5 15.0261 9.5 14.75C9.5 14.4739 9.27614 14.25 9 14.25C8.72386 14.25 8.5 14.4739 8.5 14.75C8.5 15.0261 8.72386 15.25 9 15.25Z" :fill="color" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/DrawCompassIcon.vue

@@ -0,0 +1,39 @@
+<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 6.75C10.1046 6.75 11 5.85457 11 4.75C11 3.64543 10.1046 2.75 9 2.75C7.89543 2.75 7 3.64543 7 4.75C7 5.85457 7.89543 6.75 9 6.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M9 1.5V2.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M8.045 6.507L2.75 16.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M13.484 13L15.25 16.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M9.95499 6.507L12.343 10.901" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M9 6.75C10.1046 6.75 11 5.85457 11 4.75C11 3.64543 10.1046 2.75 9 2.75C7.89543 2.75 7 3.64543 7 4.75C7 5.85457 7.89543 6.75 9 6.75Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M14 9.649C12.729 10.946 10.959 11.75 9 11.75C7.041 11.75 5.27 10.945 4 9.649" :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/EarthIcon.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="M8.63696 9.8623C7.60866 9.4483 6.30547 9.70093 5.78241 9.87899C6.01911 10.039 6.42389 10.3858 6.70054 10.9641C7.0347 11.6626 6.62959 12.3347 6.96763 13.034C7.27651 13.673 7.98121 13.7145 8.36986 14.1525C8.57018 14.4251 8.90405 15.2309 8.63696 16.2725C12.2694 16.4595 14.602 13.8798 15.3143 12.5666C15.1418 11.9879 14.7864 10.8611 13.8119 10.53C12.8369 10.1988 11.8571 11.9113 10.7236 11.5149C9.995 11.2602 9.92234 10.3798 8.63696 9.8623Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M6.85464 2.04794C4.55877 2.61683 3.05359 4.72306 2.58798 5.70507C2.85042 6.71248 3.86291 8.96094 5.81338 9.89554C4.94989 8.70189 5.18695 7.24911 6.27053 6.41619C7.71179 5.30832 9.14571 7.13998 9.80068 6.61936C10.0648 6.37555 9.77528 4.79079 9.97846 3.85111C10.1562 3.37704 11.0248 2.54064 13.0769 2.98761C12.1372 2.17492 9.72449 1.33682 6.85464 2.04794Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M5.77101 9.88701C5.72701 9.82201 4.91601 8.56401 5.53101 7.31201C5.59801 7.17501 6.01501 6.36301 6.87501 6.12401C8.14801 5.77101 9.07801 7.04301 9.68001 6.65901C10.353 6.23001 9.41001 4.50301 10.187 3.53001C10.779 2.78901 12.083 2.84401 13.07 2.99901" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M5.76727 9.88114C7.35627 9.44214 8.37827 9.65714 9.05927 10.0561C9.99827 10.6061 10.0653 11.3741 10.8713 11.5251C12.0343 11.7431 12.7153 10.2981 13.7463 10.4941C14.2253 10.5851 14.8083 11.0361 15.3143 12.5511" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M8.60099 16.23C8.74899 15.651 8.83499 14.887 8.43799 14.292C8.01499 13.657 7.41699 13.775 7.01599 13.11C6.59799 12.416 7.02999 11.925 6.71899 11.063C6.42699 10.254 5.75799 9.88899 5.25599 9.52199C4.41999 8.91099 3.38199 7.81099 2.56799 5.66299" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M9 16.25C13.0041 16.25 16.25 13.0041 16.25 9C16.25 4.99594 13.0041 1.75 9 1.75C4.99594 1.75 1.75 4.99594 1.75 9C1.75 13.0041 4.99594 16.25 9 16.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/EnvelopeIcon.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 fill-rule="evenodd" clip-rule="evenodd" d="M1.75 5.64296L8.565 9.54C8.84 9.673 9.16 9.673 9.434 9.54L16.25 5.64239V5.25C16.25 4.14543 15.3546 3.25 14.25 3.25H3.75C2.64543 3.25 1.75 4.14543 1.75 5.25V5.64296Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M1.75 5.75L8.517 9.483C8.818 9.649 9.182 9.649 9.483 9.483L16.25 5.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M3.75 14.75L14.25 14.75C15.3546 14.75 16.25 13.8546 16.25 12.75V5.25C16.25 4.14543 15.3546 3.25 14.25 3.25L3.75 3.25C2.64543 3.25 1.75 4.14543 1.75 5.25L1.75 12.75C1.75 13.8546 2.64543 14.75 3.75 14.75Z" :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/EnvelopeOpenIcon.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="M16.25 6.754V13.25C16.25 14.355 15.355 15.25 14.25 15.25H3.75C2.645 15.25 1.75 14.355 1.75 13.25V6.75L8.565 10.04C8.84 10.173 9.16 10.173 9.434 10.04L16.249 6.75L16.25 6.754Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M1.75 6.75001C1.75 6.02201 2.146 5.38901 2.784 5.03701L8.517 1.87401C8.818 1.70801 9.182 1.70801 9.483 1.87401L15.216 5.03701C15.854 5.38901 16.25 6.02101 16.25 6.75001" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M16.25 6.754V13.25C16.25 14.355 15.355 15.25 14.25 15.25H3.75C2.645 15.25 1.75 14.355 1.75 13.25V6.75L8.565 10.04C8.84 10.173 9.16 10.173 9.434 10.04L16.249 6.75L16.25 6.754Z" :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/EyeClosedIcon.vue

@@ -0,0 +1,37 @@
+<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="M1.85901 7.27C3.67401 9.121 6.20301 10.27 9.00001 10.27C11.797 10.27 14.326 9.122 16.141 7.27" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M4.021 8.942L2.75 11.019" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M7.3 10.126L6.823 12.5" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M13.979 8.942L15.25 11.019" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M10.7 10.126L11.177 12.5" :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/EyeIcon.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 stroke-linecap="round" stroke-width="1.5" fill="none" :stroke="color" stroke-linejoin="round">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M2.08799 7.86699C1.63799 8.54999 1.63799 9.44899 2.08799 10.132C3.10499 11.676 5.34999 14.25 8.99999 14.25C12.65 14.25 14.894 11.675 15.912 10.132C16.362 9.44899 16.362 8.54999 15.912 7.86699C14.895 6.32299 12.65 3.74899 8.99999 3.74899C5.34999 3.74899 3.10599 6.32399 2.08799 7.86699ZM11.75 9C11.75 10.5188 10.5188 11.75 9 11.75C7.48122 11.75 6.25 10.5188 6.25 9C6.25 7.48122 7.48122 6.25 9 6.25C10.5188 6.25 11.75 7.48122 11.75 9Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M2.08799 10.132C1.63799 9.44899 1.63799 8.54999 2.08799 7.86699C3.10599 6.32399 5.34999 3.74899 8.99999 3.74899C12.65 3.74899 14.895 6.32299 15.912 7.86699C16.362 8.54999 16.362 9.44899 15.912 10.132C14.894 11.675 12.65 14.25 8.99999 14.25C5.34999 14.25 3.10499 11.676 2.08799 10.132Z" />
+      <path d="M9 11.75C10.5188 11.75 11.75 10.5188 11.75 9C11.75 7.48122 10.5188 6.25 9 6.25C7.48122 6.25 6.25 7.48122 6.25 9C6.25 10.5188 7.48122 11.75 9 11.75Z" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>