diff --git a/frontend/src/index.css b/frontend/src/index.css
index 2697573042..a2056fbc15 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -25,12 +25,19 @@
   --color-filetype-xlsx: #28a745;
   --color-filetype-json: #1f5f30;
 
-  /* `text-tiny`; the other sizes map onto tailwind defaults:
-     xs 12px, sm 14px, base 16px, xl 20px, 2xl 24px */
-  --text-tiny: 11px;
+  /* Font size only, line-height stays inherited (as the old theme did it).
+     Only tailwind's own sizes, anything else is a literal like `text-[11px]` */
+  --text-xs--line-height: initial;
+  --text-sm--line-height: initial;
+  --text-base--line-height: initial;
+  --text-lg--line-height: initial;
+  --text-xl--line-height: initial;
+  --text-2xl--line-height: initial;
 
   /* bare `rounded` */
   --radius: 3px;
+
+  --animate-spin-fast: spin 0.5s linear infinite;
 }
 
 @layer base {
diff --git a/frontend/src/js/button/BadgeToggleButton.tsx b/frontend/src/js/button/BadgeToggleButton.tsx
index c8823e480e..ae8ad3f3ce 100644
--- a/frontend/src/js/button/BadgeToggleButton.tsx
+++ b/frontend/src/js/button/BadgeToggleButton.tsx
@@ -1,47 +1,37 @@
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
 import type { ReactNode } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 
-import BasicButton from "./BasicButton";
-
-const common = css`
-  font-weight: 700;
-  padding: 1px 4px;
-  white-space: nowrap;
-`;
-
-const ActiveButton = styled(BasicButton)`
-  border-radius: ${({ theme }) => theme.borderRadius};
-  border: 2px solid ${({ theme }) => theme.col.blueGrayDark};
-  background-color: white;
-  font-size: ${({ theme }) => theme.font.sm};
-  color: ${({ theme }) => theme.col.blueGrayDark};
-  ${common};
+import { tv } from "tailwind-variants";
 
-  &:hover {
-    background-color: ${({ theme }) => theme.col.grayVeryLight};
-  }
-`;
-
-const InactiveButton = styled(BasicButton)`
-  border-radius: ${({ theme }) => theme.borderRadius};
-  border: 2px dotted ${({ theme }) => theme.col.grayLight};
-  font-size: ${({ theme }) => theme.font.sm};
-  color: ${({ theme }) => theme.col.gray};
-  ${common};
-  &:hover {
-    background-color: ${({ theme }) => theme.col.bg};
-  }
-`;
+import BasicButton from "./BasicButton";
 
-const SuperScript = styled("span")`
-  padding-left: 3px;
-  font-size: ${({ theme }) => theme.font.tiny};
-  transform: translate(1px, -2px);
-  display: inline-block;
-  color: ${({ theme }) => theme.col.gray};
-`;
+const badgeToggleButton = tv({
+  base: ["rounded", "px-1 py-px", "text-sm", "font-bold", "whitespace-nowrap"],
+  variants: {
+    active: {
+      true: [
+        "border-2 border-primary-500",
+        "bg-white hover:bg-gray-50",
+        "text-primary-500",
+      ],
+      false: [
+        "border-2 border-dotted border-gray-100",
+        "hover:bg-bg-50",
+        "text-gray-500",
+      ],
+    },
+  },
+});
+
+const superScript = tv({
+  base: [
+    "inline-block",
+    "pl-[3px]",
+    "translate-x-px -translate-y-[2px]",
+    "text-[11px]",
+    "text-gray-500",
+  ],
+});
 
 interface Props {
   className?: string;
@@ -58,15 +48,16 @@ export const BadgeToggleButton = ({
   children,
   hotkey,
 }: Props) => {
-  const Component = active ? ActiveButton : InactiveButton;
-
   useHotkeys(hotkey || "", onClick, { enabled: !!hotkey }, [hotkey, onClick]);
 
   return (
-    <Component className={className} onClick={onClick}>
+    <BasicButton
+      className={badgeToggleButton({ active: !!active, className })}
+      onClick={onClick}
+    >
       {!active && "+ "}
       {children}
-      {hotkey && <SuperScript>{hotkey}</SuperScript>}
-    </Component>
+      {hotkey && <span className={superScript()}>{hotkey}</span>}
+    </BasicButton>
   );
 };
diff --git a/frontend/src/js/button/BasicButton.tsx b/frontend/src/js/button/BasicButton.tsx
index 2a6ae5558c..11a999fb65 100644
--- a/frontend/src/js/button/BasicButton.tsx
+++ b/frontend/src/js/button/BasicButton.tsx
@@ -1,6 +1,7 @@
-import styled from "@emotion/styled";
 import type { ButtonHTMLAttributes, Ref } from "react";
 
+import { tv } from "tailwind-variants";
+
 export interface BasicButtonProps
   extends ButtonHTMLAttributes<HTMLButtonElement> {
   bare?: boolean;
@@ -9,42 +10,54 @@ export interface BasicButtonProps
   large?: boolean;
   active?: boolean;
   secondary?: boolean;
-  autoFocus?: boolean; // Should actually be within the extends, not sure why I had to declare this.
 }
 
-const Button = styled("button")<BasicButtonProps>`
-  cursor: pointer;
-  font-weight: ${({ active, secondary }) =>
-    active || secondary ? "700" : "400"};
-  padding: ${({ small, tiny, bare, large }) =>
-    bare
-      ? "0"
-      : tiny
-        ? "4px 6px"
-        : small
-          ? "6px 8px"
-          : large
-            ? "12px 18px"
-            : "8px 15px"};
-  font-size: ${({ theme, small, tiny, large }) =>
-    tiny || small ? theme.font.xs : large ? theme.font.lg : theme.font.sm};
-  transition: all 0.2s;
-  border-radius: ${({ theme }) => theme.borderRadius};
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.4;
-  }
-`;
+const button = tv({
+  base: [
+    "cursor-pointer",
+    "rounded",
+    "px-[15px] py-2",
+    "text-sm",
+    "font-normal",
+    "transition-all duration-200",
+    "disabled:cursor-not-allowed disabled:opacity-40",
+  ],
+  variants: {
+    active: { true: "font-bold" },
+    secondary: { true: "font-bold" },
+    // later wins when several are set
+    large: { true: "px-[18px] py-3 text-xl" },
+    small: { true: "px-2 py-[6px] text-xs" },
+    tiny: { true: "px-[6px] py-1 text-xs" },
+    bare: { true: "p-0" },
+  },
+});
 
 const BasicButton = ({
   ref,
-  children,
+  className,
+  bare,
+  tiny,
+  small,
+  large,
+  active,
+  secondary,
   ...props
 }: BasicButtonProps & { ref?: Ref<HTMLButtonElement> }) => (
-  <Button type="button" {...props} ref={ref}>
-    {children}
-  </Button>
+  <button
+    type="button"
+    className={button({
+      bare,
+      tiny,
+      small,
+      large,
+      active,
+      secondary,
+      className,
+    })}
+    {...props}
+    ref={ref}
+  />
 );
 
 export default BasicButton;
diff --git a/frontend/src/js/button/DestroyButton.tsx b/frontend/src/js/button/DestroyButton.tsx
index e7613b2356..d9328c4f18 100644
--- a/frontend/src/js/button/DestroyButton.tsx
+++ b/frontend/src/js/button/DestroyButton.tsx
@@ -1,16 +1,20 @@
-import styled from "@emotion/styled";
+import type { ComponentProps } from "react";
+
+import { tv } from "tailwind-variants";
 
 import { TransparentButton } from "./TransparentButton";
 
-export const DestroyButton = styled(TransparentButton)`
-  color: ${({ theme }) => theme.col.red};
-  border: 2px solid ${({ theme }) => theme.col.red};
+const destroyButton = tv({
+  base: [
+    "text-red hover:text-white active:text-white focus:text-white",
+    "border-2 border-red",
+    "hover:bg-red active:bg-red focus:bg-red",
+  ],
+});
 
-  &:hover,
-  &:active,
-  &:focus {
-    color: white;
-    background-color: ${({ theme }) => theme.col.red};
-    border: 2px solid ${({ theme }) => theme.col.red};
-  }
-`;
+export const DestroyButton = ({
+  className,
+  ...props
+}: ComponentProps<typeof TransparentButton>) => (
+  <TransparentButton className={destroyButton({ className })} {...props} />
+);
diff --git a/frontend/src/js/button/DownloadButton.tsx b/frontend/src/js/button/DownloadButton.tsx
index 0b11f02789..a5e731f654 100644
--- a/frontend/src/js/button/DownloadButton.tsx
+++ b/frontend/src/js/button/DownloadButton.tsx
@@ -1,5 +1,3 @@
-import { useTheme } from "@emotion/react";
-import styled from "@emotion/styled";
 import type { IconProp } from "@fortawesome/fontawesome-svg-core";
 import {
   faDownload,
@@ -10,41 +8,30 @@ import {
   faFileExcel,
   faFilePdf,
 } from "@fortawesome/free-solid-svg-icons";
-import { type ReactNode, type Ref, useContext, useMemo } from "react";
-
+import { type ReactNode, type Ref, useContext } from "react";
+import { tv } from "tailwind-variants";
 import type { ResultUrlWithLabel } from "../api/types";
 import { AuthTokenContext } from "../authorization/AuthTokenProvider";
 import { getEnding } from "../query-runner/DownloadResultsDropdownButton";
 
 import IconButton, { type IconButtonPropsT } from "./IconButton";
 
-const SxIconButton = styled(IconButton)`
-  white-space: nowrap;
-`;
-
-const Link = styled("a")`
-  line-height: 1;
-`;
+const link = tv({ base: "leading-none" });
 
 interface FileIcon {
   icon: IconProp;
   color?: string;
 }
 
-function useFileIcon(url: string): FileIcon {
-  const theme = useTheme();
-
-  const fileTypeToFileIcon: Record<string, FileIcon> = useMemo(
-    () => ({
-      ZIP: { icon: faFileArchive, color: theme.col.fileTypes.zip },
-      XLSX: { icon: faFileExcel, color: theme.col.fileTypes.xlsx },
-      PDF: { icon: faFilePdf, color: theme.col.fileTypes.pdf },
-      CSV: { icon: faFileCsv, color: theme.col.fileTypes.csv },
-      JSON: { icon: faFileCode, color: theme.col.fileTypes.json },
-    }),
-    [theme],
-  );
+const fileTypeToFileIcon: Record<string, FileIcon> = {
+  ZIP: { icon: faFileArchive, color: "var(--color-filetype-zip)" },
+  XLSX: { icon: faFileExcel, color: "var(--color-filetype-xlsx)" },
+  PDF: { icon: faFilePdf, color: "var(--color-filetype-pdf)" },
+  CSV: { icon: faFileCsv, color: "var(--color-filetype-csv)" },
+  JSON: { icon: faFileCode, color: "var(--color-filetype-json)" },
+};
 
+function getFileIcon(url: string): FileIcon {
   if (url.includes(".")) {
     const ext = getEnding(url);
 
@@ -79,20 +66,21 @@ const DownloadButton = ({
 
   const href = `${resultUrl.url}?access_token=${encodeURIComponent(authToken)}`;
 
-  const { icon, color } = useFileIcon(resultUrl.url);
+  const { icon, color } = getFileIcon(resultUrl.url);
 
   return (
-    <Link href={href} className={className} ref={ref}>
-      <SxIconButton
+    <a href={href} className={link({ className })} ref={ref}>
+      <IconButton
         {...restProps}
+        className="whitespace-nowrap"
         large
         icon={simpleIcon ? faDownload : icon}
         onClick={onClick}
         iconColor={showColoredIcon ? color : undefined}
       >
         {children}
-      </SxIconButton>
-    </Link>
+      </IconButton>
+    </a>
   );
 };
 
diff --git a/frontend/src/js/button/IconButton.tsx b/frontend/src/js/button/IconButton.tsx
index 987fc92394..ae77c50e1b 100644
--- a/frontend/src/js/button/IconButton.tsx
+++ b/frontend/src/js/button/IconButton.tsx
@@ -1,92 +1,45 @@
-import styled from "@emotion/styled";
 import type { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { memo, type Ref, useMemo } from "react";
-
-import FaIcon, { type FaIconPropsT, type IconStyleProps } from "../icon/FaIcon";
+import { tv } from "tailwind-variants";
+import FaIcon, { type IconStyleProps } from "../icon/FaIcon";
 
 import BasicButton, { type BasicButtonProps } from "./BasicButton";
 
-interface StyledFaIconProps extends FaIconPropsT {
-  tight?: boolean;
-  red?: boolean;
-  secondary?: boolean;
-  hasChildren: boolean;
-  iconColor?: string;
-}
-
-const SxFaIcon = styled(FaIcon)<StyledFaIconProps>`
-  color: ${({ theme, active, red, secondary, light, iconColor }) =>
-    iconColor
-      ? iconColor
-      : red
-        ? theme.col.red
-        : active
-          ? theme.col.blueGrayDark
-          : light
-            ? theme.col.gray
-            : secondary
-              ? theme.col.orange
-              : theme.col.black};
-  font-size: ${({ theme, large, small }) =>
-    large ? theme.font.md : small ? theme.font.xs : theme.font.sm};
-`;
-
-const FixedIconContainer = styled("span")`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  display: inline-block;
-`;
-
-const SxBasicButton = styled(BasicButton)<{
-  frame?: boolean;
-  active?: boolean;
-  secondary?: boolean;
-  tight?: boolean;
-  bgHover?: boolean;
-  red?: boolean;
-  large?: boolean;
-}>`
-  background-color: transparent;
-  color: ${({ theme, active, secondary, red }) =>
-    red
-      ? theme.col.red
-      : active
-        ? theme.col.blueGrayDark
-        : secondary
-          ? theme.col.orange
-          : theme.col.black};
-  opacity: ${({ frame }) => (frame ? 1 : 0.75)};
-  transition:
-    opacity ${({ theme }) => theme.transitionTime},
-    background-color ${({ theme }) => theme.transitionTime};
-
-  border-radius: ${({ theme }) => theme.borderRadius};
-  border: ${({ theme, frame }) =>
-    frame ? `1px solid ${theme.col.gray}` : "none"};
-  display: inline-flex;
-  align-items: center;
-  gap: ${({ tight }) => (tight ? "5px" : "10px")};
-  font-size: ${({ theme, large }) => (large ? theme.font.md : theme.font.sm)};
-  &:hover {
-    opacity: 1;
-
-    background-color: ${({ frame, bgHover, theme }) =>
-      frame || bgHover ? theme.col.bgAlt : " inherit"};
-  }
+const iconButton = tv({
+  base: [
+    "inline-flex items-center",
+    "gap-[10px]",
+    "rounded",
+    "bg-transparent",
+    "text-sm",
+    "text-gray-800",
+    "opacity-75 hover:opacity-100 disabled:hover:opacity-40",
+    "transition-[opacity,background-color] duration-100",
+  ],
+  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" },
+    bgHover: { true: "hover:bg-bg-100" },
+    tight: { true: "gap-[5px]" },
+    large: { true: "text-base" },
+  },
+});
 
-  &:disabled {
-    &:hover {
-      opacity: 0.4;
-    }
-  }
-`;
-
-const Children = styled("span")`
-  display: flex;
-  align-items: center;
-  gap: 5px;
-`;
+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;
@@ -123,31 +76,36 @@ const IconButton = ({
   fixedIconWidth,
   bgHover,
   iconColor,
+  frame,
+  className,
   ...restProps
 }: IconButtonPropsT & { ref?: Ref<HTMLButtonElement> }) => {
   const iconElement = useMemo(() => {
     const iconEl = (
-      <SxFaIcon
-        main
+      <FaIcon
         left={left}
-        large={large}
-        active={active}
-        red={red}
-        secondary={secondary}
         icon={icon}
-        hasChildren={!!children}
-        tight={tight}
-        small={small}
-        light={light}
-        iconColor={iconColor}
         {...iconProps}
+        className={buttonIcon({
+          secondary,
+          light,
+          active,
+          red,
+          small,
+          large,
+        })}
+        style={
+          iconColor
+            ? { color: iconColor, ...iconProps?.style }
+            : iconProps?.style
+        }
       />
     );
 
     return fixedIconWidth ? (
-      <FixedIconContainer style={{ width: fixedIconWidth }}>
+      <span className="inline-block" style={{ width: fixedIconWidth }}>
         {iconEl}
-      </FixedIconContainer>
+      </span>
     ) : (
       iconEl
     );
@@ -157,8 +115,6 @@ const IconButton = ({
     red,
     large,
     left,
-    children,
-    tight,
     iconProps,
     small,
     secondary,
@@ -166,20 +122,30 @@ const IconButton = ({
     fixedIconWidth,
     iconColor,
   ]);
+
   return (
-    <SxBasicButton
+    <BasicButton
       active={active}
       secondary={secondary}
-      tight={tight}
-      bgHover={bgHover}
-      red={red}
       large={large}
       {...restProps}
+      className={iconButton({
+        secondary,
+        active,
+        red,
+        frame,
+        bgHover,
+        tight,
+        large,
+        className,
+      })}
       ref={ref}
     >
       {iconElement}
-      {children && <Children>{children}</Children>}
-    </SxBasicButton>
+      {children && (
+        <span className="flex items-center gap-[5px]">{children}</span>
+      )}
+    </BasicButton>
   );
 };
 
diff --git a/frontend/src/js/button/PreviewButton.tsx b/frontend/src/js/button/PreviewButton.tsx
index 8cad2c8461..c1e792fefd 100644
--- a/frontend/src/js/button/PreviewButton.tsx
+++ b/frontend/src/js/button/PreviewButton.tsx
@@ -1,4 +1,3 @@
-import styled from "@emotion/styled";
 import {
   faMagnifyingGlass,
   faSpinner,
@@ -6,17 +5,19 @@ import {
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
+import { tv } from "tailwind-variants";
 import type { StateT } from "../app/reducers";
 import { openPreview, useLoadPreviewData } from "../preview/actions";
 import IconButton, { type IconButtonPropsT } from "./IconButton";
 
-const Button = styled(IconButton)`
-  white-space: nowrap;
-  height: 35px;
-  padding: 5px 12px;
-`;
+const previewButton = tv({
+  base: ["whitespace-nowrap", "h-[35px]", "px-3 py-[5px]"],
+});
 
-const PreviewButton = (buttonProps: Partial<IconButtonPropsT>) => {
+const PreviewButton = ({
+  className,
+  ...buttonProps
+}: Partial<IconButtonPropsT>) => {
   const { t } = useTranslation();
   const dispatch = useDispatch();
 
@@ -32,7 +33,8 @@ const PreviewButton = (buttonProps: Partial<IconButtonPropsT>) => {
   );
 
   return (
-    <Button
+    <IconButton
+      className={previewButton({ className })}
       frame
       icon={icon}
       onClick={async () => {
@@ -48,7 +50,7 @@ const PreviewButton = (buttonProps: Partial<IconButtonPropsT>) => {
       {...buttonProps}
     >
       {t("preview.preview")}
-    </Button>
+    </IconButton>
   );
 };
 
diff --git a/frontend/src/js/button/PrimaryButton.tsx b/frontend/src/js/button/PrimaryButton.tsx
index 2e4780c39e..34ece7cc0e 100644
--- a/frontend/src/js/button/PrimaryButton.tsx
+++ b/frontend/src/js/button/PrimaryButton.tsx
@@ -1,14 +1,23 @@
-import styled from "@emotion/styled";
+import type { Ref } from "react";
 
-import BasicButton from "./BasicButton";
+import { tv } from "tailwind-variants";
 
-export default styled(BasicButton)`
-  color: white;
-  background-color: ${({ theme }) => theme.col.blueGrayDark};
-  background-clip: padding-box;
-  border: 1px solid ${({ theme }) => theme.col.blueGrayDark};
+import BasicButton, { type BasicButtonProps } from "./BasicButton";
 
-  &:hover {
-    opacity: 0.9;
-  }
-`;
+const primaryButton = tv({
+  base: [
+    "text-white",
+    "bg-primary-500 bg-clip-padding",
+    "border border-primary-500",
+    "hover:opacity-90",
+  ],
+});
+
+const PrimaryButton = ({
+  className,
+  ...props
+}: BasicButtonProps & { ref?: Ref<HTMLButtonElement> }) => (
+  <BasicButton className={primaryButton({ className })} {...props} />
+);
+
+export default PrimaryButton;
diff --git a/frontend/src/js/button/QueryResultHistoryButton.tsx b/frontend/src/js/button/QueryResultHistoryButton.tsx
index d3145734f4..3491c2300f 100644
--- a/frontend/src/js/button/QueryResultHistoryButton.tsx
+++ b/frontend/src/js/button/QueryResultHistoryButton.tsx
@@ -1,4 +1,3 @@
-import styled from "@emotion/styled";
 import { faListUl, faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
@@ -8,11 +7,6 @@ import { useGetAuthorizedUrl } from "../authorization/useAuthorizedUrl";
 import { openHistory, useNewHistorySession } from "../entity-history/actions";
 import IconButton from "./IconButton";
 
-const SxIconButton = styled(IconButton)`
-  white-space: nowrap;
-  height: 35px;
-`;
-
 export const QueryResultHistoryButton = ({
   url,
   label,
@@ -32,7 +26,8 @@ export const QueryResultHistoryButton = ({
   const newHistorySession = useNewHistorySession();
 
   return (
-    <SxIconButton
+    <IconButton
+      className="h-[35px] whitespace-nowrap"
       icon={isLoading ? faSpinner : faListUl}
       frame
       onClick={async () => {
@@ -41,6 +36,6 @@ export const QueryResultHistoryButton = ({
       }}
     >
       {t("history.history")}
-    </SxIconButton>
+    </IconButton>
   );
 };
diff --git a/frontend/src/js/button/SelectFileButton.tsx b/frontend/src/js/button/SelectFileButton.tsx
index d31269783e..15eee1b7fc 100644
--- a/frontend/src/js/button/SelectFileButton.tsx
+++ b/frontend/src/js/button/SelectFileButton.tsx
@@ -1,18 +1,25 @@
-import styled from "@emotion/styled";
+import type { Ref } from "react";
 
-import BasicButton from "./BasicButton";
+import { tv } from "tailwind-variants";
 
-export const SelectFileButton = styled(BasicButton)`
-  color: ${({ theme }) => theme.col.gray};
-  background-color: transparent;
-  font-weight: 300;
-  border: none;
-  font-size: ${({ theme }) => theme.font.tiny};
-  display: flex;
-  align-items: center;
-  gap: 5px;
+import BasicButton, { type BasicButtonProps } from "./BasicButton";
 
-  &:hover {
-    text-decoration: underline;
-  }
-`;
+const selectFileButton = tv({
+  base: [
+    "flex items-center",
+    "gap-[5px]",
+    "bg-transparent",
+    "border-0",
+    "text-[11px]",
+    "text-gray-500",
+    "font-light",
+    "hover:underline",
+  ],
+});
+
+export const SelectFileButton = ({
+  className,
+  ...props
+}: BasicButtonProps & { ref?: Ref<HTMLButtonElement> }) => (
+  <BasicButton className={selectFileButton({ className })} {...props} />
+);
diff --git a/frontend/src/js/button/TransparentButton.tsx b/frontend/src/js/button/TransparentButton.tsx
index 3c5632274d..27519c7fb6 100644
--- a/frontend/src/js/button/TransparentButton.tsx
+++ b/frontend/src/js/button/TransparentButton.tsx
@@ -1,20 +1,25 @@
-import styled from "@emotion/styled";
+import type { Ref } from "react";
 
-import BasicButton from "./BasicButton";
+import { tv } from "tailwind-variants";
 
-export const TransparentButton = styled(BasicButton)<{ light?: boolean }>`
-  color: ${({ theme, light }) => (light ? theme.col.gray : theme.col.black)};
-  background-color: transparent;
-  border-radius: ${({ theme }) => theme.borderRadius};
-  border: 1px solid
-    ${({ theme, light }) => (light ? theme.col.grayLight : theme.col.gray)};
+import BasicButton, { type BasicButtonProps } from "./BasicButton";
 
-  &:hover {
-    background-color: ${({ theme }) => theme.col.grayVeryLight};
-  }
+const transparentButton = tv({
+  base: [
+    "rounded",
+    "bg-transparent hover:bg-gray-50 focus:bg-gray-50",
+    "border border-gray-500 focus:border-green",
+    "text-gray-800",
+  ],
+  variants: {
+    light: { true: "border-gray-100 text-gray-500" },
+  },
+});
 
-  &:focus {
-    border: 1px solid ${({ theme }) => theme.col.green};
-    background-color: ${({ theme }) => theme.col.grayVeryLight};
-  }
-`;
+export const TransparentButton = ({
+  className,
+  light,
+  ...props
+}: BasicButtonProps & { light?: boolean; ref?: Ref<HTMLButtonElement> }) => (
+  <BasicButton className={transparentButton({ light, className })} {...props} />
+);
diff --git a/frontend/src/js/editor-v2/TreeNode.tsx b/frontend/src/js/editor-v2/TreeNode.tsx
index 985f5504ef..cde8a0d0fe 100644
--- a/frontend/src/js/editor-v2/TreeNode.tsx
+++ b/frontend/src/js/editor-v2/TreeNode.tsx
@@ -5,7 +5,7 @@ import { type DOMAttributes, memo } from "react";
 import { useTranslation } from "react-i18next";
 
 import { DNDType } from "../common/constants/dndTypes";
-import { Icon } from "../icon/FaIcon";
+import FaIcon from "../icon/FaIcon";
 import { nodeIsConceptQueryNode, useActiveState } from "../model/node";
 import { getRootNodeLabel } from "../standard-query-editor/helper";
 import type {
@@ -296,7 +296,7 @@ export function TreeNode({
                 )}
                 {tree.dates?.excluded && (
                   <Dates>
-                    <Icon red icon={faCalendarMinus} left />
+                    <FaIcon red icon={faCalendarMinus} left />
                     {t("editorV2.datesExcluded")}
                   </Dates>
                 )}
diff --git a/frontend/src/js/editor-v2/date-restriction/DateModal.tsx b/frontend/src/js/editor-v2/date-restriction/DateModal.tsx
index 6ae1ad9f65..eb20c96827 100644
--- a/frontend/src/js/editor-v2/date-restriction/DateModal.tsx
+++ b/frontend/src/js/editor-v2/date-restriction/DateModal.tsx
@@ -8,7 +8,7 @@ import { useTranslation } from "react-i18next";
 import type { DateRangeT } from "../../api/types";
 import IconButton from "../../button/IconButton";
 import type { DateStringMinMax } from "../../common/helpers/dateHelper";
-import { Icon } from "../../icon/FaIcon";
+import FaIcon from "../../icon/FaIcon";
 import Modal from "../../modal/Modal";
 import InputCheckbox from "../../ui-components/InputCheckbox";
 import InputDateRange from "../../ui-components/InputDateRange";
@@ -101,7 +101,7 @@ export const DateModal = ({
         />
         <div>
           <SectionHeadline>
-            <Icon icon={faCalendarMinus} red />
+            <FaIcon icon={faCalendarMinus} red />
             {t("queryNodeEditor.excludeTimestamps")}
             <InputCheckbox
               label=""
diff --git a/frontend/src/js/icon/FaIcon.tsx b/frontend/src/js/icon/FaIcon.tsx
index 98e88841cd..e50b2b6d11 100644
--- a/frontend/src/js/icon/FaIcon.tsx
+++ b/frontend/src/js/icon/FaIcon.tsx
@@ -1,10 +1,8 @@
-import isPropValid from "@emotion/is-prop-valid";
-import type { Theme } from "@emotion/react";
-import { keyframes } from "@emotion/react";
-import styled from "@emotion/styled";
 import type { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import type { Ref } from "react";
+import type { ComponentProps, Ref } from "react";
+
+import { tv } from "tailwind-variants";
 
 export interface IconStyleProps {
   left?: boolean;
@@ -20,7 +18,7 @@ export interface IconStyleProps {
   tiny?: boolean;
   large?: boolean;
   small?: boolean;
-  style?: React.CSSProperties;
+  style?: ComponentProps<typeof FontAwesomeIcon>["style"];
 }
 
 export interface FaIconPropsT extends IconStyleProps {
@@ -28,61 +26,72 @@ export interface FaIconPropsT extends IconStyleProps {
   className?: string;
 }
 
-const spin = keyframes`
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-`;
-
-const shouldForwardProp = (prop: keyof FaIconPropsT) =>
-  isPropValid(prop) || prop === "icon" || prop === "className";
+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 iconColor = (theme: Theme, props: IconStyleProps) => {
-  if (props.disabled) return theme.col.grayMediumLight;
-  if (props.red) return theme.col.red;
-  if (props.gray) return theme.col.gray;
-  if (props.active) return theme.col.blueGrayDark;
-  if (props.white) return "#fff";
-  if (props.light) return theme.col.blueGrayLight;
-  if (props.main) return theme.col.blueGray;
-  return theme.col.black;
+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;
 };
 
-// @ts-ignore TODO: Figure out how to avoid a type error with styled here
-export const Icon = styled(FontAwesomeIcon, {
-  shouldForwardProp,
-})<IconStyleProps>`
-  padding-right: ${({ left }) => (left ? "10px" : "0")};
-  padding-left: ${({ right }) => (right ? "10px" : "0")};
-  text-align: ${({ center }) => (center ? "center" : "left")};
-  font-size: ${({ theme, large, tiny }) =>
-    large ? theme.font.md : tiny ? theme.font.tiny : theme.font.sm};
-  color: ${({ theme, ...props }) => iconColor(theme, props)};
-  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "inherit")};
-  width: initial !important;
-
-  &.fa-spinner {
-    animation: ${spin} 0.5s linear 0s infinite;
-  }
-`;
-
 const FaIcon = ({
   ref,
-  icon,
+  icon: iconProp,
   className,
-  ...restProps
+  left,
+  center,
+  right,
+  white,
+  red,
+  light,
+  gray,
+  main,
+  active,
+  disabled,
+  tiny,
+  large,
+  small: _small, // only meaningful to IconButton
+  style,
 }: FaIconPropsT & { ref?: Ref<SVGSVGElement> }) => {
   return (
-    <Icon
-      // @ts-ignore TODO: ref is working, try fixing the type error
+    <FontAwesomeIcon
       ref={ref}
-      className={`fa-fw ${className}`}
-      icon={icon}
-      {...restProps}
+      className={icon({
+        left,
+        center,
+        right,
+        tiny,
+        large,
+        disabled,
+        className: [
+          colorClass({ white, red, light, gray, main, active, disabled }),
+          className,
+        ],
+      })}
+      icon={iconProp}
+      style={style}
     />
   );
 };
diff --git a/frontend/src/js/pane/TabNavigation.tsx b/frontend/src/js/pane/TabNavigation.tsx
index c2ac05ac21..a576b0a35d 100644
--- a/frontend/src/js/pane/TabNavigation.tsx
+++ b/frontend/src/js/pane/TabNavigation.tsx
@@ -1,6 +1,5 @@
 import styled from "@emotion/styled";
 import { faSpinner } from "@fortawesome/free-solid-svg-icons";
-
 import { tv } from "tailwind-variants";
 import FaIcon from "../icon/FaIcon";
 import { HoverNavigatable } from "../small-tab-navigation/HoverNavigatable";
diff --git a/frontend/src/js/previous-queries/upload/CSVColumnPicker.tsx b/frontend/src/js/previous-queries/upload/CSVColumnPicker.tsx
index 50550167e6..8c8d4af716 100644
--- a/frontend/src/js/previous-queries/upload/CSVColumnPicker.tsx
+++ b/frontend/src/js/previous-queries/upload/CSVColumnPicker.tsx
@@ -13,7 +13,6 @@ import type { TFunction } from "i18next";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { tv } from "tailwind-variants";
-
 import type { QueryUploadConfigT, UploadQueryResponseT } from "../../api/types";
 import IconButton from "../../button/IconButton";
 import PrimaryButton from "../../button/PrimaryButton";
diff --git a/frontend/src/js/ui-components/DropzoneWithFileInput.tsx b/frontend/src/js/ui-components/DropzoneWithFileInput.tsx
index 883e89fd85..46d7622a86 100644
--- a/frontend/src/js/ui-components/DropzoneWithFileInput.tsx
+++ b/frontend/src/js/ui-components/DropzoneWithFileInput.tsx
@@ -39,7 +39,9 @@ const SxDropzone = styled(Dropzone)<{ isInitial?: boolean; tight?: boolean }>`
   }
 `;
 
-const SxSelectFileButton = styled(SelectFileButton)<{ outside?: boolean }>`
+const SxSelectFileButton = styled(SelectFileButton, {
+  shouldForwardProp: (prop) => prop !== "outside",
+})<{ outside?: boolean }>`
   position: absolute;
   top: ${({ outside }) => (outside ? "-26px" : "3px")};
   right: ${({ outside }) => (outside ? "-12px" : "0")};
diff --git a/frontend/src/js/ui-components/InputDateRange.tsx b/frontend/src/js/ui-components/InputDateRange.tsx
index fd2266f306..a5a4bba947 100644
--- a/frontend/src/js/ui-components/InputDateRange.tsx
+++ b/frontend/src/js/ui-components/InputDateRange.tsx
@@ -14,7 +14,7 @@ import {
   parseDateToState,
 } from "../common/helpers/dateHelper";
 import { exists } from "../common/helpers/exists";
-import { Icon } from "../icon/FaIcon";
+import FaIcon from "../icon/FaIcon";
 import InfoTooltip from "../tooltip/InfoTooltip";
 
 import InputDate from "./InputDate/InputDate";
@@ -172,7 +172,7 @@ const InputDateRange = ({
 
     return (
       <StyledLabel large={large}>
-        <Icon icon={faCalendar} left gray />
+        <FaIcon icon={faCalendar} left gray />
         {exists(indexPrefix) && <IndexPrefix># {indexPrefix}</IndexPrefix>}
         {label}
         <InfoTooltip
diff --git a/frontend/src/js/upload-concept-list-modal/DropdownOption.tsx b/frontend/src/js/upload-concept-list-modal/DropdownOption.tsx
index f0ff188237..883893e8c9 100644
--- a/frontend/src/js/upload-concept-list-modal/DropdownOption.tsx
+++ b/frontend/src/js/upload-concept-list-modal/DropdownOption.tsx
@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
 
 import { IndexPrefix } from "../common/components/IndexPrefix";
 import { exists } from "../common/helpers/exists";
-import { Icon } from "../icon/FaIcon";
+import FaIcon from "../icon/FaIcon";
 
 const Container = styled("div")`
   display: grid;
@@ -66,7 +66,7 @@ export const DropdownOption = memo(
           {hasDifferentFilterLabel ? (
             <SxIndexPrefix># {filterIdx}</SxIndexPrefix>
           ) : (
-            <Icon
+            <FaIcon
               icon={faFolder}
               active={!hasDifferentFilterLabel}
               gray={hasDifferentFilterLabel}