diff --git a/package.json b/package.json
index 23532d31..79282167 100644
--- a/package.json
+++ b/package.json
@@ -48,8 +48,8 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.7.2",
-    "@fortawesome/free-solid-svg-icons": "6.7.2",
+    "@fortawesome/fontawesome-svg-core": "7.1.0",
+    "@fortawesome/free-solid-svg-icons": "7.1.0",
     "@fortawesome/react-fontawesome": "0.2.6",
     "@headlessui/react": "1.7.19",
     "@radix-ui/react-tabs": "1.1.13",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dd79590e..f6ab1324 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,14 +9,14 @@ importers:
   .:
     dependencies:
       '@fortawesome/fontawesome-svg-core':
-        specifier: 6.7.2
-        version: 6.7.2
+        specifier: 7.1.0
+        version: 7.1.0
       '@fortawesome/free-solid-svg-icons':
-        specifier: 6.7.2
-        version: 6.7.2
+        specifier: 7.1.0
+        version: 7.1.0
       '@fortawesome/react-fontawesome':
         specifier: 0.2.6
-        version: 0.2.6(@fortawesome/fontawesome-svg-core@6.7.2)(react@16.14.0)
+        version: 0.2.6(@fortawesome/fontawesome-svg-core@7.1.0)(react@16.14.0)
       '@headlessui/react':
         specifier: 1.7.19
         version: 1.7.19(react-dom@16.14.0(react@16.14.0))(react@16.14.0)
@@ -1079,21 +1079,20 @@ packages:
     resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@fortawesome/fontawesome-common-types@6.7.2':
-    resolution: {integrity: sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==}
+  '@fortawesome/fontawesome-common-types@7.1.0':
+    resolution: {integrity: sha512-l/BQM7fYntsCI//du+6sEnHOP6a74UixFyOYUyz2DLMXKx+6DEhfR3F2NYGE45XH1JJuIamacb4IZs9S0ZOWLA==}
     engines: {node: '>=6'}
 
-  '@fortawesome/fontawesome-svg-core@6.7.2':
-    resolution: {integrity: sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==}
+  '@fortawesome/fontawesome-svg-core@7.1.0':
+    resolution: {integrity: sha512-fNxRUk1KhjSbnbuBxlWSnBLKLBNun52ZBTcs22H/xEEzM6Ap81ZFTQ4bZBxVQGQgVY0xugKGoRcCbaKjLQ3XZA==}
     engines: {node: '>=6'}
 
-  '@fortawesome/free-solid-svg-icons@6.7.2':
-    resolution: {integrity: sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==}
+  '@fortawesome/free-solid-svg-icons@7.1.0':
+    resolution: {integrity: sha512-Udu3K7SzAo9N013qt7qmm22/wo2hADdheXtBfxFTecp+ogsc0caQNRKEb7pkvvagUGOpG9wJC1ViH6WXs8oXIA==}
     engines: {node: '>=6'}
 
   '@fortawesome/react-fontawesome@0.2.6':
     resolution: {integrity: sha512-mtBFIi1UsYQo7rYonYFkjgYKGoL8T+fEH6NGUpvuqtY3ytMsAoDaPo5rk25KuMtKDipY4bGYM/CkmCHA1N3FUg==}
-    deprecated: v0.2.x is no longer supported. Unless you are still using FontAwesome 5, please update to v3.1.1 or greater.
     peerDependencies:
       '@fortawesome/fontawesome-svg-core': ~1 || ~6 || ~7
       react: ^16.3 || ^17.0.0 || ^18.0.0 || ^19.0.0
@@ -6761,19 +6760,19 @@ snapshots:
       '@eslint/core': 0.17.0
       levn: 0.4.1
 
-  '@fortawesome/fontawesome-common-types@6.7.2': {}
+  '@fortawesome/fontawesome-common-types@7.1.0': {}
 
-  '@fortawesome/fontawesome-svg-core@6.7.2':
+  '@fortawesome/fontawesome-svg-core@7.1.0':
     dependencies:
-      '@fortawesome/fontawesome-common-types': 6.7.2
+      '@fortawesome/fontawesome-common-types': 7.1.0
 
-  '@fortawesome/free-solid-svg-icons@6.7.2':
+  '@fortawesome/free-solid-svg-icons@7.1.0':
     dependencies:
-      '@fortawesome/fontawesome-common-types': 6.7.2
+      '@fortawesome/fontawesome-common-types': 7.1.0
 
-  '@fortawesome/react-fontawesome@0.2.6(@fortawesome/fontawesome-svg-core@6.7.2)(react@16.14.0)':
+  '@fortawesome/react-fontawesome@0.2.6(@fortawesome/fontawesome-svg-core@7.1.0)(react@16.14.0)':
     dependencies:
-      '@fortawesome/fontawesome-svg-core': 6.7.2
+      '@fortawesome/fontawesome-svg-core': 7.1.0
       prop-types: 15.8.1
       react: 16.14.0
 
diff --git a/src/callout/callout.tsx b/src/callout/callout.tsx
index 7044d46e..5da9e949 100644
--- a/src/callout/callout.tsx
+++ b/src/callout/callout.tsx
@@ -59,7 +59,10 @@ export const Callout = ({
 	return (
 		<div className={classes} {...others}>
 			<div className="flex items-start mb-2">
-				<FontAwesomeIcon icon={variantIcons[variant]} className="me-2 mt-1" />
+				<FontAwesomeIcon
+					icon={variantIcons[variant]}
+					className="me-2 mt-1 fa-width-auto"
+				/>
 				<strong className={variantLabelClasses[variant]}>{label}</strong>
 			</div>
 			{children}
diff --git a/src/drop-down/drop-down.tsx b/src/drop-down/drop-down.tsx
index 48417049..4e548577 100644
--- a/src/drop-down/drop-down.tsx
+++ b/src/drop-down/drop-down.tsx
@@ -74,7 +74,7 @@ const DropDownButton = ({
 			{children}
 			<FontAwesomeIcon
 				icon={dropup ? faCaretUp : faCaretDown}
-				className="mx-2 h-3"
+				className="mx-2 h-3 fa-width-auto"
 				aria-hidden="true"
 			/>
 		</Menu.Button>
diff --git a/src/quiz-question/answer.tsx b/src/quiz-question/answer.tsx
index 005a8f53..a22b43a0 100644
--- a/src/quiz-question/answer.tsx
+++ b/src/quiz-question/answer.tsx
@@ -96,7 +96,7 @@ const ValidationMessage = ({ state, message }: QuizQuestionValidation) => {
 		<p className="text-background-success">
 			<FontAwesomeIcon
 				icon={faCheck}
-				className="text-background-success me-[8px]"
+				className="text-background-success me-[8px] fa-width-auto"
 			/>
 			{message}
 		</p>
@@ -104,7 +104,7 @@ const ValidationMessage = ({ state, message }: QuizQuestionValidation) => {
 		<p className="text-background-danger">
 			<FontAwesomeIcon
 				icon={faXmark}
-				className="text-background-danger me-[8px]"
+				className="text-background-danger me-[8px] fa-width-auto"
 			/>
 			{message}
 		</p>
@@ -175,7 +175,7 @@ export const Answer = <AnswerT extends number | string>({
 						aria-describedby={labelId}
 						role="button"
 					>
-						<FontAwesomeIcon icon={faMicrophone} />
+						<FontAwesomeIcon icon={faMicrophone} className="fa-width-auto" />
 					</Button>
 				</div>
 			)}
diff --git a/src/quiz-question/audio/audio.tsx b/src/quiz-question/audio/audio.tsx
index e4606a0f..82a634f7 100644
--- a/src/quiz-question/audio/audio.tsx
+++ b/src/quiz-question/audio/audio.tsx
@@ -88,6 +88,7 @@ export const Audio = ({
 					<FontAwesomeIcon
 						icon={isPlaying ? faCirclePause : faCirclePlay}
 						size="3x"
+						className="fa-width-auto"
 					/>
 				</button>
 				<div className="flex-1 flex items-center gap-2">