diff --git a/examples/minimal/src/pages/index.astro b/examples/minimal/src/pages/index.astro
index 8e9209641..722b4cd5b 100644
--- a/examples/minimal/src/pages/index.astro
+++ b/examples/minimal/src/pages/index.astro
@@ -1,4 +1,5 @@
---
+import {Icon} from 'astro/components';
---
@@ -11,6 +12,9 @@
Welcome to Astro
+
+
+
diff --git a/packages/astro/components/Icon.astro b/packages/astro/components/Icon.astro
new file mode 100644
index 000000000..d2f366a8d
--- /dev/null
+++ b/packages/astro/components/Icon.astro
@@ -0,0 +1,35 @@
+---
+import {Collection, SVG} from '@iconify/json-tools';
+
+export interface Props {
+ collection: string;
+ icon: string;
+ scale?: number;
+ // iconfiy settings
+ inline?: boolean;
+ height?: string | number;
+ width?: string | number;
+ flip?: "horizontal" | "vertical" | "horizontal,vertical";
+ rotate?: string;
+ align?: string;
+ color?: string;
+ box?: boolean;
+}
+
+const { collection: collectionName, icon: iconName, scale = 1, ...iconifySettings} = Astro.props as Props;
+
+// Proof of concept: this should be cleaned up before merging
+const collection = new Collection();
+collection.loadIconifyCollection(collectionName);
+const iconData = collection.getIconData(iconName);
+if (!iconData) {
+ throw new Error(`Icon ${collectionName}:${iconName} not found.`);
+}
+const svg = new SVG(iconData)
+const html: string = svg.getSVG({
+ height: `${scale}em`,
+ width: `${scale}em`,
+ ...iconifySettings,
+});
+---
+{html}
diff --git a/packages/astro/components/index.js b/packages/astro/components/index.js
index 8b19c7d1f..2b6a23645 100644
--- a/packages/astro/components/index.js
+++ b/packages/astro/components/index.js
@@ -1,4 +1,5 @@
export { default as Code } from './Code.astro';
export { default as Debug } from './Debug.astro';
+export { default as Icon } from './Icon.astro';
export { default as Markdown } from './Markdown.astro';
export { default as Prism } from './Prism.astro';
diff --git a/packages/astro/package.json b/packages/astro/package.json
index 567f5c13e..30b374a25 100644
--- a/packages/astro/package.json
+++ b/packages/astro/package.json
@@ -56,6 +56,8 @@
"@babel/generator": "^7.13.9",
"@babel/parser": "^7.13.15",
"@babel/traverse": "^7.13.15",
+ "@iconify/json": "^1.1.401",
+ "@iconify/json-tools": "^1.0.10",
"@snowpack/plugin-postcss": "^1.4.3",
"@snowpack/plugin-sass": "^1.4.0",
"@types/send": "^0.17.1",
diff --git a/yarn.lock b/yarn.lock
index 323765a93..0e6f727f7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -622,6 +622,16 @@
resolved "https://registry.yarnpkg.com/@hutson/parse-repository-url/-/parse-repository-url-3.0.2.tgz#98c23c950a3d9b6c8f0daed06da6c3af06981340"
integrity sha512-H9XAx3hc0BQHY6l+IFSWHDySypcXsvsuLhgYLUGywmJ5pswRVQJUHpOsobnLYp2ZUaUlKiKDrgWWhosOwAEM8Q==
+"@iconify/json-tools@^1.0.10":
+ version "1.0.10"
+ resolved "https://registry.yarnpkg.com/@iconify/json-tools/-/json-tools-1.0.10.tgz#d9a7050dbbe8bb29d684d4b3f9446ed2d0bea3cc"
+ integrity sha512-LFelJDOLZ6JHlmlAkgrvmcu4hpNPB91KYcr4f60D/exzU1eNOb4/KCVHIydGHIQFaOacIOD+Xy+B7P1z812cZg==
+
+"@iconify/json@^1.1.401":
+ version "1.1.401"
+ resolved "https://registry.yarnpkg.com/@iconify/json/-/json-1.1.401.tgz#bc1eeef1fb7f59eac7c0d220139d995b6035036b"
+ integrity sha512-h2Ia0ode2yhft4/I//HAuuhZEiQr9JgEBqOTlE2U2hFoeZXx6sCJLu561GEomK4gKuZ5I0tHWJYTBfF0+Kcz4w==
+
"@jsdevtools/rehype-toc@3.0.2":
version "3.0.2"
resolved "https://registry.yarnpkg.com/@jsdevtools/rehype-toc/-/rehype-toc-3.0.2.tgz#29c32e6b40cd4b5dafd96cb90d5057ac5dab4a51"