diff --git a/custom.d.ts b/custom.d.ts
new file mode 100644
index 0000000..cdb2b1a
--- /dev/null
+++ b/custom.d.ts
@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
diff --git a/example/custom.d.ts b/example/custom.d.ts
new file mode 100644
index 0000000..cdb2b1a
--- /dev/null
+++ b/example/custom.d.ts
@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
diff --git a/example/pages/HomePage.tsx b/example/pages/HomePage.tsx
index ee82ee5..4614410 100644
--- a/example/pages/HomePage.tsx
+++ b/example/pages/HomePage.tsx
@@ -2,6 +2,7 @@ import { InfoTile, Title } from '@the-curve-consulting/texmo-react-components';
 import { Row, Col } from 'react-bootstrap';
 
 const HomePage = () => {
+
   return (
     <>
       <Row className="my-4">
@@ -78,4 +79,4 @@ const HomePage = () => {
   )
 }
 
-export default HomePage;
\ No newline at end of file
+export default HomePage;
diff --git a/example/tsconfig.json b/example/tsconfig.json
index a7fc6fb..4984e1b 100644
--- a/example/tsconfig.json
+++ b/example/tsconfig.json
@@ -20,6 +20,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"],
+  "include": ["src", "custom.d.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/src/components/texmoIcon/TexmoIcon.tsx b/src/components/texmoIcon/TexmoIcon.tsx
index d8db125..db33fbf 100644
--- a/src/components/texmoIcon/TexmoIcon.tsx
+++ b/src/components/texmoIcon/TexmoIcon.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { TexmoIcons } from 'types';
 
 export interface TexmoIconProps {
@@ -6,27 +6,26 @@ export interface TexmoIconProps {
 }
 
 const TexmoIcon = ({ icon }: TexmoIconProps) => {
-  const [Icon, setIcon] = useState<React.FC | null>(null);
+  const [svgComponent, setSvgComponent] = useState(null);
 
   useEffect(() => {
-    const loadIcon = async () => {
+    const importSVG = async () => {
       try {
-        const importedIcon = await import(`../../icons/${icon}.svg`);
-        console.log(importedIcon.default);
-        setIcon(importedIcon.default);
+        const svg = await import(`../../icons/users2.svg`);
+        setSvgComponent(svg.default);
       } catch (error) {
         console.error('Error loading SVG:', error);
       }
     };
 
-    loadIcon();
-  }, [icon]);
+    importSVG();
 
-  if (!Icon) {
-    return <div>SVG not found</div>;
-  }
+    return () => {
+      setSvgComponent(null);
+    };
+  }, [icon]);
 
-  return <Icon />;
+  return <div>{svgComponent && <img src={svgComponent} alt={icon} />}</div>;
 };
 
 export default TexmoIcon;
diff --git a/src/index.ts b/src/index.ts
index 67982d9..089fc6a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -19,7 +19,7 @@ import Nav from './components/nav/Nav';
 import Subtitle from './components/subtitle/Subtitle';
 import Layout from './components/layout/Layout';
 import Tabs from './components/tabs/Tabs';
-// import TexmoIcon from './components/texmoIcon/TexmoIcon';
+import TexmoIcon from './components/texmoIcon/TexmoIcon';
 import '../scss/texmo-react-components.scss';
 
 export {
@@ -44,4 +44,5 @@ export {
   Subtitle,
   Layout,
   Tabs,
+  TexmoIcon,
 };
diff --git a/tsconfig.json b/tsconfig.json
index 463a2f5..0363cd3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -34,7 +34,8 @@
     ],
   },
   "include": [
-    "src/**/*"
+    "src/**/*",
+    "custom.d.ts"
   ],
   "exclude": [
     "node_modules",