diff --git a/src/components/application/app-navigation/base-components/nav-item.tsx b/src/components/application/app-navigation/base-components/nav-item.tsx
index ad62a38..7677ad6 100644
--- a/src/components/application/app-navigation/base-components/nav-item.tsx
+++ b/src/components/application/app-navigation/base-components/nav-item.tsx
@@ -1,4 +1,4 @@
-import type { FC, HTMLAttributes, MouseEventHandler, ReactNode } from "react";
+import type { FC, MouseEventHandler, ReactNode } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronDown, faArrowUpRightFromSquare } from "@fortawesome/pro-duotone-svg-icons";
 import { Link as AriaLink } from "react-aria-components";
@@ -20,7 +20,7 @@ interface NavItemBaseProps {
     /** Type of the nav item. */
     type: "link" | "collapsible" | "collapsible-child";
     /** Icon component to display. */
-    icon?: FC<HTMLAttributes<HTMLOrSVGElement>>;
+    icon?: FC<Record<string, any>>;
     /** Badge to display. */
     badge?: ReactNode;
     /** Whether the nav item is currently active. */
diff --git a/src/components/application/app-navigation/config.ts b/src/components/application/app-navigation/config.ts
index 4f3b1ac..6364953 100644
--- a/src/components/application/app-navigation/config.ts
+++ b/src/components/application/app-navigation/config.ts
@@ -6,11 +6,11 @@ export type NavItemType = {
     /** URL to navigate to when the nav item is clicked. */
     href?: string;
     /** Icon component to display. */
-    icon?: FC<{ className?: string }>;
+    icon?: FC<Record<string, any>>;
     /** Badge to display. */
     badge?: ReactNode;
     /** List of sub-items to display. */
-    items?: { label: string; href: string; icon?: FC<{ className?: string }>; badge?: ReactNode }[];
+    items?: { label: string; href: string; icon?: FC<Record<string, any>>; badge?: ReactNode }[];
     /** Whether this nav item is a divider. */
     divider?: boolean;
 };
diff --git a/src/components/call-desk/appointment-form.tsx b/src/components/call-desk/appointment-form.tsx
index 7d320c0..f312cdc 100644
--- a/src/components/call-desk/appointment-form.tsx
+++ b/src/components/call-desk/appointment-form.tsx
@@ -1,10 +1,9 @@
 import { useState, useEffect } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCalendarPlus, faXmark } from '@fortawesome/pro-duotone-svg-icons';
-import type { FC, HTMLAttributes } from 'react';
+import { faIcon } from '@/lib/icon-wrapper';
 
-const CalendarPlus02: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => <FontAwesomeIcon icon={faCalendarPlus} className={className} />;
-const XClose: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faXmark} className={className} />;
+const CalendarPlus02 = faIcon(faCalendarPlus);
+const XClose = faIcon(faXmark);
 import { Input } from '@/components/base/input/input';
 import { Select } from '@/components/base/select/select';
 import { TextArea } from '@/components/base/textarea/textarea';
diff --git a/src/components/call-desk/call-widget.tsx b/src/components/call-desk/call-widget.tsx
index e5ce7c9..944864c 100644
--- a/src/components/call-desk/call-widget.tsx
+++ b/src/components/call-desk/call-widget.tsx
@@ -1,5 +1,4 @@
 import { useState, useEffect, useRef } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
     faPhone,
     faPhoneArrowDown,
@@ -13,19 +12,19 @@ import {
     faFloppyDisk,
     faCalendarPlus,
 } from '@fortawesome/pro-duotone-svg-icons';
-import type { FC, HTMLAttributes } from 'react';
+import { faIcon } from '@/lib/icon-wrapper';
 
-const Phone01: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => <FontAwesomeIcon icon={faPhone} className={className} />;
-const PhoneIncoming01: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => <FontAwesomeIcon icon={faPhoneArrowDown} className={className} />;
-const PhoneOutgoing01: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => <FontAwesomeIcon icon={faPhoneArrowUp} className={className} />;
-const PhoneHangUp: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => <FontAwesomeIcon icon={faPhoneHangup} className={className} />;
-const PhoneX: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => <FontAwesomeIcon icon={faPhoneXmark} className={className} />;
-const MicrophoneOff01: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => <FontAwesomeIcon icon={faMicrophoneSlash} className={className} />;
-const Microphone01: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => <FontAwesomeIcon icon={faMicrophone} className={className} />;
-const PauseCircle: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => <FontAwesomeIcon icon={faPause} className={className} />;
-const CheckCircle: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => <FontAwesomeIcon icon={faCircleCheck} className={className} />;
-const Save01: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => <FontAwesomeIcon icon={faFloppyDisk} className={className} />;
-const CalendarPlus02: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => <FontAwesomeIcon icon={faCalendarPlus} className={className} />;
+const Phone01 = faIcon(faPhone);
+const PhoneIncoming01 = faIcon(faPhoneArrowDown);
+const PhoneOutgoing01 = faIcon(faPhoneArrowUp);
+const PhoneHangUp = faIcon(faPhoneHangup);
+const PhoneX = faIcon(faPhoneXmark);
+const MicrophoneOff01 = faIcon(faMicrophoneSlash);
+const Microphone01 = faIcon(faMicrophone);
+const PauseCircle = faIcon(faPause);
+const CheckCircle = faIcon(faCircleCheck);
+const Save01 = faIcon(faFloppyDisk);
+const CalendarPlus02 = faIcon(faCalendarPlus);
 import { Button } from '@/components/base/buttons/button';
 import { TextArea } from '@/components/base/textarea/textarea';
 import { AppointmentForm } from '@/components/call-desk/appointment-form';
diff --git a/src/components/call-desk/worklist-panel.tsx b/src/components/call-desk/worklist-panel.tsx
index 6c1199d..903a649 100644
--- a/src/components/call-desk/worklist-panel.tsx
+++ b/src/components/call-desk/worklist-panel.tsx
@@ -1,10 +1,9 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { FC, HTMLAttributes } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPhoneArrowDown, faPhoneArrowUp, faMagnifyingGlass } from '@fortawesome/pro-duotone-svg-icons';
+import { faIcon } from '@/lib/icon-wrapper';
 import { Table } from '@/components/application/table/table';
 
-const SearchLg: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faMagnifyingGlass} className={className} />;
+const SearchLg = faIcon(faMagnifyingGlass);
 import { Badge } from '@/components/base/badges/badges';
 import { Input } from '@/components/base/input/input';
 import { Tabs, TabList, Tab } from '@/components/application/tabs/tabs';
@@ -129,12 +128,8 @@ const formatSource = (source: string): string => {
     return map[source] ?? source.replace(/_/g, ' ');
 };
 
-const IconInbound: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
-    <FontAwesomeIcon icon={faPhoneArrowDown} className={className} />
-);
-const IconOutbound: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
-    <FontAwesomeIcon icon={faPhoneArrowUp} className={className} />
-);
+const IconInbound = faIcon(faPhoneArrowDown);
+const IconOutbound = faIcon(faPhoneArrowUp);
 
 const buildRows = (missedCalls: MissedCall[], followUps: WorklistFollowUp[], leads: WorklistLead[]): WorklistRow[] => {
     const rows: WorklistRow[] = [];
diff --git a/src/components/campaigns/campaign-edit-slideout.tsx b/src/components/campaigns/campaign-edit-slideout.tsx
index 9bd9f69..00be675 100644
--- a/src/components/campaigns/campaign-edit-slideout.tsx
+++ b/src/components/campaigns/campaign-edit-slideout.tsx
@@ -1,7 +1,6 @@
 import { useState } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPenToSquare } from '@fortawesome/pro-duotone-svg-icons';
-import type { FC, HTMLAttributes } from 'react';
+import { faIcon } from '@/lib/icon-wrapper';
 import { SlideoutMenu } from '@/components/application/slideout-menus/slideout-menu';
 import { Input } from '@/components/base/input/input';
 import { Select } from '@/components/base/select/select';
@@ -10,9 +9,7 @@ import { apiClient } from '@/lib/api-client';
 import { notify } from '@/lib/toast';
 import type { Campaign, CampaignStatus } from '@/types/entities';
 
-const PenIcon: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
-    <FontAwesomeIcon icon={faPenToSquare} className={className} />
-);
+const PenIcon = faIcon(faPenToSquare);
 
 type CampaignEditSlideoutProps = {
     isOpen: boolean;
diff --git a/src/components/integrations/integration-edit-slideout.tsx b/src/components/integrations/integration-edit-slideout.tsx
index 6262e6f..2d53931 100644
--- a/src/components/integrations/integration-edit-slideout.tsx
+++ b/src/components/integrations/integration-edit-slideout.tsx
@@ -1,15 +1,13 @@
 import { useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faGear, faCopy, faLink } from '@fortawesome/pro-duotone-svg-icons';
-import type { FC, HTMLAttributes } from 'react';
+import { faIcon } from '@/lib/icon-wrapper';
 import { SlideoutMenu } from '@/components/application/slideout-menus/slideout-menu';
 import { Input } from '@/components/base/input/input';
 import { Button } from '@/components/base/buttons/button';
 import { notify } from '@/lib/toast';
 
-const GearIcon: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
-    <FontAwesomeIcon icon={faGear} className={className} />
-);
+const GearIcon = faIcon(faGear);
 
 type IntegrationType = 'ozonetel' | 'whatsapp' | 'facebook' | 'google' | 'instagram' | 'website' | 'email';
 
@@ -166,9 +164,7 @@ export const IntegrationEditSlideout = ({ isOpen, onOpenChange, integration }: I
                                     <Button
                                         size="md"
                                         color="primary"
-                                        iconLeading={({ className }: { className?: string }) => (
-                                            <FontAwesomeIcon icon={faLink} className={className} />
-                                        )}
+                                        iconLeading={faIcon(faLink)}
                                         onClick={handleOAuthConnect}
                                     >
                                         Connect {integration.name}
@@ -187,9 +183,7 @@ export const IntegrationEditSlideout = ({ isOpen, onOpenChange, integration }: I
                                                     <Button
                                                         size="sm"
                                                         color="secondary"
-                                                        iconLeading={({ className }: { className?: string }) => (
-                                                            <FontAwesomeIcon icon={faCopy} className={className} />
-                                                        )}
+                                                        iconLeading={faIcon(faCopy)}
                                                         onClick={() => handleCopy(values[field.key] ?? '')}
                                                     >
                                                         Copy
diff --git a/src/components/layout/sidebar.tsx b/src/components/layout/sidebar.tsx
index e51990a..6e5aa4c 100644
--- a/src/components/layout/sidebar.tsx
+++ b/src/components/layout/sidebar.tsx
@@ -1,4 +1,3 @@
-import type { FC, HTMLAttributes } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
     faBullhorn,
@@ -14,6 +13,7 @@ import {
     faPlug,
     faUsers,
 } from "@fortawesome/pro-duotone-svg-icons";
+import { faIcon } from "@/lib/icon-wrapper";
 import { useAtom } from "jotai";
 import { Link, useNavigate } from "react-router";
 import { MobileNavigationHeader } from "@/components/application/app-navigation/base-components/mobile-header";
@@ -30,36 +30,16 @@ import { cx } from "@/utils/cx";
 const EXPANDED_WIDTH = 292;
 const COLLAPSED_WIDTH = 64;
 
-const IconGrid2: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
-    <FontAwesomeIcon icon={faGrid2} className={className} />
-);
-const IconBullhorn: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
-    <FontAwesomeIcon icon={faBullhorn} className={className} />
-);
-const IconCommentDots: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
-    <FontAwesomeIcon icon={faCommentDots} className={className} />
-);
-const IconChartMixed: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
-    <FontAwesomeIcon icon={faChartMixed} className={className} />
-);
-const IconPlug: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
-    <FontAwesomeIcon icon={faPlug} className={className} />
-);
-const IconGear: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
-    <FontAwesomeIcon icon={faGear} className={className} />
-);
-const IconPhone: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
-    <FontAwesomeIcon icon={faPhone} className={className} />
-);
-const IconClockRewind: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
-    <FontAwesomeIcon icon={faClockRotateLeft} className={className} />
-);
-const IconUsers: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
-    <FontAwesomeIcon icon={faUsers} className={className} />
-);
-const IconHospitalUser: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
-    <FontAwesomeIcon icon={faHospitalUser} className={className} />
-);
+const IconGrid2 = faIcon(faGrid2);
+const IconBullhorn = faIcon(faBullhorn);
+const IconCommentDots = faIcon(faCommentDots);
+const IconChartMixed = faIcon(faChartMixed);
+const IconPlug = faIcon(faPlug);
+const IconGear = faIcon(faGear);
+const IconPhone = faIcon(faPhone);
+const IconClockRewind = faIcon(faClockRotateLeft);
+const IconUsers = faIcon(faUsers);
+const IconHospitalUser = faIcon(faHospitalUser);
 
 type NavSection = {
     label: string;
diff --git a/src/components/shared/global-search.tsx b/src/components/shared/global-search.tsx
index d1c5a3b..92e88c8 100644
--- a/src/components/shared/global-search.tsx
+++ b/src/components/shared/global-search.tsx
@@ -1,23 +1,16 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faMagnifyingGlass, faUser, faCalendar } from '@fortawesome/pro-duotone-svg-icons';
-import type { FC, HTMLAttributes } from 'react';
+import { faIcon } from '@/lib/icon-wrapper';
 import { Input } from '@/components/base/input/input';
 import { Badge } from '@/components/base/badges/badges';
 import { useData } from '@/providers/data-provider';
 import { formatPhone } from '@/lib/format';
 import { cx } from '@/utils/cx';
 
-const SearchIcon: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
-    <FontAwesomeIcon icon={faMagnifyingGlass} className={className} />
-);
-const UserIcon: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
-    <FontAwesomeIcon icon={faUser} className={className} />
-);
-const CalendarIcon: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
-    <FontAwesomeIcon icon={faCalendar} className={className} />
-);
+const SearchIcon = faIcon(faMagnifyingGlass);
+const UserIcon = faIcon(faUser);
+const CalendarIcon = faIcon(faCalendar);
 
 type SearchResultType = 'lead' | 'patient' | 'appointment';
 
@@ -33,7 +26,7 @@ type GlobalSearchProps = {
     onSelectResult?: (result: SearchResult) => void;
 };
 
-const TYPE_ICONS: Record<SearchResultType, FC<{ className?: string }>> = {
+const TYPE_ICONS: Record<SearchResultType, ReturnType<typeof faIcon>> = {
     lead: UserIcon,
     patient: UserIcon,
     appointment: CalendarIcon,
diff --git a/src/lib/icon-wrapper.ts b/src/lib/icon-wrapper.ts
new file mode 100644
index 0000000..51e7e1b
--- /dev/null
+++ b/src/lib/icon-wrapper.ts
@@ -0,0 +1,14 @@
+import type { FC } from 'react';
+import { createElement } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+
+// Creates a wrapper component that passes all props (including data-icon)
+// to FontAwesomeIcon. This is needed because the Button component uses
+// data-icon CSS selectors for sizing.
+export const faIcon = (icon: IconDefinition): FC<Record<string, any>> => {
+    const IconComponent: FC<Record<string, any>> = (props) =>
+        createElement(FontAwesomeIcon, { icon, ...props });
+    IconComponent.displayName = `FAIcon(${icon.iconName})`;
+    return IconComponent;
+};
diff --git a/src/pages/patient-360.tsx b/src/pages/patient-360.tsx
index ff965c2..2d71b95 100644
--- a/src/pages/patient-360.tsx
+++ b/src/pages/patient-360.tsx
@@ -1,14 +1,13 @@
 import { useMemo, useState } from 'react';
 import { useParams } from 'react-router';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPhone, faEnvelope, faCalendar, faCommentDots, faPlus } from '@fortawesome/pro-duotone-svg-icons';
-import type { FC, HTMLAttributes } from 'react';
+import { faIcon } from '@/lib/icon-wrapper';
 
-const Phone01: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => <FontAwesomeIcon icon={faPhone} className={className} />;
-const Mail01: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => <FontAwesomeIcon icon={faEnvelope} className={className} />;
-const Calendar: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => <FontAwesomeIcon icon={faCalendar} className={className} />;
-const MessageTextSquare01: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => <FontAwesomeIcon icon={faCommentDots} className={className} />;
-const Plus: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => <FontAwesomeIcon icon={faPlus} className={className} />;
+const Phone01 = faIcon(faPhone);
+const Mail01 = faIcon(faEnvelope);
+const Calendar = faIcon(faCalendar);
+const MessageTextSquare01 = faIcon(faCommentDots);
+const Plus = faIcon(faPlus);
 import { Tabs, TabList, Tab, TabPanel } from '@/components/application/tabs/tabs';
 import { TopBar } from '@/components/layout/top-bar';
 import { Avatar } from '@/components/base/avatar/avatar';