diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..586d389
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "javascript.preferences.importModuleSpecifier": "non-relative",
+  "typescript.preferences.importModuleSpecifier": "non-relative"
+}
diff --git a/src/app/auth/page.tsx b/src/app/auth/page.tsx
index 044b950..150f63d 100644
--- a/src/app/auth/page.tsx
+++ b/src/app/auth/page.tsx
@@ -1,7 +1,7 @@
 import FormAuth from '@/components/pages/auth/form-auth'
 import ImageCard from '@/components/pages/auth/image-card'
 import Content from '@/components/ui/content'
-import IconGolub from '@/components/ui/icons/IconGolub'
+import { Icons } from '@/components/ui/icons'
 import ThemeToggler from '@/components/ui/index/theme-toggler'
 
 export default function Auth() {
@@ -10,7 +10,7 @@ export default function Auth() {
       <Content className="flex items-center justify-center dark:bg-none dark:bg-base-gray-8">
         <div className="p-7 sm:p-10 flex gap-7 md:gap-[3.75rem] rounded-3xl bg-base-white dark:bg-base-black">
           <ImageCard className="-my-[4.375rem] flex-shrink-0 hidden sm:flex items-center justify-center">
-            <IconGolub />
+            <Icons.golub />
           </ImageCard>
           <div>
             <h1 className="title-lg">Authentication</h1>
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
index f7d7da0..53d6c38 100644
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -1,11 +1,10 @@
 'use client'
 
+import { Icons } from '@/components/ui/icons'
 import { cn } from '@/lib/utils'
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
 import * as React from 'react'
 
-import IconCheck from './icons/IconCheck'
-
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
@@ -21,7 +20,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn('flex items-center justify-center text-current')}
     >
-      <IconCheck size="sm" />
+      <Icons.check size="sm" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ))
diff --git a/src/components/ui/icons.tsx b/src/components/ui/icons.tsx
new file mode 100644
index 0000000..dd51db1
--- /dev/null
+++ b/src/components/ui/icons.tsx
@@ -0,0 +1,47 @@
+import IconSize from '@/types/enums/IconSize'
+import { getIconDimension } from '@/utils'
+import { HTMLAttributes } from 'react'
+
+interface IconProps extends HTMLAttributes<SVGElement> {
+  size?: IconSize
+}
+
+export const Icons = {
+  check: ({ size, ...props }: IconProps) => {
+    const dimension = getIconDimension(size)
+    return (
+      <svg
+        fill="none"
+        height={dimension}
+        viewBox="0 0 20 20"
+        width={dimension}
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          d="M16.6829 6.97652C16.8881 6.76125 17 6.48728 17 6.16438C17 5.51859 16.515 5 15.8995 5C15.5917 5 15.3119 5.13699 15.0974 5.36204L8.71795 12.2114L5.90263 9.11204C5.68812 8.88699 5.399 8.75 5.10054 8.75C4.48498 8.75 4 9.26859 4 9.91438C4 10.2373 4.11192 10.5113 4.31711 10.7265L7.8599 14.589C8.10239 14.863 8.40084 14.9902 8.72727 15C9.0537 15 9.3335 14.863 9.58532 14.589L16.6829 6.97652Z"
+          fill="white"
+        />
+      </svg>
+    )
+  },
+  golub: (props: IconProps) => (
+    <svg
+      fill="none"
+      height="161"
+      viewBox="0 0 196 161"
+      width="196"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M142.835 91.4259C99.0216 106.204 61.9886 52.6329 48.9489 24C44.892 30.7734 38.1693 50.9704 43.733 77.5713C50.6875 110.822 84.5909 106.204 85.4602 121.906C86.3295 137.608 38.517 132.99 22 131.143C101.108 173.63 134.142 132.99 142.835 119.135C151.528 105.281 161.091 104.357 175 106.204C167.176 93.2732 156.744 85.8841 142.835 91.4259Z"
+        fill="currentColor"
+      />
+      <path
+        d="M121 86C140.504 78 157.84 46.6667 164.071 32C167.971 57.6 158.653 77.3333 153.506 84C149.443 84 137.253 84.4 121 86Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+}
diff --git a/src/components/ui/icons/IconChange.tsx b/src/components/ui/icons/IconChange.tsx
deleted file mode 100644
index 3e4ad24..0000000
--- a/src/components/ui/icons/IconChange.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import IconProps from '@/types/IconProps'
-import { getIconDimension } from '@/utils'
-import { FC } from 'react'
-
-const IconChange: FC<IconProps> = ({ className, size }) => {
-  const dimension = getIconDimension(size)
-
-  return (
-    <svg
-      className={className}
-      fill="none"
-      height={dimension}
-      viewBox="0 0 24 24"
-      width={dimension}
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M4 16.5H16M4 16.5L7.5 13M4 16.5L7.5 20M7 7.5H20M20 7.5L16.5 4M20 7.5L16.5 11"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.8"
-      />
-    </svg>
-  )
-}
-export default IconChange
diff --git a/src/components/ui/icons/IconCheck.tsx b/src/components/ui/icons/IconCheck.tsx
deleted file mode 100644
index 5d5186f..0000000
--- a/src/components/ui/icons/IconCheck.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import IconProps from '@/types/IconProps'
-import { getIconDimension } from '@/utils'
-import { FC } from 'react'
-
-const IconCheck: FC<IconProps> = ({ className, size }) => {
-  const dimension = getIconDimension(size)
-
-  return (
-    <svg
-      className={className}
-      fill="none"
-      height={dimension}
-      viewBox="0 0 20 20"
-      width={dimension}
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M16.6829 6.97652C16.8881 6.76125 17 6.48728 17 6.16438C17 5.51859 16.515 5 15.8995 5C15.5917 5 15.3119 5.13699 15.0974 5.36204L8.71795 12.2114L5.90263 9.11204C5.68812 8.88699 5.399 8.75 5.10054 8.75C4.48498 8.75 4 9.26859 4 9.91438C4 10.2373 4.11192 10.5113 4.31711 10.7265L7.8599 14.589C8.10239 14.863 8.40084 14.9902 8.72727 15C9.0537 15 9.3335 14.863 9.58532 14.589L16.6829 6.97652Z"
-        fill="white"
-      />
-    </svg>
-  )
-}
-export default IconCheck
diff --git a/src/components/ui/icons/IconGolub.tsx b/src/components/ui/icons/IconGolub.tsx
deleted file mode 100644
index d454d36..0000000
--- a/src/components/ui/icons/IconGolub.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { FC } from 'react'
-
-type IconGolubProps = { className?: string }
-
-const IconGolub: FC<IconGolubProps> = ({ className }) => {
-  return (
-    <svg
-      className={className}
-      fill="none"
-      height="161"
-      viewBox="0 0 196 161"
-      width="196"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M142.835 91.4259C99.0216 106.204 61.9886 52.6329 48.9489 24C44.892 30.7734 38.1693 50.9704 43.733 77.5713C50.6875 110.822 84.5909 106.204 85.4602 121.906C86.3295 137.608 38.517 132.99 22 131.143C101.108 173.63 134.142 132.99 142.835 119.135C151.528 105.281 161.091 104.357 175 106.204C167.176 93.2732 156.744 85.8841 142.835 91.4259Z"
-        fill="currentColor"
-      />
-      <path
-        d="M121 86C140.504 78 157.84 46.6667 164.071 32C167.971 57.6 158.653 77.3333 153.506 84C149.443 84 137.253 84.4 121 86Z"
-        fill="currentColor"
-      />
-    </svg>
-  )
-}
-
-export default IconGolub
diff --git a/src/store/providers/index.tsx b/src/store/providers/index.tsx
index 0e3a0b4..6c40742 100644
--- a/src/store/providers/index.tsx
+++ b/src/store/providers/index.tsx
@@ -1,12 +1,11 @@
 'use client'
 
 import Content from '@/components/ui/content'
-import IconGolub from '@/components/ui/icons/IconGolub'
+import { Icons } from '@/components/ui/icons'
+import ThemeProvider from '@/store/providers/theme-provider'
 import { ApiContext, useApiLoader } from '@/utils'
 import { FC, ReactNode } from 'react'
 
-import ThemeProvider from './theme-provider'
-
 type ProvidersProps = {
   children: ReactNode
 }
@@ -25,7 +24,7 @@ const Providers: FC<ProvidersProps> = ({ children }) => {
       ) : (
         // TODO: handle initial metacom loading state
         <Content className="flex items-center justify-center w-screen h-screen gap-20 text-white">
-          <IconGolub />
+          <Icons.golub />
         </Content>
       )}
     </ThemeProvider>
diff --git a/src/types/IconProps.ts b/src/types/IconProps.ts
deleted file mode 100644
index b9e31e1..0000000
--- a/src/types/IconProps.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import IconSize from './enums/IconSize'
-
-type IconProps = {
-  className?: string
-  size?: IconSize
-}
-
-export default IconProps