diff --git a/frontend/src/index.css b/frontend/src/index.css
index b6457dc326..3f66224afe 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,4 +1,6 @@
 @import "tailwindcss";
+/* into a layer so tailwind utilities can size icons */
+@import "@fortawesome/fontawesome-svg-core/styles.css" layer(base);
 
 @theme {
   --color-primary-50: #dadedb;
diff --git a/frontend/src/js/authorization/LoginPage.tsx b/frontend/src/js/authorization/LoginPage.tsx
index 4ba713971b..65f7d8eab9 100644
--- a/frontend/src/js/authorization/LoginPage.tsx
+++ b/frontend/src/js/authorization/LoginPage.tsx
@@ -7,7 +7,7 @@ import { usePostLogin } from "../api/api";
 import { useAppTheme } from "../app-theme-context";
 import PrimaryButton from "../button/PrimaryButton";
 import ErrorMessage from "../error-message/ErrorMessage";
-import FaIcon from "../icon/FaIcon";
+import { Icon } from "../ui-components/Icon";
 import InputPlain from "../ui-components/InputPlain/InputPlain";
 
 import { AuthTokenContext } from "./AuthTokenProvider";
@@ -121,11 +121,9 @@ const LoginPage = () => {
             large
             type="submit"
           >
-            <FaIcon
-              className="mr-[10px]"
-              large
-              white
+            <Icon
               icon={loading ? faSpinner : faCheck}
+              className="mr-[10px] text-white"
             />
             {t("login.submit")}
           </PrimaryButton>
diff --git a/frontend/src/js/button/HistoryButton.tsx b/frontend/src/js/button/HistoryButton.tsx
index c6691a13b1..b6697c21d8 100644
--- a/frontend/src/js/button/HistoryButton.tsx
+++ b/frontend/src/js/button/HistoryButton.tsx
@@ -18,7 +18,7 @@ export const HistoryButton = () => {
 
   return (
     <TooltipTrigger>
-      <IconButton small frame icon={faListUl} onClick={onClick} />
+      <IconButton className="p-[7px]" frame icon={faListUl} onClick={onClick} />
       <Tooltip>{t("history.history")}</Tooltip>
     </TooltipTrigger>
   );
diff --git a/frontend/src/js/button/IconButton.tsx b/frontend/src/js/button/IconButton.tsx
index ae77c50e1b..0f7527ba5f 100644
--- a/frontend/src/js/button/IconButton.tsx
+++ b/frontend/src/js/button/IconButton.tsx
@@ -1,7 +1,8 @@
 import type { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { memo, type Ref, useMemo } from "react";
+import { memo, type Ref } from "react";
 import { tv } from "tailwind-variants";
-import FaIcon, { type IconStyleProps } from "../icon/FaIcon";
+
+import { Icon } from "../ui-components/Icon";
 
 import BasicButton, { type BasicButtonProps } from "./BasicButton";
 
@@ -18,7 +19,6 @@ const iconButton = tv({
   ],
   variants: {
     // later wins when several are set
-    secondary: { true: "text-orange" },
     active: { true: "text-primary-500" },
     red: { true: "text-red" },
     frame: { true: "opacity-100 border border-gray-500 hover:bg-bg-100" },
@@ -28,33 +28,22 @@ const iconButton = tv({
   },
 });
 
+// The button's text color reaches the icon; this is the exception.
 const buttonIcon = tv({
-  base: "text-sm",
   variants: {
-    // later wins when several are set
-    secondary: { true: "text-orange" },
     light: { true: "text-gray-500" },
-    active: { true: "text-primary-500" },
-    red: { true: "text-red" },
-    small: { true: "text-xs" },
-    large: { true: "text-base" },
   },
 });
 
-export interface IconButtonPropsT extends BasicButtonProps {
-  iconProps?: IconStyleProps;
+export interface IconButtonPropsT extends Omit<BasicButtonProps, "small"> {
+  icon: IconProp;
   active?: boolean;
   large?: boolean;
-  small?: boolean;
-  icon: IconProp;
-  secondary?: boolean;
   tight?: boolean;
   red?: boolean;
-  left?: boolean;
   frame?: boolean;
   bare?: boolean;
   light?: boolean;
-  fixedIconWidth?: number;
   bgHover?: boolean;
   iconColor?: string;
 }
@@ -66,87 +55,39 @@ const IconButton = ({
   active,
   red,
   large,
-  left,
   children,
   tight,
-  iconProps,
-  small,
-  secondary,
   light,
-  fixedIconWidth,
   bgHover,
   iconColor,
   frame,
   className,
   ...restProps
-}: IconButtonPropsT & { ref?: Ref<HTMLButtonElement> }) => {
-  const iconElement = useMemo(() => {
-    const iconEl = (
-      <FaIcon
-        left={left}
-        icon={icon}
-        {...iconProps}
-        className={buttonIcon({
-          secondary,
-          light,
-          active,
-          red,
-          small,
-          large,
-        })}
-        style={
-          iconColor
-            ? { color: iconColor, ...iconProps?.style }
-            : iconProps?.style
-        }
-      />
-    );
-
-    return fixedIconWidth ? (
-      <span className="inline-block" style={{ width: fixedIconWidth }}>
-        {iconEl}
-      </span>
-    ) : (
-      iconEl
-    );
-  }, [
-    icon,
-    active,
-    red,
-    large,
-    left,
-    iconProps,
-    small,
-    secondary,
-    light,
-    fixedIconWidth,
-    iconColor,
-  ]);
-
-  return (
-    <BasicButton
-      active={active}
-      secondary={secondary}
-      large={large}
-      {...restProps}
-      className={iconButton({
-        secondary,
-        active,
-        red,
-        frame,
-        bgHover,
-        tight,
-        large,
-        className,
-      })}
-      ref={ref}
-    >
-      {iconElement}
-      {children && (
-        <span className="flex items-center gap-[5px]">{children}</span>
-      )}
-    </BasicButton>
-  );
-};
+}: IconButtonPropsT & { ref?: Ref<HTMLButtonElement> }) => (
+  <BasicButton
+    active={active}
+    large={large}
+    {...restProps}
+    className={iconButton({
+      active,
+      red,
+      frame,
+      bgHover,
+      tight,
+      large,
+      className,
+    })}
+    ref={ref}
+  >
+    <Icon
+      icon={icon}
+      className={buttonIcon({ light })}
+      style={iconColor ? { color: iconColor } : undefined}
+    />
+    {children && (
+      <span className="flex items-center gap-[5px]">{children}</span>
+    )}
+  </BasicButton>
+);
 
 export default memo(IconButton);
diff --git a/frontend/src/js/concept-trees/ConceptTree.tsx b/frontend/src/js/concept-trees/ConceptTree.tsx
index ea4f16c6e6..04eef73fa2 100644
--- a/frontend/src/js/concept-trees/ConceptTree.tsx
+++ b/frontend/src/js/concept-trees/ConceptTree.tsx
@@ -7,7 +7,7 @@ import { useTranslation } from "react-i18next";
 import { tv } from "tailwind-variants";
 import type { ConceptIdT, ConceptT } from "../api/types";
 import IconButton from "../button/IconButton";
-import FaIcon from "../icon/FaIcon";
+import { Icon } from "../ui-components/Icon";
 import ConceptTreeNode from "./ConceptTreeNode";
 import ConceptTreeNodeText from "./ConceptTreeNodeText";
 import type { SearchT } from "./reducer";
@@ -46,7 +46,7 @@ const ConceptTree = ({
     return (
       <p className={message()} style={{ paddingLeft: 24 + depth * 15 }}>
         <span className="mr-[6px]">
-          <FaIcon icon={faSpinner} />
+          <Icon icon={faSpinner} />
         </span>
         <span>{label}</span>
       </p>
diff --git a/frontend/src/js/concept-trees/ConceptTreeNodeText.tsx b/frontend/src/js/concept-trees/ConceptTreeNodeText.tsx
index e46ce35bed..1de17ab6eb 100644
--- a/frontend/src/js/concept-trees/ConceptTreeNodeText.tsx
+++ b/frontend/src/js/concept-trees/ConceptTreeNodeText.tsx
@@ -7,7 +7,7 @@ import type { Ref } from "react";
 import { tv } from "tailwind-variants";
 import { Highlighter } from "../common/components/Highlighter";
 
-import FaIcon from "../icon/FaIcon";
+import { Icon } from "../ui-components/Icon";
 
 // Root with transparent background.
 // relative: needed to fix a drag & drop issue in Safari
@@ -114,20 +114,34 @@ const ConceptTreeNodeText = ({
         {hasChildren && (
           <>
             <span className={caretIconContainer()}>
-              <FaIcon
-                disabled={disabled}
-                active
+              <Icon
                 icon={isOpen ? faCaretDown : faCaretRight}
+                className={[
+                  "text-primary-500",
+                  disabled ? "text-gray-400 cursor-not-allowed" : undefined,
+                ]}
               />
             </span>
             <span className={folderIconContainer()}>
-              <FaIcon active disabled={disabled} icon={icon} />
+              <Icon
+                icon={icon}
+                className={[
+                  "text-primary-500",
+                  disabled ? "text-gray-400 cursor-not-allowed" : undefined,
+                ]}
+              />
             </span>
           </>
         )}
         {!hasChildren && (
           <span className={dashIconContainer()}>
-            <FaIcon disabled={disabled} large active icon={icon} />
+            <Icon
+              icon={icon}
+              className={[
+                "text-primary-500",
+                disabled ? "text-gray-400 cursor-not-allowed" : undefined,
+              ]}
+            />
           </span>
         )}
         {resultCount && <span className={resultsNumber()}>{resultCount}</span>}
diff --git a/frontend/src/js/concept-trees/ConceptTreesLoading.tsx b/frontend/src/js/concept-trees/ConceptTreesLoading.tsx
index a55f5006dd..614b8534e3 100644
--- a/frontend/src/js/concept-trees/ConceptTreesLoading.tsx
+++ b/frontend/src/js/concept-trees/ConceptTreesLoading.tsx
@@ -2,14 +2,14 @@ import { faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { memo } from "react";
 import { useTranslation } from "react-i18next";
 
-import FaIcon from "../icon/FaIcon";
+import { Icon } from "../ui-components/Icon";
 
 const ConceptTreesLoading = () => {
   const { t } = useTranslation();
 
   return (
     <div className="flex flex-row items-center px-3 py-[5px]">
-      <FaIcon className="mr-[10px]" icon={faSpinner} />
+      <Icon icon={faSpinner} className="mr-[10px]" />
       <span>{t("conceptTreeList.loading")}</span>
     </div>
   );
diff --git a/frontend/src/js/concept-trees/ConceptsProgressBar.tsx b/frontend/src/js/concept-trees/ConceptsProgressBar.tsx
index 0bf08b2097..c6dd81a891 100644
--- a/frontend/src/js/concept-trees/ConceptsProgressBar.tsx
+++ b/frontend/src/js/concept-trees/ConceptsProgressBar.tsx
@@ -2,7 +2,7 @@ import { faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { useTranslation } from "react-i18next";
 
 import ProgressBar from "../common/components/ProgressBar";
-import FaIcon from "../icon/FaIcon";
+import { Icon } from "../ui-components/Icon";
 
 import type { TreesT } from "./reducer";
 
@@ -21,7 +21,7 @@ const ConceptsProgressBar = ({ trees }: PropsT) => {
   return (
     <div className="m-[10px]">
       <div className="flex items-center">
-        <FaIcon icon={faSpinner} />
+        <Icon icon={faSpinner} />
         <p className="mx-[10px]">
           {t("conceptTreeList.loading")} {doneCount} / {treeIds.length}
         </p>
diff --git a/frontend/src/js/editor-v2/TreeNode.tsx b/frontend/src/js/editor-v2/TreeNode.tsx
index 7a19f38d50..30e05c6dfb 100644
--- a/frontend/src/js/editor-v2/TreeNode.tsx
+++ b/frontend/src/js/editor-v2/TreeNode.tsx
@@ -5,7 +5,6 @@ import { useTranslation } from "react-i18next";
 import { tv } from "tailwind-variants";
 
 import { DNDType } from "../common/constants/dndTypes";
-import FaIcon from "../icon/FaIcon";
 import { nodeIsConceptQueryNode, useActiveState } from "../model/node";
 import { getRootNodeLabel } from "../standard-query-editor/helper";
 import type {
@@ -16,6 +15,7 @@ import Dropzone, {
   type DropzoneProps,
   type PossibleDroppableObject,
 } from "../ui-components/Dropzone";
+import { Icon } from "../ui-components/Icon";
 import {
   Tooltip,
   TooltipTarget,
@@ -301,7 +301,10 @@ export function TreeNode({
                 )}
                 {tree.dates?.excluded && (
                   <div className={dates()}>
-                    <FaIcon red icon={faCalendarMinus} left />
+                    <Icon
+                      icon={faCalendarMinus}
+                      className="mr-[10px] text-red"
+                    />
                     {t("editorV2.datesExcluded")}
                   </div>
                 )}
diff --git a/frontend/src/js/editor-v2/date-restriction/DateModal.tsx b/frontend/src/js/editor-v2/date-restriction/DateModal.tsx
index 65b24a7a3e..06274d2947 100644
--- a/frontend/src/js/editor-v2/date-restriction/DateModal.tsx
+++ b/frontend/src/js/editor-v2/date-restriction/DateModal.tsx
@@ -8,8 +8,8 @@ import { tv } from "tailwind-variants";
 import type { DateRangeT } from "../../api/types";
 import IconButton from "../../button/IconButton";
 import type { DateStringMinMax } from "../../common/helpers/dateHelper";
-import FaIcon from "../../icon/FaIcon";
 import Modal from "../../modal/Modal";
+import { Icon } from "../../ui-components/Icon";
 import InputCheckbox from "../../ui-components/InputCheckbox";
 import InputDateRange from "../../ui-components/InputDateRange";
 
@@ -99,7 +99,7 @@ export const DateModal = ({
         />
         <div>
           <p className={sectionHeadline()}>
-            <FaIcon icon={faCalendarMinus} red />
+            <Icon icon={faCalendarMinus} className="text-red" />
             {t("queryNodeEditor.excludeTimestamps")}
             <InputCheckbox
               label=""
diff --git a/frontend/src/js/entity-history/EntityIdsList.tsx b/frontend/src/js/entity-history/EntityIdsList.tsx
index 149b1ca59c..a41e56c95e 100644
--- a/frontend/src/js/entity-history/EntityIdsList.tsx
+++ b/frontend/src/js/entity-history/EntityIdsList.tsx
@@ -3,7 +3,7 @@ import { useMemo } from "react";
 import { tv } from "tailwind-variants";
 
 import { IncrementalList } from "../common/components/IncrementalList";
-import FaIcon from "../icon/FaIcon";
+import { Icon } from "../ui-components/Icon";
 import type { useUpdateHistorySession } from "./actions";
 import type { EntityIdsStatus } from "./History";
 import type { EntityId } from "./reducer";
@@ -91,7 +91,7 @@ export const EntityIdsList = ({
           <span className="font-light text-gray-500">({entityId.kind})</span>
         </div>
         {loadingId === entityId.id && (
-          <FaIcon className="mx-[6px] my-[3px]" icon={faSpinner} />
+          <Icon icon={faSpinner} className="mx-[6px] my-[3px]" />
         )}
         <div className="ml-auto flex items-center gap-[2px]">
           {entityIdsStatus[entityId.id] &&
diff --git a/frontend/src/js/entity-history/SearchEntities.tsx b/frontend/src/js/entity-history/SearchEntities.tsx
index 6dcb8f0662..011d2ca2a4 100644
--- a/frontend/src/js/entity-history/SearchEntities.tsx
+++ b/frontend/src/js/entity-history/SearchEntities.tsx
@@ -14,7 +14,6 @@ import type { StateT } from "../app/reducers";
 import PrimaryButton from "../button/PrimaryButton";
 import { getConceptById } from "../concept-trees/globalTreeStoreHelper";
 import { useDatasetId } from "../dataset/selectors";
-import FaIcon from "../icon/FaIcon";
 import { isMultiSelectFilter, resetFilters } from "../model/filter";
 import { nodeIsElement } from "../model/node";
 import { filterSuggestionToSelectOption } from "../query-node-editor/suggestionsHelper";
@@ -23,6 +22,7 @@ import type {
   BigMultiSelectFilterWithValueType,
   MultiSelectFilterWithValueType,
 } from "../standard-query-editor/types";
+import { Icon } from "../ui-components/Icon";
 
 import type { LoadingPayload } from "./LoadHistoryDropzone";
 import { useDefaultStatusOptions } from "./useDefaultStatusOptions";
@@ -251,7 +251,7 @@ export const SearchEntitiesComponent = ({
         onClick={onSubmitSearch}
         disabled={!hasFiltersSet || loading}
       >
-        {loading && <FaIcon white icon={faSpinner} />}
+        {loading && <Icon icon={faSpinner} className="text-white" />}
         {t("history.searchEntitiesButton")}
       </PrimaryButton>
     </div>
diff --git a/frontend/src/js/entity-history/TimeStratifiedConceptChart.tsx b/frontend/src/js/entity-history/TimeStratifiedConceptChart.tsx
index 52e9aef77a..52a81d3a96 100644
--- a/frontend/src/js/entity-history/TimeStratifiedConceptChart.tsx
+++ b/frontend/src/js/entity-history/TimeStratifiedConceptChart.tsx
@@ -8,7 +8,7 @@ import type {
   TimeStratifiedInfo,
 } from "../api/types";
 import { getConceptById } from "../concept-trees/globalTreeStoreHelper";
-import FaIcon from "../icon/FaIcon";
+import { Icon } from "../ui-components/Icon";
 import {
   Tooltip,
   TooltipTarget,
@@ -90,7 +90,7 @@ export const TimeStratifiedConceptChart = ({
     return (
       <div className={container()}>
         <p className={emptyMsg()}>
-          <FaIcon gray icon={faBan} />
+          <Icon icon={faBan} className="text-gray-500" />
           {t("history.noData")}
         </p>
       </div>
diff --git a/frontend/src/js/entity-history/timeline/ConceptName.tsx b/frontend/src/js/entity-history/timeline/ConceptName.tsx
index f1bb630f9d..aecf1ac511 100644
--- a/frontend/src/js/entity-history/timeline/ConceptName.tsx
+++ b/frontend/src/js/entity-history/timeline/ConceptName.tsx
@@ -4,7 +4,7 @@ import { tv } from "tailwind-variants";
 import type { ConceptIdT, ConceptT } from "../../api/types";
 import { Highlighter } from "../../common/components/Highlighter";
 import { getConceptById } from "../../concept-trees/globalTreeStoreHelper";
-import FaIcon from "../../icon/FaIcon";
+import { Icon } from "../../ui-components/Icon";
 import { useTimelineSearch } from "../timeline-search/timelineSearchState";
 
 const conceptRoot = tv({
@@ -92,7 +92,7 @@ const ConceptName = ({ className, title, rootConceptId, conceptId }: Props) => {
 
   return (
     <div title={title} className={conceptRoot({ className })}>
-      <FaIcon icon={faFolder} active />
+      <Icon icon={faFolder} className="text-primary-500" />
       <span>
         {rootConcept && (
           <RootConceptLabel rootConcept={rootConcept} searchTerm={searchTerm} />
diff --git a/frontend/src/js/entity-history/timeline/EventCard.tsx b/frontend/src/js/entity-history/timeline/EventCard.tsx
index 69d1e48b8c..c0b45c0b3e 100644
--- a/frontend/src/js/entity-history/timeline/EventCard.tsx
+++ b/frontend/src/js/entity-history/timeline/EventCard.tsx
@@ -13,7 +13,7 @@ import type {
 } from "../../api/types";
 import { Highlighter } from "../../common/components/Highlighter";
 import { exists } from "../../common/helpers/exists";
-import FaIcon from "../../icon/FaIcon";
+import { Icon } from "../../ui-components/Icon";
 import {
   Tooltip,
   TooltipTarget,
@@ -74,8 +74,7 @@ const rawDataBadge = tv({
 });
 
 const bucketIcon = tv({
-  // w-6! beats FaIcon's own w-[initial]! via merge, like the old !important did
-  base: ["w-6!", "text-center", "mx-[5px] my-2", "text-base"],
+  base: ["w-6", "mx-[5px] my-2"],
 });
 
 const bullet = tv({
@@ -150,11 +149,9 @@ const EventCard = ({
                 aria-label={moneyTooltip}
                 excludeFromTabOrder
               >
-                <FaIcon
-                  className={bucketIcon()}
+                <Icon
                   icon={faEuroSign}
-                  active
-                  large
+                  className={[bucketIcon(), "text-primary-500"]}
                 />
               </TooltipTarget>
               <Tooltip>{moneyTooltip}</Tooltip>
@@ -198,7 +195,10 @@ const EventCard = ({
                 aria-label={restTooltip}
                 excludeFromTabOrder
               >
-                <FaIcon className={bucketIcon()} icon={faInfo} active large />
+                <Icon
+                  icon={faInfo}
+                  className={[bucketIcon(), "text-primary-500"]}
+                />
               </TooltipTarget>
               <Tooltip>{restTooltip}</Tooltip>
             </TooltipTrigger>
@@ -229,11 +229,9 @@ const EventCard = ({
                 aria-label={groupableIdsTooltip}
                 excludeFromTabOrder
               >
-                <FaIcon
-                  className={bucketIcon()}
+                <Icon
                   icon={faFingerprint}
-                  active
-                  large
+                  className={[bucketIcon(), "text-primary-500"]}
                 />
               </TooltipTarget>
               <Tooltip>{groupableIdsTooltip}</Tooltip>
diff --git a/frontend/src/js/entity-history/timeline/Quarter.tsx b/frontend/src/js/entity-history/timeline/Quarter.tsx
index fc0373e0ff..ca5494219b 100644
--- a/frontend/src/js/entity-history/timeline/Quarter.tsx
+++ b/frontend/src/js/entity-history/timeline/Quarter.tsx
@@ -8,7 +8,7 @@ import type {
   ConceptIdT,
   CurrencyConfigT,
 } from "../../api/types";
-import FaIcon from "../../icon/FaIcon";
+import { Icon } from "../../ui-components/Icon";
 import type { ContentFilterValue } from "../ContentControl";
 import type { DetailLevel } from "../DetailControl";
 import type { EntityEvent } from "../reducer";
@@ -109,7 +109,10 @@ export const Quarter = memo(
             className={inlineGrid()}
             onClick={() => toggleOpenQuarter(year, quarter)}
           >
-            <FaIcon large gray icon={isOpen ? faCaretDown : faCaretRight} />
+            <Icon
+              icon={isOpen ? faCaretDown : faCaretRight}
+              className="text-gray-500"
+            />
             <SmallHeading className="leading-none">Q{quarter} </SmallHeading>
             <span>
               – {totalEventsPerQuarter}{" "}
diff --git a/frontend/src/js/entity-history/timeline/TimelineEmptyPlaceholder.tsx b/frontend/src/js/entity-history/timeline/TimelineEmptyPlaceholder.tsx
index 35c5a61409..4fc6796688 100644
--- a/frontend/src/js/entity-history/timeline/TimelineEmptyPlaceholder.tsx
+++ b/frontend/src/js/entity-history/timeline/TimelineEmptyPlaceholder.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
 import { tv } from "tailwind-variants";
 import type { StateT } from "../../app/reducers";
-import FaIcon from "../../icon/FaIcon";
+import { Icon } from "../../ui-components/Icon";
 import type { EntityHistoryStateT } from "../reducer";
 
 const root = tv({
@@ -59,9 +59,9 @@ export const TimelineEmptyPlaceholder = ({
   return (
     <div className={root({ className })}>
       <div className="flex items-center gap-[30px]">
-        <FaIcon
-          className={bigIcon()}
+        <Icon
           icon={searchTerm ? faMagnifyingGlass : faListUl}
+          className={bigIcon()}
         />
         <div>
           <h2 className="text-2xl leading-[1.3]">
diff --git a/frontend/src/js/entity-history/timeline/YearHead.tsx b/frontend/src/js/entity-history/timeline/YearHead.tsx
index db8d8f4a0e..6e5e6a1c86 100644
--- a/frontend/src/js/entity-history/timeline/YearHead.tsx
+++ b/frontend/src/js/entity-history/timeline/YearHead.tsx
@@ -9,7 +9,7 @@ import type {
 } from "../../api/types";
 import { exists } from "../../common/helpers/exists";
 import { getConceptById } from "../../concept-trees/globalTreeStoreHelper";
-import FaIcon from "../../icon/FaIcon";
+import { Icon } from "../../ui-components/Icon";
 import {
   Tooltip,
   TooltipTarget,
@@ -211,7 +211,10 @@ const YearHead = ({
       {/* biome-ignore lint/a11y/noStaticElementInteractions: TODO make this a button */}
       {/* biome-ignore lint/a11y/useKeyWithClickEvents: TODO make this a button */}
       <div className={stickyWrap()} onClick={onClick}>
-        <FaIcon large gray icon={isOpen ? faCaretDown : faCaretRight} />
+        <Icon
+          icon={isOpen ? faCaretDown : faCaretRight}
+          className="text-gray-500"
+        />
         <div>
           <SmallHeading>{year}</SmallHeading>
           <div>
diff --git a/frontend/src/js/external-forms/form/fields/DateField.tsx b/frontend/src/js/external-forms/form/fields/DateField.tsx
index 7a66524606..9e1dd6695e 100644
--- a/frontend/src/js/external-forms/form/fields/DateField.tsx
+++ b/frontend/src/js/external-forms/form/fields/DateField.tsx
@@ -8,7 +8,7 @@ import {
   parseDateToState,
 } from "../../../common/helpers/dateHelper";
 import { exists } from "../../../common/helpers/exists";
-import FaIcon from "../../../icon/FaIcon";
+import { Icon } from "../../../ui-components/Icon";
 import InfoTooltip from "../../../ui-components/InfoTooltip";
 import InputDate from "../../../ui-components/InputDate/InputDate";
 import Label from "../../../ui-components/Label";
@@ -50,7 +50,7 @@ export const DateField = ({
         return (
           <div>
             <Label>
-              <FaIcon icon={faCalendar} left gray />
+              <Icon icon={faCalendar} className="mr-[10px] text-gray-500" />
               {field.label[locale]}
               {field.tooltip && <InfoTooltip text={field.tooltip[locale]} />}
             </Label>
diff --git a/frontend/src/js/external-forms/form/fields/DisclosureListField.tsx b/frontend/src/js/external-forms/form/fields/DisclosureListField.tsx
index 357da74033..9c783ede1f 100644
--- a/frontend/src/js/external-forms/form/fields/DisclosureListField.tsx
+++ b/frontend/src/js/external-forms/form/fields/DisclosureListField.tsx
@@ -4,7 +4,6 @@ import {
   faChevronRight,
   faTimes,
 } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { type ComponentProps, useEffect, useState } from "react";
 import { useFieldArray } from "react-hook-form";
 import { tv } from "tailwind-variants";
@@ -12,7 +11,7 @@ import IconButton from "../../../button/IconButton";
 import { TransparentButton } from "../../../button/TransparentButton";
 import { exists } from "../../../common/helpers/exists";
 import { usePrevious } from "../../../common/helpers/usePrevious";
-import FaIcon from "../../../icon/FaIcon";
+import { Icon } from "../../../ui-components/Icon";
 import InfoTooltip from "../../../ui-components/InfoTooltip";
 import type { DisclosureListField as DisclosureListFieldT } from "../../config-types";
 import {
@@ -75,7 +74,7 @@ const DisclosureField = ({
       <summary className={summary()}>
         <div className="flex items-center gap-3">
           <span className="w-5">
-            <FaIcon icon={isOpen ? faChevronDown : faChevronRight} />
+            <Icon icon={isOpen ? faChevronDown : faChevronRight} />
           </span>
           {field.label[locale]}
           {exists(field.tooltip) && (
@@ -241,7 +240,7 @@ export const DisclosureListField = ({
             );
           }}
         >
-          <FontAwesomeIcon icon={faAdd} />
+          <Icon icon={faAdd} />
           {field.createNewLabel ? field.createNewLabel[locale] : undefined}
         </TransparentButton>
       )}
diff --git a/frontend/src/js/header/HelpMenu.tsx b/frontend/src/js/header/HelpMenu.tsx
index a131d057f3..e18bedfdae 100644
--- a/frontend/src/js/header/HelpMenu.tsx
+++ b/frontend/src/js/header/HelpMenu.tsx
@@ -9,8 +9,8 @@ import { useTranslation } from "react-i18next";
 
 import { useAbout } from "../app/About";
 import IconButton from "../button/IconButton";
-import FaIcon from "../icon/FaIcon";
-import { Menu, MenuItem, menuItemIcon } from "../ui-components/Menu";
+import { Icon } from "../ui-components/Icon";
+import { Menu, MenuItem } from "../ui-components/Menu";
 
 interface Props {
   contactEmail?: string;
@@ -24,7 +24,7 @@ export const HelpMenu = ({ contactEmail, manualUrl }: Props) => {
   return (
     <MenuTrigger>
       <IconButton
-        className="px-3 py-[7px]"
+        className="p-[7px]"
         icon={faQuestion}
         frame
         data-test-id="help-menu"
@@ -42,9 +42,7 @@ export const HelpMenu = ({ contactEmail, manualUrl }: Props) => {
           rel="noopener noreferrer"
           data-test-id="help-email"
         >
-          <span className={menuItemIcon()}>
-            <FaIcon icon={faPaperPlane} />
-          </span>
+          <Icon icon={faPaperPlane} />
           {t("common.contact")}
         </MenuItem>
         <MenuItem
@@ -54,15 +52,11 @@ export const HelpMenu = ({ contactEmail, manualUrl }: Props) => {
           rel="noopener noreferrer"
           data-test-id="help-manual"
         >
-          <span className={menuItemIcon()}>
-            <FaIcon icon={faBook} />
-          </span>
+          <Icon icon={faBook} />
           {t("common.manual")}
         </MenuItem>
         <MenuItem id="version">
-          <span className={menuItemIcon()}>
-            <FaIcon icon={faInfoCircle} />
-          </span>
+          <Icon icon={faInfoCircle} />
           {t("common.version")}
         </MenuItem>
       </Menu>
diff --git a/frontend/src/js/header/LogoutButton.tsx b/frontend/src/js/header/LogoutButton.tsx
index 3e4016a130..06f9ba7e5b 100644
--- a/frontend/src/js/header/LogoutButton.tsx
+++ b/frontend/src/js/header/LogoutButton.tsx
@@ -36,7 +36,12 @@ const LogoutButton = () => {
 
   return (
     <TooltipTrigger>
-      <IconButton small frame icon={faSignOutAlt} onClick={onLogout} />
+      <IconButton
+        className="p-[7px]"
+        frame
+        icon={faSignOutAlt}
+        onClick={onLogout}
+      />
       <Tooltip>{t("common.logout")}</Tooltip>
     </TooltipTrigger>
   );
diff --git a/frontend/src/js/icon/FaIcon.tsx b/frontend/src/js/icon/FaIcon.tsx
deleted file mode 100644
index e50b2b6d11..0000000000
--- a/frontend/src/js/icon/FaIcon.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import type { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import type { ComponentProps, Ref } from "react";
-
-import { tv } from "tailwind-variants";
-
-export interface IconStyleProps {
-  left?: boolean;
-  center?: boolean;
-  right?: boolean;
-  white?: boolean;
-  red?: boolean;
-  light?: boolean;
-  gray?: boolean;
-  main?: boolean;
-  active?: boolean;
-  disabled?: boolean;
-  tiny?: boolean;
-  large?: boolean;
-  small?: boolean;
-  style?: ComponentProps<typeof FontAwesomeIcon>["style"];
-}
-
-export interface FaIconPropsT extends IconStyleProps {
-  icon: IconProp;
-  className?: string;
-}
-
-const icon = tv({
-  base: [
-    "w-[initial]!",
-    "text-sm",
-    "text-gray-800",
-    "[&.fa-spinner]:animate-spin-fast",
-  ],
-  variants: {
-    left: { true: "pr-[10px]" },
-    right: { true: "pl-[10px]" },
-    center: { true: "text-center" },
-    // later wins when both are set
-    tiny: { true: "text-[11px]" },
-    large: { true: "text-base" },
-    disabled: { true: "cursor-not-allowed" },
-  },
-});
-
-// First matching flag wins, in this order
-const colorClass = (p: IconStyleProps) => {
-  if (p.disabled) return "text-gray-400";
-  if (p.red) return "text-red";
-  if (p.gray) return "text-gray-500";
-  if (p.active) return "text-primary-500";
-  if (p.white) return "text-white";
-  if (p.light) return "text-primary-100";
-  if (p.main) return "text-primary-200";
-  return undefined;
-};
-
-const FaIcon = ({
-  ref,
-  icon: iconProp,
-  className,
-  left,
-  center,
-  right,
-  white,
-  red,
-  light,
-  gray,
-  main,
-  active,
-  disabled,
-  tiny,
-  large,
-  small: _small, // only meaningful to IconButton
-  style,
-}: FaIconPropsT & { ref?: Ref<SVGSVGElement> }) => {
-  return (
-    <FontAwesomeIcon
-      ref={ref}
-      className={icon({
-        left,
-        center,
-        right,
-        tiny,
-        large,
-        disabled,
-        className: [
-          colorClass({ white, red, light, gray, main, active, disabled }),
-          className,
-        ],
-      })}
-      icon={iconProp}
-      style={style}
-    />
-  );
-};
-
-export default FaIcon;
diff --git a/frontend/src/js/info-pane/InfoPane.tsx b/frontend/src/js/info-pane/InfoPane.tsx
index 0c3574493f..4ba7f30bf0 100644
--- a/frontend/src/js/info-pane/InfoPane.tsx
+++ b/frontend/src/js/info-pane/InfoPane.tsx
@@ -12,7 +12,7 @@ import { tv } from "tailwind-variants";
 import type { StateT } from "../app/reducers";
 import IconButton from "../button/IconButton";
 import { Highlighter } from "../common/components/Highlighter";
-import FaIcon from "../icon/FaIcon";
+import { Icon } from "../ui-components/Icon";
 import { toggleAdditionalInfos as toggleInfos } from "./actions";
 import InfoPaneCollapsed from "./InfoPaneCollapsed";
 import { InfoPaneHeader } from "./InfoPaneHeader";
@@ -113,7 +113,7 @@ const ConceptLabel = ({
 
   return (
     <p className={pinnedLabel()}>
-      {conceptIcon && <FaIcon className={typeIcon()} icon={conceptIcon} />}
+      {conceptIcon && <Icon icon={conceptIcon} className={typeIcon()} />}
       <span className="grow">
         {label ? (
           <HighlightedText words={words} text={label} />
diff --git a/frontend/src/js/info-pane/MatchingStats.tsx b/frontend/src/js/info-pane/MatchingStats.tsx
index 23be514bfb..aafd8b711f 100644
--- a/frontend/src/js/info-pane/MatchingStats.tsx
+++ b/frontend/src/js/info-pane/MatchingStats.tsx
@@ -11,7 +11,7 @@ import type { DateRangeT } from "../api/types";
 import { numberToThreeDigitArray } from "../common/helpers/commonHelper";
 import { formatDate, parseDate } from "../common/helpers/dateHelper";
 import { exists } from "../common/helpers/exists";
-import FaIcon from "../icon/FaIcon";
+import { Icon } from "../ui-components/Icon";
 
 const dateText = tv({
   base: [
@@ -35,7 +35,7 @@ const text = tv({
 });
 
 const icon = tv({
-  base: ["text-[30px]", "text-gray-400", "justify-self-center"],
+  base: ["size-[30px]", "text-gray-400", "justify-self-center"],
 });
 
 const numberText = tv({
@@ -93,7 +93,7 @@ const MatchingStats = (props: Props) => {
     <div {...rest}>
       {idLabel && (
         <>
-          <FaIcon className={icon()} icon={faMicroscope} />
+          <Icon icon={faMicroscope} className={icon()} />
           <div className="shrink-0">
             <p className={dateText()}>{idLabel}</p>
             <p className={text({ zero: isZero })}>
@@ -102,7 +102,7 @@ const MatchingStats = (props: Props) => {
           </div>
         </>
       )}
-      <FaIcon className={icon()} icon={faHashtag} />
+      <Icon icon={faHashtag} className={icon()} />
       <div className="shrink-0">
         <p className={numberText({ zero: isZero })}>
           {exists(matchingEntries) ? (
@@ -122,7 +122,7 @@ const MatchingStats = (props: Props) => {
           )}
         </p>
       </div>
-      <FaIcon className={icon()} icon={faUser} />
+      <Icon icon={faUser} className={icon()} />
       <div className="shrink-0">
         <p className={numberText({ zero: isZeroEntities })}>
           {exists(matchingEntities) ? (
@@ -142,7 +142,7 @@ const MatchingStats = (props: Props) => {
           )}
         </p>
       </div>
-      <FaIcon className={icon()} icon={faArrowsLeftRightToLine} />
+      <Icon icon={faArrowsLeftRightToLine} className={icon()} />
       <div className="shrink-0">
         <p className={dateText()}>
           {fromDate}
diff --git a/frontend/src/js/pane/TabNavigation.tsx b/frontend/src/js/pane/TabNavigation.tsx
index 43241fa26a..8cfe8d2d65 100644
--- a/frontend/src/js/pane/TabNavigation.tsx
+++ b/frontend/src/js/pane/TabNavigation.tsx
@@ -1,8 +1,8 @@
 import { faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { Focusable } from "react-aria-components";
 import { tv } from "tailwind-variants";
-import FaIcon from "../icon/FaIcon";
 import { HoverNavigatable } from "../small-tab-navigation/HoverNavigatable";
+import { Icon } from "../ui-components/Icon";
 import {
   Tooltip,
   TooltipTrigger,
@@ -75,7 +75,7 @@ const TabNavigation = ({
                   onClick={createClickHandler(key)}
                 >
                   {label}
-                  {loading && <FaIcon className="ml-[5px]" icon={faSpinner} />}
+                  {loading && <Icon icon={faSpinner} className="ml-[5px]" />}
                 </button>
               </Focusable>
               <Tooltip>{tooltip}</Tooltip>
diff --git a/frontend/src/js/preview/Preview.tsx b/frontend/src/js/preview/Preview.tsx
index 7a27d76707..0df5912053 100644
--- a/frontend/src/js/preview/Preview.tsx
+++ b/frontend/src/js/preview/Preview.tsx
@@ -8,7 +8,7 @@ import { tv } from "tailwind-variants";
 import type { PreviewStatistics, SecondaryId } from "../api/types";
 import type { StateT } from "../app/reducers";
 import { TransparentButton } from "../button/TransparentButton";
-import FaIcon from "../icon/FaIcon";
+import { Icon } from "../ui-components/Icon";
 import { closePreview } from "./actions";
 import Charts from "./Charts";
 import DiagramModal from "./DiagramModal";
@@ -56,9 +56,7 @@ const chartLoadingBlocker = tv({
   ],
 });
 
-// the old styles also set `width: 30px`, but FaIcon forces `width: initial
-// !important`, so it never applied — only the height did
-const spinnerIcon = tv({ base: "h-[30px]" });
+const spinnerIcon = tv({ base: "size-[30px]" });
 
 const selectBox = tv({
   base: ["rounded", "bg-white", "shadow-[0_0_5px_0_rgba(0,0,0,0.2)]"],
@@ -126,7 +124,7 @@ export default function Preview() {
           />
         ) : (
           <div className={chartLoadingBlocker()}>
-            <FaIcon className={spinnerIcon()} icon={faSpinner} />
+            <Icon icon={faSpinner} className={spinnerIcon()} />
           </div>
         )}
         {popOver && (
diff --git a/frontend/src/js/preview/SelectBox.tsx b/frontend/src/js/preview/SelectBox.tsx
index ba9cb156d8..a25f102bcf 100644
--- a/frontend/src/js/preview/SelectBox.tsx
+++ b/frontend/src/js/preview/SelectBox.tsx
@@ -2,7 +2,7 @@ import { faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-icons";
 import { type SetStateAction, useMemo, useRef, useState } from "react";
 import { tv } from "tailwind-variants";
 import { useClickOutside } from "../common/helpers/useClickOutside";
-import FaIcon from "../icon/FaIcon";
+import { Icon } from "../ui-components/Icon";
 import { Input } from "../ui-components/InputSelect/InputSelectComponents";
 
 export interface SelectItem {
@@ -89,7 +89,7 @@ export default function SelectBox<T extends SelectItem>({
           spellCheck={false}
         />
         <div className="mr-[5px]">
-          <FaIcon className={arrow()} icon={isOpen ? faCaretUp : faCaretDown} />
+          <Icon icon={isOpen ? faCaretUp : faCaretDown} className={arrow()} />
         </div>
       </div>
       <div className={list()} ref={clickOutsideRef}>
diff --git a/frontend/src/js/previous-queries/list/Folder.tsx b/frontend/src/js/previous-queries/list/Folder.tsx
index d9f325d2cd..863339b816 100644
--- a/frontend/src/js/previous-queries/list/Folder.tsx
+++ b/frontend/src/js/previous-queries/list/Folder.tsx
@@ -4,7 +4,7 @@ import { tv } from "tailwind-variants";
 import { Highlighter } from "../../common/components/Highlighter";
 
 import { exists } from "../../common/helpers/exists";
-import FaIcon from "../../icon/FaIcon";
+import { Icon } from "../../ui-components/Icon";
 
 const root = tv({
   base: [
@@ -63,10 +63,9 @@ const Folder = ({
       className={root({ active, special, className })}
       title={folder}
     >
-      <FaIcon
-        className="mr-2"
+      <Icon
         icon={special ? faFolderRegular : faFolder}
-        active
+        className="mr-2 text-primary-500"
       />
       {exists(count) && <span className={resultCount()}>{count}</span>}
       <div className="shrink-0 text-gray-800">
diff --git a/frontend/src/js/previous-queries/list/ProjectItem.tsx b/frontend/src/js/previous-queries/list/ProjectItem.tsx
index c69b6523cb..6463213ede 100644
--- a/frontend/src/js/previous-queries/list/ProjectItem.tsx
+++ b/frontend/src/js/previous-queries/list/ProjectItem.tsx
@@ -22,9 +22,9 @@ import { Highlighter } from "../../common/components/Highlighter";
 import { formatDate } from "../../common/helpers/dateHelper";
 import { exists } from "../../common/helpers/exists";
 import { useFormLabelByType } from "../../external-forms/stateSelectors";
-import FaIcon from "../../icon/FaIcon";
 import FormSymbol from "../../symbols/FormSymbol";
 import QuerySymbol from "../../symbols/QuerySymbol";
+import { Icon } from "../../ui-components/Icon";
 import {
   Tooltip,
   TooltipTarget,
@@ -185,7 +185,6 @@ const ResultsLabel = ({
       <DownloadButton
         className={downloadButton()}
         tight
-        small
         bare
         simpleIcon
         resultUrl={resultUrl}
@@ -270,7 +269,6 @@ const ProjectItem = ({
                 className="mr-[10px]"
                 icon={folders.length === 0 ? faFolderRegular : faFolder}
                 tight
-                small
                 bare
                 onClick={onIndicateEditFolders}
                 disabled={!mayEdit}
@@ -286,7 +284,7 @@ const ProjectItem = ({
                     aria-label={t("previousQuery.hasNoDates")}
                     excludeFromTabOrder
                   >
-                    <FaIcon className="opacity-70" red icon={faCalendar} />
+                    <Icon icon={faCalendar} className="opacity-70 text-red" />
                   </TooltipTarget>
                   <Tooltip>{t("previousQuery.hasNoDates")}</Tooltip>
                 </TooltipTrigger>
diff --git a/frontend/src/js/previous-queries/upload/CSVColumnPicker.tsx b/frontend/src/js/previous-queries/upload/CSVColumnPicker.tsx
index 2df67ddb28..4a338f9ba3 100644
--- a/frontend/src/js/previous-queries/upload/CSVColumnPicker.tsx
+++ b/frontend/src/js/previous-queries/upload/CSVColumnPicker.tsx
@@ -17,9 +17,9 @@ import IconButton from "../../button/IconButton";
 import PrimaryButton from "../../button/PrimaryButton";
 import { TransparentButton } from "../../button/TransparentButton";
 import { parseCSV, toCSV } from "../../file/csv";
-import FaIcon from "../../icon/FaIcon";
 import { useActiveLang } from "../../localization/useActiveLang";
 import ScrollableList from "../../scrollable-list/ScrollableList";
+import { Icon } from "../../ui-components/Icon";
 import InputSelect from "../../ui-components/InputSelect/InputSelect";
 import { Tooltip, TooltipTrigger } from "../../ui-components/Tooltip";
 
@@ -294,9 +294,9 @@ const CSVColumnPicker = ({
         <div className={partialUploadResults()}>
           <p className={msg()}>
             {uploadResult.resolved > 0 && (
-              <FaIcon
-                className={bigIcon({ kind: "success" })}
+              <Icon
                 icon={faCheckCircle}
+                className={bigIcon({ kind: "success" })}
               />
             )}
             {t("csvColumnPicker.resolved", { count: uploadResult.resolved })}
@@ -304,9 +304,9 @@ const CSVColumnPicker = ({
           {uploadResult.unreadableDate.length > 0 && (
             <>
               <p className={msg()}>
-                <FaIcon
-                  className={bigIcon({ kind: "error" })}
+                <Icon
                   icon={faExclamationCircle}
+                  className={bigIcon({ kind: "error" })}
                 />
                 {t("csvColumnPicker.unreadableDate", {
                   count: uploadResult.unreadableDate.length,
@@ -326,9 +326,9 @@ const CSVColumnPicker = ({
           {uploadResult.unresolvedId.length > 0 && (
             <>
               <p className={msg()}>
-                <FaIcon
-                  className={bigIcon({ kind: "error" })}
+                <Icon
                   icon={faExclamationCircle}
+                  className={bigIcon({ kind: "error" })}
                 />
                 {t("csvColumnPicker.unresolvedId", {
                   count: uploadResult.unresolvedId.length,
@@ -351,7 +351,7 @@ const CSVColumnPicker = ({
           (uploadResult.unreadableDate.length > 0 ||
             uploadResult.unresolvedId.length > 0) && (
             <TransparentButton className="mr-auto" onClick={downloadUnresolved}>
-              <FaIcon icon={faDownload} />{" "}
+              <Icon icon={faDownload} />{" "}
               {t("uploadQueryResultsModal.downloadUnresolved", {
                 count:
                   uploadResult.unreadableDate.length +
@@ -366,9 +366,9 @@ const CSVColumnPicker = ({
             onClick={uploadQuery}
           >
             {loading ? (
-              <FaIcon white icon={faSpinner} />
+              <Icon icon={faSpinner} className="text-white" />
             ) : (
-              <FaIcon white left icon={faUpload} />
+              <Icon icon={faUpload} className="mr-[10px] text-white" />
             )}{" "}
             {t("uploadQueryResultsModal.uploadAgain")}
           </PrimaryButton>
@@ -388,9 +388,9 @@ const CSVColumnPicker = ({
             onClick={uploadQuery}
           >
             {loading ? (
-              <FaIcon white icon={faSpinner} />
+              <Icon icon={faSpinner} className="text-white" />
             ) : (
-              <FaIcon left white icon={faUpload} />
+              <Icon icon={faUpload} className="mr-[10px] text-white" />
             )}{" "}
             {t("uploadQueryResultsModal.upload")}
           </PrimaryButton>
diff --git a/frontend/src/js/previous-queries/upload/UploadQueryResultsModal.tsx b/frontend/src/js/previous-queries/upload/UploadQueryResultsModal.tsx
index 01c990e314..d7a7f2efb5 100644
--- a/frontend/src/js/previous-queries/upload/UploadQueryResultsModal.tsx
+++ b/frontend/src/js/previous-queries/upload/UploadQueryResultsModal.tsx
@@ -4,9 +4,9 @@ import { useTranslation } from "react-i18next";
 import { tv } from "tailwind-variants";
 
 import type { QueryUploadConfigT, UploadQueryResponseT } from "../../api/types";
-import FaIcon from "../../icon/FaIcon";
 import Modal from "../../modal/Modal";
 import DropzoneWithFileInput from "../../ui-components/DropzoneWithFileInput";
+import { Icon } from "../../ui-components/Icon";
 import InfoTooltip from "../../ui-components/InfoTooltip";
 
 import CSVColumnPicker, { type QueryToUploadT } from "./CSVColumnPicker";
@@ -60,7 +60,7 @@ const UploadQueryResultsModal = ({
       <div>
         {fullUploadSuccess ? (
           <div className="my-[25px]">
-            <FaIcon className={successIcon()} icon={faCheckCircle} />
+            <Icon icon={faCheckCircle} className={successIcon()} />
             <p className="m-0">
               {t("uploadQueryResultsModal.uploadSucceeded", {
                 count: uploadResult?.resolved || 0,
diff --git a/frontend/src/js/query-node-editor/UploadFilterListModal.tsx b/frontend/src/js/query-node-editor/UploadFilterListModal.tsx
index e4939776ca..5bc9e4f9a0 100644
--- a/frontend/src/js/query-node-editor/UploadFilterListModal.tsx
+++ b/frontend/src/js/query-node-editor/UploadFilterListModal.tsx
@@ -8,9 +8,9 @@ import { useTranslation } from "react-i18next";
 import { tv } from "tailwind-variants";
 import type { PostFilterResolveResponseT } from "../api/types";
 import PrimaryButton from "../button/PrimaryButton";
-import FaIcon from "../icon/FaIcon";
 import Modal from "../modal/Modal";
 import ScrollableList from "../scrollable-list/ScrollableList";
+import { Icon } from "../ui-components/Icon";
 import InputCheckbox from "../ui-components/InputCheckbox";
 
 const root = tv({
@@ -79,12 +79,12 @@ const UploadFilterListModal = ({
       headline={t("uploadFilterListModal.headline")}
     >
       <div className={root()}>
-        {loading && <FaIcon center icon={faSpinner} />}
+        {loading && <Icon icon={faSpinner} className="text-center" />}
         {error && (
           <p>
-            <FaIcon
-              className={bigIcon({ kind: "error" })}
+            <Icon
               icon={faExclamationCircle}
+              className={bigIcon({ kind: "error" })}
             />
             {t("uploadConceptListModal.error")}
           </p>
@@ -92,9 +92,9 @@ const UploadFilterListModal = ({
         {hasUnresolvedItems && (
           <div className="flex flex-col gap-[5px]">
             <p className={msg()}>
-              <FaIcon
-                className={bigIcon({ kind: "error" })}
+              <Icon
                 icon={faExclamationCircle}
+                className={bigIcon({ kind: "error" })}
               />
               <span
                 // biome-ignore lint/security/noDangerouslySetInnerHtml: i18n text with markup
@@ -115,9 +115,9 @@ const UploadFilterListModal = ({
         <div className="flex flex-col gap-[5px]">
           {hasResolvedItems && (
             <p className={msg()}>
-              <FaIcon
-                className={bigIcon({ kind: "success" })}
+              <Icon
                 icon={faCheckCircle}
+                className={bigIcon({ kind: "success" })}
               />
               {t("uploadConceptListModal.resolvedCodes", {
                 count: resolvedItemsCount,
diff --git a/frontend/src/js/query-runner/DownloadResultsDropdownButton.tsx b/frontend/src/js/query-runner/DownloadResultsDropdownButton.tsx
index 861bf314c3..705bef818d 100644
--- a/frontend/src/js/query-runner/DownloadResultsDropdownButton.tsx
+++ b/frontend/src/js/query-runner/DownloadResultsDropdownButton.tsx
@@ -8,8 +8,8 @@ import type { ResultUrlWithLabel } from "../api/types";
 import { AuthTokenContext } from "../authorization/AuthTokenProvider";
 import DownloadButton, { getFileIcon } from "../button/DownloadButton";
 import IconButton from "../button/IconButton";
-import FaIcon from "../icon/FaIcon";
-import { Menu, MenuItem, menuItemIcon } from "../ui-components/Menu";
+import { Icon } from "../ui-components/Icon";
+import { Menu, MenuItem } from "../ui-components/Menu";
 import { Tooltip, TooltipTrigger } from "../ui-components/Tooltip";
 import { getUserSettings, storeUserSettings } from "../user/userSettings";
 
@@ -137,9 +137,7 @@ const DownloadResultsDropdownButton = ({
                   href={`${resultUrl.url}?access_token=${encodeURIComponent(authToken)}`}
                   textValue={resultUrl.label}
                 >
-                  <span className={menuItemIcon()}>
-                    <FaIcon large icon={icon} style={{ color }} />
-                  </span>
+                  <Icon icon={icon} style={{ color }} />
                   {truncate(resultUrl.label)}
                 </MenuItem>
               );
diff --git a/frontend/src/js/query-runner/QueryResults.tsx b/frontend/src/js/query-runner/QueryResults.tsx
index bf432704b1..15f4cc20cd 100644
--- a/frontend/src/js/query-runner/QueryResults.tsx
+++ b/frontend/src/js/query-runner/QueryResults.tsx
@@ -9,7 +9,7 @@ import PreviewButton from "../button/PreviewButton";
 import { QueryResultHistoryButton } from "../button/QueryResultHistoryButton";
 import { isEmpty } from "../common/helpers/commonHelper";
 import { exists } from "../common/helpers/exists";
-import FaIcon from "../icon/FaIcon";
+import { Icon } from "../ui-components/Icon";
 import { canViewEntityPreview, canViewQueryPreview } from "../user/selectors";
 import DownloadResultsDropdownButton from "./DownloadResultsDropdownButton";
 
@@ -49,7 +49,7 @@ const QueryResults = ({
     <div className={root()}>
       {isEmpty(resultCount) ? (
         <p className={text()}>
-          <FaIcon icon={faCheck} left />
+          <Icon icon={faCheck} className="mr-[10px]" />
           {t("queryRunner.endSuccess")}
         </p>
       ) : (
diff --git a/frontend/src/js/query-runner/QueryRunnerButton.tsx b/frontend/src/js/query-runner/QueryRunnerButton.tsx
index 74a21dc534..0b8befaa49 100644
--- a/frontend/src/js/query-runner/QueryRunnerButton.tsx
+++ b/frontend/src/js/query-runner/QueryRunnerButton.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { tv } from "tailwind-variants";
 
 import BasicButton from "../button/BasicButton";
-import FaIcon from "../icon/FaIcon";
+import { Icon } from "../ui-components/Icon";
 
 const left = tv({
   base: ["px-[15px]", "transition-[color,background-color] duration-100"],
@@ -75,7 +75,10 @@ const QueryRunnerButton = ({
         data-test-id="query-runner-button"
       >
         <span className={left({ running: isQueryRunning })}>
-          <FaIcon white={!isQueryRunning} icon={icon} />
+          <Icon
+            icon={icon}
+            className={[!isQueryRunning ? "text-white" : undefined]}
+          />
         </span>
         <span className={runnerLabel()}>{label}</span>
       </BasicButton>
diff --git a/frontend/src/js/snack-message/SnackMessage.tsx b/frontend/src/js/snack-message/SnackMessage.tsx
index 9a1d1293d4..e37af837f0 100644
--- a/frontend/src/js/snack-message/SnackMessage.tsx
+++ b/frontend/src/js/snack-message/SnackMessage.tsx
@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { tv } from "tailwind-variants";
 import type { StateT } from "../app/reducers";
 import { useClickOutside } from "../common/helpers/useClickOutside";
-import FaIcon from "../icon/FaIcon";
+import { Icon } from "../ui-components/Icon";
 import { resetMessage as resetMessageAction } from "./actions";
 import type { SnackMessageStateT } from "./reducer";
 
@@ -55,7 +55,7 @@ export const SnackMessage = memo(function SnackMessageComponent() {
               className={clearZone()}
               onClick={resetMessage}
             >
-              <FaIcon white large icon={faTimes} />
+              <Icon icon={faTimes} className="text-white" />
             </button>
           </div>
         </div>
diff --git a/frontend/src/js/standard-query-editor/EmptyQueryEditorDropzone.tsx b/frontend/src/js/standard-query-editor/EmptyQueryEditorDropzone.tsx
index a525642d00..764ab8a173 100644
--- a/frontend/src/js/standard-query-editor/EmptyQueryEditorDropzone.tsx
+++ b/frontend/src/js/standard-query-editor/EmptyQueryEditorDropzone.tsx
@@ -9,7 +9,7 @@ import { memo } from "react";
 import { useTranslation } from "react-i18next";
 import { tv } from "tailwind-variants";
 
-import FaIcon from "../icon/FaIcon";
+import { Icon } from "../ui-components/Icon";
 
 const textInitial = tv({
   base: [
@@ -54,28 +54,28 @@ export const EmptyQueryEditorDropzone = memo(() => {
   return (
     <div className={textInitial()} data-test-id="text-initial">
       <h2 className={headline()}>{t("dropzone.explanation")}</h2>
-      <FaIcon className={arrowRight()} icon={faArrowRight} />
+      <Icon icon={faArrowRight} className={arrowRight()} />
       <div className="[grid-area:description]">
         <p>{t("dropzone.dropIntoThisArea")}</p>
         <div className={grid()}>
           <div className={row()}>
             <div className={iconInABox()}>
-              <FaIcon icon={faFolder} active />
+              <Icon icon={faFolder} className="text-primary-500" />
             </div>
             <div className={iconInABox()}>
-              <FaIcon icon={faMinus} active />
+              <Icon icon={faMinus} className="text-primary-500" />
             </div>
           </div>
           {t("dropzone.aConcept")}
           <div className={row()}>
             <div className={iconInABox()}>
-              <FaIcon icon={faDiagramProject} active />
+              <Icon icon={faDiagramProject} className="text-primary-500" />
             </div>
           </div>
           {t("dropzone.aQuery")}
           <div className={row()}>
             <div className={iconInABox()}>
-              <FaIcon icon={faFile} active />
+              <Icon icon={faFile} className="text-primary-500" />
             </div>
           </div>
           {t("dropzone.aConceptList")}
diff --git a/frontend/src/js/standard-query-editor/QueryNodeActions.tsx b/frontend/src/js/standard-query-editor/QueryNodeActions.tsx
index 4c8e298dec..1b07cd4f34 100644
--- a/frontend/src/js/standard-query-editor/QueryNodeActions.tsx
+++ b/frontend/src/js/standard-query-editor/QueryNodeActions.tsx
@@ -10,7 +10,7 @@ import { useTranslation } from "react-i18next";
 import { tv } from "tailwind-variants";
 
 import IconButton from "../button/IconButton";
-import FaIcon from "../icon/FaIcon";
+import { Icon } from "../ui-components/Icon";
 import {
   Tooltip,
   TooltipTarget,
@@ -85,7 +85,7 @@ const QueryNodeActions = (props: Props) => {
             aria-label={t("queryEditor.loadingPreviousQuery")}
             excludeFromTabOrder
           >
-            <FaIcon className="mt-[7px] mb-1 mx-[6px]" icon={faSpinner} />
+            <Icon icon={faSpinner} className="mt-[7px] mb-1 mx-[6px]" />
           </TooltipTarget>
           <Tooltip>{t("queryEditor.loadingPreviousQuery")}</Tooltip>
         </TooltipTrigger>
diff --git a/frontend/src/js/standard-query-editor/SecondaryIdSelector.tsx b/frontend/src/js/standard-query-editor/SecondaryIdSelector.tsx
index 169fdaa593..f66079dcf9 100644
--- a/frontend/src/js/standard-query-editor/SecondaryIdSelector.tsx
+++ b/frontend/src/js/standard-query-editor/SecondaryIdSelector.tsx
@@ -7,8 +7,8 @@ import { tv } from "tailwind-variants";
 import type { SecondaryId } from "../api/types";
 import type { StateT } from "../app/reducers";
 import { exists } from "../common/helpers/exists";
-import FaIcon from "../icon/FaIcon";
 import { nodeIsConceptQueryNode } from "../model/node";
+import { Icon } from "../ui-components/Icon";
 import InfoTooltip from "../ui-components/InfoTooltip";
 import ToggleButton from "../ui-components/ToggleButton";
 
@@ -160,10 +160,9 @@ const SecondaryIdSelectorUI = memo(
     return (
       <div>
         <h3 className={headline({ active: !!value })}>
-          <FaIcon
-            className={headlineIcon({ active: !!value })}
-            left
+          <Icon
             icon={faMicroscope}
+            className={[headlineIcon({ active: !!value }), "mr-[10px]"]}
           />
           {t("queryEditor.secondaryId")}
           <InfoTooltip text={t("queryEditor.secondaryIdTooltip")} />
diff --git a/frontend/src/js/symbols/FormSymbol.tsx b/frontend/src/js/symbols/FormSymbol.tsx
index aa053986d2..4b76bd2c0a 100644
--- a/frontend/src/js/symbols/FormSymbol.tsx
+++ b/frontend/src/js/symbols/FormSymbol.tsx
@@ -1,13 +1,13 @@
 import { faChartColumn } from "@fortawesome/free-solid-svg-icons";
 
-import FaIcon from "../icon/FaIcon";
+import { Icon } from "../ui-components/Icon";
 
 import { InABox } from "./InABox";
 
 const FormSymbol = ({ className }: { className?: string }) => {
   return (
     <InABox className={className}>
-      <FaIcon icon={faChartColumn} active />
+      <Icon icon={faChartColumn} className="text-primary-500" />
     </InABox>
   );
 };
diff --git a/frontend/src/js/symbols/QuerySymbol.tsx b/frontend/src/js/symbols/QuerySymbol.tsx
index dd10ff5215..9d76938034 100644
--- a/frontend/src/js/symbols/QuerySymbol.tsx
+++ b/frontend/src/js/symbols/QuerySymbol.tsx
@@ -1,13 +1,16 @@
 import { faDiagramProject } from "@fortawesome/free-solid-svg-icons";
 
-import FaIcon from "../icon/FaIcon";
+import { Icon } from "../ui-components/Icon";
 
 import { InABox } from "./InABox";
 
 const QuerySymbol = ({ className }: { className?: string }) => {
   return (
     <InABox className={className}>
-      <FaIcon icon={faDiagramProject} active className={className} />
+      <Icon
+        icon={faDiagramProject}
+        className={[className, "text-primary-500"]}
+      />
     </InABox>
   );
 };
diff --git a/frontend/src/js/ui-components/BaseInput.tsx b/frontend/src/js/ui-components/BaseInput.tsx
index 2e06785347..e53ecb38b8 100644
--- a/frontend/src/js/ui-components/BaseInput.tsx
+++ b/frontend/src/js/ui-components/BaseInput.tsx
@@ -16,8 +16,8 @@ import type { CurrencyConfigT } from "../api/types";
 import IconButton from "../button/IconButton";
 import { isEmpty } from "../common/helpers/commonHelper";
 import { exists } from "../common/helpers/exists";
-import FaIcon from "../icon/FaIcon";
 import CurrencyInput from "./CurrencyInput";
+import { Icon } from "./Icon";
 import {
   Tooltip,
   TooltipTarget,
@@ -190,9 +190,7 @@ const BaseInput = ({
       )}
       {exists(value) && !isEmpty(value) && (
         <>
-          {valid && !invalid && (
-            <FaIcon icon={faCheck} large={large} className={greenIcon()} />
-          )}
+          {valid && !invalid && <Icon icon={faCheck} className={greenIcon()} />}
           {invalid && (
             <TooltipTrigger delay={tooltipDelay.immediate}>
               <TooltipTarget
@@ -202,11 +200,7 @@ const BaseInput = ({
                 excludeFromTabOrder
                 className={absoluteWrap()}
               >
-                <FaIcon
-                  icon={faExclamationTriangle}
-                  large={large}
-                  className={redIcon()}
-                />
+                <Icon icon={faExclamationTriangle} className={redIcon()} />
               </TooltipTarget>
               <Tooltip>{invalidText}</Tooltip>
             </TooltipTrigger>
diff --git a/frontend/src/js/ui-components/ConfirmMenu.tsx b/frontend/src/js/ui-components/ConfirmMenu.tsx
index 479c4e2a02..6ae86b69c1 100644
--- a/frontend/src/js/ui-components/ConfirmMenu.tsx
+++ b/frontend/src/js/ui-components/ConfirmMenu.tsx
@@ -4,9 +4,9 @@ import type { ReactNode } from "react";
 import { MenuTrigger } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 
-import FaIcon from "../icon/FaIcon";
+import { Icon } from "./Icon";
 
-import { Menu, MenuItem, menuItemIcon } from "./Menu";
+import { Menu, MenuItem } from "./Menu";
 
 /**
  * Asks for confirmation before calling onConfirm: a menu with a single item.
@@ -35,9 +35,7 @@ export const ConfirmMenu = ({
       {children}
       <Menu aria-label={label} placement={placement} onAction={onConfirm}>
         <MenuItem id="confirm" danger={red} data-test-id="confirm">
-          <span className={menuItemIcon()}>
-            <FaIcon icon={confirmationIcon || faCheck} />
-          </span>
+          <Icon icon={confirmationIcon || faCheck} />
           {label}
         </MenuItem>
       </Menu>
diff --git a/frontend/src/js/ui-components/DropzoneWithFileInput.tsx b/frontend/src/js/ui-components/DropzoneWithFileInput.tsx
index b7785bce97..9d22086079 100644
--- a/frontend/src/js/ui-components/DropzoneWithFileInput.tsx
+++ b/frontend/src/js/ui-components/DropzoneWithFileInput.tsx
@@ -6,12 +6,11 @@ import { useTranslation } from "react-i18next";
 import { tv } from "tailwind-variants";
 
 import { SelectFileButton } from "../button/SelectFileButton";
-import FaIcon from "../icon/FaIcon";
-
 import Dropzone, {
   type ChildArgs,
   type PossibleDroppableObject,
 } from "./Dropzone";
+import { Icon } from "./Icon";
 import { ImportModal } from "./ImportModal";
 
 export interface DragItemFile {
@@ -149,7 +148,10 @@ const DropzoneWithFileInput = <
               className={selectFileButton({ outside: !!importButtonOutside })}
               onClick={() => setImportModalOpen(true)}
             >
-              <FaIcon icon={faFileImport} gray className={importIcon()} />
+              <Icon
+                icon={faFileImport}
+                className={[importIcon(), "text-gray-500"]}
+              />
               {t("common.import")}
             </SelectFileButton>
           )}
diff --git a/frontend/src/js/ui-components/EditableText.tsx b/frontend/src/js/ui-components/EditableText.tsx
index 7b6d1b0124..2b8cc0c825 100644
--- a/frontend/src/js/ui-components/EditableText.tsx
+++ b/frontend/src/js/ui-components/EditableText.tsx
@@ -70,7 +70,6 @@ const EditableText = ({
           bare
           icon={faPen}
           onClick={onToggleEdit}
-          small
           large={large}
         />
         <Tooltip>{tooltip}</Tooltip>
diff --git a/frontend/src/js/ui-components/Icon.stories.tsx b/frontend/src/js/ui-components/Icon.stories.tsx
new file mode 100644
index 0000000000..d66caf285c
--- /dev/null
+++ b/frontend/src/js/ui-components/Icon.stories.tsx
@@ -0,0 +1,94 @@
+import {
+  faArrowsLeftRightToLine,
+  faCheck,
+  faEllipsisV,
+  faFolder,
+  faPaperPlane,
+  faSpinner,
+  faTrash,
+  faUser,
+} from "@fortawesome/free-solid-svg-icons";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import IconButton from "../button/IconButton";
+import PrimaryButton from "../button/PrimaryButton";
+
+import { Icon } from "./Icon";
+
+export default {
+  title: "UiComponents/Icon",
+  component: Icon,
+  parameters: { layout: "centered" },
+} as Meta<typeof Icon>;
+
+type Story = StoryObj<typeof Icon>;
+
+const glyphs = [
+  faEllipsisV,
+  faUser,
+  faFolder,
+  faPaperPlane,
+  faArrowsLeftRightToLine,
+];
+
+export const Frame: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 text-xs">
+      <div className="flex items-center gap-2">
+        {glyphs.map((icon, i) => (
+          <Icon key={i} icon={icon} className="bg-gray-100" />
+        ))}
+        <span>narrow to wide glyphs, one 14 px frame each</span>
+      </div>
+      <ul className="flex flex-col gap-1">
+        <li>
+          <Icon icon={faEllipsisV} /> icons line up
+        </li>
+        <li>
+          <Icon icon={faUser} /> in lists and menus
+        </li>
+        <li>
+          <Icon icon={faArrowsLeftRightToLine} /> whatever their shape
+        </li>
+      </ul>
+    </div>
+  ),
+};
+
+export const Picture: Story = {
+  render: () => (
+    <div className="flex items-end gap-6 text-xs">
+      <div className="flex flex-col items-center gap-1">
+        <Icon icon={faCheck} />
+        default
+      </div>
+      <div className="flex flex-col items-center gap-1">
+        <Icon icon={faCheck} className="size-[30px] text-green" />
+        size-[30px], a picture
+      </div>
+    </div>
+  ),
+};
+
+export const InheritsColor: Story = {
+  render: () => (
+    <div className="flex items-center gap-6 text-sm">
+      <span className="text-gray-500">
+        <Icon icon={faUser} /> muted text
+      </span>
+      <span className="text-red">
+        <Icon icon={faTrash} /> danger text
+      </span>
+      <PrimaryButton>
+        <Icon icon={faCheck} /> inside a button
+      </PrimaryButton>
+      <IconButton frame icon={faTrash} red>
+        red icon button
+      </IconButton>
+    </div>
+  ),
+};
+
+export const Spinner: Story = {
+  render: () => <Icon icon={faSpinner} />,
+};
diff --git a/frontend/src/js/ui-components/Icon.tsx b/frontend/src/js/ui-components/Icon.tsx
new file mode 100644
index 0000000000..97b32053cf
--- /dev/null
+++ b/frontend/src/js/ui-components/Icon.tsx
@@ -0,0 +1,34 @@
+import { config } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import type { ComponentProps } from "react";
+import { type ClassValue, tv } from "tailwind-variants";
+
+// Font Awesome's stylesheet is imported in index.css into tailwind's base
+// layer, so size utilities apply to icons. Keep it from injecting a second,
+// unlayered copy.
+config.autoAddCss = false;
+
+const icon = tv({
+  base: [
+    // one square frame for all icons; a picture-like icon overrides it with a size-* class
+    "size-3.5 shrink-0",
+    "[&.fa-spinner]:animate-spin-fast",
+  ],
+});
+
+/**
+ * Font Awesome icon in the app's frame.
+ *
+ * - frame: 14 by 14 px, the glyph centered in it, so icons line up in
+ *   rows, lists and menus regardless of glyph shape. Override with a
+ *   `size-*` class only where the icon is a picture (empty states, big
+ *   status marks).
+ * - color: `currentColor`, inherited from the surrounding text. A button
+ *   colors its icon through its own text color.
+ */
+export const Icon = ({
+  className,
+  ...props
+}: Omit<ComponentProps<typeof FontAwesomeIcon>, "className"> & {
+  className?: ClassValue;
+}) => <FontAwesomeIcon className={icon({ className })} {...props} />;
diff --git a/frontend/src/js/ui-components/InfoTooltip.tsx b/frontend/src/js/ui-components/InfoTooltip.tsx
index 28b3506533..14e85e5c79 100644
--- a/frontend/src/js/ui-components/InfoTooltip.tsx
+++ b/frontend/src/js/ui-components/InfoTooltip.tsx
@@ -2,7 +2,7 @@ import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons";
 import type { ReactElement } from "react";
 import { tv } from "tailwind-variants";
 
-import FaIcon from "../icon/FaIcon";
+import { Icon } from "./Icon";
 
 import {
   Tooltip,
@@ -35,7 +35,7 @@ const InfoTooltip = ({
         aria-label="Info"
         className={spanContainer({ className })}
       >
-        <FaIcon className={icon()} gray icon={faQuestionCircle} />
+        <Icon icon={faQuestionCircle} className={[icon(), "text-gray-500"]} />
       </TooltipTarget>
       <Tooltip wide={wide}>
         {text ? (
diff --git a/frontend/src/js/ui-components/InputCheckbox.tsx b/frontend/src/js/ui-components/InputCheckbox.tsx
index 6674c4d230..b9b9fab31f 100644
--- a/frontend/src/js/ui-components/InputCheckbox.tsx
+++ b/frontend/src/js/ui-components/InputCheckbox.tsx
@@ -1,7 +1,7 @@
 import { faCheck } from "@fortawesome/free-solid-svg-icons";
 import { tv } from "tailwind-variants";
 import { exists } from "../common/helpers/exists";
-import FaIcon from "../icon/FaIcon";
+import { Icon } from "./Icon";
 import InfoTooltip from "./InfoTooltip";
 import {
   Tooltip,
@@ -79,7 +79,7 @@ const InputCheckbox = ({
       >
         {!!value && (
           <div className={checkmark()}>
-            <FaIcon icon={faCheck} className={checkmarkIcon()} />
+            <Icon icon={faCheck} className={checkmarkIcon()} />
           </div>
         )}
       </TooltipTarget>
diff --git a/frontend/src/js/ui-components/InputDateRange.tsx b/frontend/src/js/ui-components/InputDateRange.tsx
index e3240f53df..53611c0fde 100644
--- a/frontend/src/js/ui-components/InputDateRange.tsx
+++ b/frontend/src/js/ui-components/InputDateRange.tsx
@@ -13,7 +13,7 @@ import {
   parseDateToState,
 } from "../common/helpers/dateHelper";
 import { exists } from "../common/helpers/exists";
-import FaIcon from "../icon/FaIcon";
+import { Icon } from "./Icon";
 import InfoTooltip from "./InfoTooltip";
 
 import InputDate from "./InputDate/InputDate";
@@ -171,7 +171,7 @@ const InputDateRange = ({
 
     return (
       <Label large={large}>
-        <FaIcon icon={faCalendar} left gray />
+        <Icon icon={faCalendar} className="mr-[10px] text-gray-500" />
         {exists(indexPrefix) && <IndexPrefix># {indexPrefix}</IndexPrefix>}
         {label}
         <InfoTooltip
diff --git a/frontend/src/js/ui-components/InputMultiSelect/InputMultiSelect.tsx b/frontend/src/js/ui-components/InputMultiSelect/InputMultiSelect.tsx
index fc565154b9..3a6cc062f2 100644
--- a/frontend/src/js/ui-components/InputMultiSelect/InputMultiSelect.tsx
+++ b/frontend/src/js/ui-components/InputMultiSelect/InputMultiSelect.tsx
@@ -12,8 +12,8 @@ import type { SelectOptionT } from "../../api/types";
 import { exists } from "../../common/helpers/exists";
 import { getFileRows } from "../../common/helpers/fileHelper";
 import { useDebounce } from "../../common/helpers/useDebounce";
-import FaIcon from "../../icon/FaIcon";
 import DropzoneWithFileInput from "../DropzoneWithFileInput";
+import { Icon } from "../Icon";
 import InfoTooltip from "../InfoTooltip";
 import {
   Control,
@@ -318,7 +318,7 @@ const InputMultiSelect = ({
             }}
           />
         </ItemsInputContainer>
-        {loading && <FaIcon className="mx-[6px] my-[3px]" icon={faSpinner} />}
+        {loading && <Icon icon={faSpinner} className="mx-[6px] my-[3px]" />}
         {!loading && (inputValue.length > 0 || selectedItems.length > 0) && (
           <ResetButton
             icon={faTimes}
diff --git a/frontend/src/js/ui-components/Menu.stories.tsx b/frontend/src/js/ui-components/Menu.stories.tsx
index a438bcb2f0..b1ee3670da 100644
--- a/frontend/src/js/ui-components/Menu.stories.tsx
+++ b/frontend/src/js/ui-components/Menu.stories.tsx
@@ -9,10 +9,9 @@ import { MenuTrigger } from "react-aria-components";
 
 import IconButton from "../button/IconButton";
 import { TransparentButton } from "../button/TransparentButton";
-import FaIcon from "../icon/FaIcon";
-
 import { ConfirmMenu } from "./ConfirmMenu";
-import { Menu, MenuItem, menuItemIcon } from "./Menu";
+import { Icon } from "./Icon";
+import { Menu, MenuItem } from "./Menu";
 import { Tooltip, TooltipTrigger } from "./Tooltip";
 
 export default {
@@ -29,28 +28,17 @@ export const Default: Story = {
       <IconButton frame icon={faEllipsisV} />
       <Menu aria-label="Actions" onAction={(key) => console.log(key)}>
         <MenuItem id="contact" href="mailto:someone@example.com">
-          <span className={menuItemIcon()}>
-            <FaIcon icon={faPaperPlane} />
-          </span>
-          A link item
+          <Icon icon={faPaperPlane} />A link item
         </MenuItem>
         <MenuItem id="manual">
-          <span className={menuItemIcon()}>
-            <FaIcon icon={faBook} />
-          </span>
+          <Icon icon={faBook} />
           An action item
         </MenuItem>
         <MenuItem id="disabled" isDisabled>
-          <span className={menuItemIcon()}>
-            <FaIcon icon={faTrash} />
-          </span>
-          A disabled item
+          <Icon icon={faTrash} />A disabled item
         </MenuItem>
         <MenuItem id="delete" danger>
-          <span className={menuItemIcon()}>
-            <FaIcon icon={faTrash} />
-          </span>
-          A dangerous item
+          <Icon icon={faTrash} />A dangerous item
         </MenuItem>
       </Menu>
     </MenuTrigger>
diff --git a/frontend/src/js/ui-components/Menu.tsx b/frontend/src/js/ui-components/Menu.tsx
index 41de0d215d..894e2cffac 100644
--- a/frontend/src/js/ui-components/Menu.tsx
+++ b/frontend/src/js/ui-components/Menu.tsx
@@ -38,16 +38,10 @@ const menuItem = tv({
     "transition-[opacity,background-color] duration-100",
   ],
   variants: {
-    // the svg selector beats the colour FaIcon still sets on itself
-    danger: { true: "text-red [&_svg]:text-red" },
+    danger: { true: "text-red" },
   },
 });
 
-/** Fixed-width box so icons of different widths keep the labels aligned. */
-export const menuItemIcon = tv({
-  base: ["inline-flex justify-center", "w-4 shrink-0"],
-});
-
 /**
  * A list of actions or links that opens next to its trigger, composed the way
  * react-aria does it. The popover is part of the Menu:
diff --git a/frontend/src/js/ui-components/Tooltip.stories.tsx b/frontend/src/js/ui-components/Tooltip.stories.tsx
index a2af1acc06..e8a01b298b 100644
--- a/frontend/src/js/ui-components/Tooltip.stories.tsx
+++ b/frontend/src/js/ui-components/Tooltip.stories.tsx
@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import IconButton from "../button/IconButton";
 import PrimaryButton from "../button/PrimaryButton";
 import { TransparentButton } from "../button/TransparentButton";
-import FaIcon from "../icon/FaIcon";
+import { Icon } from "./Icon";
 
 import {
   Tooltip,
@@ -72,7 +72,7 @@ export const Timing: Story = {
       </TooltipTrigger>
       <TooltipTrigger delay={tooltipDelay.immediate}>
         <TooltipTarget role="img" aria-label="Info">
-          <FaIcon gray icon={faInfoCircle} />
+          <Icon icon={faInfoCircle} className="text-gray-500" />
         </TooltipTarget>
         <Tooltip>Help icons open immediately</Tooltip>
       </TooltipTrigger>
@@ -104,7 +104,7 @@ export const OnStaticContent: Story = {
     <div className="flex items-center gap-4 text-sm">
       <TooltipTrigger delay={tooltipDelay.immediate}>
         <TooltipTarget role="img" aria-label="Info">
-          <FaIcon gray icon={faInfoCircle} />
+          <Icon icon={faInfoCircle} className="text-gray-500" />
         </TooltipTarget>
         <Tooltip>An icon that is reachable with the keyboard</Tooltip>
       </TooltipTrigger>
diff --git a/frontend/src/js/upload-concept-list-modal/DropdownOption.tsx b/frontend/src/js/upload-concept-list-modal/DropdownOption.tsx
index 1368ee475d..c77a145315 100644
--- a/frontend/src/js/upload-concept-list-modal/DropdownOption.tsx
+++ b/frontend/src/js/upload-concept-list-modal/DropdownOption.tsx
@@ -5,7 +5,7 @@ import { tv } from "tailwind-variants";
 
 import { IndexPrefix } from "../common/components/IndexPrefix";
 import { exists } from "../common/helpers/exists";
-import FaIcon from "../icon/FaIcon";
+import { Icon } from "../ui-components/Icon";
 
 const container = tv({
   base: [
@@ -54,10 +54,12 @@ export const DropdownOption = memo(
           {hasDifferentFilterLabel ? (
             <IndexPrefix className={indexPrefix()}># {filterIdx}</IndexPrefix>
           ) : (
-            <FaIcon
+            <Icon
               icon={faFolder}
-              active={!hasDifferentFilterLabel}
-              gray={hasDifferentFilterLabel}
+              className={[
+                !hasDifferentFilterLabel ? "text-primary-500" : undefined,
+                hasDifferentFilterLabel ? "text-gray-500" : undefined,
+              ]}
             />
           )}
         </div>
diff --git a/frontend/src/js/upload-concept-list-modal/UploadConceptListModal.tsx b/frontend/src/js/upload-concept-list-modal/UploadConceptListModal.tsx
index 83bff85381..b9da121590 100644
--- a/frontend/src/js/upload-concept-list-modal/UploadConceptListModal.tsx
+++ b/frontend/src/js/upload-concept-list-modal/UploadConceptListModal.tsx
@@ -30,10 +30,10 @@ import type {
 } from "../api/types";
 import type { StateT } from "../app/reducers";
 import PrimaryButton from "../button/PrimaryButton";
-import FaIcon from "../icon/FaIcon";
 import Modal from "../modal/Modal";
 import { nodeIsElement } from "../model/node";
 import ScrollableList from "../scrollable-list/ScrollableList";
+import { Icon } from "../ui-components/Icon";
 import InputCheckbox from "../ui-components/InputCheckbox";
 import InputPlain from "../ui-components/InputPlain/InputPlain";
 import InputSelect from "../ui-components/InputSelect/InputSelect";
@@ -494,22 +494,22 @@ const UploadConceptListModal = ({
         <div className="mt-[15px] grid gap-5">
           {error && (
             <div className="flex items-center">
-              <FaIcon
-                className={bigIcon({ kind: "error" })}
+              <Icon
                 icon={faExclamationCircle}
+                className={bigIcon({ kind: "error" })}
               />
               {t("uploadConceptListModal.error")}
             </div>
           )}
-          {loading && <FaIcon className="text-center" icon={faSpinner} />}
+          {loading && <Icon icon={faSpinner} className="text-center" />}
           {(!!resolvedConcepts || !!resolvedFilters) && (
             <>
               {hasUnresolvedItems && (
                 <div>
                   <p className="m-0">
-                    <FaIcon
-                      className={bigIcon({ kind: "error" })}
+                    <Icon
                       icon={faExclamationCircle}
+                      className={bigIcon({ kind: "error" })}
                     />
                     <span>
                       {t("uploadConceptListModal.unknownCodes", {
@@ -537,9 +537,9 @@ const UploadConceptListModal = ({
                 <div>
                   {hasResolvedItems && (
                     <>
-                      <FaIcon
-                        className={bigIcon({ kind: "success" })}
+                      <Icon
                         icon={faCheckCircle}
+                        className={bigIcon({ kind: "success" })}
                       />
                       {t("uploadConceptListModal.resolvedCodes", {
                         count: resolvedItemsCount,