diff --git a/docs/icon-usage.md b/docs/icon-usage.md
new file mode 100644
index 0000000..143f54c
--- /dev/null
+++ b/docs/icon-usage.md
@@ -0,0 +1,68 @@
+# Icon Usage Guide
+
+## Font Awesome Integration
+
+This project uses [Font Awesome](https://fontawesome.com/) (version 6) for icons instead of custom SVGs. This approach provides several benefits:
+
+### Benefits
+
+- **Maintainability**: Icons can be changed easily by modifying class names
+- **Consistency**: Ensures consistent icon styling throughout the application
+- **Performance**: Optimized icon loading and rendering
+- **Extensibility**: Easy to add new icons without creating custom SVGs
+- **Accessibility**: Proper accessibility support built-in
+
+### Installation
+
+The project uses Font Awesome via npm:
+
+```bash
+npm install @fortawesome/fontawesome-free --save
+```
+
+The Font Awesome styles are imported in the main layout file (`src/layouts/BaseLayout.astro`).
+
+### Usage
+
+Icons are implemented using the following pattern:
+
+```html
+
+```
+
+Where:
+- `fa-solid` is the icon style (solid, regular, light, etc.)
+- `fa-icon-name` is the specific icon name
+- `aria-hidden="true"` prevents screen readers from announcing the icon when there is accompanying text
+
+For standalone icons that need to be accessible, use:
+
+```html
+
+```
+
+### Icon Style Guide
+
+To maintain consistency across the application, use these icon styles for common actions:
+
+| Action | Icon | Class |
+|--------|------|-------|
+| Edit | Pen to Square | `fa-solid fa-pen-to-square` |
+| Delete | Trash Can | `fa-solid fa-trash-can` |
+| Add | Circle Plus | `fa-solid fa-circle-plus` |
+| Settings | Gear | `fa-solid fa-gear` |
+| User | User | `fa-solid fa-user` |
+| Search | Magnifying Glass | `fa-solid fa-magnifying-glass` |
+| Sort | Arrow Up-Down | `fa-solid fa-arrow-up-down` |
+| Filter | Filter | `fa-solid fa-filter` |
+| Close | X Mark | `fa-solid fa-xmark` |
+| Success | Circle Check | `fa-solid fa-circle-check` |
+| Error | Circle Exclamation | `fa-solid fa-circle-exclamation` |
+| Warning | Triangle Exclamation | `fa-solid fa-triangle-exclamation` |
+| Info | Circle Info | `fa-solid fa-circle-info` |
+
+### References
+
+- [Font Awesome Documentation](https://fontawesome.com/docs)
+- [Icon Search](https://fontawesome.com/icons)
+- [Accessibility with Font Awesome](https://fontawesome.com/docs/web/accessibility)
diff --git a/package-lock.json b/package-lock.json
index 108a2ee..48a46ef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
"@astrojs/cloudflare": "^12.5.1",
"@astrojs/node": "^9.2.1",
"@astrojs/react": "^4.2.5",
+ "@fortawesome/fontawesome-free": "^6.7.2",
"@nanostores/react": "^1.0.0",
"@prisma/client": "^6.7.0",
"@radix-ui/react-dialog": "^1.1.13",
@@ -826,6 +827,15 @@
"integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
"license": "MIT"
},
+ "node_modules/@fortawesome/fontawesome-free": {
+ "version": "6.7.2",
+ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz",
+ "integrity": "sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==",
+ "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
+ "engines": {
+ "node": ">=6"
+ }
+ },
"node_modules/@img/sharp-libvips-linux-x64": {
"version": "1.0.4",
"cpu": [
diff --git a/package.json b/package.json
index 7d9f3ea..a9d0cfc 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
"@astrojs/cloudflare": "^12.5.1",
"@astrojs/node": "^9.2.1",
"@astrojs/react": "^4.2.5",
+ "@fortawesome/fontawesome-free": "^6.7.2",
"@nanostores/react": "^1.0.0",
"@prisma/client": "^6.7.0",
"@radix-ui/react-dialog": "^1.1.13",