diff --git a/docs/docs/component-list.md b/docs/docs/component-list.md
index ce51a7a2c..ab4478af6 100644
--- a/docs/docs/component-list.md
+++ b/docs/docs/component-list.md
@@ -23,6 +23,7 @@ outline: [2, 2]
         "Content": "Components that present content and are meaningful by themselves. For example, charts, images or text.",
         "Input": "Components whose main objective is to allow the user to input data into the app.",
         "Other": "These components occupy a special role and are amongst the most powerful in the framework.",
+        "Embed": "Components that integrate external functionalities seamlessly.",
         "Root": "These components are the top-level containers."
     };     
 </script>
diff --git a/docs/docs/public/components/iframe.png b/docs/docs/public/components/iframe.png
new file mode 100644
index 000000000..d044b7051
Binary files /dev/null and b/docs/docs/public/components/iframe.png differ
diff --git a/ui/package-lock.json b/ui/package-lock.json
index 2ac95bd33..1b6cc0f9b 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -14,7 +14,7 @@
 				"marked": "^7.0.2",
 				"monaco-editor": "^0.41.0",
 				"plotly.js-dist-min": "^2.22.0",
-				"remixicon": "latest",
+				"remixicon": "*",
 				"typescript": "^5.0.4",
 				"vega": "^5.22.1",
 				"vega-embed": "^6.22.1",
@@ -3021,9 +3021,9 @@
 			}
 		},
 		"node_modules/remixicon": {
-			"version": "3.5.0",
-			"resolved": "https://registry.npmjs.org/remixicon/-/remixicon-3.5.0.tgz",
-			"integrity": "sha512-wNzWGKf4frb3tEmgvP5shry0n1OdTjjEk9RHLuRuAhfA50bvEdpKH1XWNUYrHUSjAQQkkdyIm+lf4mOuysIKTQ=="
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/remixicon/-/remixicon-4.1.0.tgz",
+			"integrity": "sha512-N5dmpN6bjB7GyHi8RqhKp8Fy1cfOch0m75KZQv4ZNFa2ffpXJY2FQ4TdgigZulTdwOoTwLKjBQ7GCC+bEw8LHg=="
 		},
 		"node_modules/repeat-string": {
 			"version": "1.6.1",
diff --git a/ui/package.json b/ui/package.json
index 9ab3ee619..91deb24b7 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -16,7 +16,7 @@
 		"marked": "^7.0.2",
 		"monaco-editor": "^0.41.0",
 		"plotly.js-dist-min": "^2.22.0",
-		"remixicon": "latest",
+		"remixicon": "*",
 		"typescript": "^5.0.4",
 		"vega": "^5.22.1",
 		"vega-embed": "^6.22.1",
diff --git a/ui/src/builder/BuilderSidebarToolbar.vue b/ui/src/builder/BuilderSidebarToolbar.vue
index bf2c33af1..f5d0fb9ea 100644
--- a/ui/src/builder/BuilderSidebarToolbar.vue
+++ b/ui/src/builder/BuilderSidebarToolbar.vue
@@ -87,6 +87,10 @@ const categoriesData:Ref<Record<string, CategoryData>> = ref({
 		icon: "ri-flow-chart",
 		isCollapsed: false,
 	},
+	Embed: {
+		icon: "ri-code-s-slash-line",
+		isCollapsed: false,
+	},
 });
 
 function toggleCollapseCategory(categoryId: string) {
diff --git a/ui/src/core/templateMap.ts b/ui/src/core/templateMap.ts
index 0cd543eca..63d330848 100644
--- a/ui/src/core/templateMap.ts
+++ b/ui/src/core/templateMap.ts
@@ -19,6 +19,7 @@ import CoreSeparator from "../core_components/CoreSeparator.vue";
 import CoreTab from "../core_components/CoreTab.vue";
 import CoreTabs from "../core_components/CoreTabs.vue";
 import CoreImage from "../core_components/CoreImage.vue";
+import CoreIFrame from "../core_components/CoreIFrame.vue";
 import CoreTimer from "../core_components/CoreTimer.vue";
 import CoreWebcamCapture from "../core_components/CoreWebcamCapture.vue";
 import CoreVegaLiteChart from "../core_components/CoreVegaLiteChart.vue";
@@ -64,6 +65,7 @@ const templateMap = {
 	horizontalstack: CoreHorizontalStack,
 	separator: CoreSeparator,
 	image: CoreImage,
+	iframe: CoreIFrame,
 	icon: CoreIcon,
 	timer: CoreTimer,
 	textinput: CoreTextInput,
diff --git a/ui/src/core_components/CoreIFrame.vue b/ui/src/core_components/CoreIFrame.vue
new file mode 100644
index 000000000..faeb2f7d7
--- /dev/null
+++ b/ui/src/core_components/CoreIFrame.vue
@@ -0,0 +1,96 @@
+<template>
+	<div class="CoreIFrame" ref="rootEl">
+		<iframe
+      @load="handleLoad" 
+			:src="fields.src.value"
+			draggable="false"
+		/>
+    <div class="mask" />
+	</div>
+</template>
+
+<script lang="ts">
+import { FieldType } from "../streamsyncTypes";
+import { cssClasses } from "../renderer/sharedStyleFields";
+
+const description = "A component to embed an external resource in an iframe.";
+
+const loadHandlerStub = `
+def load_handler(state):
+
+	# Sets status message when resource is loaded
+
+	state["status"] = "Page loaded"`;
+
+export default {
+	streamsync: {
+		name: "IFrame",
+		description,
+		category: "Embed",
+		fields: {
+			src: {
+				name: "Source",
+				default: '',
+				desc: "A valid URL",
+				type: FieldType.Text,
+			},
+			cssClasses,
+		},
+		events: {
+			"ss-load": {
+				desc: "Fires when the resource has successfully loaded.",
+				stub: loadHandlerStub.trim(),
+			},
+		},
+	},
+};
+</script>
+
+<script setup lang="ts">
+import { Ref, inject, ref } from "vue";
+import injectionKeys from "../injectionKeys";
+
+const rootEl:Ref<HTMLElement> = ref(null); 
+const fields = inject(injectionKeys.evaluatedFields);
+
+function handleLoad(ev) {
+	const event = new CustomEvent("ss-load");
+	rootEl.value.dispatchEvent(event);
+}
+</script>
+
+<style scoped>
+@import "../renderer/sharedStyles.css";
+
+.CoreIFrame {
+  position: relative;
+  width: 100%;
+  height: 80vh;
+}
+
+.CoreIFrame  iframe {
+  width: 100%;
+  height: 100%;
+  display: block;
+  margin: auto;
+  border: 1px solid var(--separatorColor);
+}
+
+.CoreIFrame .mask {
+  pointer-events: none;
+}
+
+.CoreIFrame.beingEdited .mask {
+  pointer-events: all;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0);
+}
+
+.CoreIFrame.beingEdited.selected .mask {
+  pointer-events: none;
+}
+</style>
diff --git a/ui/src/renderer/ComponentProxy.vue b/ui/src/renderer/ComponentProxy.vue
index 04c193e68..c792cffb8 100644
--- a/ui/src/renderer/ComponentProxy.vue
+++ b/ui/src/renderer/ComponentProxy.vue
@@ -216,6 +216,7 @@ export default {
 					childless: isChildless.value,
 					selected: isSelected.value,
 					disabled: isDisabled.value,
+					beingEdited: isBeingEdited.value,
 					...fieldBasedCssClasses.value
 				},
 				style: {