diff --git a/index.d.ts b/index.d.ts
index 0ff26420f3aba8153a97f5a3fd54165d2ddbe3b3..2018547620a3dad0d9b3aeac4c631129acb8087a 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -230,6 +230,14 @@ interface INews {
 }
 export function News(props: INews): JSX.Element
 
+interface IFrame {
+    url?: string,
+    className?: string
+    size?:string
+}
+
+export function Iframe(props: IFrame): JSX.Element
+
 interface ISection {
     id: string
 }
diff --git a/index.js b/index.js
index ceee6f026c1ccb7c44a9341d73c6cae98d480fa6..60723024264ca7eff4ecf742a27c017e0c05ee0a 100644
--- a/index.js
+++ b/index.js
@@ -56,3 +56,5 @@ export { default as Sections } from "./src/components/Sections"
 
 // Maps components
 export { default as Maps } from "./src/components/Maps"
+// Iframe components
+export { default as Iframe } from "./src/components/core/Iframe"
diff --git a/src/components/core/Iframe.tsx b/src/components/core/Iframe.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9b1df141d8d26e5f6d86f54e13fa4b9d49c30817
--- /dev/null
+++ b/src/components/core/Iframe.tsx
@@ -0,0 +1,34 @@
+import React from "react"
+
+interface IFrame {
+    url?: string
+    className?: string
+    size?: string
+}
+
+const oClass = {
+    xs: {
+        className: " min-h-[250px] max-h-[250px] ",
+    },
+    base: {
+        className: " min-h-[350px] max-h-[350px] ",
+    },
+    xl: {
+        className: " min-h-[450px] max-h-[450px] ",
+    },
+}
+
+const Iframe = (props: IFrame) => {
+    const { url, className = "", size = "base" } = props
+    const oclass = oClass[size]
+
+    if (!url) return null
+    return (
+        <iframe
+            src={url}
+            className={"w-full " + oclass.className + className}
+        ></iframe>
+    )
+}
+
+export default Iframe
diff --git a/src/pages-doc/doc/core/iframe.tsx b/src/pages-doc/doc/core/iframe.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5bca088fe6e24215fad2ad435457acbf6ce3a2b8
--- /dev/null
+++ b/src/pages-doc/doc/core/iframe.tsx
@@ -0,0 +1,55 @@
+import React, { ReactElement } from "react"
+import { Content ,Link, Iframe} from "@onegeo/gatsby-theme-onegeo"
+
+function map(): ReactElement {
+    return (
+        <Content>
+            <div className="prose">
+                <Link to="/doc/core">Retour</Link>
+
+                <h1>Iframe</h1>
+                <h2>Props</h2>
+                <div className="mockup-code">
+                    <pre>
+                        <code>
+                            {`
+interface IFrame {
+    url?: string,
+    className?: string
+    size?: string
+}
+`}
+                        </code>
+                    </pre>
+                </div>
+
+                <h2>Example</h2>
+            </div>
+            <div >
+                <h3>Taille xs</h3>
+                <Iframe 
+                    size="xs"
+                    className = "w-1/3"
+                    url= "http://www.openstreetmap.org/export/embed.html?bbox=79.84942674636841%2C6.899900944350287%2C79.85650777816772%2C6.90436374803887&amp;layers=ND"
+                />
+            </div>
+            <div className="mt-4">
+                <h3>Taille base</h3>
+                <Iframe 
+                    size="base"
+                    className = "w-2/3"
+                    url= "http://www.openstreetmap.org/export/embed.html?bbox=79.84942674636841%2C6.899900944350287%2C79.85650777816772%2C6.90436374803887&amp;layers=ND"
+                />
+            </div>
+            <div className="mt-4">
+                <h3>Taille xl</h3>
+                <Iframe 
+                    size="xl"
+                    url= "http://www.openstreetmap.org/export/embed.html?bbox=79.84942674636841%2C6.899900944350287%2C79.85650777816772%2C6.90436374803887&amp;layers=ND"
+                />
+            </div>
+        </Content>
+    )
+}
+
+export default map
diff --git a/src/pages-doc/doc/core/index.tsx b/src/pages-doc/doc/core/index.tsx
index ee9c6fa29964ddb05fdf0f373641f6bfea7a027d..d400e97fb09c988df089da33261da3f6d8e8628f 100644
--- a/src/pages-doc/doc/core/index.tsx
+++ b/src/pages-doc/doc/core/index.tsx
@@ -27,6 +27,8 @@ function index(): ReactElement {
                 <Link to="/doc/core/menu">Menu</Link>
                 <br></br>
                 <Link to="/doc/core/image">Image</Link>
+                <br></br>
+                <Link to="/doc/core/iframe">Iframe</Link>
             </div>
         </Content>
     )