diff --git a/.changeset/violet-flies-marry.md b/.changeset/violet-flies-marry.md
new file mode 100644
index 000000000..c4600dfbe
--- /dev/null
+++ b/.changeset/violet-flies-marry.md
@@ -0,0 +1,5 @@
+---
+'myst-to-react': patch
+---
+
+Ensure icon is correct size without styles
diff --git a/packages/myst-to-react/src/exercise.tsx b/packages/myst-to-react/src/exercise.tsx
index 1b87b491d..d3482029e 100644
--- a/packages/myst-to-react/src/exercise.tsx
+++ b/packages/myst-to-react/src/exercise.tsx
@@ -86,7 +86,7 @@ export function Callout({
   children: React.ReactNode;
   dropdown?: boolean;
   identifier?: string;
-  Icon?: (props: { className?: string }) => JSX.Element;
+  Icon?: (props: { width?: string; height?: string; className?: string }) => JSX.Element;
 }) {
   return (
     <WrapperElement
@@ -127,8 +127,10 @@ export function Callout({
       >
         {Icon && (
           <Icon
+            width="2rem"
+            height="2rem"
             className={classNames(
-              'h-8 w-8 inline-block pl-2 mr-2 self-center flex-none',
+              'inline-block pl-2 mr-2 self-center flex-none',
               classNames({
                 'text-gray-600': !color || color === 'gray',
                 'text-blue-600': color === 'blue',