diff --git a/packages/iconography/src/AddReactionOutlined.svg b/packages/iconography/src/Icon.svg
similarity index 100%
rename from packages/iconography/src/AddReactionOutlined.svg
rename to packages/iconography/src/Icon.svg
diff --git a/packages/iconography/src/block/Edit.tsx b/packages/iconography/src/block/Edit.tsx
index 68b1ded..254de1a 100644
--- a/packages/iconography/src/block/Edit.tsx
+++ b/packages/iconography/src/block/Edit.tsx
@@ -1,26 +1,15 @@
 import React from 'react';
 
 /* WordPress Dependencies */
-import {
-	BlockControls,
-	InspectorControls,
-	useBlockProps,
-} from '@wordpress/block-editor';
+import { useBlockProps } from '@wordpress/block-editor';
 import { store as RichTextStore } from '@wordpress/rich-text';
 import { useSelect } from '@wordpress/data';
-import { useState } from '@wordpress/element';
-import {
-	Button,
-	Panel,
-	PanelBody,
-	ToolbarButton,
-	Icon,
-} from '@wordpress/components';
+import { Icon, Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { replace } from '@wordpress/icons';
 
 /* Internal deps */
-import { IconModal } from '../IconModal';
+import { IconToolbarButton } from '../shared';
 import './style.scss';
 
 /* Types */
@@ -33,7 +22,6 @@ export const Edit = ( {
 	attributes,
 	setAttributes,
 }: BlockEditProps< Attributes > ) => {
-	const [ showIconModal, setShowIconModal ] = useState( false );
 	const blockProps = useBlockProps();
 	const { getFormatType } = useSelect(
 		( select ) =>
@@ -61,55 +49,27 @@ export const Edit = ( {
 	const TagName =
 		( attributes.iconTag as keyof HTMLElementTagNameMap ) ?? 'span';
 
-	const buttonText = attributes.iconContent
-		? __( 'Change Icon', 'boxuk' )
-		: __( 'Select Icon', 'boxuk' );
-
-	const ShowModalButton = () => (
-		<Button
-			variant={ 'secondary' }
-			onClick={ () => setShowIconModal( ! showIconModal ) }
-			text={ buttonText }
-			icon={ <Icon icon={ replace } /> }
-		/>
-	);
-
 	return (
 		<>
-			<InspectorControls group="list">
-				<Panel>
-					<PanelBody>
-						<ShowModalButton />
-					</PanelBody>
-				</Panel>
-			</InspectorControls>
-			<BlockControls group="inline">
-				<ToolbarButton
-					icon={ <Icon icon={ replace } /> }
-					onClick={ () => setShowIconModal( ! showIconModal ) }
-					title={ buttonText }
-				/>
-			</BlockControls>
+			<IconToolbarButton
+				icon={ <Icon icon={ replace } /> }
+				onChange={ handleChange }
+				value={ {
+					text: '',
+					formats: [],
+					replacements: [],
+					start: 0,
+					end: 0,
+				} }
+				initialOpen={ ! attributes.iconContent }
+			/>
 			<div { ...blockProps }>
 				{ attributes.iconContent && (
 					<TagName className={ attributes.iconClass ?? '' }>
 						{ attributes.iconContent }
 					</TagName>
 				) }
-				{ ! attributes.iconContent && <ShowModalButton /> }
-				{ showIconModal && (
-					<IconModal
-						onRequestClose={ () => setShowIconModal( false ) }
-						onChange={ handleChange }
-						value={ {
-							text: '',
-							formats: [],
-							replacements: [],
-							start: 0,
-							end: 0,
-						} }
-					/>
-				) }
+				{ ! attributes.iconContent && <Spinner /> }
 			</div>
 		</>
 	);
diff --git a/packages/iconography/src/block/index.ts b/packages/iconography/src/block/index.ts
index 14c2deb..4410280 100644
--- a/packages/iconography/src/block/index.ts
+++ b/packages/iconography/src/block/index.ts
@@ -5,7 +5,7 @@ import { registerBlockType } from '@wordpress/blocks';
 import metadata from './block.json';
 import { Edit } from './Edit';
 import { Save } from './Save';
-import { ReactComponent as AddReactionOutlined } from '../AddReactionOutlined.svg';
+import { ReactComponent as AddReactionOutlined } from '../Icon.svg';
 
 registerBlockType( metadata, {
 	icon: AddReactionOutlined,
diff --git a/packages/iconography/src/index.ts b/packages/iconography/src/index.ts
new file mode 100644
index 0000000..5ca17b9
--- /dev/null
+++ b/packages/iconography/src/index.ts
@@ -0,0 +1,14 @@
+/* WordPress Dependencies */
+import domReady from '@wordpress/dom-ready';
+
+/* Internal deps */
+import registerInlineIconography from './registerInlineIconography';
+
+domReady( () => {
+	registerInlineIconography();
+} );
+
+/* Export for other packages to consume */
+export * from './types';
+export * from './shared';
+export * from './utils';
diff --git a/packages/iconography/src/index.tsx b/packages/iconography/src/registerInlineIconography.tsx
similarity index 81%
rename from packages/iconography/src/index.tsx
rename to packages/iconography/src/registerInlineIconography.tsx
index 7877897..719b5aa 100644
--- a/packages/iconography/src/index.tsx
+++ b/packages/iconography/src/registerInlineIconography.tsx
@@ -1,18 +1,16 @@
 import React, { ComponentProps } from 'react';
 
 /* WordPress Dependencies */
-import domReady from '@wordpress/dom-ready';
 import { registerFormatType } from '@wordpress/rich-text';
-import { BlockControls } from '@wordpress/block-editor';
 
 /* Internal deps */
-import { IconToolbarButton } from './IconToolbarButton';
+import { IconToolbarButton } from './shared';
 import { getIconGroups, selectIconAtCurrentCursor } from './utils';
 
 /* Types */
 import type { IconGroup } from './types';
 
-export const handleKeyDown =
+const handleKeyDown =
 	( iconGroups: IconGroup[] | undefined ) => ( event: KeyboardEvent ) => {
 		switch ( event.key ) {
 			case 'ArrowLeft':
@@ -25,7 +23,7 @@ export const handleKeyDown =
 		}
 	};
 
-export const handleKeyUp =
+const handleKeyUp =
 	( iconGroups: IconGroup[] | undefined ) => ( event: KeyboardEvent ) => {
 		if ( 'ArrowRight' === event.key ) {
 			const { selection, icon } = selectIconAtCurrentCursor( iconGroups );
@@ -51,7 +49,7 @@ export const handleKeyEvent =
 		}
 	};
 
-export const registerIconography = () => {
+export const registerInlineIconography = () => {
 	const iconGroups = getIconGroups();
 	if ( ! iconGroups ) {
 		return;
@@ -61,11 +59,7 @@ export const registerIconography = () => {
 		if ( index === 0 ) {
 			iconGroup.edit = (
 				props: ComponentProps< typeof IconToolbarButton >
-			) => (
-				<BlockControls group="inline">
-					<IconToolbarButton { ...props } />
-				</BlockControls>
-			);
+			) => <IconToolbarButton { ...props } />;
 		}
 		registerFormatType( iconGroup.name, iconGroup );
 	} );
@@ -76,6 +70,4 @@ export const registerIconography = () => {
 	document.addEventListener( 'keyup', handleKeyEvent( iconGroups ) );
 };
 
-domReady( () => {
-	registerIconography();
-} );
+export default registerInlineIconography;
diff --git a/packages/iconography/src/IconModal.tsx b/packages/iconography/src/shared/IconModal.tsx
similarity index 97%
rename from packages/iconography/src/IconModal.tsx
rename to packages/iconography/src/shared/IconModal.tsx
index 82ab1e5..3d76c20 100644
--- a/packages/iconography/src/IconModal.tsx
+++ b/packages/iconography/src/shared/IconModal.tsx
@@ -8,7 +8,7 @@ import { useState, useMemo } from '@wordpress/element';
 
 /* Internal Dependencies */
 import { PlaceholderIconPanel } from './PlaceholderIconPanel';
-import { getIconGroups } from './utils';
+import { getIconGroups } from '../utils';
 
 /* Types */
 import type { RichTextValue } from '@wordpress/rich-text';
diff --git a/packages/iconography/src/tests/IconPanel.test.tsx b/packages/iconography/src/shared/IconPanel.test.tsx
similarity index 97%
rename from packages/iconography/src/tests/IconPanel.test.tsx
rename to packages/iconography/src/shared/IconPanel.test.tsx
index 1e9eee0..e7ce27a 100644
--- a/packages/iconography/src/tests/IconPanel.test.tsx
+++ b/packages/iconography/src/shared/IconPanel.test.tsx
@@ -3,7 +3,7 @@ import { describe, expect, jest, test } from '@jest/globals';
 import { render, screen } from '@testing-library/react';
 import { generateRichTextFormat } from '../utils';
 
-import { IconPanel } from '../IconPanel';
+import { IconPanel } from './IconPanel';
 
 jest.mock( '../utils', () => ( {
 	generateRichTextFormat: jest.fn(),
diff --git a/packages/iconography/src/IconPanel.tsx b/packages/iconography/src/shared/IconPanel.tsx
similarity index 93%
rename from packages/iconography/src/IconPanel.tsx
rename to packages/iconography/src/shared/IconPanel.tsx
index 9e221ed..2c0b675 100644
--- a/packages/iconography/src/IconPanel.tsx
+++ b/packages/iconography/src/shared/IconPanel.tsx
@@ -8,10 +8,10 @@ import {
 } from '@wordpress/components';
 
 /* Internal Dependencies */
-import { generateRichTextFormat } from './utils';
+import { generateRichTextFormat } from '../utils';
 
 /* Types */
-import type { IconGroup } from './types';
+import type { IconGroup } from '../types';
 import type { RichTextValue } from '@wordpress/rich-text';
 
 export type IconPanelProps = {
diff --git a/packages/iconography/src/IconToolbarButton.tsx b/packages/iconography/src/shared/IconToolbarButton.tsx
similarity index 65%
rename from packages/iconography/src/IconToolbarButton.tsx
rename to packages/iconography/src/shared/IconToolbarButton.tsx
index 299486f..187d36f 100644
--- a/packages/iconography/src/IconToolbarButton.tsx
+++ b/packages/iconography/src/shared/IconToolbarButton.tsx
@@ -1,32 +1,37 @@
-import React from 'react';
+import React, { ComponentProps } from 'react';
 
 /* WordPress Dependencies */
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
+import { BlockControls } from '@wordpress/block-editor';
 import { ToolbarButton } from '@wordpress/components';
 
 /* Internal Dependencies */
-import { ReactComponent as AddReactionOutlined } from './AddReactionOutlined.svg';
+import { ReactComponent as Icon } from '../Icon.svg';
+import { IconModal } from './IconModal';
 
 /* Types */
 import type { RichTextValue } from '@wordpress/rich-text';
-import { IconModal } from './IconModal';
 
 export type IconToolbarButtonProps = {
 	onChange: ( value: RichTextValue ) => void;
 	value: RichTextValue;
+	icon: ComponentProps< typeof ToolbarButton >[ 'icon' ];
+	initialOpen?: boolean;
 };
 
 export const IconToolbarButton = ( {
 	onChange,
 	value,
+	icon = <Icon />,
+	initialOpen = false,
 }: IconToolbarButtonProps ) => {
-	const [ open, setOpen ] = useState( false );
+	const [ open, setOpen ] = useState( initialOpen );
 
 	return (
-		<>
+		<BlockControls group="inline">
 			<ToolbarButton
-				icon={ <AddReactionOutlined /> }
+				icon={ icon }
 				label={ __( 'Add an icon', 'boxuk' ) }
 				onClick={ () => setOpen( ! open ) }
 			/>
@@ -37,6 +42,6 @@ export const IconToolbarButton = ( {
 					value={ value }
 				/>
 			) }
-		</>
+		</BlockControls>
 	);
 };
diff --git a/packages/iconography/src/PlaceholderIconPanel.tsx b/packages/iconography/src/shared/PlaceholderIconPanel.tsx
similarity index 95%
rename from packages/iconography/src/PlaceholderIconPanel.tsx
rename to packages/iconography/src/shared/PlaceholderIconPanel.tsx
index ea5f05c..c5566c6 100644
--- a/packages/iconography/src/PlaceholderIconPanel.tsx
+++ b/packages/iconography/src/shared/PlaceholderIconPanel.tsx
@@ -10,7 +10,7 @@ import {
 } from '@wordpress/components';
 
 /* Types */
-import type { IconGroup } from './types';
+import type { IconGroup } from '../types';
 import type { RichTextValue } from '@wordpress/rich-text';
 
 export type IconPanelProps = {
diff --git a/packages/iconography/src/tests/__snapshots__/IconPanel.test.tsx.snap b/packages/iconography/src/shared/__snapshots__/IconPanel.test.tsx.snap
similarity index 100%
rename from packages/iconography/src/tests/__snapshots__/IconPanel.test.tsx.snap
rename to packages/iconography/src/shared/__snapshots__/IconPanel.test.tsx.snap
diff --git a/packages/iconography/src/shared/index.ts b/packages/iconography/src/shared/index.ts
new file mode 100644
index 0000000..42e0aa4
--- /dev/null
+++ b/packages/iconography/src/shared/index.ts
@@ -0,0 +1,6 @@
+import { IconModal } from './IconModal';
+import { IconPanel } from './IconPanel';
+import { IconToolbarButton } from './IconToolbarButton';
+import { PlaceholderIconPanel } from './PlaceholderIconPanel';
+
+export { IconModal, IconPanel, IconToolbarButton, PlaceholderIconPanel };
diff --git a/packages/iconography/src/tests/index.test.ts b/packages/iconography/src/tests/registerInlineIconography.test.ts
similarity index 93%
rename from packages/iconography/src/tests/index.test.ts
rename to packages/iconography/src/tests/registerInlineIconography.test.ts
index 05e4409..52972ed 100644
--- a/packages/iconography/src/tests/index.test.ts
+++ b/packages/iconography/src/tests/registerInlineIconography.test.ts
@@ -3,13 +3,13 @@ import { registerFormatType } from '@wordpress/rich-text';
 
 /* Internal Dependencies */
 import { selectIconAtCurrentCursor, getIconGroups } from '../utils';
-import { handleKeyEvent, registerIconography } from '../';
+import { handleKeyEvent, registerInlineIconography } from '../registerInlineIconography';
 
 jest.mock( '@wordpress/rich-text', () => ( {
 	registerFormatType: jest.fn(),
 } ) );
 
-jest.mock( '../IconToolbarButton', () => ( {
+jest.mock( '../shared', () => ( {
 	IconToolbarButton: jest.fn(),
 } ) );
 
@@ -26,6 +26,7 @@ jest.mock( '../utils', () => ( {
 
 describe( 'registering iconography', () => {
 	test( 'should register all 3 types by default', () => {
+		registerInlineIconography();
 		expect( getIconGroups ).toBeCalledTimes( 1 );
 		// just by having imported the file, the registerFormatType should be called 3 times as per the 3 mocked values.
 		expect( registerFormatType ).toBeCalledTimes( 3 );
@@ -35,7 +36,7 @@ describe( 'registering iconography', () => {
 		jest.clearAllMocks();
 		getIconGroups.mockReturnValue( undefined );
 		expect( registerFormatType ).toBeCalledTimes( 0 );
-		registerIconography();
+		registerInlineIconography();
 	} );
 } );
 
diff --git a/packages/iconography/src/tests/utils.test.ts b/packages/iconography/src/tests/utils.test.ts
index 3a0d37d..003501f 100644
--- a/packages/iconography/src/tests/utils.test.ts
+++ b/packages/iconography/src/tests/utils.test.ts
@@ -9,7 +9,7 @@ import { IconGroup } from '../types';
 
 jest.mock( '@wordpress/rich-text', () => ( {} ) );
 
-jest.mock( '../IconToolbarButton', () => ( {
+jest.mock( '../shared', () => ( {
 	IconToolbarButton: jest.fn(),
 } ) );
 
diff --git a/packages/iconography/svg.d.ts b/packages/iconography/svg.d.ts
deleted file mode 100644
index 3222202..0000000
--- a/packages/iconography/svg.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-declare module '*.svg' {
-	import React = require('react');
-	export const ReactComponent: React.FunctionComponent<
-		React.SVGProps< SVGSVGElement >
-	>;
-	const src: string;
-	export default src;
-}
diff --git a/packages/iconography/webpack.config.js b/packages/iconography/webpack.config.js
index 0afd7c6..d2df2dd 100644
--- a/packages/iconography/webpack.config.js
+++ b/packages/iconography/webpack.config.js
@@ -4,6 +4,6 @@ module.exports = {
 	...defaultConfig,
 	entry: {
 		...defaultConfig.entry(),
-		index: './src/index.tsx',
+		index: './src/index.ts',
 	},
 };