diff --git a/packages/ui/src/spinners/circular-spinner.tsx b/packages/ui/src/spinners/circular-spinner.tsx
index b96188030..e7e952295 100644
--- a/packages/ui/src/spinners/circular-spinner.tsx
+++ b/packages/ui/src/spinners/circular-spinner.tsx
@@ -1,10 +1,23 @@
 import * as React from "react";
 
-export const Spinner: React.FC = () => (
+export interface ISpinner extends React.SVGAttributes<SVGElement> {
+  height?: string;
+  width?: string;
+  className?: string | undefined;
+}
+
+export const Spinner: React.FC<ISpinner> = ({
+  height = "32px",
+  width = "32px",
+  className = "",
+  ...rest
+}) => (
   <div role="status">
     <svg
       aria-hidden="true"
-      className="mr-2 h-8 w-8 animate-spin fill-blue-600 text-custom-text-200"
+      height={height}
+      width={width}
+      className={`mr-2 animate-spin fill-blue-600 text-custom-text-200 ${className}`}
       viewBox="0 0 100 101"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"