diff --git a/src/plugins/navigation/components/IconButton.js b/src/plugins/navigation/components/IconButton.tsx
similarity index 85%
rename from src/plugins/navigation/components/IconButton.js
rename to src/plugins/navigation/components/IconButton.tsx
index 8969ae296..dbe1963b9 100644
--- a/src/plugins/navigation/components/IconButton.js
+++ b/src/plugins/navigation/components/IconButton.tsx
@@ -5,7 +5,8 @@
  * @format
  */
 
-import {Glyph, styled, keyframes} from 'flipper';
+import {Glyph, styled, keyframes, IconSize} from 'flipper';
+import React from 'react';
 
 const shrinkAnimation = keyframes({
   '0%': {
@@ -16,13 +17,13 @@ const shrinkAnimation = keyframes({
   },
 });
 
-type Props = {|
-  icon: string,
-  outline?: boolean,
-  onClick?: () => void,
-  color?: string,
-  size: 8 | 10 | 12 | 16 | 18 | 20 | 24 | 32,
-|};
+type Props = {
+  icon: string;
+  outline?: boolean;
+  onClick?: () => void;
+  color?: string;
+  size: IconSize;
+};
 
 const RippleEffect = styled('div')({
   padding: 5,
diff --git a/src/plugins/navigation/components/index.js b/src/plugins/navigation/components/index.js
index 265d926d5..f56c3061d 100644
--- a/src/plugins/navigation/components/index.js
+++ b/src/plugins/navigation/components/index.js
@@ -9,7 +9,7 @@
 export {default as AutoCompleteSheet} from './AutoCompleteSheet';
 export {default as BookmarksSidebar} from './BookmarksSidebar';
 export {default as FavoriteButton} from './FavoriteButton';
-export {default as IconButton} from './IconButton';
+export {default as IconButton} from './IconButton.tsx';
 export {default as NavigationInfoBox} from './NavigationInfoBox';
 export {default as RequiredParametersDialog} from './RequiredParametersDialog';
 export {default as SaveBookmarkDialog} from './SaveBookmarkDialog';
diff --git a/src/ui/index.tsx b/src/ui/index.tsx
index 6a4812050..e7e9acf1f 100644
--- a/src/ui/index.tsx
+++ b/src/ui/index.tsx
@@ -16,7 +16,7 @@ export {default as ButtonGroupChain} from './components/ButtonGroupChain';
 
 export {colors, darkColors, brandColors} from './components/colors';
 
-export {default as Glyph} from './components/Glyph';
+export {default as Glyph, IconSize} from './components/Glyph';
 
 export {default as LoadingIndicator} from './components/LoadingIndicator';