diff --git a/exampleSite/data/home/middle.toml b/exampleSite/data/home/middle.toml
index 0a9f8c7..6efb1d5 100644
--- a/exampleSite/data/home/middle.toml
+++ b/exampleSite/data/home/middle.toml
@@ -3,8 +3,8 @@ id = "skills"
 text = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil."
 
 [[list]]
-    name = "go"
-    icon = "https://devicons.github.io/devicon/devicon.git/icons/go/go-original.svg"
+    name = "Music"
+    iconClass = "fa fa-headphones"
     text = """
         Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         Voluptatibus quia, nulla! Maiores et perferendis eaque,
@@ -12,7 +12,7 @@ text = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus q
     """
 [[list]]
     name = "React"
-    icon = "https://devicons.github.io/devicon/devicon.git/icons/react/react-original.svg"
+    iconImg = "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg"
     text = """
         Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         Voluptatibus quia, nulla! Maiores et perferendis eaque,
@@ -20,7 +20,7 @@ text = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus q
     """
 [[list]]
     name = "C/C++"
-    icon = "https://devicons.github.io/devicon/devicon.git/icons/cplusplus/cplusplus-original.svg"
+    iconImg = "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/cplusplus/cplusplus-original.svg"
     text = """
         Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         Voluptatibus quia, nulla! Maiores et perferendis eaque,
diff --git a/layouts/partials/utilities/widgetBoxIconText.html b/layouts/partials/utilities/widgetBoxIconText.html
index 900b630..750dc40 100644
--- a/layouts/partials/utilities/widgetBoxIconText.html
+++ b/layouts/partials/utilities/widgetBoxIconText.html
@@ -17,11 +17,15 @@
                 <div class="">
                     <div class="font-bold text-xl mb-2 py-2 px-6 bg-gray-500">
                         <div class="flex">
-                            <img
-                            src="{{ .icon }}"
-                            width="50px"
-                            class="bg-gray-300 py-1 px-1 rounded-full"
+                            {{if .iconClass}}
+                                <i class="{{.iconClass }} text-4xl bg-gray-300 py-1 px-1 rounded-full"></i>
+                            {{else if .iconImg}}
+                                <img
+                                src="{{ .iconImg }}"
+                                width="50px"
+                                class="bg-gray-300 py-1 px-1 rounded-full"
                             />
+                            {{end}}
                             <div class="my-auto ml-2">
                                 {{ .name }}
                             </div>