diff --git a/packages/master/web/pictures/unknown-item.png b/packages/web_ui/src/images/unknown-item.png
similarity index 100%
rename from packages/master/web/pictures/unknown-item.png
rename to packages/web_ui/src/images/unknown-item.png
diff --git a/packages/web_ui/src/index.css b/packages/web_ui/src/index.css
index 3b906a8c..4f8cf73f 100644
--- a/packages/web_ui/src/index.css
+++ b/packages/web_ui/src/index.css
@@ -259,3 +259,9 @@ body {
 .json-input {
 	font-family: monospace;
 }
+
+.factorio-icon.item-unknown-item {
+	background: url("./images/unknown-item.png");
+	height: 32px;
+	width: 32px;
+}
diff --git a/packages/web_ui/src/index.jsx b/packages/web_ui/src/index.jsx
index 9761a022..b411ddc0 100644
--- a/packages/web_ui/src/index.jsx
+++ b/packages/web_ui/src/index.jsx
@@ -3,6 +3,8 @@ export { default as notify, notifyErrorHandler } from "./util/notify.jsx";
 
 export * from "./model/instance.jsx";
 export * from "./model/slave.jsx";
+export * from "./model/locale.jsx";
+export * from "./model/item_metadata.jsx";
 
 
 export { default as ControlContext } from "./components/ControlContext";
diff --git a/packages/web_ui/src/model/item_metadata.jsx b/packages/web_ui/src/model/item_metadata.jsx
new file mode 100644
index 00000000..50ece427
--- /dev/null
+++ b/packages/web_ui/src/model/item_metadata.jsx
@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from "react";
+
+
+let itemMetadataCache = null;
+export function useItemMetadata() {
+	let [itemMetadata, setItemMetadata] = useState(itemMetadataCache || new Map());
+	useEffect(() => {
+		async function load() {
+			let response = await fetch(`${webRoot}export/item-metadata.json`);
+			if (response.ok) {
+				let data = await response.json();
+				itemMetadataCache = new Map(data);
+				let style = document.createElement("style");
+				style.type = "text/css";
+				document.head.appendChild(style);
+				for (let [name, meta] of itemMetadataCache) {
+					style.sheet.insertRule(
+						`.item-${CSS.escape(name)} {
+	background-image: url("${webRoot}export/item-spritesheet.png");
+	background-repeat: no-repeat;
+	background-position: -${meta.x}px -${meta.y}px;
+	height: ${meta.size}px;
+	width: ${meta.size}px;
+}`
+					);
+				}
+				setItemMetadata(itemMetadataCache);
+			}
+		}
+
+		if (!itemMetadataCache) {
+			load();
+		}
+	}, []);
+
+	return itemMetadata;
+}
+
diff --git a/packages/web_ui/src/model/locale.jsx b/packages/web_ui/src/model/locale.jsx
new file mode 100644
index 00000000..ad4b83d0
--- /dev/null
+++ b/packages/web_ui/src/model/locale.jsx
@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from "react";
+
+
+let localeCache = null;
+export function useLocale() {
+	let [locale, setLocale] = useState(localeCache || new Map());
+	useEffect(() => {
+		async function load() {
+			let response = await fetch(`${webRoot}export/locale.json`);
+			if (response.ok) {
+				let data = await response.json();
+				localeCache = new Map(data);
+				setLocale(localeCache);
+			}
+		}
+
+		if (!localeCache) {
+			load();
+		}
+	}, []);
+
+	return locale;
+}
+