diff --git a/bun.lockb b/bun.lockb
index 509b39c..2a0d2d0 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index b9dbb60..2a7225c 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,6 @@
 	"dependencies": {
 		"@clerk/backend": "1.21.4",
 		"@clerk/themes": "^2.2.3",
-		"@flaticon/flaticon-uicons": "^3.3.1",
 		"@inlang/paraglide-sveltekit": "^0.15.0",
 		"@pothos/core": "^4.3.0",
 		"@pothos/plugin-prisma": "^4.4.0",
@@ -78,6 +77,7 @@
 		"eslint_d": "^14.3.0",
 		"graphql": "^16.9.0",
 		"graphql-yoga": "^5.10.4",
+		"lucide-svelte": "^0.469.0",
 		"pino": "^9.5.0",
 		"pino-pretty": "^13.0.0",
 		"tailwind-merge": "^2.5.5",
diff --git a/src/app.css b/src/app.css
index 6a836a2..8c0cf1f 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,7 +1,6 @@
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
-@import '@flaticon/flaticon-uicons/css/all/all';
 
 :root {
 	@apply text-base-content;
diff --git a/src/lib/components/DataInput/TextInput.stories.svelte b/src/lib/components/DataInput/TextInput.stories.svelte
index b591ea8..916fcc4 100644
--- a/src/lib/components/DataInput/TextInput.stories.svelte
+++ b/src/lib/components/DataInput/TextInput.stories.svelte
@@ -1,6 +1,7 @@
 <script module lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import TextInput from './TextInput.svelte';
+	import { User } from 'lucide-svelte';
 
 	const { Story } = defineMeta({
 		title: 'Data Input/Text Input',
@@ -45,10 +46,18 @@
 	});
 </script>
 
-{#snippet icon()}
-	<i class="fi fi-rr-user"></i>
-{/snippet}
-
 <Story name="Text Label" args={{ color: 'primary', name: 'text', start: 'Text' }} />
-<Story name="Icon Start" args={{ color: 'secondary', name: 'text', start: icon }} />
-<Story name="Icon End" args={{ color: 'secondary', name: 'text', end: icon }} />
+<Story name="Icon Start">
+	<TextInput name="text" color="secondary">
+		{#snippet start()}
+			<User />
+		{/snippet}
+	</TextInput>
+</Story>
+<Story name="Icon End">
+	<TextInput name="text" color="secondary">
+		{#snippet end()}
+			<User />
+		{/snippet}
+	</TextInput>
+</Story>
diff --git a/src/lib/components/Feedback/Alert.stories.svelte b/src/lib/components/Feedback/Alert.stories.svelte
index 82762b0..4915e29 100644
--- a/src/lib/components/Feedback/Alert.stories.svelte
+++ b/src/lib/components/Feedback/Alert.stories.svelte
@@ -1,8 +1,8 @@
 <script module lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Alert from './Alert.svelte';
+	import { Info } from 'lucide-svelte';
 	import type { ComponentProps } from 'svelte';
-	import { InfoIcon } from '../Icons';
+	import Alert from './Alert.svelte';
 
 	const { Story } = defineMeta({
 		title: 'Feedback/Alert',
@@ -16,7 +16,7 @@
 {#snippet template(props: ComponentProps<typeof Alert>)}
 	<Alert {...props}>
 		{#snippet icon()}
-			<InfoIcon class="h-6 w-6 shrink-0 stroke-info" />
+			<Info />
 		{/snippet}
 		<span>Hello world!</span>
 	</Alert>
diff --git a/src/lib/components/Icons/InfoIcon.svelte b/src/lib/components/Icons/InfoIcon.svelte
deleted file mode 100644
index 1eb8fc1..0000000
--- a/src/lib/components/Icons/InfoIcon.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script lang="ts">
-	import type { SvelteHTMLElements } from 'svelte/elements';
-	import { twMerge } from 'tailwind-merge';
-
-	let { class: className, ...props }: SvelteHTMLElements['i'] = $props();
-</script>
-
-<i {...props} class={twMerge(className, 'fi fi-sr-info')}></i>
diff --git a/src/lib/components/Icons/index.ts b/src/lib/components/Icons/index.ts
deleted file mode 100644
index 334fb9f..0000000
--- a/src/lib/components/Icons/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as InfoIcon } from './InfoIcon.svelte';