@umbra.ui/icons 0.1.0

package/src/icons/EyeOpenIcon.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 13.25C10.5188 13.25 11.75 12.0188 11.75 10.5C11.75 8.98122 10.5188 7.75 9 7.75C7.48122 7.75 6.25 8.98122 6.25 10.5C6.25 12.0188 7.48122 13.25 9 13.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M1.85901 8C3.67401 6.149 6.20301 5 9.00001 5C11.797 5 14.326 6.148 16.141 8" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M9 13.25C10.5188 13.25 11.75 12.0188 11.75 10.5C11.75 8.98122 10.5188 7.75 9 7.75C7.48122 7.75 6.25 8.98122 6.25 10.5C6.25 12.0188 7.48122 13.25 9 13.25Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M4.021 6.328L2.75 4.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M7.3 5.144L6.823 2.769" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M13.979 6.328L15.25 4.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M10.7 5.144L11.177 2.769" :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/EyeSlashIcon.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 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="M14.938 6.597C15.339 7.047 15.663 7.488 15.912 7.867C16.362 8.55 16.362 9.449 15.912 10.132C14.894 11.675 12.65 14.25 9 14.25C8.451 14.25 7.934 14.192 7.448 14.088" />
+      <path d="M4.95599 13.044C3.59999 12.168 2.65399 10.991 2.08799 10.132C1.63799 9.44899 1.63799 8.54999 2.08799 7.86699C3.10599 6.32399 5.34999 3.74899 8.99999 3.74899C10.62 3.74899 11.963 4.25599 13.044 4.95499" />
+      <path d="M11.579 9.95599C11.301 10.706 10.706 11.301 9.95599 11.579" />
+      <path d="M7.055 10.945C6.557 10.447 6.25 9.76 6.25 9C6.25 7.481 7.481 6.25 9 6.25C9.759 6.25 10.447 6.558 10.945 7.055" />
+      <path d="M2 16L16 2" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/FacePlusIcon.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="M10.8503 1.98825C10.3322 2.40046 10 3.03644 10 3.75C10 4.99264 11.0074 6 12.25 6H12.5V6.25C12.5 7.49264 13.5074 8.5 14.75 8.5C15.293 8.5 15.7911 8.30764 16.1798 7.98734C16.2261 8.31826 16.25 8.65634 16.25 9C16.25 13.0041 13.0041 16.25 9 16.25C4.99594 16.25 1.75 13.0041 1.75 9C1.75 4.99594 4.99594 1.75 9 1.75C9.63949 1.75 10.2596 1.83279 10.8503 1.98825Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M11.25 11.758C10.778 12.504 9.946 13 9 13C8.054 13 7.222 12.504 6.75 11.758" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M6 10C6.55228 10 7 9.55228 7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9C5 9.55228 5.44772 10 6 10Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M12 10C12.5523 10 13 9.55228 13 9C13 8.44772 12.5523 8 12 8C11.4477 8 11 8.44772 11 9C11 9.55228 11.4477 10 12 10Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M14.75 1.25V6.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M17.25 3.75H12.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M10.557 1.922C10.055 1.812 9.535 1.75 9 1.75C4.996 1.75 1.75 4.996 1.75 9C1.75 13.004 4.996 16.25 9 16.25C13.004 16.25 16.25 13.004 16.25 9C16.25 8.753 16.237 8.509 16.213 8.268" :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/FaceSmile2Icon.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="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 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" />
+      <path d="M11.25 11.758C10.778 12.504 9.946 13 9 13C8.054 13 7.222 12.504 6.75 11.758" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M6 10C6.55228 10 7 9.55228 7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9C5 9.55228 5.44772 10 6 10Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M12 10C12.5523 10 13 9.55228 13 9C13 8.44772 12.5523 8 12 8C11.4477 8 11 8.44772 11 9C11 9.55228 11.4477 10 12 10Z" :fill="color" data-stroke="none" stroke="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/FacialRecognitionIcon.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 d="M15 13.08V4.92C15 3.85961 14.1404 3 13.08 3L4.92 3C3.85961 3 3 3.85961 3 4.92V13.08C3 14.1404 3.85961 15 4.92 15H13.08C14.1404 15 15 14.1404 15 13.08Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M9 6.25V8.75C9 9.302 8.552 9.75 8 9.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M5.75 6.25V7.5" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M12.25 6.25V7.5" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M11.25 12C10.623 12.471 9.844 12.75 9 12.75C8.156 12.75 7.376 12.471 6.75 12" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M2.75 6.75V4.75C2.75 3.645 3.645 2.75 4.75 2.75H6.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M11.25 2.75H13.25C14.355 2.75 15.25 3.645 15.25 4.75V6.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M15.25 11.25V13.25C15.25 14.355 14.355 15.25 13.25 15.25H11.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M6.75 15.25H4.75C3.645 15.25 2.75 14.355 2.75 13.25V11.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/FeatherIcon.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="M15.183 2.74329C8.17788 3.2182 4.68522 8.77876 3.81453 11.4997C4.49946 12.0114 6.58006 12.9064 9.42299 12.3924C12.2659 11.8784 12.9751 9.74808 12.9743 8.74715C15.1281 7.42278 14.0847 5.37604 15.183 2.74329Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M12.974 8.731C12.5 12.422 9.25 12.844 6 12.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M2.75 15.25C2.75 15.25 4.062 3.729 15.25 2.75C14.69 3.726 14.677 5.355 14.304 6.989C13.78 9 11.969 9.25 9.75 9.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/FileContentIcon.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 fill-rule="evenodd" clip-rule="evenodd" d="M10.75 1.83956C10.6212 1.78103 10.4801 1.75 10.336 1.75H4.75C3.645 1.75 2.75 2.645 2.75 3.75V14.25C2.75 15.355 3.645 16.25 4.75 16.25H13.25C14.355 16.25 15.25 15.355 15.25 14.25V6.664C15.25 6.51978 15.2189 6.37883 15.1603 6.24999H11.75C11.198 6.24999 10.75 5.80199 10.75 5.24999V1.83956Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M5.75 6.75H7.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M5.75 9.75H12.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M5.75 12.75H12.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M2.75 14.25V3.75C2.75 2.645 3.645 1.75 4.75 1.75H10.336C10.601 1.75 10.856 1.855 11.043 2.043L14.957 5.957C15.145 6.145 15.25 6.399 15.25 6.664V14.25C15.25 15.355 14.355 16.25 13.25 16.25H4.75C3.645 16.25 2.75 15.355 2.75 14.25Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M15.16 6.24999H11.75C11.198 6.24999 10.75 5.80199 10.75 5.24999V1.85199" :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/FileIcon.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="M10.75 1.83956C10.6212 1.78103 10.4801 1.75 10.336 1.75H4.75C3.645 1.75 2.75 2.645 2.75 3.75V14.25C2.75 15.355 3.645 16.25 4.75 16.25H13.25C14.355 16.25 15.25 15.355 15.25 14.25V6.664C15.25 6.51978 15.2189 6.37883 15.1603 6.24999H11.75C11.198 6.24999 10.75 5.80199 10.75 5.24999V1.83956Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M15.16 6.24999H11.75C11.198 6.24999 10.75 5.80199 10.75 5.24999V1.85199" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M2.75 14.25V3.75C2.75 2.645 3.645 1.75 4.75 1.75H10.336C10.601 1.75 10.856 1.855 11.043 2.043L14.957 5.957C15.145 6.145 15.25 6.399 15.25 6.664V14.25C15.25 15.355 14.355 16.25 13.25 16.25H4.75C3.645 16.25 2.75 15.355 2.75 14.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/Files2Icon.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="M15.75 9.25V15.25C15.75 15.802 15.302 16.25 14.75 16.25H9.75C9.198 16.25 8.75 15.802 8.75 15.25V8.25C8.75 7.698 9.198 7.25 9.75 7.25H13.75L15.75 9.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M6.25 10.75H3.25C2.698 10.75 2.25 10.302 2.25 9.75V2.75C2.25 2.198 2.698 1.75 3.25 1.75H7.25L9.25 3.75V4.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M6.75 1.75V3.75H8.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M15.75 9.25V15.25C15.75 15.802 15.302 16.25 14.75 16.25H9.75C9.198 16.25 8.75 15.802 8.75 15.25V8.25C8.75 7.698 9.198 7.25 9.75 7.25H13.75L15.75 9.25Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M13.75 7.25V9.25H15.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/FilmIcon.vue

@@ -0,0 +1,44 @@
+<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.75 4.75C1.75 3.64543 2.64543 2.75 3.75 2.75H14.25C15.3546 2.75 16.25 3.64543 16.25 4.75V6.25H1.75V4.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M1.75 13.25C1.75 14.3546 2.64543 15.25 3.75 15.25H14.25C15.3546 15.25 16.25 14.3546 16.25 13.25V11.75H1.75V13.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M9 6.25V11.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M1.75 6.25H16.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M1.75 11.75H16.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M9 11.75V15.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M9 2.75V6.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M5.25 2.75V6.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M12.75 2.75V6.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M5.25 11.75V15.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M12.75 11.75V15.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M3.75 15.25L14.25 15.25C15.3546 15.25 16.25 14.3546 16.25 13.25V4.75C16.25 3.64543 15.3546 2.75 14.25 2.75L3.75 2.75C2.64543 2.75 1.75 3.64543 1.75 4.75L1.75 13.25C1.75 14.3546 2.64543 15.25 3.75 15.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/FilterIcon.vue

@@ -0,0 +1,34 @@
+<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.5 14.75L7.5 16.25V9L2.75 2.75H15.25L10.5 9V14.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M10.5 14.75L7.5 16.25V9L2.75 2.75H15.25L10.5 9V14.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/FiltersIcon.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 fill-rule="evenodd" clip-rule="evenodd" d="M13.4868 7.0974C13.4955 6.98275 13.5 6.8669 13.5 6.75C13.5 4.26472 11.4853 2.25 9 2.25C6.51472 2.25 4.5 4.26472 4.5 6.75C4.5 6.86689 4.50446 6.98275 4.51321 7.0974C2.89021 7.777 1.75 9.38035 1.75 11.25C1.75 13.7353 3.76472 15.75 6.25 15.75C7.28562 15.75 8.23953 15.4002 9 14.8122C9.76047 15.4002 10.7144 15.75 11.75 15.75C14.2353 15.75 16.25 13.7353 16.25 11.25C16.25 9.38035 15.1098 7.77701 13.4868 7.0974Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M10.496 9.757C10.66 10.224 10.75 10.727 10.75 11.25C10.75 13.735 8.735 15.75 6.25 15.75C3.765 15.75 1.75 13.735 1.75 11.25C1.75 10.339 2.021 9.491 2.486 8.783" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M11.511 15.745C12.042 15.773 12.587 15.707 13.123 15.536C15.49 14.778 16.794 12.245 16.036 9.878C15.278 7.511 12.745 6.207 10.378 6.965C9.50999 7.243 8.78599 7.759 8.25299 8.418" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M8.156 11.171C7.695 11.083 7.239 10.92 6.806 10.679C4.636 9.468 3.859 6.727 5.07 4.556C6.281 2.385 9.022 1.609 11.193 2.82C11.904 3.217 12.465 3.778 12.856 4.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/FingerprintIcon.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 fill-rule="evenodd" clip-rule="evenodd" d="M1.8902 11.724C2.12344 11.3741 2.63805 10.4294 2.83051 9.44973C2.88991 9.14734 2.91864 8.7863 2.95029 8.38865C3.04681 7.17585 3.17043 5.62254 4.27382 4.35447C5.73898 2.67063 7.95402 1.05783 11.4903 2.53943C14.7335 3.89826 15.2119 7.42121 14.9454 9.44973C14.9106 9.71486 14.8806 9.96973 14.851 10.221C14.7119 11.4023 14.5821 12.5039 14.0051 14.217C12.6935 15.5126 11.8037 15.9069 9.93474 15.9749L9.89915 15.9642C10.9842 14.1865 13.3146 8.20647 11.3174 6.08865C9.6151 4.28348 7.73281 5.12703 7.00446 5.77446C6.11668 6.43716 6.0445 7.39544 5.95402 8.59659C5.84065 10.1017 5.69855 11.988 3.88724 14.152L3.87465 14.1482C2.5892 13.5334 2.11823 13.0261 1.8902 11.724Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M5.078 3.462C6.13 2.551 7.502 2 9 2C12.309 2 15 4.691 15 8C15 10.307 14.637 12.373 14.012 14.213" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M1.90802 11.703C2.94802 10.011 3.00002 8.32 3.00002 8C3.00002 7.088 3.20402 6.223 3.57002 5.448" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M11.87 10.142C11.592 12.376 10.887 14.302 9.91901 15.948" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M3.87201 14.14C5.09601 12.661 6.00001 10.666 6.00001 8C6.00001 6.343 7.34301 5 9.00001 5C10.524 5 11.783 6.137 11.975 7.608" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M6.55103 15.618C7.97503 13.744 9.00003 11.262 9.00003 8" :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/Flag7Icon.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="M3.75 3.25H11.25C11.802 3.25 12.25 3.698 12.25 4.25V9.25H3.75" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M3.75 3.25H11.25C11.802 3.25 12.25 3.698 12.25 4.25V9.25H3.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M12.25 5.75H14.25C14.802 5.75 15.25 6.198 15.25 6.75V10.75C15.25 11.302 14.802 11.75 14.25 11.75H10.75C10.198 11.75 9.75 11.302 9.75 10.75V9.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M10.043 11.457L12.25 9.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M3.75 1.75V16.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/FlameIcon.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="M14.5 10.733C14.5 13.78 12.038 16.25 9 16.25C10.519 16.25 11.75 15.015 11.75 13.491C11.75 11.395 9 9 9 9C9 9 6.25 11.396 6.25 13.491C6.25 15.015 7.481 16.25 9 16.25C5.962 16.25 3.5 13.78 3.5 10.733C3.5 6.542 9 1.75 9 1.75C9 1.75 14.5 6.542 14.5 10.733Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M9 16.25C10.519 16.25 11.75 15.015 11.75 13.491C11.75 11.395 9 9 9 9C9 9 6.25 11.396 6.25 13.491C6.25 15.015 7.481 16.25 9 16.25Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M9 16.25C12.038 16.25 14.5 13.78 14.5 10.733C14.5 6.542 9 1.75 9 1.75C9 1.75 3.5 6.542 3.5 10.733C3.5 13.78 5.962 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/FolderIcon.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 6.75H13.75C14.855 6.75 15.75 7.645 15.75 8.75V13.25C15.75 14.355 14.855 15.25 13.75 15.25H4.25C3.145 15.25 2.25 14.355 2.25 13.25V8.75C2.25 7.645 3.145 6.75 4.25 6.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M2.25 8.75V4.75C2.25 3.645 3.145 2.75 4.25 2.75H6.201C6.808 2.75 7.381 3.025 7.761 3.498L8.364 4.25H13.75C14.855 4.25 15.75 5.145 15.75 6.25V9.094" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M4.25 6.75H13.75C14.855 6.75 15.75 7.645 15.75 8.75V13.25C15.75 14.355 14.855 15.25 13.75 15.25H4.25C3.145 15.25 2.25 14.355 2.25 13.25V8.75C2.25 7.645 3.145 6.75 4.25 6.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>