diff --git a/package-lock.json b/package-lock.json
index d185180c..d5247f84 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,10 @@
     "packages": {
         "": {
             "devDependencies": {
+                "@fortawesome/fontawesome-svg-core": "^6.4.2",
+                "@fortawesome/free-brands-svg-icons": "^6.4.2",
+                "@fortawesome/free-solid-svg-icons": "^6.4.2",
+                "@fortawesome/vue-fontawesome": "^3.0.3",
                 "@kyvg/vue3-notification": "^3.0.2",
                 "@vitejs/plugin-vue": "^4.3.4",
                 "axios": "^1.1.2",
@@ -384,6 +388,65 @@
                 "node": ">=12"
             }
         },
+        "node_modules/@fortawesome/fontawesome-common-types": {
+            "version": "6.4.2",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
+            "integrity": "sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==",
+            "dev": true,
+            "hasInstallScript": true,
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/fontawesome-svg-core": {
+            "version": "6.4.2",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.2.tgz",
+            "integrity": "sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==",
+            "dev": true,
+            "hasInstallScript": true,
+            "dependencies": {
+                "@fortawesome/fontawesome-common-types": "6.4.2"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/free-brands-svg-icons": {
+            "version": "6.4.2",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.2.tgz",
+            "integrity": "sha512-LKOwJX0I7+mR/cvvf6qIiqcERbdnY+24zgpUSouySml+5w8B4BJOx8EhDR/FTKAu06W12fmUIcv6lzPSwYKGGg==",
+            "dev": true,
+            "hasInstallScript": true,
+            "dependencies": {
+                "@fortawesome/fontawesome-common-types": "6.4.2"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/free-solid-svg-icons": {
+            "version": "6.4.2",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz",
+            "integrity": "sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==",
+            "dev": true,
+            "hasInstallScript": true,
+            "dependencies": {
+                "@fortawesome/fontawesome-common-types": "6.4.2"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@fortawesome/vue-fontawesome": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.3.tgz",
+            "integrity": "sha512-KCPHi9QemVXGMrfuwf3nNnNo129resAIQWut9QTAMXmXqL2ErABC6ohd2yY5Ipq0CLWNbKHk8TMdTXL/Zf3ZhA==",
+            "dev": true,
+            "peerDependencies": {
+                "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+                "vue": ">= 3.0.0 < 4"
+            }
+        },
         "node_modules/@jridgewell/gen-mapping": {
             "version": "0.3.3",
             "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
diff --git a/package.json b/package.json
index bbdbaeb6..9dc3b963 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,10 @@
         "build": "vite build"
     },
     "devDependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.4.2",
+        "@fortawesome/free-brands-svg-icons": "^6.4.2",
+        "@fortawesome/free-solid-svg-icons": "^6.4.2",
+        "@fortawesome/vue-fontawesome": "^3.0.3",
         "@kyvg/vue3-notification": "^3.0.2",
         "@vitejs/plugin-vue": "^4.3.4",
         "axios": "^1.1.2",
diff --git a/resources/js_vue3/app.js b/resources/js_vue3/app.js
index 2ac8aec4..183580a1 100644
--- a/resources/js_vue3/app.js
+++ b/resources/js_vue3/app.js
@@ -3,10 +3,10 @@ import '/resources/js_vue3/assets/app.scss';
 import { createApp } from 'vue'
 import { i18nVue } from 'laravel-vue-i18n'
 // import { createPinia } from 'pinia'
-
 import App from './App.vue'
 import router from './router'
 import Notifications from '@kyvg/vue3-notification'
+import FontAwesomeIcon from './icons'
 
 const app = createApp(App)
 
@@ -29,4 +29,6 @@ app.use(i18nVue, {
 })
 app.use(Notifications)
 
+app.component('font-awesome-icon', FontAwesomeIcon)
+
 app.mount('#app')
diff --git a/resources/js_vue3/icons.js b/resources/js_vue3/icons.js
new file mode 100644
index 00000000..1a54e0b1
--- /dev/null
+++ b/resources/js_vue3/icons.js
@@ -0,0 +1,97 @@
+// import Vue from 'vue'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+import {
+    faPlus,
+    faPlusCircle,
+    faQrcode,
+    faImage,
+    faTrash,
+    faCheck,
+    faCheckSquare,
+    faTimes,
+    faLock,
+    faLockOpen,
+    faSearch,
+    faEllipsisH,
+    faBars,
+    faSpinner,
+    faCaretDown,
+    faLayerGroup,
+    faMinusCircle,
+    faExclamationCircle,
+    faPenSquare,
+    faTh,
+    faList,
+    faTimesCircle,
+    faUpload,
+    faGlobe,
+    faBook,
+    faFlask,
+    faCode,
+    faCopy,
+    faSortAlphaDown,
+    faSortAlphaUp,
+    faEye,
+    faEyeSlash,
+    faExternalLinkAlt,
+    faCamera,
+    faFileDownload,
+    faSun,
+    faMoon,
+    faDesktop,
+    faCircleNotch
+} from '@fortawesome/free-solid-svg-icons'
+
+import {
+    faGithubAlt
+} from '@fortawesome/free-brands-svg-icons'
+
+library.add(
+    faPlus,
+    faPlusCircle,
+    faQrcode,
+    faImage,
+    faTrash,
+    faCheck,
+    faCheckSquare,
+    faTimes,
+    faLock,
+    faLockOpen,
+    faSearch,
+    faEllipsisH,
+    faBars,
+    faSpinner,
+    faGithubAlt,
+    faCaretDown,
+    faLayerGroup,
+    faMinusCircle,
+    faExclamationCircle,
+    faPenSquare,
+    faTh,
+    faList,
+    faTimesCircle,
+    faUpload,
+    faGlobe,
+    faBook,
+    faFlask,
+    faCode,
+    faCopy,
+    faSortAlphaDown,
+    faSortAlphaUp,
+    faEye,
+    faEyeSlash,
+    faExternalLinkAlt,
+    faCamera,
+    faFileDownload,
+    faSun,
+    faMoon,
+    faDesktop,
+    faCircleNotch
+);
+
+export default FontAwesomeIcon
+
+// Vue.component('font-awesome-icon', FontAwesomeIcon)
\ No newline at end of file