diff --git a/src/ui/CustomIcon.tsx b/src/ui/CustomIcon.tsx
new file mode 100644
index 000000000..289f33a19
--- /dev/null
+++ b/src/ui/CustomIcon.tsx
@@ -0,0 +1,791 @@
+import { Values } from '@/types/Values';
+
+type IconProps = {
+ width?: string;
+ height?: string;
+ color?: string;
+};
+
+const IconMap = ({ color, width, height }: IconProps) => {
+ return (
+
+ );
+};
+
+const IconImage = ({ color, width, height }: IconProps) => {
+ return (
+
+ );
+};
+
+const IconBadge = ({ color, width, height }: IconProps) => {
+ return (
+
+ );
+};
+
+const IconPhysical = ({ color, width, height }: IconProps) => {
+ return (
+
+ );
+};
+
+const IconPhone = ({ color, width, height }: IconProps) => {
+ return (
+
+ );
+};
+
+const IconMail = ({ color, width, height }: IconProps) => {
+ return (
+
+ );
+};
+
+const IconVideo = ({ color, width, height }: IconProps) => {
+ return (
+
+ );
+};
+
+const IconCalendarMultiple = ({ color, width, height }: IconProps) => {
+ return (
+
+ );
+};
+
+const IconCalendarSingle = ({ color, width, height }: IconProps) => {
+ return (
+
+ );
+};
+
+const IconLocation = ({ color, width, height }: IconProps) => {
+ return (
+
+ );
+};
+
+const IconOnline = ({ color, width, height }: IconProps) => {
+ return (
+
+ );
+};
+
+const IconCalendar = ({ color, width, height }: IconProps) => {
+ return (
+
+ );
+};
+
+const IconBuilding = ({ color, width, height }: IconProps) => {
+ return (
+
+ );
+};
+
+const CustomIconVariants = {
+ MAP: 'map',
+ IMAGE: 'image',
+ BADGE: 'badge',
+ PHYSICAL: 'physical',
+ PHONE: 'phone',
+ MAIL: 'mail',
+ VIDEO: 'video',
+ CALENDAR: 'calendar',
+ CALENDAR_MULTIPLE: 'calendarMultiple',
+ CALENDAR_SINGLE: 'calendarSingle',
+ LOCATION: 'location',
+ ONLINE: 'online,',
+ BUILDING: 'building',
+} as const;
+
+const IconsMap = {
+ [CustomIconVariants.MAP]: IconMap,
+ [CustomIconVariants.IMAGE]: IconImage,
+ [CustomIconVariants.BADGE]: IconBadge,
+ [CustomIconVariants.PHYSICAL]: IconPhysical,
+ [CustomIconVariants.PHONE]: IconPhone,
+ [CustomIconVariants.MAIL]: IconMail,
+ [CustomIconVariants.VIDEO]: IconVideo,
+ [CustomIconVariants.CALENDAR]: IconCalendar,
+ [CustomIconVariants.CALENDAR_MULTIPLE]: IconCalendarMultiple,
+ [CustomIconVariants.CALENDAR_SINGLE]: IconCalendarSingle,
+ [CustomIconVariants.LOCATION]: IconLocation,
+ [CustomIconVariants.ONLINE]: IconOnline,
+ [CustomIconVariants.BUILDING]: IconBuilding,
+};
+
+type Props = IconProps & {
+ name: Values;
+};
+
+const CustomIcon = ({ name, color, width, height, ...props }: Props) => {
+ const Component = IconsMap[name];
+ return ;
+};
+
+export { CustomIcon, CustomIconVariants };