diff --git a/src/generate-icon-fonts/svg-to-font.ts b/src/generate-icon-fonts/svg-to-font.ts
index f715d0a..eb813ca 100644
--- a/src/generate-icon-fonts/svg-to-font.ts
+++ b/src/generate-icon-fonts/svg-to-font.ts
@@ -41,7 +41,7 @@ const svgToFont = async (
       },
       website: {
         index: "font-class",
-        template: path.resolve(generateIconFontsDir, "templates/template.ejs"),
+        template: path.resolve(generateIconFontsDir, "templates/index.njk"),
         links: [{ title: "", url: "" }],
       },
       styleTemplates: path.resolve(generateIconFontsDir, "styles"),
diff --git a/src/generate-icon-fonts/templates/index.njk b/src/generate-icon-fonts/templates/index.njk
new file mode 100644
index 0000000..ebe5d19
--- /dev/null
+++ b/src/generate-icon-fonts/templates/index.njk
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>{{ _title }}</title>
+  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
+    <link rel="stylesheet" href="index.css" />
+    <style>
+		*{margin: 0;padding: 0;list-style: none;}
+		body { color: #242629; font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif; }
+
+		.icons { padding: 16px; margin: 0 auto; }
+		.icons ul { text-align: center; display: grid; gap: 16px; grid-template-columns: repeat(8, 1fr); }
+		.icons ul li {
+			text-align: center;
+			border-radius: 4px;
+            border: 1px solid #242629;
+		}
+
+		.icons ul li.class-icon { font-size: 24px; line-height: 24px; padding: 16px; }
+		.icons ul li.class-icon p{ font-size: 12px; line-height: 20px;
+			overflow-wrap: anywhere; }
+    </style>
+</head>
+
+<body>
+
+  <div class="icons">
+    <ul>
+      {{ _IconHtml|safe }}
+    </ul>
+  </div>
+</body>
+
+</html>
\ No newline at end of file
