diff --git a/packages/frontend/src/components/shared/CustomIcon/ArrowRightCircleIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/ArrowRightCircleIcon.tsx
new file mode 100644
index 00000000..cce7cc58
--- /dev/null
+++ b/packages/frontend/src/components/shared/CustomIcon/ArrowRightCircleIcon.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const ArrowRightCircleIcon = (props: CustomIconProps) => {
+ return (
+
+
+
+ );
+};
diff --git a/packages/frontend/src/components/shared/CustomIcon/ClockOutlineIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/ClockOutlineIcon.tsx
new file mode 100644
index 00000000..01fec9ba
--- /dev/null
+++ b/packages/frontend/src/components/shared/CustomIcon/ClockOutlineIcon.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const ClockOutlineIcon = (props: CustomIconProps) => {
+ return (
+
+
+
+ );
+};
diff --git a/packages/frontend/src/components/shared/CustomIcon/index.ts b/packages/frontend/src/components/shared/CustomIcon/index.ts
index 5de3702d..e6dc3937 100644
--- a/packages/frontend/src/components/shared/CustomIcon/index.ts
+++ b/packages/frontend/src/components/shared/CustomIcon/index.ts
@@ -32,3 +32,8 @@ export * from './GitHubLogo';
export * from './ClockIcon';
export * from './HorizontalDotIcon';
export * from './WarningDiamondIcon';
+export * from './ArrowRightCircleIcon';
+export * from './ClockOutlineIcon';
+
+// Templates
+export * from './templates';
diff --git a/packages/frontend/src/components/shared/CustomIcon/templates/KotlinIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/templates/KotlinIcon.tsx
new file mode 100644
index 00000000..973b5f4f
--- /dev/null
+++ b/packages/frontend/src/components/shared/CustomIcon/templates/KotlinIcon.tsx
@@ -0,0 +1,130 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from '../CustomIcon';
+
+export const KotlinIcon = (props: CustomIconProps) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/packages/frontend/src/components/shared/CustomIcon/templates/PWAIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/templates/PWAIcon.tsx
new file mode 100644
index 00000000..f0edb351
--- /dev/null
+++ b/packages/frontend/src/components/shared/CustomIcon/templates/PWAIcon.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from '../CustomIcon';
+
+export const PWAIcon = (props: CustomIconProps) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/packages/frontend/src/components/shared/CustomIcon/templates/ReactNativeIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/templates/ReactNativeIcon.tsx
new file mode 100644
index 00000000..bc170f98
--- /dev/null
+++ b/packages/frontend/src/components/shared/CustomIcon/templates/ReactNativeIcon.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from '../CustomIcon';
+
+export const ReactNativeIcon = (props: CustomIconProps) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/packages/frontend/src/components/shared/CustomIcon/templates/SwiftIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/templates/SwiftIcon.tsx
new file mode 100644
index 00000000..d3422dff
--- /dev/null
+++ b/packages/frontend/src/components/shared/CustomIcon/templates/SwiftIcon.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from '../CustomIcon';
+
+export const SwitfIcon = (props: CustomIconProps) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/packages/frontend/src/components/shared/CustomIcon/templates/TemplateIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/templates/TemplateIcon.tsx
new file mode 100644
index 00000000..c7b307bb
--- /dev/null
+++ b/packages/frontend/src/components/shared/CustomIcon/templates/TemplateIcon.tsx
@@ -0,0 +1,42 @@
+import React, { useMemo } from 'react';
+import { CustomIconProps } from '../CustomIcon';
+import { ReactNativeIcon } from './ReactNativeIcon';
+import { cloneIcon } from 'utils/cloneIcon';
+import { PWAIcon } from './PWAIcon';
+import { WebAppIcon } from './WebAppIcon';
+import { KotlinIcon } from './KotlinIcon';
+import { SwitfIcon } from './SwiftIcon';
+
+const TEMPLATE_ICONS = [
+ 'react-native',
+ 'pwa',
+ 'web',
+ 'kotlin',
+ 'swift',
+] as const;
+export type TemplateIconType = (typeof TEMPLATE_ICONS)[number];
+
+export interface TemplateIconProps extends CustomIconProps {
+ type: TemplateIconType;
+}
+
+export const TemplateIcon = ({ type, ...props }: TemplateIconProps) => {
+ const renderIcon = useMemo(() => {
+ switch (type) {
+ case 'react-native':
+ return ;
+ case 'pwa':
+ return ;
+ case 'web':
+ return ;
+ case 'kotlin':
+ return ;
+ case 'swift':
+ return ;
+ default:
+ throw new Error(`Invalid template icon type: ${type}`);
+ }
+ }, [type]);
+
+ return cloneIcon(renderIcon, props) as JSX.Element;
+};
diff --git a/packages/frontend/src/components/shared/CustomIcon/templates/WebAppIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/templates/WebAppIcon.tsx
new file mode 100644
index 00000000..f707fccc
--- /dev/null
+++ b/packages/frontend/src/components/shared/CustomIcon/templates/WebAppIcon.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from '../CustomIcon';
+
+export const WebAppIcon = (props: CustomIconProps) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/packages/frontend/src/components/shared/CustomIcon/templates/index.ts b/packages/frontend/src/components/shared/CustomIcon/templates/index.ts
new file mode 100644
index 00000000..e2879355
--- /dev/null
+++ b/packages/frontend/src/components/shared/CustomIcon/templates/index.ts
@@ -0,0 +1 @@
+export * from './TemplateIcon';