diff --git a/src/edit.js b/src/edit.js
new file mode 100644
index 0000000..e573471
--- /dev/null
+++ b/src/edit.js
@@ -0,0 +1,190 @@
+/* global Iconify */
+
+import { __ } from '@wordpress/i18n';
+
+import { RawHTML, Fragment, useState } from '@wordpress/element';
+import { BlockControls, InspectorControls } from '@wordpress/editor';
+import {
+	Button,
+	Modal,
+	RangeControl,
+	TextControl,
+	ToggleControl,
+	Toolbar,
+	ToolbarButton,
+	PanelBody,
+} from '@wordpress/components';
+
+export function edit({ className, attributes, setAttributes }) {
+	/* eslint-disable react-hooks/rules-of-hooks */
+	const [modalIsOpen, setOpen] = useState(false);
+	const [newPrefix, setNewPrefix] = useState(attributes.prefix);
+	const [newName, setNewName] = useState(attributes.name);
+	/* eslint-enable react-hooks/rules-of-hooks */
+
+	const updateIcon = () => {
+		const iconString = `${newPrefix}:${newName}`;
+		if (!Iconify.iconExists(iconString)) {
+			// TODO loading indicator
+			Iconify.loadIcons([iconString], () => {
+				// TODO if icon not found
+				// TODO customisations object as renderHTML second argument
+				setSVG(Iconify.renderHTML(iconString), newPrefix, newName);
+				closeModal();
+			});
+		} else {
+			// TODO customisations object as renderHTML second argument
+			setSVG(Iconify.renderHTML(iconString), newPrefix, newName);
+			closeModal();
+		}
+	};
+
+	const setSVG = (svg, prefix, name) => {
+		setAttributes({
+			svg,
+			prefix,
+			name,
+		});
+	};
+
+	const openModal = () => {
+		setOpen(true);
+	};
+
+	const closeModal = () => {
+		setOpen(false);
+	};
+
+	const InspectorControlComponent = () => (
+		<InspectorControls>
+			<PanelBody title={__('Icon size', 'room-vw')}>
+				<RangeControl
+					label={`${__('Font size', 'room-vw')} (${
+						attributes.fontUnit
+					})`}
+					value={attributes.fontSize}
+					min={attributes.fontUnit === 'em' ? '0.5' : '8'}
+					max={attributes.fontUnit === 'em' ? '20' : '320'}
+					step={attributes.fontUnit === 'em' ? '0.1' : '1'}
+					onChange={(value) => {
+						setAttributes({ fontSize: value });
+					}}
+				/>
+				<ToggleControl
+					label={__('Use', 'room-vw') + ' ems'}
+					checked={attributes.fontUnit === 'em'}
+					onChange={(state) => {
+						setAttributes({
+							fontUnit: state ? 'em' : 'px',
+							fontSize: state
+								? attributes.fontSize / 16
+								: attributes.fontSize * 16,
+						});
+					}}
+				/>
+			</PanelBody>
+			<PanelBody title={__('Icon variations', 'room-vw')}>
+				<ToggleControl
+					label={__('Inline', 'room-vw')}
+					checked={attributes.isInline}
+					onChange={(state) => {
+						setAttributes({ isInline: state });
+					}}
+				/>
+				<p>Color</p>
+				<p>Rotate</p>
+				<p>Flip</p>
+				<p>Etc</p>
+			</PanelBody>
+		</InspectorControls>
+	);
+
+	const BlockControlComponent = () => (
+		<BlockControls>
+			<Toolbar>
+				<ToolbarButton
+					label={__('Replace icon', 'room-vw')}
+					icon="admin-generic"
+					onClick={openModal}
+				/>
+			</Toolbar>
+		</BlockControls>
+	);
+
+	const ModalComponent = () => (
+		<Modal
+			title={__('Select an Icon', 'room-vw')}
+			onRequestClose={closeModal}
+		>
+			<p>
+				<strong>TODO:</strong> Search for an icon
+			</p>
+			<TextControl
+				label={__('Prefix', 'room-vw')}
+				value={newPrefix}
+				onChange={(value) => {
+					setNewPrefix(value);
+				}}
+			/>
+			<TextControl
+				label={__('Name', 'room-vw')}
+				value={newName}
+				onChange={(value) => {
+					setNewName(value);
+				}}
+			/>
+
+			<Button isPrimary onClick={updateIcon}>
+				{__('Select', 'room-vw')}
+			</Button>
+
+			<Button isSecondary onClick={closeModal}>
+				{__('Cancel', 'room-vw')}
+			</Button>
+		</Modal>
+	);
+
+	return (
+		<Fragment>
+			<InspectorControlComponent />
+			<BlockControlComponent />
+
+			<RawHTML
+				className={
+					className +
+					(attributes.isInline ? ' is-inline icon' : ' icon')
+				}
+				style={{
+					fontSize: attributes.fontSize + attributes.fontUnit,
+				}}
+			>
+				{attributes.svg}
+			</RawHTML>
+
+			{attributes.svg === '' && (
+				<Button
+					isBusy={false}
+					disabled={false}
+					isPrimary
+					onClick={openModal}
+				>
+					Choose Icon
+				</Button>
+			)}
+
+			{attributes.svg !== '' && (
+				<Button
+					isBusy={false}
+					disabled={false}
+					isTertiary
+					onClick={openModal}
+				>
+					Change Icon
+				</Button>
+			)}
+
+			{modalIsOpen && <ModalComponent />}
+		</Fragment>
+	);
+}
+
diff --git a/src/index.js b/src/index.js
index b33faeb..ecc1aa6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,23 +1,13 @@
-/* global Iconify */
 import './style.scss';
 import './editor.scss';
 
-import { registerBlockType } from '@wordpress/blocks';
-
-import { RawHTML, Fragment, useState } from '@wordpress/element';
-import { BlockControls, InspectorControls } from '@wordpress/editor';
-import {
-	Button,
-	Modal,
-	RangeControl,
-	TextControl,
-	ToggleControl,
-	Toolbar,
-	ToolbarButton,
-	PanelBody,
-} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+import { edit } from './edit.js';
+import { save } from './save.js';
+
+import { registerBlockType } from '@wordpress/blocks';
+
 registerBlockType('room-vw/iconify', {
 	title: __('Iconify', 'room-vw'),
 	icon: (
@@ -69,177 +59,7 @@ registerBlockType('room-vw/iconify', {
 		},
 	},
 
-	edit({ className, attributes, setAttributes }) {
-		/* eslint-disable react-hooks/rules-of-hooks */
-		const [modalIsOpen, setOpen] = useState(false);
-		const [newPrefix, setNewPrefix] = useState(attributes.prefix);
-		const [newName, setNewName] = useState(attributes.name);
-		/* eslint-enable react-hooks/rules-of-hooks */
+	edit,
 
-		const updateIcon = () => {
-			const iconString = `${newPrefix}:${newName}`;
-			if (!Iconify.iconExists(iconString)) {
-				// TODO loading indicator
-				Iconify.loadIcons([iconString], () => {
-					// TODO if icon not found
-					// TODO customisations object as renderHTML second argument
-					setSVG(Iconify.renderHTML(iconString), newPrefix, newName);
-					closeModal();
-				});
-			} else {
-				// TODO customisations object as renderHTML second argument
-				setSVG(Iconify.renderHTML(iconString), newPrefix, newName);
-				closeModal();
-			}
-		};
-
-		const setSVG = (svg, prefix, name) => {
-			setAttributes({
-				svg,
-				prefix,
-				name,
-			});
-		};
-
-		const openModal = () => {
-			setOpen(true);
-		};
-
-		const closeModal = () => {
-			setOpen(false);
-		};
-
-		return (
-			<Fragment>
-				<InspectorControls>
-					<PanelBody title="Icon size">
-						<RangeControl
-							label={`Font size (${attributes.fontUnit})`}
-							value={attributes.fontSize}
-							min={attributes.fontUnit === 'em' ? '0.5' : '8'}
-							max={attributes.fontUnit === 'em' ? '20' : '320'}
-							step={attributes.fontUnit === 'em' ? '0.1' : '1'}
-							onChange={(value) => {
-								setAttributes({ fontSize: value });
-							}}
-						/>
-						<ToggleControl
-							label="Use ems"
-							checked={attributes.fontUnit === 'em'}
-							onChange={(state) => {
-								setAttributes({
-									fontUnit: state ? 'em' : 'px',
-									fontSize: state
-										? attributes.fontSize / 16
-										: attributes.fontSize * 16,
-								});
-							}}
-						/>
-					</PanelBody>
-					<PanelBody title="Icon variations">
-						<ToggleControl
-							label="Inline"
-							checked={attributes.isInline}
-							onChange={(state) => {
-								setAttributes({ isInline: state });
-							}}
-						/>
-						<p>Color</p>
-						<p>Rotate</p>
-						<p>Flip</p>
-						<p>Etc</p>
-					</PanelBody>
-				</InspectorControls>
-
-				<BlockControls>
-					<Toolbar label="label">
-						<ToolbarButton
-							label="Replace icon"
-							icon="admin-generic"
-							onClick={openModal}
-						/>
-					</Toolbar>
-				</BlockControls>
-
-				<RawHTML
-					className={
-						className +
-						(attributes.isInline ? ' is-inline icon' : ' icon')
-					}
-					style={{
-						fontSize: attributes.fontSize + attributes.fontUnit,
-					}}
-				>
-					{attributes.svg}
-				</RawHTML>
-
-				{attributes.svg === '' && (
-					<Button
-						isBusy={false}
-						disabled={false}
-						isPrimary
-						onClick={openModal}
-					>
-						Choose Icon
-					</Button>
-				)}
-
-				{attributes.svg !== '' && (
-					<Button
-						isBusy={false}
-						disabled={false}
-						isTertiary
-						onClick={openModal}
-					>
-						Change Icon
-					</Button>
-				)}
-
-				{modalIsOpen && (
-					<Modal title="Select an Icon" onRequestClose={closeModal}>
-						<p>
-							<strong>TODO:</strong> Search for an icon
-						</p>
-						<TextControl
-							label="Prefix"
-							value={newPrefix}
-							onChange={(value) => {
-								setNewPrefix(value);
-							}}
-						/>
-						<TextControl
-							label="Name"
-							value={newName}
-							onChange={(value) => {
-								setNewName(value);
-							}}
-						/>
-
-						<Button isPrimary onClick={updateIcon}>
-							Select
-						</Button>
-
-						<Button isSecondary onClick={closeModal}>
-							Cancel
-						</Button>
-					</Modal>
-				)}
-			</Fragment>
-		);
-	},
-
-	save({ attributes }) {
-		return (
-			<RawHTML
-				className={attributes.isInline ? ' is-inline icon' : ' icon'}
-				dataPrefix={attributes.prefix}
-				dataName={attributes.name}
-				style={{
-					fontSize: attributes.fontSize + attributes.fontUnit,
-				}}
-			>
-				{attributes.svg}
-			</RawHTML>
-		);
-	},
+	save,
 });
diff --git a/src/save.js b/src/save.js
new file mode 100644
index 0000000..9280654
--- /dev/null
+++ b/src/save.js
@@ -0,0 +1,16 @@
+import { RawHTML } from '@wordpress/element';
+
+export function save({ attributes }) {
+	return (
+		<RawHTML
+			className={attributes.isInline ? ' is-inline icon' : ' icon'}
+			dataPrefix={attributes.prefix}
+			dataName={attributes.name}
+			style={{
+				fontSize: attributes.fontSize + attributes.fontUnit,
+			}}
+		>
+			{attributes.svg}
+		</RawHTML>
+	);
+}